When I go between if I go between 3 and 10, its marked as greater than 20

If the the element Wager is set to anything above 3 and under 10. Javascript marks it as above 20

<!-- HTML -->
<input type="number" id="wager" step="0.1" min="0.1" max="20.0" placeholder="0.1"/>
// JavaScript
function setTwoNumberDecimal(event) {
        this.value = parseFloat(this.value).toFixed(1); 

        console.log(this.value) // Shows the current value (debugging)
        console.log(this.max) // Shows the max value allowed (debugging)
        console.log(this.value > this.max) // Shows if its above the max allowed (debugging)

        if (this.value > this.max) {
            this.value = this.max
        }

        if (this.value < 0.1) {
            this.value = 0.1
        }
    }```


I was expecting so anything between 3 and 10 would be marked as lower than 20 but yeh. It probably is something stupid

how do I dynamically render complex styles for articles?

so to start off I’m trying to build blog system with rich text editor(draft js), I got stuck on this functionality, this is the data I extracted from the rich text editor

 const ArticleContent = [
    {
      key: "15am5",
      text: "PartRedPartOrange",
      type: "header-two",
      inlineStyleRanges: [
        {
          offset: 0,
          length: 7,
          style: "red",
        },
        {
          offset: 7,
          length: 9,
          style: "orange",
        },
        {
          offset: 0,
          length: 2,
          style: "BOLD",
        },
      ],

    },
    {
      key: "eo74h",
      text: "unordered list normal",
      type: "unordered-list-item",
      inlineStyleRanges: [],
    },
  ];

and I tried to build this function (with the help of chatGPT)

  function applyStyles(text, styles, type) {
    let Element = "p";
    switch (type) {
      case "blockquote":
        Element = "blockquote";
        break;
      case "header-six":
        Element = "h6";
        break;
      case "header-five":
        Element = "h5";
        break;
      case "header-four":
        Element = "h4";
        break;
      case "header-three":
        Element = "h3";
        break;
      case "header-two":
        Element = "h2";
        break;
      case "header-one":
        Element = "h1";
        break;
      case "unordered-list-item":
        Element = "li";
        break;
      case "ordered-list-item":
        Element = "li";
        break;
      default:
        Element = "p";
        break;
    }
    const styledText = [];
    let currentPosition = 0;
    let currentStyleEnd = 0;
    for (const style of styles) {
      const { offset, length, style: appliedStyle } = style;

      // Add the text between the current style and the previous style
      styledText.push(
        DOMPurify.sanitize(text.substring(currentStyleEnd, offset))
      );

      // Apply the style to the text within the current style's range
      let styledSubstring = text.substring(offset, offset + length);
      styledSubstring = DOMPurify.sanitize(styledSubstring);

      // Apply the corresponding HTML tags for the style

      switch (appliedStyle) {
        case "BOLD":
          styledText.push(`<strong>${styledSubstring}</strong>`);
          break;
        case "ITALIC":
          styledText.push(`<em>${styledSubstring}</em>`);

          break;
        case "UNDERLINE":
          styledText.push(`<u>${styledSubstring}</u>`);
          break;
        case "red":
          styledText.push(
            `<span style="color:rgba(255, 0, 0, 1.0);">${styledSubstring}</span>`
          );
          break;
        case "orange":
          styledText.push(
            `<span style="color: orange;">${styledSubstring}</span>`
          );

          break;
        case "yellow":
          styledText.push(
            `<span style="color: rgba(180, 180, 0, 1.0);">${styledSubstring}</span>`
          );
          break;
        case "violet":
          styledText.push(
            `<span style="color: rgba(127, 0, 255, 1.0);">${styledSubstring}</span>`
          );
          break;
        case "indigo":
          styledText.push(
            `<span style="color: rgba(75, 0, 130, 1.0);">${styledSubstring}</span>`
          );
          break;
        case "blue":
          styledText.push(
            `<span style="color: rgba(0, 0, 255, 1.0);">${styledSubstring}</span>`
          );
          break;
        case "green":
          styledText.push(
            `<span style="color: rgba(0, 180, 0, 1.0);">${styledSubstring}</span>`
          );
          break;
        default:
          break;
      }
      currentPosition = offset + length;
      currentStyleEnd = currentPosition;
    }
    // Add the remaining text after the last style
    styledText.push(DOMPurify.sanitize(text.substring(currentStyleEnd)));

    const styledHTML = styledText.join("");
    const wrappedHTML = `<${Element}>${styledHTML}</${Element}>`;
    return wrappedHTML;
  }
 const renderArticle = ArticleContent.map((Line) => {
    const styledText = applyStyles(
      Line.text,
      Line.inlineStyleRanges,
      Line.type
    );
    return (
      <div
        key={Line.key}
        dangerouslySetInnerHTML={{ __html: styledText }}
      ></div>
    );
  });

but it doesn’t work, the output in the page looks like this

<div><h2>
<span style="color:rgba(255, 0, 0, 1.0);">PartRed</span>
<span style="color:orange;">PartOrang</span>
PartRedPartOrang
<strong>Pa</strong>rtRedPartOrange
</h2></div>

of course its an absolute mess, can I get suggestions on how to fix this?

JS – Need help making a responsive webpage [closed]

I’m make a website and I already have a design made however I’m having trouble making it responsive. I have looked on the web and have not found anything that worked, however this article shows how to make the type of responsive page I want https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/ but I cant seem to get it to work. If anyone has any suggestions or similar solutions it would be much appreciated.

CSS and HTML

/****Front_Page*****/
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Alata;
}

#Front_Page {
    height: 103%; 
}

#Slogan {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-150%, -70%);
    color: rgb(54, 53, 53);
    font-size: 35px;
    line-height: 160%;
}
/******************/

/****Front_Img/Logo*****/
#Front_Img {
    position: relt;
    width: 100%;
    height: 100%;
}

#Logo {
    position: absolute;
    padding-left: 2px;
    padding-top: 10px;
    top: 8px;
    left: 16px;
    width: 150px;
}
/******************/

/*****Nav******/
#Nav {
    position: fixed;
    top: 25px;
    right: 200px;
    
}

#Nav > a {
    color: white;
    text-decoration: none;
    padding: 15px;
}

#Nav > a:hover {
    text-decoration: underline;
} 
/******************/

/***About_Page*****/
#About_Home_Page {
    padding-bottom: 0.3%;
    position: relative;
    text-align: center;
    height: 103%;
}

#Link_About {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(450%, -450%);
    color: #75a9f9;
    text-decoration: none;
}

#Link_About:hover {
    text-decoration: underline;
}

#About_Home_Head {
    position: absolute;
    top: 56%;
    left: 54%;
    font-size: 220%;
    transform: translate(-255%, -750%);
    color: #494949;
}

#About_Home_TXT > p {
    opacity: 100%;
}

#About_Home_TXT {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%);
    width: 63%;
    padding: 70px;
    background: rgba(255, 255, 255, 0.54);
}


/******************/

/****About_Img*****/
#About_Home_Img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: fill;
}
/******************/

/****Footer*****/
#Foot {
    padding-top: 0.3%;
    background-color: #5c5c5c;
}

#Foot > p, address, a {
    color: white;
    text-align: center;
}

#WebsiteLink {
    color: #75a9f9;
    text-decoration: none;
}

#WebsiteLink:hover {
    text-decoration: underline;
}
/******************/
</head>
<body> 
    <section id="Front_Page">
        <img id="Front_Img" src="Img/Page_MK1_half_1.png" alt="BarreL img">
        <img id="Logo" src="Img/Logo.png" alt="Logo">
    </section>
    <section id="Slogan">
        <p>API Certified Equipment, <br > Hassle Free </p>
    </section>
    <section id="About_Home_Page">
        <img id="About_Home_Img" src="Img/Front_Page_MK1_half_2.png" alt="About Us img">
        <h1 id="About_Home_Head">About</h1>
        <a id="Link_About" href="About.html">Learn More &DoubleRightArrow;</a>
        <p id="About_Home_TXT">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet lacus at ex pellentesque ornare et a nisl. Proin erat tortor, lacinia euismod porta nec, pellentesque a lacus. Pellentesque ullamcorper augue sed ligula tincidunt blandit. Aenean sed rhoncus tortor. Quisque quam turpis, pulvinar nec venenatis sed,
        </p> 
    </section>
    <nav id="Nav">
        <a href="Index.html">Home</a>
        <a href="Products.html">Products</a>
        <a href="About.html">About</a>
        <a href="Blanke2.html">Blanke1</a>
        <a href="Contacts.html">Contact Us</a>
    </nav> 
</body>
</html>

Is there anyone can help me to know my heroku locked my accounts?

Hello everyone My account is locked and I don’t know why ? because all things the heroku website need it I did it. also I can’t send a ticket because my account doesn’t found!!!
What Should I do for my problem I’m so mad because I repeat did a new account with another Credit Card and you locked it again !!!

I want to know the reason why you locked my account for this email ?

I authorized my account by using salesforce authenticaor

404 Object not found using node-mailjet to manage maillist subscriptions in ES6

I’m using node-mailjet sdk to add a new contact to a contactList to create a newsletter. Since I’m in a NextJS project Im using the ES6 import style like you can see bellow: according to the mailjet documentation a new contact is created on the fly for the contactlist. But I keep getting 404 Object not found error. I’ve already checked in postman with the same data and result is 201 OK. what I’m doing wrong here?

node-mailjet “^6.0.2” in package.json

Here is the code snippet:

import mailjet from 'node-mailjet'

const mailjetClient = mailjet.apiConnect(
    process.env.MJ_APIKEY_PUBLIC,
    process.env.MJ_APIKEY_PRIVATE);
//Some other code...
export async function addContactToContactList(listId, name, email) {
    try {
        const result = await mailjetClient.post("contactslist", { 'version': 'v3' })
            .id(liatId)
            .action("managecontact")
            .request({
                "Name": name,
                "Action": "addnoforce",
                "Email": email
            })
        console.log(result.body.Data); //Log the result for debugging
        return result.body.Data;
    } catch (error) {
        console.error(error);
        return false
    }
}

Complete log error:

Error: Unsuccessful: Status Code: "404" Message: "Object not found"
    at e.<anonymous> (D:YOSLEpymemarketnode_modulesnode-mailjetmailjet.node.js:2:37964)
    at D:YOSLEpymemarketnode_modulesnode-mailjetmailjet.node.js:2:33895
    at Object.throw (D:YOSLEpymemarketnode_modulesnode-mailjetmailjet.node.js:2:34000)
    at r (D:YOSLEpymemarketnode_modulesnode-mailjetmailjet.node.js:2:32765)
    at processTicksAndRejections (internal/process/task_queues.js:93:5) 
{
  code: 'ERR_BAD_REQUEST',
  config: {
    transitional: {
      silentJSONParsing: true,
      forcedJSONParsing: true,
      clarifyTimeoutError: false
    },
    adapter: [Function (anonymous)],
    transformRequest: [ [Function (anonymous)] ],
    transformResponse: [Function: transformResponse],
    timeout: 0,
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    maxContentLength: -1,
    maxBodyLength: -1,
    env: { FormData: [Function] },
    validateStatus: [Function: validateStatus],
    headers: {
      Accept: 'application/json, text/plain, */*',
      'Content-Type': 'application/json',
      'User-Agent': 'mailjet-api-v3-nodejs/6.0.2',
      'Content-Length': 80
    },
    url: 'https://api.mailjet.com/v3/REST/contactslist/10249638/managecontact',
    params: {},
    data: '{"Name":"Chuck Parker","Action":"addnoforce","Email":"[email protected]"}',
    method: 'post',
    responseType: 'json',
    auth: {
      username: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      password: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
    }
  },
  response: {
    status: 404,
    statusText: 'Object not found',
    headers: {
      date: 'Wed, 31 May 2023 21:58:58 GMT',
      'content-type': 'application/json',
      'content-length': '77',
      connection: 'close'
    },
    config: {
      transitional: [Object],
      adapter: [Function (anonymous)],
      transformRequest: [Array],
      transformResponse: [Function: transformResponse],
      timeout: 0,
      xsrfCookieName: 'XSRF-TOKEN',
      xsrfHeaderName: 'X-XSRF-TOKEN',
      maxContentLength: -1,
      maxBodyLength: -1,
      env: [Object],
      validateStatus: [Function: validateStatus],
      headers: [Object],
      url: 'https://api.mailjet.com/v3/REST/contactslist/10249638/managecontact',
      params: {},
      data: '{"Name":"Chuck Parker","Action":"addnoforce","Email":"[email protected]"}',
      method: 'post',
      responseType: 'json',
      auth: [Object]
    },
    request: ClientRequest {
      _events: [Object: null prototype],
      _eventsCount: 7,
      _maxListeners: undefined,
      outputData: [],
      outputSize: 0,
      writable: true,
      destroyed: false,
      _last: true,
      chunkedEncoding: false,
      shouldKeepAlive: false,
      useChunkedEncodingByDefault: true,
      sendDate: false,
      _removedConnection: false,
      _removedContLen: false,
      _removedTE: false,
      _contentLength: null,
      _hasBody: true,
      _trailer: '',
      finished: true,
      _headerSent: true,
      socket: [TLSSocket],
      _header: 'POST /v3/REST/contactslist/10249638/managecontact HTTP/1.1rn' +
        'Accept: application/json, text/plain, */*rn' +
        'Content-Type: application/jsonrn' +
        'User-Agent: mailjet-api-v3-nodejs/6.0.2rn' +
        'Content-Length: 80rn' +
        'Host: api.mailjet.comrn' +
        'Authorization: Basic MTFmMDRiMjgxMjMzMzMwMTc1OGYxMDIwMzc2MGEwMjE6OWQxNWM2MDA5NmJjMjIxYjcxOTM1Y2M2OTU0OGRlNmQ=rn' +
        'Connection: closern' +
        'rn',
      _keepAliveTimeout: 0,
      _onPendingData: [Function: noopPendingOutput],
      agent: [Agent],
      socketPath: undefined,
      method: 'POST',
      maxHeaderSize: undefined,
      insecureHTTPParser: undefined,
      path: '/v3/REST/contactslist/10249638/managecontact',
      _ended: true,
      res: [IncomingMessage],
      aborted: false,
      timeoutCb: null,
      upgradeOrConnect: false,
      parser: null,
      maxHeadersCount: null,
      reusedSocket: false,
      host: 'api.mailjet.com',
      protocol: 'https:',
      _redirectable: [Writable],
      [Symbol(kCapture)]: false,
      [Symbol(kNeedDrain)]: false,
      [Symbol(corked)]: 0,
      [Symbol(kOutHeaders)]: [Object: null prototype]
    },
    data: [Object: null prototype] {
      ErrorInfo: '',
      ErrorMessage: 'Object not found',
      StatusCode: 404
    }
  },
  statusCode: 404,
  statusText: 'Object not found',
  originalMessage: 'Object not found',
  ErrorMessage: 'Object not found'
}
addedcontact es false

Postcode verify only 4 digits not working

this is my java for verifing a postcode it is working for the blank field but i cant get it to verify that it only contains the 4 digits

//  Check postcode
  const postcode = document.getElementById('postcode');
  const postcodeValue = postcode.value.trim();
  const postcoder = /^[0-9]d{4}$/;
  if(postcodeValue === () {
    setErrorFor(postcode, 'Postcode cannot be blank');
  } else if(!postcoder.test(postcodeValue)) {
    setErrorFor(postcode, 'Postcode must contain 4 digits');
  } else {
    setSuccessFor(postcode);
  }

I want it to show an error message if there is more or less than 4 digits or if there is anything other than numbers.

jQuery change event not firing on page load, how can I fix it?

I have a code which is used in both purpose, even on click of any other button and even while editing, it should do on page load

Here is my code


$awaySelect = $('##awayID');

$awaySelect.change(function(){
      alert('hi'); 
      var awayData = $(this).val();
      if(awayData == 202 || awayData == 203){ 
            $('.gameToshowAway').show(); 
            $('.gameToshowAway').css('display','inline-block');
            $("##gameDate3").prop('disabled',false); 
            $('.gamedatecolor1').css('display','inline-block'); 
            $('.positionToDisplayAway').hide();                   
        } else {
            $('##unknownWell').hide();
            $('.gameToshowAway').hide();           
        } 

        if(awayData == 204) {
            $('.gameToshowAway').hide();  
            $('##unknownWell').hide();
            $('.positionToDisplayAway').css('display','inline-block');          
        }
    }).trigger();

but it not doing any alert even i had the trigger at the bottom to try to execute it on page load

what is wrong happening here

Issues with yarn test using react-native-ble-manager

the problem

I’ve created a BLE project and I’m facing several issues when trying to perform basic unit tests with the dependency. I couldn’t find any resources on YouTube or the official library repository regarding this matter. I’m not sure how to proceed now, as I’m required to go through this testing routine. I can’t release the project without passing yarn install, yarn lint, and finally yarn test. Unfortunately, the test always fails. Is there any alternative to make it work without resorting to complex mocking?

Azure Face Recognition – returning 403

I’m trying to use Azure Face Recognition but I’m receiving a 403 return. I searched and it looks like a need to fill a form and be approved to use this resource. The problem is that I’m trying to find a solution to use face recognition in my local webpage and if work well I will develop a webpage in production, so I don’t have a commercial e-mail or a production url to fill the form.

There is a alternative solution?

To exemplify here is my code and the returning error:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Reconhecimento Facial - Login</title>
</head>
<body>
  <h1>Reconhecimento Facial - Login</h1>

  <div id="message"></div>

  <video id="video" width="640" height="480" autoplay></video>
  <canvas id="canvas" width="640" height="480"></canvas>

  <button id="loginButton">Login</button>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <script>
    // Azure Face API Endpoint e Chave de Assinatura
    const endpoint = 'my endpoint';
    const subscriptionKey = 'my key';

    // Elementos de vídeo e canvas
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');

    // Função para carregar o vídeo
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.mediaDevices.getUserMedia || navigator.getUserMedia;

    if (navigator.getUserMedia) {
      navigator.getUserMedia({ video: true }, stream => {
        video.srcObject = stream;
      }, error => {
        console.log('Erro ao acessar a câmera: ' + error);
      });
    }

    // Função para tirar uma foto e enviar para o Azure Face API para reconhecimento
    function takeSnapshot() {
      context.drawImage(video, 0, 0, canvas.width, canvas.height);

      const imageData = canvas.toDataURL('image/jpeg');

      // Enviar a imagem para o Azure Face API
      axios.post(`${endpoint}/face/v1.0/detect?returnFaceId=true&returnFaceAttributes=emotion`, {
        url: imageData
      }, {
        headers: {
          'Content-Type': 'application/json',
          'Ocp-Apim-Subscription-Key': subscriptionKey
        }
      }).then(response => {
        const faceId = response.data[0].faceId;
        const emotions = response.data[0].faceAttributes.emotion;

        // Verificar as emoções para autenticar o usuário
        if (emotions.happiness > 0.5) {
          // Emoção de felicidade detectada, autenticação bem-sucedida
          showMessage('Usuário autenticado com sucesso!');
        } else {
          // Emoção de felicidade não detectada, autenticação falhou
          showMessage('Falha na autenticação. Por favor, tente novamente.');
        }
      }).catch(error => {
        console.log('Erro na requisição para o Azure Face API: ' + error);
        showMessage('Erro na requisição para o Azure Face API. Por favor, tente novamente.');
      });
    }

    // Função para exibir mensagens na tela
    function showMessage(message) {
      const messageDiv = document.getElementById('message');
      messageDiv.innerHTML = message;
    }

    // Evento para acionar o reconhecimento facial ao pressionar o botão de login
    const loginButton = document.getElementById('loginButton');
    loginButton.addEventListener('click', takeSnapshot);
  </script>
</body>
</html>

enter image description here

How can I delete video element when I click on a image element

When I click on ‘video’ it creates a video element and it works, but then I click on an image and it doesn’t work because I created a video element, so the image won’t show, how can I create a image element so once I click on an image the Image shows up on the screen, after already clicking video.

If I reload the page and click the image first it works but once I click the video and try to click back to the image it won’t show.

const mainShoeDisplay = document.getElementById('mainShoe');
const video = document.getElementById('video');
const imageSelection = document.querySelectorAll('.shoeImages');

video.addEventListener('click', () => {
  const videoElement = document.createElement('video');
  videoElement.src = video.src;
  videoElement.controls = true;
  videoElement.autoplay = true;
  videoElement.classList.add('mainShoeVideo');
  
  const parentContainer = mainShoeDisplay.parentNode;
  parentContainer.removeChild(mainShoeDisplay);
  parentContainer.appendChild(videoElement);
});

imageSelection.forEach((image) => {
    image.addEventListener('click', () => {
        mainShoeDisplay.src = image.src
    });
  });

Why is my responsive menu button not working?

My responsive menu is not being displayed upon pressing the button

I have a simple icon, and the plan is that upon being pressed, it should display the menu of my website.

<nav class="navbar">
  <div class="bx bx-menu" id="menu-icon"></div>

I have set the original display of my navbar to none, and when i press the button, the active class is given to the navbar, and it should display block,but the menu is not showing up.

Here’s the relevant css:

@media (max-width: 768px) {
    #menu-icon {
        display: block;
    }

    #darkMode-icon {
        position: absolute;
        right: 7rem;
        font-size: 2.6rem;
        color: var(--text-color);
        margin-bottom: .1rem;
    }

    .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 1rem 3%;
        background: var(--bg-color);
        border-top: .1rem solid rgba(0, 0, 0, .2);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
        display: none;
    }

    .navbar .active {
        display: block;
    }

    .navbar a {
        display: block;
        font-size: 2rem;
        margin: 3rem 0;
        color: var(--text-color);
    }

    .navbar a:nth-child(1),
    .navbar a:nth-child(2) {
        color: var(--text-color);
    }

    .navbar a.active {
        color: var(--main-color);
    }

    .navbar a::before {
        display: none;
    }
}

Here’s the JS i used:

let menuIcon = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');

menuIcon.onclick = () => {
  menuIcon.classList.toggle('bx-x');
  navbar.classList.toggle('active');
};

I checked, and the active class is given to the navbar when i click the button and it’s also being removed correctly. The bx-x class is also given to my menu icon, which turns it into an X. This function works, because the icon does actually turn into an X, so the JS should be fine, but the menu is not showing up.

How can I preview Excel files in-browser with Django and Python?

I am trying to view an excel file in browser.

No editing is necessary, the users will just need to preview the files.

I already have a working system for pdf, where my Django server opens the file in a new tab, but when I run the code for an excel file, it downloads the code rather, which isn’t ideal, since I don’t want to get licenses for all computers accessing the files.

What are my options here?

View.py

res = download(token, path)

with open(file_name, 'wb') as f:
    f.write(res.content)
with open(file_name, 'rb') as f:
    res = HttpResponse(f.read(), content_type=res.headers['Content-Type'])
    

This is the Python-Django code that opens the file. Again, works great for previewing PDF, but I need to preview Excel/Docs files as well.

Every Click Calling Previous Method Again [duplicate]

How many times should I click the Click Me 1 button, the more ALERT will popped out when I click the Click Me 2 button, and it’ll show all previous method again!

I want to every click call the exact one method and did not show the last or all previous methods.

If you type any number into the textbox, then click the Click Me 1 button 3 times, after that click the Click Me 2 button. It will show 3 times alert box!

$(".get_nubmers_btn").on("click", function() {
  var v_chk_txtbox = $(".numbers_input").val().trim();
  if (v_chk_txtbox.length != "") {
    $(".popup_btn").addClass("foo");
    $(".popup_btn").removeClass("bar");
    $(".foo").click(function() {
      alert($(".numbers_input").val().trim());
    });
  } else {
    $(".popup_btn").addClass("bar");
    $(".popup_btn").removeClass("foo");
    $(".bar").click(function() {
      alert("input an number");
    });
  }
});
div.messagebox {
  background-color: lightgray;
  padding: 10px 10px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>

<body>

  <input type="number" placeholder="insert number" class="numbers_input">
  <button type="button" class="get_nubmers_btn">Click Me 1</button>
  <hr>
  <div class="messagebox">
    <p>Messagebox</p>
    <button type="button" class="popup_btn">Click Me 2</button>
  </div>
</body>

</html>

How can I make this axios post call and my express route work together?

I have been working on this for hours now, and I still can’t get it to work. I am trying to make an axios call to ‘getuser’ that will take user input from the form. Then the server side should spit out a result based on a mongoose ‘findOne()’ method.

This is my react page, the values get pulled from the form fine, but don’t translate to the server side.

const Admin = () => {

    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [inputClass, setInputClass] = useState('form-control');

    const handleLogin = async (event) => {
        event.preventDefault();

        try {
            const hash = await new Promise((resolve, reject) => {
                bcrypt.hash(password, 10, (err, hash) => {
                    if (err){
                        reject(err);
                    } else {
                        resolve(hash);
                    }
                });
            });
            console.log("after hash function: " + hash)
            const response = await axios.post('/getuser', {
                email: '',
                hash: ''
            })
            .then((response) => {
                console.log("axios res: " + response.data.success);
                if (response.data.success) {
                    setInputClass('form-control');
                } else {
                    setInputClass('form-control is-invalid');
                }
            })
        } catch (error) {
        console.error(error);
    }
}

return (
    <>
        <div>
            <img src={adminSVG} className='admin-svg' />
            <div className='login-container'>
                <div className='form-container'>
                    <h1 className="signin-header">Please sign in</h1>
                    <form onSubmit={handleLogin}>
                        <div class={`form-floating`} name='outerDiv'> {/**add here */}
                            <input type="email" name="adminEmail" className={inputClass} id="floatingEmail" placeholder="Email" onChange={(e) => setEmail(e.target.value)} /> {/**add here */}
                            <label for="floatingEmail">Email</label>
                            <div class="invalid-feedback">
                                No user has been found with that email.
                            </div>
                        </div>
                        <div class="form-floating">
                            <input type="password" name="adminPassword" className={`${inputClass} form-control`} id="floatingPassword" placeholder="Password" onChange={(e) => setPassword(e.target.value)} />
                            <label for="floatingPassword">Password</label>
                        </div>
                        <div class="d-grid col-8 gap-2">
                            <button class="btn btn-primary" type="submit">Sign In</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </>
)
}

Here is my express post route:

app.post("/getuser", async (req, res) => {
    const email = req.body.email;
    const hash = req.body.hash;
    console.log("hash grabbed from req: " + hash);
    console.log("email grabbed from req: " +  email);

    try {
        console.log("try statement");
        await User.findOne({ email: email })
            .then((user) => {
                if (user && user.password === hash) {
                    res.json({ success: true });
                } else {
                    res.json({ success: false });
                }
            })
    } catch (error) {
        res.status(500).json({ success: false, error: error.message });

    }
});

Any help is greatly appreciated!

I have tried changing variable names, using a formData object instead of a useState hook, as well as many others.