Category: javascript

I am using the Google Maps API, and trying to add markers on the map along a route. These markers have a title and label as well. Everything is working as intended, the markers are being displayed correctly, including the title, butt he labels are not showing. I checked and the labels are being passed correctly to the method to make the markers, they just wont show up for some reason.

Here is the code for making the markers

function markerMaker(lat, lng, map, markerTitle, label) {
  const latLng = { lat: lat, lng: lng };
  const marker = new google.maps.Marker({
    position: latLng,
    map,
    title: markerTitle,
    label: label,
    optimized: false,
  
  });
  console.log("passed label", label);
  const infoWindow = new google.maps.InfoWindow({
    content: markerTitle,
    ariaLabel: markerTitle,
  });
  marker.addListener("click", function () {
    infoWindow.open({
      anchor: marker,
      map,
    });
  });
  return marker;
}

and this is the function it is being passed to when calculating the route

 const res = await directionsService
    .route({
      origin: startingPoint,
      destination: endingPoint,
      waypoints: brewDirectionArray,
      optimizeWaypoints: true,
      travelMode: "DRIVING",
    })
    .catch((err) => {
      console.error("error", err);
    });
  directionsRenderer.setDirections(res);
  const routeCords = res.routes[0].legs;
  const waypointOrder = res.routes[0].waypoint_order;
  const labelLetters = "BCDEFGHIJKLMNOPQRSTUVWXYZ";
  let markers = [];
  for (let i = 0; i < routeCords.length; i++) {
    if (i === 0) {
      let markerLabel = startingPoint === endingPoint ? "" : "A";
      const startLat = routeCords[i].start_location.lat();
      const startLng = routeCords[i].start_location.lng();
      const marker = markerMaker(
        startLat,
        startLng,
        map,
        startingPoint,
        markerLabel
      );
      markers.push(marker);
    }
    let markerTitle;
    let markerLabel = labelLetters[i];
    if (i === routeCords.length - 1) {
      markerTitle = endingPoint;
      if (startingPoint === endingPoint) {
        markerLabel = `A/${labelLetters[i]}`;
      }
    } else {
      markerTitle = breweryAddressAndNameArr[waypointOrder[i]];
    }

    const lat = routeCords[i].end_location.lat();
    const lng = routeCords[i].end_location.lng();
    const marker = markerMaker(lat, lng, map, markerTitle, "B");
    markers.push(marker);
  }
  return res;
}

I should add that this seemingly happened overnight. before this, I had labels being displayed no problem.

I have tried passing individual letters as the argument for the labels , and messing around with the CSS, as well as adding classes to the markers, but no cigar.
Any Suggestions?

This is my first time building a chrome extension and i am developing a phishing detection. I would like to implement a feature where the outputs of the console.log can be placed into the html file. I would like it if it can be setup in a way where for example in content.js their is function URLIP(). The HTML file could say URL has IP: and display the console.log provided output. Would that be possible?

The code can be found for my content.js and background.js is listed below.

content.js:
var tdata;
var forecast;

function guess(data,weight){
    var f = 0;
    weight = [0.023206177842549285,0.015303861000090234,0.011663392949380907,0.009172789380075225,0.007662710689997177,0.0719823960806826,0.10517739072001392,0.3037577266653543,0.3768450270098,0.06243279112819979,0.0363697060520079,0.011956965378832687,0.010595583053393602,0.011787767766066892,0.015571095445622383,0.006725081745616298,0.03189706690305455];
    for(var j=0;j<data.length;j++) {
      f += data[j] * weight[j];
    }
    return f > 0 ? 1 : -1;
}

function URLIP(){
var match =/d{1,3}[.]{1}d{1,3}[.]{1}d{1,3}[.]{1}d{1,3}/;
var site = window.location.href;
var reg = match; // Assigning the regular expression to the reg variable
if(reg.exec(site)==null){
    console.log("Not Phishing");
    return -1;
}
else{
    console.log("Phishing");
    return 1;
}
}

