Category: javascript

I am creating a amp project with the coordinates from database. I put my javascript in server side code in asp.net C#. I have created the map successfully but I can not show legend in the map.
I have get the marker from custom image file.

Please take a look at my code and advice me to solve my problem.

private void BuildScript(DataTable tbl, DataTable dtableCHT)
    {
        int i = 0;
        String Locations = "", Location = "", Latitude = "", Longitude = "", District = "", Total_Upazila = "", Img = "", ISA_NameB = "", DPM_NameB = "", DPM_Contact="", DistrictID="";
        foreach (DataRow r in tbl.Rows)
        {
            // bypass empty rows        
            if (r["Lat"].ToString().Trim().Length == 0)
                continue;

            Latitude = r["Lat"].ToString();
            Longitude = r["Long"].ToString();
            District = r["DistrictB"].ToString();
            Total_Upazila = r["Total_Upazila"].ToString();
            ISA_NameB = r["ISA_NameB"].ToString();
            DPM_NameB = r["DPM_NameB"].ToString();
            DPM_Contact= r["ContactNo"].ToString();
            DistrictID = r["DistrictID_DPE"].ToString();
            Img = "/img/icons/mapicon1.png";



            // create a line of JavaScript for marker on map for this record
            Locations += "['" + District + "'," + Latitude + " , " + Longitude + " , " + i + ",'" + Total_Upazila + "','" + ISA_NameB + "','" + Img + "','" + DPM_NameB + "','" + DPM_Contact + "','" + DistrictID + "'],";
            i++;
        }
        foreach (DataRow r in dtableCHT.Rows)
        {
            // bypass empty rows        
            if (r["Lat"].ToString().Trim().Length == 0)
                continue;

            Latitude = r["Lat"].ToString();
            Longitude = r["Long"].ToString();
            District = r["DistrictB"].ToString();
            Total_Upazila = r["Total_Upazila"].ToString();
            ISA_NameB = r["ISA_NameB"].ToString();
            DPM_NameB = r["DPM_NameB"].ToString();
            DPM_Contact = r["ContactNo"].ToString();
            DistrictID = r["DistrictID_DPE"].ToString();
            Img = "/img/icons/mapicon2.png";



            // create a line of JavaScript for marker on map for this record
            Locations += "['" + District + "'," + Latitude + " , " + Longitude + " , " + i + ",'" + Total_Upazila + "','" + ISA_NameB + "','" + Img + "','" + DPM_NameB + "','" + DPM_Contact + "','" + DistrictID + "'],";
            i++;
        }

        //JavaScript for Google api

        js.Text = @"<script>
                        function initMap() {

                            var locations = [ " + Locations + @"
                            ];

                            var map = new google.maps.Map(document.getElementById('dvMap'), {
                                zoom: 7,
                                center: new google.maps.LatLng(23.6850, 90.3563),
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                            });

                            var infowindow = new google.maps.InfoWindow({});

                            var marker, i;

                            for (i = 0; i < locations.length; i++) {
                                marker = new google.maps.Marker({
                                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                                    map: map,
                                    icon: locations[i][6]
                                });

                                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                                    return function () {
                                        var html = ('<p><b>জেলা: </b>'+ locations[i][0]+'<br>'+'<b>মোট উপজেলার সংখ্যা: </b>'+locations[i][4]+'<br>'+'<b>বাস্তবায়ন সহায়ক সংস্থা: </b>'+locations[i][5]+'<br>'+'<b>জেলা প্রোগ্রাম ম্যানেজারের নাম: </b>'+locations[i][7]+'<br>'+'<b>মোবাইল নং: </b>'+locations[i][8]+'<br>'+'<a href=map_detail.aspx?param='+locations[i][9]+'>Click for Detail</a><br>'+'</p>')
                                        infowindow.setContent(html);
                                        infowindow.open(map, marker);
                                    }
                                })(marker, i));
                            }
                            map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(legend);
                        }
                </script>";

    }      

Thanks

Firstly,I’m disappointed that physicsjs is no longer maintained. As I am new to coffeescipt.I would like to setup coffeescipt with physicsjs.

I have written some code in a gulp file for automation:
Here it is:

const gulp = require("gulp")
const less = require("gulp-less")
const sourcemaps = require("gulp-sourcemaps")
const coffee = require("gulp-coffee")
const inject = require("gulp-inject")
const sources = {
    js: 'public/js/*.js',
    css: 'public/css/*.css'
}
gulp.task("inject", function (done) {
    gulp.src('./public/*.html')
        .pipe(inject(gulp.src([sources.css, sources.js], {
            read: false
        }), {
            relative: true
        })) // This will always inject vendor files before app files
        .pipe(gulp.dest('./public'));
    done()
})


gulp.task('less', function (done) {
    gulp.src(['src/less/**/*.less', 'src/less/*.less'])
        .pipe(sourcemaps.init())
        .pipe(less({
            base: true,
            paths: ['src/less/include']
        }))
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('public/css'))
    done()
})
//  
gulp.task('coffee', function (done) {
    gulp.src(["src/coffee/*.coffee",'src/coffee/**/*.coffee'])
        .pipe(sourcemaps.init())
        .pipe(coffee({
            base: true
        }))
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('public/js'))
    done()
})

gulp.task('watch', gulp.series(['less', 'coffee', 'inject'], function (done) {
    gulp.watch(["src/coffee/*.coffee", "src/coffee/**/*.coffee"], gulp.series(['coffee']))
    gulp.watch(["src/less/*.less", "src/less/**/*.less"], gulp.series(['less']))
    // gulp.watch(["public/**/*.html", "public/*.html"], gulp.series(['inject']))
    done()
}))
gulp.task('default', gulp.series(['watch']))

How can I integrate coffeescript with physicsjs?
I would like to make coffeescript work with physicsjs as I cannot find any coffeescript and physicsjs documentation online.

These are my codes:

HTML Code
Javascript Code

The problem is I am getting a different output:

Problem in Output

I should be getting the ‘Constantine’ output but what I am seeing in the output box below is Durres. Am I missing something?

Sorry if this has been asked, I looked and couldn’t find the answer!

I have a Material UI listview that has a set width (it’s in a sidebar). I am trying to render the titles of some options, and the Primary text of ListItemText is wrapping past its container. Why is it not simply extending the container’s height and going multi-line?

Thanks so much in advance!

return (
            <ListItem
              key={network._id}
              selected={user.network && user.network._id === network._id}
            >
              <ListItemText
                primary={network.name}
                sx={{ maxWidth: '100%' }}
              />
              <IconButton>
                <DoubleArrowIcon />
              </IconButton>
            </ListItem>
          );

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
 function DrawGraph(CanvasIdName/*text*/,proxyUrl/*proxy to pull data from herefor there needs to be a proxy server set up with a json format*/,dataName/*name of object in the json*/,height/*number*/, width/*number*/,spacing/*ammount of data points in lefttable*/,lineWidth/*float*/, lineColor/*text/rgb(r,g,b)/rgba(r,g,b,a)/hex*/,drawGuidingLines/*boolean*/) {

    let data = [];
    $.ajax({type: "GET", url: proxyUrl, datatype: "json",success: function(json){
    var obj = JSON.parse(json);
    for(var k in obj)
    data.push(obj[k][dataName]);
    }});

    console.log(data); /*this is important!!!!!!!!!!!!!!!!!!!!! FOR THE STACKOVERFLOW POST*/
    
    const canvas = document.getElementById(CanvasIdName);   //get the canvas
    const ctx = canvas.getContext("2d");                    //set canvas to ctx and define it as 2d
    ctx.strokeStyle = "rgb(255,0,0)";                       //set color of line to chosen value
    
    let maxHeight = height/Math.max(...data);               //set height stepvalue
    let maxWidth = width/data.length;                       //set width stepvalue
    
    let x = 0;                                              //set startvalue to 0
    let ydata = 0;                                          //set startvalue to 0
    
    console.log(data[3]);   //debug line
    
    if(drawGuidingLines == false) {                         //if you don't want to draw guidinglines draw the graph instead
        for(dataIndex in data) {
            ydata = height-(maxHeight * (data[dataIndex])); //get height position
            ctx.lineTo(x, ydata + maxHeight * 2.5);         //draw draw the line
            x += maxWidth;
            console.log(data[dataIndex]);   //debug line
        }
        ctx.stroke();
    }
    
 }
    DrawGraph("canvasTest","proxy.php?q=lastday","TempertureS01",350,450,5,0.5,"rgb(255,0,0)",false);