function URLLong(){
var site = window.location.href;    
if(site.size<50){
    console.log("Not Phishing");
    return -1;
} 
else if(site.size>=54 && site.size<=75){
    console.log("Maybe Phishing, Proceed with caution");
    return 0;
}
else{
    console.log("Phishing");
    return 1;
}
}


function URLShortDef(){
var site = window.location.href;    
if(site.length>20){
    console.log("Not Phishing");
    return -1;
} 
else{
    console.log("Phishing");
    return 1;
}
}

 tdata = [URLIP(), URLLong(), URLShortDef()]

forecast = guess(tdata);

 chrome.extension.sendRequest(forecast);

Background.js:

chrome.runtime.onMessage.addListener( function(forecast) {
    if (forecast === 1) {
    alert("Warning: Malicious website detected!!");
    } else if (forecast === -1) {
    alert("Website is SAFE");
    }
});

I apologize in advance if this is a simple question, I am studying .net and I really want to be able to make an Update function
I have created a .net 6 MVC solution

I created a CardsController:

    public class CardsController : Controller {

        private readonly CardsContext _context;
        public CardsController(CardsContext context) {
            _context = context;
        }

        public IActionResult Index() {
            var cards = _context.Cards.ToList();
            return View(cards);
        }

        [HttpGet]
        public IActionResult Create() {
            return View();
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult Create([Bind("Title,Description,Stage,Tag")] CardsModel cardsModel) {
            if (ModelState.IsValid) {
                _context.Add(cardsModel);
                _context.SaveChanges();
                return RedirectToAction(nameof(Index));
            }
            return View(cardsModel);
        }

        [HttpGet]
        public IActionResult Update(int? id) {
            if (id == null) {
                return NotFound();
            }

            var cardsModel = _context.Cards.Find(id);
            if (cardsModel == null) {
                return NotFound();
            }

            return View(cardsModel);
        }

        [HttpPut]
        [ValidateAntiForgeryToken]
        public IActionResult Update(int id, [FromBody] CardsModel cardsModel) {

            if(id != cardsModel.id) {
                return NotFound();
            }

            if (ModelState.IsValid) {
                try {
                    _context.Update(cardsModel);
                    _context.SaveChanges();
                }
                catch (DbUpdateConcurrencyException) {
                    return NotFound();
                }
                return RedirectToAction(nameof(Index));
            }

            return View(cardsModel);

        }

        [HttpDelete]
        public ActionResult Delete(int? id)
        {
            
            if (id == null){
                return NotFound();
            }

            var cardsModel = _context.Cards.Find(id);

            if(cardsModel == null)
            {
                return NotFound();
            }

            _context.Cards.Remove(cardsModel);
            _context.SaveChanges();
            return RedirectToAction(nameof(Index));

        }


    }

I created a route for my actions:

app.UseEndpoints(endpoints => {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Cards}/{action=Index}/{id?}");
                endpoints.MapControllerRoute(
                    name: "Delete",
                    pattern: "Cards/Delete/{id?}",
                    defaults: new { controller = "Cards", action = "Delete" });
                endpoints.MapControllerRoute(
                    name: "Update",
                    pattern: "Cards/Update/{id?}",
                    defaults: new { controller = "Cards", action = "Update" });
            });

I created a function in cshtml for the Delete and Update:

<script>
    function deleteCard(id) {
        fetch('/Cards/Delete/' + id, {
            method: 'Delete'
        })
            .then(response => {
                if (response.ok) {
                    alert('Success!');
                } else {
                    alert('Error.');
                }
            })
            .catch(error => {
                alert('Error.');
                console.error(error);
            });
    }

    function UpdateCard(id) {
        fetch(`/Cards/Update/${id}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                id: id,
                Title: "UpdatedCard",
                Description: "UpdatedCard",
                Stage: 0,
                Tag: 0
            })
        })
            .then(response => {
                if (response.ok) {
                    // atualização bem-sucedida, redirecionar para a página inicial
                    window.location.href = '/Cards/Index';
                } else {
                    // atualização falhou, lidar com o erro
                    console.error('Error updating card.');
                }
            })
            .catch(error => {
                console.error(error);
            });
    }



</script>

And when I call the UpdateCard function in the cshtml I get two errors in the console:
PUT https://localhost:44307/Cards/Update/9 net::ERR_ABORTED 400
Error updating card.

Note: The Delete Function works
Can you look at my simple code and point out where the error might be?

I’m working with Express.js, MongoDB and Mongoose, EJS and I’m having a heard time with selecting an option from the data in the database.

<div class="mb-3 col-md-3">
    <label
        for="stage"
        class="form-label text-muted"
        >Stage</label
    >
    <select
        class="form-select"
        name="deal[stage]"
        aria-label="Default select example">
        <option selected>Choose One</option>
        <option value="lead">Lead</option>
        <option value="inquiry">Inquiry</option>
        <option value="qualified">Qualified</option>
        <option value="demo">Demo</option>
        <option value="negotiation">Negotiation</option>
        <option value="closure">Closure</option>
    </select>
</div>

I can do something like this using ejs and that is fine with a few options, but I’m sure that there is a better way.

<div class="mb-3 col-md-3">
    <label
        for="hot"
        class="form-label text-muted"
        >Hot</label
    >
    <select
        id="hot"
        class="form-select"
        value="<% deal.hot %>"
        aria-label="Default select example">
        <option selected>Choose One</option>
        <% if(deal.hot === 'true') { %>
        <option
            value="true"
            selected>
            True
        </option>
        <option value="false">False</option>
        <% } else { %>
        <option value="true">True</option>
        <option
            value="false"
            selected>
            False
        </option>
        <% } %>
    </select>
</div>

I am trying to re-direct a user to “company page” or “market page” as the below code explain but unfortunately it did not do anything it just delete the form details without taking the needed action I tried to change the if statement but it did not work:

const form = document.getElementById("regForm");
const position = document.getElementById("spain");
const submitButton = document.querySelector("button[type='submit']");
const checkbox = document.querySelector("input[type='checkbox']");
const usernameInput = document.querySelector("input[name='name']");
const passwordInput = document.querySelector("input[name='password']");
const emailInput = document.querySelector("input[name='email']");
const usernameRegex = /^S+$/;
const passwordRegex = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).{8,}$/;
const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;

const userNameError = document.getElementById("username-error");
const emailError = document.getElementById("email-error");
const passError = document.getElementById("pass-error");
const checkError = document.getElementById("check-error");
const inputError = document.querySelector(".input-error");
// Set a flag to keep track of whether an option has been selected from the dropdown menu
//let dropdownSelected = false;
console.log('before form');
form.addEventListener("submit", (event) => {
  // Validate form fields
  if (!isFormValid()) {
    event.preventDefault();
    return;
  }
  // Save form data to local storage
  const formData = {
    username: usernameInput.value,
    password: passwordInput.value,
    email: emailInput.value,
    position: position.value,
  };
  localStorage.setItem("formData", JSON.stringify(formData));
  sessionStorage.setItem("info", JSON.stringify(formData));
  if(position.value==="Company"){
    window.location.href ='../HTML/companyPage.html';
  }
  else {window.location.href ='../HTML/marketPage.html';}
 console.log('yes');
  // Show welcome message
  // alert("Welcome " + formData.username);
  // Reset form
  form.reset();
});
console.log('after form')
function isFormValid() {
  if (!usernameInput.value.trim()) {
    usernameInput.classList.toggle("input-error");
    userNameError.textContent = "Please enter your username.";
    // alert("Please enter your username.");
    return false;
  } else {
    usernameInput.classList.remove("input-error");
    userNameError.textContent = "";
  }

  if (!usernameRegex.test(usernameInput.value)) {
    usernameInput.classList.toggle("input-error");
    userNameError.textContent = "Username should not contain spaces.";
    // alert("Username should not contain spaces.");
    return false;
  } else {
    usernameInput.classList.remove("input-error");
    userNameError.textContent = "";
  }

  if (!passwordInput.value.trim()) {
    passwordInput.classList.toggle("input-error");
    passError.textContent = "Please enter your password.";
    // alert("Please enter your password.");
    return false;
  } else {
    passwordInput.classList.remove("input-error");
    passError.textContent = "";
  }

  if (!passwordRegex.test(passwordInput.value)) {
    passwordInput.classList.toggle("input-error");
passError.textContent =
      "Password should have at least 8 characters with at least 1 number, uppercase, and special characters.";
    // alert("Password should have at least 8 characters with at least 1 number, uppercase, and special characters.");
    return false;
  } else {
    passwordInput.classList.remove("input-error");
    passError.textContent = "";
  }

  if (!emailInput.value.trim()) {
    emailInput.classList.toggle("input-error");

    emailError.textContent = "Please enter your email address.";
    // alert("Please enter your email address.");
    return false;
  } else {
    emailInput.classList.remove("input-error");
    emailError.textContent = "";
  }

  if (!emailRegex.test(emailInput.value)) {
    emailInput.classList.toggle("input-error");

    emailError.textContent = "Please enter a valid email address.";
    // alert("Please enter a valid email address.");
    return false;
  } else {
    emailInput.classList.remove("input-error");
    emailError.textContent = "";
  }

  if (!checkbox.checked) {
    checkbox.classList.toggle("input-error");

    checkError.textContent = "Please agree to the license terms.";
    // alert("Please agree to the license terms.");
    return false;
  } else {
    checkbox.classList.remove("input-error");
    checkError.textContent = "";
  }
return true;
}

Is there any suggestion that can help me to solve this issue

I was getting this error with my complex code, so I simplified it below. The Data Grid gets created and displays. Also, clicking a row displays the alert. However the immediate alert dialog gives this error: “Uncaught TypeError: Cannot read properties of undefined (reading ‘nodeName’)”

Is there something I need to do before trying to display the alert right when the page loads? I want to avoid the standard JS alert() function.

$(document).ready(function () {
    $("#myGrid").dxDataGrid({
        dataSource: [{
            "Name": "John",
            "Age": 25
        },{
            "Name": "George",
            "Age": 27
        },{
            "Name": "Betty",
            "Age": 30
        }],
        onRowClick(e) {
            DevExpress.ui.dialog.alert("Testing", "Confirm");
        }
    });
    DevExpress.ui.dialog.alert("Testing", "Confirm");
});

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- DevExtreme theme -->
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/22.1.5/css/dx.light.css">

<!-- DevExtreme library -->
<script src="https://cdn3.devexpress.com/jslib/22.1.5/js/dx.all.js"></script>

<div id="myGrid"></div>

I asked ChatGPT for help, but the codes he gave did not work.

I wanted my page not to work in other browsers

I am attempting to convert my test website from HTML to React, so that I can communicate with my AWS API Gateway, Lamda function and DynamoDB.

I have 90% working now and I am able to create users, and login via my new React Website, however I am having an issue with loading a script file which I use to control my navbar during mobile viewer. This previouse worked in my HTML site.

DIR Structure

src
   hooks
         userExternalScripts.js

   Routes
         PublicRoutes.js
         PrivateRoutes.js
   Service
         AuthService.js
         internalApp.js

   App.js
   App.css
   Contact.js
   Gallery.js
   Student.js
   Register.js
   Login.js
   index.js

Any help would be much appreciated, and please let me know if you need more details.

What I have done so far.

1. Added a hooks directory, and inside created a useExternalScript.js, which adds a script tag conaining my script I use to control Navbar as a ‘src’ attribute to the Document.body.

   ———- useExternalScript.js —————-

   import { useEffect } from ‘react’;

   export default function useExternalScripts(){
   useEffect(() => {
   const script = document.createElement(“script”);

        script.src = "../service/internalApp.js";
        script.async(true);
   
        document.body.appendChild(script);
   
        return () => {
        document.body.removeChild(script);
    };
   

   }, []);
   };

   ———————————————–

2. Added my external script to control Navbar to a service dirctory

   ——————internalApp.js—————-

   const menu = document.querySelector(‘#mobile-menu’)
   const menuLinks = document.querySelector(‘.navbar__menu’)

   menu.addEventListener(‘click’, function(){
   menu.classList.toggle(‘is-active’)
   menuLinks.classList.toggle(‘active’)
   })

   ———————————————–

3. I have then been attemting to add the below snippet of code, in order to invoke this script, however I can seem to get it to work.

   Ive tried adding it to :
   Home.js, which is my homepage
   App.js, which I use to control my routes

   ————Snippet of code.—————

   import useExternalScripts from “./hooks/useExternalScripts”;
   function App() {

   const Component = () => {
   useExternalScripts();
   }

   ———————————————–

4. It would seem that I need to invoke this component some how, but I am not sure on what I should do next.

   ————–Warning——————

   Line 29:9: ‘Component’ is assigned a value but never used no-unused-vars

   ———————————————–

I’m looking for a Tampermonkey script developer who can replace grades in Google Classroom. I’m not part of this community, but I hope someone can help me with this. Please contact me if you can offer your services. Also, just to clarify, I need the script to replace grades from 8 to 12. Thank you!

How can I add an image to a canvas or any container and and make it fir the container and also have the ability to zoom in and out and also moving to the side explores the non rendered parts of the image that didn’t fit the canvas in the first place, it’s something like google maps

Couldn’t find anything online…

I know that we can access user’s IP address in Astro using Astro.clientAddress value but this would only work in .astro pages.

// your-ip.astro

---
const detectedIp = Astro.clientAddress;
---

<h1>
Your IP: {{ detectedIP }}
</h1>

but in my case, I have created a server-side API endpoint in Astro itself so like below.

// pages/api/create-user.ts

export async function post({ request }) {
    console.log(await request.json());


    // I want to do like this in typescript endpoint file
    // const IP = Astro.clientAddress;


    return {
        body: JSON.stringify({
            name: 'Astro',
            url: 'https://astro.build/',
            ip: `Your IP: {IP}`
        }),
    };
}

I want to access the user’s IP address within this typescript file itself, but I think Astro is not provided in the .ts file context. So how to achieve that?

I looked at documentation around it but couldn’t find out how to access that.

I’m trying to create a strict mapping for a theme, but I want the keys of the mapping, not to be dynamic, but have optional values for the keys. Meaning the key type of “100 | AppBackground” can have one of those keys and the same value. Here are some of the things I have tried. I always want to allow strict key value pairs like red:color.

type 300 = '300' | 'CardBackground';
export type ThemeMapping = {
  [key: '100' | 'AppBackground']: Color;
  [key in '200' | 'ContentBackground']: Color;
  [key: 300 ]: Color;
  ['400' | 'InactiveBackground']: Color;
  link: Color;
  red: Color;
  yellow: Color;
  green: Color;
  blue: Color;
}

I know for dynamic values you can also do {[key: string]: Color}. I just want the key type to essentially be options rather than dynamic or just a regular string.

Please let me know if you need me to explain more.

I am very new to coding but have basic knowledge of troubleshooting and website design in HTML/Java.

Using Windows 10, IIS, Visual Studio Code, Python & Oracle

I am helping a friend with a project where they inherited a server and files for a program/platform. As soon as the data was transferred and server physically moved the webpage stopped working.

We have the original computer with all the original files

The server seems to be based in IIS though the inetpub/wwwroot files appear to be standard downloads and not any custom designations.

inetpub/wwwroot only contains iisstart

Pinging the IP address shows it is active and responding.

Chrome returns error “DNS_PROBE_FINISHED_NXDOMAIN” when using https://LOCALWEBSITENAME

or “ERR_CONNECTION_REFUSED” when using https://www.LOCALWEBSITENAME

• Any suggestions on where to start identifying the main disconnection issue?
• Tips on locating the original web server files?

I have made an edge extension game.
Now i want the game to store progress, but i can’t figure out how to do that on edge.

I have no clue what to do, so if anyone can help me out on this, i’d be very happy.

I recently started making my portfolio and would like to add something similar to looking for repositories that I have with the github API but I have no idea how to make it work.

I used this code based on the documentation:

import requests

headers = {
    'Authorization': 'Token <my-token>'
}

response = requests.get('https://api.github.com/users/<my-nickname>', headers=headers)

print(response.json())