</script>

Here you have a snippet of the proxy reply

[{"LocationId":"1","TempertureS01":"11.870","TempertureS02":"11.700","PressureS01":"102204.234","HumidityS02":"60.500","HeatIndexS02":"10.505","LightS00":"0.002","TimeStamp":"2021-12-21 20:29:44"},{"LocationId":"1","TempertureS01":"12.390","TempertureS02":"12.300","PressureS01":"102192.164","HumidityS02":"57.400","HeatIndexS02":"11.084","LightS00":"0.002","TimeStamp":"2021-12-21 20:01:13"},{"LocationId":"1","TempertureS01":"13.000","TempertureS02":"13.100","PressureS01":"102185.297","HumidityS02":"55.700","HeatIndexS02":"11.920","LightS00":"0.002","TimeStamp":"2021-12-21 19:32:45"},

Here is the Imgur link of the output for the devtools console

My biggest problem with this is the array, since the array doesn’t “contain” any items, I’ve never seen this problem before, I have looked for hours through the web, but maybe just can’t find the solution I’m looking for.

git : The term ‘git’ is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1

• git clone https://github.com/HashLips/hashlips_art_engine.git

•   + CategoryInfo          : ObjectNotFound: (git:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException
  

G’day,

I am building a React component library with TailwindCSS and ViteJS. The library outputs each component as a separate JS file, for example:

// @components-library/src/ComponentA.jsx

export default function ComponentA() {
  return <div className="flex justify-center">Component A</div>;
}

// Bundle Output: @components-library/dist/ComponentA.js

import { j as jsx } from "./jsx-runtime.js";
import "react";
function ComponentA() {
  return /* @__PURE__ */ jsx("div", {
    className: "flex justify-center",
    children: "Component A",
  });
}
export { ComponentA as default };

The app that is consuming this components library is also using Tailwind. However, the styles are not applied to the imported component. App-specific styles are working fine.

/* app/src/index.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

// app/src/App.jsx

import CompoenntA from "@component-library/ComponentA";
export default function App() {
  return (
    <div className="p-10">
      <ComponentA />
    </div>
  );
}

Awaiting expert advice.

Thank you!

I would like to train using the Fetch method in Javascript Vanilla. Do you know some cool API to call for a front-end developer ?

Thank you

I feel as though my knowledge with closures is almost there, but I’m struggling to grasp exactly why this first code snippet logs 0 (is a stale closure) however, the second code snippet works and logs the updated value ..

Is this some kind of reference issue?

In the first example, are we not tracking the reference of count and only assigning its initial value to message?

By moving the message variable inside of the log function are we somehow telling JS to track the reference of the count value?

function createIncrement() {
  let count = 0;

  function increment() {
    count++;
  }

  let message = count;
  function log() {
    console.log(message);
  }

  return [increment, log];
}

const [increment, log] = createIncrement();

increment();
log();

// this will log 0

function createIncrement() {
  let count = 0;

  function increment() {
    count++;
  }

  function log() {
    let message = count;
    console.log(message);
  }

  return [increment, log];
}

const [increment, log] = createIncrement();

increment();
log();

// this will log 1

I am new to React and Javascript.I am developing a meet-up application that has a form and when I fill its values and press submit,it should store the values into firebase.I am using fetch API and passing the values using POST method.The folder structure is shown below:

The form data is in NewMeetupForm.js shown below:
NewMeetupForm.js

import {useRef} from 'react';
import Card from "../ui/Card";
import classes from "./newmeetupformmodule.css";
function NewMeetupForm(props){

    const titleinput=useRef();
    const imageinput=useRef();
    
    function submitHandler(event){

        event.preventDefault();
        const enteredtitle=titleinput.current.value;
        const enteredimage=imageinput.current.value;            

        const meetupdata={
            title:enteredtitle,
            image:enteredimage,
        }
        console.log(meetupdata);
        props.onAddMeetup(meetupdata);

    }
return <Card>
    <form className={classes.form} onSubmit={submitHandler}>
    <div className={classes.control}>
        <label htmlFor="title" >Meetup Title</label>
        <input type="text" required id="title" ref={titleinput}></input>
    </div>
    <div className={classes.control}>
        <label htmlFor="image" >Meetup Image</label>
        <input type="url" required id="image" ref={imageinput}></input>
    </div>
    <div className={classes.control}>
        <button>Add meetup</button>
    </div>
    </form>
    </Card>

}
export default NewMeetupForm;

But when I run the application in browser and pass values,I see null in firebase.I
The file where I pass the db url is shown below:
Newmeetup.js:

import NewMeetupForm from "../components/Meetups/NewMeetupForm";


function NewmeetupPage() {
           
  function addmeetuphandler(meetupdata) {
    fetch(
      'https://react-getting-started-e38d3-default-rtdb.firebaseio.com/meetup.json',
      {
        method:'POST',
        body:JSON.stringify(meetupdata),
        headers: { 'Content-Type': 'application/json' }
      }
    );
  }
  return (
    <section>
      <h1>Addnewmeetup</h1>
      <NewMeetupForm onAddMeetup={addmeetuphandler} />
    </section>
  );
}

export default NewmeetupPage;

When I run the app in broswer and pass the values in form and click on submit,no table is created in firebase.I just get a null value.The screenshot is shown below:

The rules is also shown below:

Also,for reference,my github link to the project:https://github.com/suchitraa/Reactlatest .I get a null value in Firebase instead of the values getting stored.Could anyone please help me out with this?

i inspect the network requests and xhr requests for Facebook while chatting i tried to view the response of this requests but i can’t see any message
how Facebook hide this

In the code, lat and lng are initialized as number types, but why does it become string when you put it in an object?
I want the coordinate values to be numbers.
What can I do?

ex) lat: “35.87” -> lat: 35.87

let lat_tmp = 0;
let lng_tmp = 0;
const lat_lng = [];
let lat_tmp = 0;
let lng_tmp = 0;
let arr_tmp = [
  {
    lat: 0,
    lng: 0,
  },
];
let idx = 0;
function successFunction(data) {
  var allRows = data.split(/r?n|r/);
  for (var singleRow = 1; singleRow < allRows.length; singleRow++) {

    var rowCells = allRows[singleRow].split(',');
    for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
      if (rowCell === 3) {
        lat_tmp = rowCells[rowCell];
      } else if (rowCell === 4) {
        lng_tmp = rowCells[rowCell];
      }
    }
    arr_tmp = [{ lat: lat_tmp, lng: lng_tmp }];
    lat_lng[idx] = arr_tmp;
    idx += 1;
  }
  console.log(lat_lng);
}

I have this icon in the following code , the problem with this icons is it has a big, margin all over, and in my case I want it to get that margin to be smaller, or the icon a litter bigger, ,instead of increasing the general size as you will see the current implementation in the code.
any idea how to achieve this I tried some solutions but none has worked.

import { ReactComponent as icon } from '../../Img/icon.svg';

// style 
const iconStyle = {
  padding: 0,
  marginTop: -5,
  backgroundColor: '#ef6c00',
  fill: 'white',
};

// inside the component
<icon style={iconStyle} width='24' height='24' />

I have an array like this

[
  "Grape | 100 |Food Catering Service",
  "Apple | 100,000m |Food Catering Service",
  "Water Melon | 100,000m |Catering Service Outside",
  100,000m |Food Catering Service Outside
]

Using typescript i’m trying to make sure that atleast with a substring in the array there is the value Food.
Even though the third substring within this arrat has no food it should still pass.

Code i’ve tried so far but does not do the job. It just returns the array

export function arraySubstring (expected:string, ignoreCase?: boolean): Expectation<string[], 
string> {
return Expectation.that("test", expected, async(actor: Actor, actual: string[]): 
Promise<boolean> ==> {

try {
for (const value of actual) {
if(ignoreCase) {
if (value.toLowerCase().includes(expected.toLowerCase())) return true;
} else {
if (value.includes(expected)) return true;
}
}
return false;
})
}

I have this piece of code that pushes a new array inside another array:

pickedRocks.push([lastBin.rocks.pop()])

Before I push it I want to pass some keys too, to avoid keeping track of indexes, because I’m going be pushing more arrays. Is my only option to add the key after creation?

I tried:

pickedRocks.push([lastBin.rocks.pop(),key:500])

but it doesn’t work. And I’d like to not wrap it in another object to avoid rewriting other code.