Creating unique session for each user

Im a newbie currently working on a todo/tasks web app using node and express, im having a hard time to create a unique session for every user and storing the tasks for each user accordingly, for now i am trying to achieve this without authentication. for context, if you add any task anyone accessing the website will be able to see them. the code is for my app.js:

import express from "express";
import bodyParser from "body-parser";
import session from "express-session";
import mongoose from "mongoose";
import { default as connectMongoDBSession } from "connect-mongodb-session";
import { v4 as uuidv4 } from "uuid";

//* constants
const resetTime = 1000 * 60 * 60 * 24 * 30;
const app = express();
const port = process.env.PORT || 3000;
const sessionSecret = "UniqueSessionSecret";
const mongoURI = process.env.mongodb_URI;
const MongoDBStore = connectMongoDBSession(session);

mongoose.connect(mongoURI, {
useNewUrlParser: true,
useUnifiedTopology: true,
});

const store = new MongoDBStore({
uri: mongoURI,
collection: "sessions",
expires: resetTime / 1000,
});

store.on("error", (error) => {
console.error(`MongoDBStore Error: ${error}`);
});

//* express
app.use(
session({
name: "tasks.sid",
secret: sessionSecret,
resave: false,
saveUninitialized: true,
store: store,
})
);
app.use("/public", express.static("public"));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use("/", express.static("./node_modules/bootstrap/dist/"));

//* variables

//* app requsts
app.get("/", (req, res) => {
if (!req.session.userId) {
// Assign a unique identifier to the session
req.session.userId = uuidv4();
}

res.render("index.ejs", { dateAndDay, addedTasks, exist });
});

app.get("/work", (req, res) => {
res.render("work.ejs", { dateAndDay, addedWorkTasks, existWork });
});

app.post("/", (req, res) => {
if (addedTasks.includes(req.body["newNote"]) === false) {
if (req.body["newNote"] != "") {
exist = false;
addedTasks.unshift(req.body["newNote"]);
}
// } else {
//   var exist = true;
}
res.render("index.ejs", { dateAndDay, addedTasks, exist });
waitFiveMinutes();
});

app.post("/work", (req, res) => {
if (addedWorkTasks.includes(req.body["newWorkNote"]) === false) {
if (req.body["newWorkNote"] != "") {
existWork = false;
addedWorkTasks.unshift(req.body["newWorkNote"]);
}
}
//  else {
//   existWork = true;
// }

res.render("work.ejs", { dateAndDay, addedWorkTasks, existWork });
waitFiveMinutesWork();
});

app.listen(port, () => {
console.log(`Server running on port ${port}`);
});

this is my latest commit, i remeoved unnessacry code that would take space for no use so if you want to check the full repo you can find it in the footer of the same web app: www.todowebapp.com

Three.js: Why is my scene completely black?

I’m trying to make my first three.js project but the scene stays completely black. I’m using vite as my local server.

This is my js code:

import * as THREE from 'three'

//Scene
const scene = new THREE.Scene()

//create our sphere
const geometry = new THREE.SphereGeometry(3, 64, 64)
const material = new THREE.MeshStandardMaterial({
    color: "#00ff83",
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh);

//light
const light = new THREE.PointLight(0xffffff, 1, 100)
light.position.set = (0, 10, 10)
scene.add(light)

//Camera
const camera = new THREE.PerspectiveCamera(45, 800 / 600)
camera.position.z = 20
scene.add(camera)

//Renderer
const canvas = document.querySelector(".webgl")
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(800, 600)
renderer.render(scene, camera)

I added the canvas in my HTML file like this:
<canvas class="webgl"></canvas>

Javascript setting a date based on system local time

I have been working on this issue for a while now and cannot find a good solution. I am working on HTML/CSS/JS webserver and I need to display a date and time based on current user local time settings. For example, If I run the website on my PC and have the time hour format to set to 24 hour format, I want the webserver to also use 24 hours format and vice versa.

Currently, I have set the 24 hours format:

enter image description here

And I use the following Javascript code:

var newDate = new Date(2023, 8, 20, 14, 40);
console.log("newDate = ", newDate);
var formattedDate = newDate.toLocaleString();
console.log("formattedDate = ", formattedDate);
document.getElementById("date-time-placeholder").innerHTML = formattedDate;

date-time-placehold is a simple placeholder for the text:

<table>
   <tr>
      <td style="width: 280px !important" id="date-time-placeholder" class="item">
                                    
      </td>
   </tr>
</table>

The result:
enter image description here

The console prints:

newDate =  Wed Sep 20 2023 14:40:00 GMT+0300 (Eastern European Summer Time)
formattedDate =  9/20/2023, 2:40:00 PM

Are such thing even possible? Why would the function toLocaleString convert my 24 hour format to 12 hour format? How can I avoid this?

Promise not getting result View-> API -> Promise -> API ->DB API

The logic for this screen is to look up the planners for dept from MS SQL (Works)
Call the next api to get scrap by that list of planners (works down thru the db result displaying)
However the view never gets the result set back

View



        function GetPlannersByDepartment() {
            const reqPBD = new XMLHttpRequest();
            reqPBD.addEventListener("load", reqListenerPlanners);
            reqPBD.open("GET", '../../api/PlannersForDepartment/{{{ParmLocation}}}/Manifolds');
            reqPBD.send();
            
            function reqListenerPlanners () {
                const Planners = this.responseText; 
                GetScrapByPlanners(Planners);
            }
        }
        function GetScrapByPlanners(Planners) {
            const reqScrap = new XMLHttpRequest();
            reqScrap.addEventListener("load", reqListenerScrap);
            reqScrap.open("GET", `../../api/ScrapByPlanners/{{{ParmLocation}}}/${Planners}`);
            reqScrap.send();
            
            function reqListenerScrap() {
                if (this.responseText > ' ') {
                    console.log("api scrap result1:" + this.responseText);
                    const result = JSON.parse(this.responseText); 
                    let series = [];
                    result.forEach(function(row){
                        series.push([Object.values(Object.values(row))[0],
                                    Object.values(Object.values(row))[1],
                                    Object.values(Object.values(row))[2]
                                    ]);
                    });             
                    document.getElementById("MScrap").innerHTML = '';
                    const grid = new gridjs.Grid({
                        columns: ['Week', 'Qty', 'Amount'],
                        data: series
                        }).render(document.getElementById("MScrap"));
                    screenshot({ filename: './demo.png' });
                } else {
                    document.getElementById("MScrap").innerHTML = '<p><center>API results failed';
                }
                console.log("Screenshot starting...")
                let screenshot = require('screenshot-desktop')
                screenshot({ filename: 'demo.png' })
            }
        }
        //initial data get 
        GetPlannersByDepartment();

logic API

app.get('/api/PlannersForDepartment/:ParmLocation/:ParmDepartment', (req, res) => {
        var ParmLocation = req.params.ParmLocation;
        var ParmDepartment = req.params.ParmDepartment;
        //if (debugMode == true) {
            console.log('/api/PlannersForDepartment called for ' + ParmLocation + ' Department ' + ParmDepartment + ' @ ' + Date());
        //}
        // First get planners for this department
        var query = `SELECT Planners FROM DeptPlanners where Department = '${ParmDepartment}'`
        var PromisePlanners = db.DBQueryBHBrowser(query);
        var Planners = '';
        PromisePlanners.then(function(result) {
            result.recordset.forEach(function(row){
                Planners = Object.values(Object.values(row))[0];
            });
            //if (debugMode == true) {
                console.log('/api/Planners completed @ ' + Date());
                console.log('Planners: ' + Planners);
            //}
            res.send(Planners);
        }).catch(function () {
            console.log("Promise Rejected for /api/Planners");
        });
    })
    app.get('/api/ScrapByPlanners/:ParmLocation/:ParmPlanners', (req, res) => {
        var ParmLocation = req.params.ParmLocation;
        var ParmPlanners = req.params.ParmPlanners;
        //if (debugMode == true) {
            console.log('/api/Scrap called for ' + ParmLocation + ' Planners ' + ParmPlanners + ' @ ' + Date());
        //}
        var query = `SELECT TO_CHAR(TO_DATE(SUBSTR(ILTRDJ,-5), 'YYDDD'),'WW') AS Week, SUM(ILTRQT / 1000 * -1) AS TOTQTY, SUM(ILPAID / 100 * -1) AS TOTAMT
        FROM PRODDTA.F4111
        JOIN PRODDTA.F4102 ON ILITM = IBITM AND IBMCU = ILMCU AND IBANPL NOT IN (50030002,50030039)
        JOIN PRODDTA.F4101 ON IMLITM = ILLITM
        JOIN PRODCTL.F5500001 On ILTRDJ = DCGRDT
        LEFT JOIN PRODCTL.F0005 ON ILRCD= LTRIM(F0005.Drky)
        And DRSY='42' AND DRRT='RC'
        WHERE ILMCU = '       50010' AND ILDCT IN('ID', 'IS')
        AND ILTRDJ BETWEEN  123001 AND 123365
        AND IBANPL IN (${ParmPlanners})
        AND ILRCD NOT IN('517','509') AND ILUSER <> 'HIPPK'
        GROUP BY TO_CHAR(TO_DATE(SUBSTR(ILTRDJ,-5), 'YYDDD'),'WW')
        ORDER BY Week`

        var PromiseScrap = db.DBQueryJDE(query);
        PromiseScrap.then(function(result) {
            console.log (PromiseScrap);
            //if (debugMode == true) {
                console.log(`/api/ScrapByPlanners ${ParmLocation} ${ParmPlanners}  completed @ ${Date()}`);
                console.log(`JDE result data:` + result);
            //}
            res.send(result);
        }).catch(function () {
            console.log("Promise Rejected for api/ScrapByPlanners");
        });
    })

db API (just the Oracle one in question)

async function DBQueryJDE(sqlquery)  {
  try {
    //if (debugMode) {
      console.log('Oracle SQL:n' + sqlquery);
    //}
    var oracledb = require('oracledb');
    var connectionProperties = {
      user: process.env.DBAAS_USER_NAME || "uuuuuuuu",
      password: process.env.DBAAS_USER_PASSWORD || "pppppppp",
      connectString: "(DESCRIPTION =(ADDRESS = (PROTOCOL = TCP)(HOST = db92IF.bherp.local)(PORT = 1521))(CONNECT_DATA =(SERVICE_NAME= DB92IF.bherp.local)))"};
    oracledb.getConnection(connectionProperties, function (err, connection) {
      if (err) {
        console.error(err.message);
        response.status(500).send("Error connecting to DB");
        return;
      }
      connection.execute(sqlquery,
        function(err, result) {   // adding await doesn't seem to do anything
          if (err) {
            console.error(err.message);
            response.status(500).send("Error getting data from JDE DB");
            doRelease(connection);
            return;
          }
          console.log("RESULTSET:" + JSON.stringify(result));
          doRelease(connection);
          return result;
        }
      );
    });
  } catch (error) {
      console.log('DBErrorJDE: ' + err.message + 'n Query:' + sqlquery);
      doRelease(connection);
      return;
  }
};
function doRelease(connection) {
  connection.release(function (err) {
    if (err) {
      console.error(err.message);
    } else {
      console.log('closed oracle succefully');
    }
  });
}

I was expecting the result from the oracle db api to return up to the view

Confusion with use of OffscreenCanvas.transferToImageBitmap

I just read the official MDN document of OffscreenCanvas and it shows an example for using transferToImageBitmap.

const one = document.getElementById("one").getContext("bitmaprenderer");
const two = document.getElementById("two").getContext("bitmaprenderer");

const offscreen = new OffscreenCanvas(256, 256);
const gl = offscreen.getContext("webgl");

// Perform some drawing for the first canvas using the gl context
const bitmapOne = offscreen.transferToImageBitmap();
one.transferFromImageBitmap(bitmapOne);

// Perform some more drawing for the second canvas
const bitmapTwo = offscreen.transferToImageBitmap();
two.transferFromImageBitmap(bitmapTwo);

The ownership of ImageBitmap would be consumed after execute const bitmapOne = offscreen.transferToImageBitmap(), so bitmapTwo can’t consume any ImageBitmap. Therefore the two canvas can’t render anything on the screen.

I’m confused with this example. Assumed I want to render the same image onto one and two canvas, I need to write the gl code twice, just like following:

const gl = offscreen.getContext("webgl");

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
const bitmapOne = offscreen.transferToImageBitmap();
one.transferFromImageBitmap(bitmapOne);

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
const bitmapTwo = offscreen.transferToImageBitmap();
two.transferFromImageBitmap(bitmapTwo);

I don’t think it is make sense to use offscreen.transferToImageBitmap() like the example shows. So, I want to know why the example show bitmapOne and bitmapTwo together? In what situation should I use offscreen.transferToImageBitmap()?

I also found that using drawImage seems more make sense, isn’t it?

const one = document.getElementById('drawImage-one').getContext('2d');
const two = document.getElementById("drawImage-two").getContext("2d");
  
const offscreen = new OffscreenCanvas(300, 300);
const gl = offscreen.getContext("webgl");
  
// Perform some drawing for the two canvas using the gl context
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

one.drawImage(gl.canvas, 0, 0, gl.canvas.width, gl.canvas.height);
two.drawImage(gl.canvas, 0, 0, gl.canvas.width, gl.canvas.height);

This an example to address my problem.

Exctract data from a web site using inspect element

I need to exctract a list of Accession number.
I am a PhD student in biology working with GEOdatabase on NCBI website which give me datasets of genes.
Each dataset possesses an Accession number, generally starting by “GSE” followed by numbers.
I would like to exctract the list of Accession number present in the page after my research.

Here is a screen shot of what I would like to exctract (highlighted in yellow), from the page : https://www.ncbi.nlm.nih.gov/gds/?term=brain.

enter image description here

Is it possible to exctract it, writting a script via the console when I use inspect element ?
Or any other idea ?

Sorry if I don’t use correctly any of the previous term , I am not a dev.

Thank you for your help !

Javascript: localstorage issue

I’m trying to create a shopping-car-function with a local storage which remembers the items in the shopping basket, but after reloading when i add or remove a item to the basket it start from 0 again.

**My javascript file: **

let current=0
let locstor=''

function loadlocal()
    {   
        let locstor=''
        document.getElementById("basket").innerHTML=localStorage.getItem(locstor)
        locstor=localStorage.getItem(locstor)
        return locstor
    }

function addItem()
    {

        current=document.getElementById("productStat").innerHTML=current+1
        localStorage.setItem(locstor, current)
        document.getElementById("basket").innerHTML=localStorage.getItem(locstor)

    }

function removeItem()

    {   
        if (current < 1) current= 0;
        else
        current=document.getElementById("productStat").innerHTML=current-1
        localStorage.setItem(locstor, current)
        document.getElementById("basket").innerHTML=localStorage.getItem(locstor)



    }



My html file

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Productpagina</title>
    <link href="buyingFunction.css" rel="stylesheet">

    
</head>
<body onload="loadlocal()">

    
    <p> 
        
        
            <button onclick="removeItem()">-</button>
            <span id="productStat">&nbsp;0&nbsp;</span>
            <button onclick=addItem()>+</button>
            
        
    </p>

        <div>
            <button id="basket">0</button>
        </div>

    <script src="buyingFunction.js"></script>
</body>
</html>

`

I hope someone can explain me what i’m missing.

When redirecting the user via Ajax and Js, the source code of the file is displayed, instead of the graphical interface

I’m currently working on a school project involving the implementation of a login system using PHP (with PDO), JavaScript, and Ajax. The goal is to redirect users to their respective dashboards based on their user types. However, I’ve encountered an issue where, instead of displaying the intended dashboard, the web browser shows the source code, including the underlying structure. I have attached the code files for reference.

User-controller.php:

`<?php
require_once("db.php");
require_once('class.php');
require_once('user-model.php');

session_start();

$response = array(); // Initialize the $response variable

if (isset($_POST['user']) && isset($_POST['pass'])) {
    $mail = $_POST['user'];
    $contra = $_POST['pass'];

    $databaseCuatro = new Database();
    $conn = $databaseCuatro->getConnection();
    $sql = "SELECT email, contrasena, rol FROM usuarios WHERE email = :mail";
    $stmt = $conn->prepare($sql);
    $stmt->bindParam(':mail', $mail);
    $stmt->execute();

    $usuario = $stmt->fetch();

    if ($usuario && password_verify($contra, $usuario['contrasena'])) {
        // Valid credentials, create the session
        $_SESSION['loggedin'] = true;

        // Set the status based on the user's role
        if ($usuario['rol'] === 1) {
            $_SESSION['admin'] = $usuario;
            $response['status'] = 1;
        } elseif ($usuario['rol'] === 2) {
            $_SESSION['userdem'] = $usuario;
            $response['status'] = 2;
        } elseif ($usuario['rol'] === 3) {
            $_SESSION['useroferente'] = $usuario;
            $response['status'] = 3;
        }
    } else {
        $conn = $databaseCuatro->getConnection();

        if (!$databaseCuatro->checkMail($mail)) {
            $response['status'] = 5; // Email does not exist
        } else {
            $response['status'] = 4; // Incorrect username or password
        }
    }
}

// Now send the JSON response
header('Content-Type: application/json;');

echo json_encode($response);
?>
`

script-forms.js:

`/* Ajax for login */
function loginData(event) {
 event.preventDefault(); // Prevent the form from submitting immediately

  var user = $('.input-user').val();
  var pass = $('.input-pass').val();

 let data = {
    user: user,
    pass: pass
  }

  /* Check login using Ajax */
  $.ajax({
      url: "user-controller.php",
      method: "post",
      data: data,
      dataType: "json",
      success: function (response) {
          if (response.status === 1) {
              window.location.href = 'dashboard-admin.php';
          } else if (response.status === 2) {
              window.location.href = 'dashboard-demandante.php';
          } else if (response.status === 3) {
              window.location.href = 'dashboard-oferente.php';
          } else if (response.status === 4) {
              showMessage("Incorrect username or password!");
          } else if (response.status === 5) {
              showMessage("This account does not exist!");
          }
      },
        error: function (xhr, status, error) {
        console.log("Error in AJAX request: " + error);
      }
  });
}`

My local images under /public/images doesn’t load in my react app

I have a component which is Portafolio.js where I am using the map function to get every object on a “trabajos.js” file where I have all the objects with its properties. I am trying to show an image to every of those objects using their id’s. For some reason it doesn’t work, I have checked the routes, names, spaces, etc.

Portafolio.js:

import React from 'react'
import { trabajos } from './datos/trabajos';
import {Link} from 'react-router-dom';

export const Portafolio = () => {
  return (
    <div>

      {
        trabajos.map( trabajo => {
          return (
            <article key={trabajo.id}>
              <div className='mask'>
                <img src={"/images/" + trabajo.id + ".png" } alt='hola'/>
              </div>
              <span>{trabajo.categorias}</span>
              <h2><Link to={trabajo.url} target='__blank'>{trabajo.nombre}</Link></h2>
              <h3>{trabajo.tecnologias}</h3>
            </article>
          )
          
        })
      }



    </div>

    
  )
}

And here is my trabajos.js where I have the objects:

export const trabajos = [
    {
        'id': 'moviehub',
        'nombre': 'Movie Hub',
        'url': 'https://tonychongng.github.io/moviehub/',
        'tecnologias': 'HTML, CSS, JS, REACT',
        'categorias': 'Desarrollo Web'
    },

    {
        'id': 'todolist',
        'nombre': 'To-do List',
        'url': 'https://tonychongng.github.io/todo_app/',
        'tecnologias': 'HTML, CSS, JS, REACT',
        'categorias': 'Desarrollo Web'
    },

    {
        'id': 'starbucksclone',
        'nombre': 'Starbucks Clone',
        'url': 'https://tonychongng.github.io/Starbucks-Clone/',
        'tecnologias': 'HTML, CSS, JS',
        'categorias': 'Desarrollo Web'
    }
];

As I said, the trabajos.js is under public/images/my-images.png so I believe the src=”/images” is correct.

I already tried to copy the relative path and the path of those images in src but still doesnt work.

Other thing that I tried is to use in Portafolio.js this line of code: . I thought it could be a problem for the map function but that line of code still doesn’t work.

Pop up not opening after closing in javascript form wizard

I am using javascript form wizard.I have followed below link.
https://www.w3schools.com/howto/howto_js_form_steps.asp
I need to display popup on last step .If I close the pop up and again clicking submit button It is not showing pop up. I am getting Uncaught TypeError: Cannot read properties of undefined (reading ‘style’) in console. It should display pop up .
below is my code.

var currentTab = 0;
        
     
        
 // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
   
   
  //... and fix the Previous/Next buttons:
  if (n == 0) {
    
    //alert('hi');
    document.getElementById("prevBtn").style.display = "none";
    
  }
   else {
    document.getElementById("prevBtn").style.display = "inline";
  }

   if(n == (x.length - 2)){
     var checkdowntime=$("#downtime").val();
     //  var checkdowntime=$("#checkdowntime").val();
  }
  if (n == (x.length - 1)) {
    //document.getElementById("nextBtnn").innerHTML = "Submit";
    document.querySelector('#nextBtn').innerText = 'Add Downtime';
    var element = document.getElementById("nextBtn");
         element.classList.add("sub");
        
  
  }
  else if(n == (x.length - 2) && (checkdowntime=='No')){
           document.getElementById("nextBtn").innerHTML = "Review";
          
            document.getElementById("nextBtn").setAttribute( "onClick", "nextPrev(1);" );
 
   

  }

   else {
    var icon="&nbsp;<i class='fas fa-chevron-right'></i>"
    document.getElementById("nextBtn").innerHTML = "Next"+icon;
     
  }
    
  //... and run a function that will display the correct step indicator:
 // fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  
  
 
 
  x[currentTab].style.display = "none";
   var shift=document.querySelector('input[name="question_1"]:checked').value;
   
if(n==1){
 

  
    
   
  // if(size=="9mm"){
  //    currentTab = currentTab + n+1;
  // }
 // alert(size);
  if(currentTab==0){
   if(shift==1){
      
  
  currentTab = currentTab + n;
   }
   else if(shift==2){
    currentTab = currentTab + n+1;
   }
   else if(shift==3){
    currentTab = currentTab + n+2;
   }
   else{
     currentTab = currentTab + n;
   }
  }
  else if(currentTab==2){
    currentTab = currentTab + n+1;
  }
   else if(currentTab==1){
    currentTab = currentTab + n+2;
  }
  else if(currentTab==4){
   var size=document.querySelector('input[name="question_5"]:checked').value;
   if(size=="9mm"){
    currentTab = currentTab + n+1;
   }
   else{
    currentTab = currentTab + n;
   }
  }
  else if(currentTab==5){
     
    currentTab = currentTab + n+1;
     
    
  }
  else if(currentTab==6){
    
       currentTab = currentTab + n+1;
    
    
      }
else if(currentTab==7){
   
    currentTab = currentTab + n+1;
      }
      else if(currentTab==8){
    
    currentTab = currentTab + n+1;
      }
      else if(currentTab==9){
    
    currentTab = currentTab + n+1;
      }
 else if(currentTab==14){
    var checkdowntime=document.querySelector('input[name="question_14"]:checked').value;
    if(checkdowntime=="No"){
      
    currentTab = currentTab + n+1;
     document.querySelector('#nextBtn').innerText = 'Review';
     document.getElementById('qnum_16').innerHTML='10';
    }
    else{
      currentTab = currentTab + n;
         document.getElementById('qnum_16').innerHTML='11';
    }
      }

   else{
    currentTab = currentTab + n;
  }
}
else if(n==-1){
 // document.getElementById("nextBtn").removeAttribute("disabled");

  //  alert(currentTab);
   if(currentTab==1){
currentTab = currentTab + n;

  }
 else if(currentTab==2){
currentTab = currentTab + n-1;
  }
else if(currentTab==3){
  currentTab = currentTab + n-2;
}
else if(currentTab==4){
 if(shift==2){
 currentTab = currentTab + n-1;
 }
  if(shift==1){
 currentTab = currentTab + n-2;
 }
 if(shift==3){
 currentTab = currentTab + n;
 }
}

else if(currentTab==6){
  
  var size=document.querySelector('input[name="question_5"]:checked').value;
   if(size=="9mm"){
  currentTab = currentTab + n-1;
   }

}
else if(currentTab==7){
currentTab = currentTab + n-1;
}
else if(currentTab==8){
currentTab = currentTab + n-1;
}
else if(currentTab==9){
    
    currentTab = currentTab + n-1;
      }
      else if(currentTab==10){
    
    currentTab = currentTab + n-1;
      }
       else if(currentTab==11){
        var size=document.querySelector('input[name="question_5"]:checked').value;
    if(size=="7mm"){
    currentTab = currentTab + n-1;
    }
    else{
       currentTab = currentTab + n;
    }
      }
      else if(currentTab==15){
        var checkdowntime=document.querySelector('input[name="question_14"]:checked').value;
    if(checkdowntime=="No"){
       currentTab = currentTab + n-1;
       document.getElementById('qnum_16').innerHTML='10';
    }
    else{
      currentTab = currentTab + n;
       //document.querySelector('#qnum_16').innerText = '11';
       var q=document.querySelector('#qnum_16').innerText;
      // alert(q);
       document.getElementById('qnum_16').innerHTML='11';
    }
      }
   else{
    currentTab = currentTab + n;
  }
}
  // if you have reached the end of the form...
  if (currentTab == x.length) {
   
  //  var element = document.querySelector('div');
  //  element.classList.remove('tab');
  /*
  var stepform=document.getElementById('coil');
   stepform.style.display = 'none';
   var reviewform=document.getElementById('reviewform');
   reviewform.style.display = 'block';
   */
  var prevBtn=document.querySelectorAll('.step');
  var editBtn=document.querySelectorAll('.editBtn');
   document.querySelector('#reviewtext').style.display = 'block';
 
 

    

 
      x[x.length-1].style.display = "block";
        if(checkdowntime=="No"){
       formsubmit();
       return false;
       
        }
        else{
            
       x[x.length-1].style.display = "block";
            
        // x[currentTab].style.display = "block";
              $('#adddowntimemodal').modal('show');
       return false;
        }
            

        
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
  validateForm();

}


function validateForm() {
  var x, y, i, valid = true,c;
   var nextBtn = document.getElementById("nextBtn");
  x = document.getElementsByClassName("tab");
   if (currentTab < x.length) {
  y = x[currentTab].querySelectorAll('input[type="radio"]:checked').length;
  var z = x[currentTab].querySelectorAll('input[type="number"]');
  c = x[currentTab].getElementsByTagName("input");
  
  // Reset validation classes for number inputs
  for (i = 0; i < z.length; i++) {
    z[i].classList.remove("invalid");
  }

  // A loop that checks every number input field in the current tab:
  for (i = 0; i < z.length; i++) {
    // If a field is empty...
    if (z[i].value == "") {
      // add an "invalid" class to the field:
      z[i].classList.add("invalid");
      // and set the current valid status to false
      valid = false;
       nextBtn.setAttribute("disabled", "true");
    }
    else{
       nextBtn.removeAttribute("disabled");
    }
  }
  
   for (i = 0; i < c.length; i++) {
    // If a field is empty...
     if (c[i].type === "checkbox" && !radioGroupChecked(c[i].name)) {
      // If a radio group is not checked, set valid to false
      valid = false;
      nextBtn.setAttribute("disabled", "true");
    }
    else{
      nextBtn.removeAttribute("disabled");
    }
  }
  // Enable or disable the "Next" button based on radio button selection and valid status
 
  if (y > 0 && valid) {
    nextBtn.removeAttribute("disabled");
  } else {
    nextBtn.setAttribute("disabled", "true");
  }

  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].classList.add("finish");
  }
   }
  return valid; // return the valid status
}

function radioGroupChecked(groupName) {
  var radios = document.querySelectorAll('input[name="' + groupName + '"]');
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      return true;
    }
  }
  return false;
}    

Axios error on changing the URL from http to https

const OTP_API = "https://192.168.4.10:8001/api/tatreports/getotp/";
const onNumberCheck = async () => {
    try {
      const response = await axios.get(
        `https://localhost:3005/api/is-user-exist/0${inputNumberValue}`
      );

      console.log(response);
      if (response.status === 200) {
        setIsUserExist(true);
        // Send a notification when status is 200
        notification.success({
          message: ` سلام ${response.data.name}`,
          description:
            "کد احراز هویت برای شما ارسال شد. لطفا آن را وارد نمایید.",
        });
        setLoggedUserName(response.data.name);
        setLoggedUserAccessType(response.data.accessType);

        const otpRespons = await axios.get(`${OTP_API}${inputNumberValue}`);
        if (otpRespons.status === 200) {
          setValidationCode(otpRespons.data);
          console.log(otpRespons.data);
        }else{
          notification.error({
            message: `مشکلی پیش آمده`,
            description: "لطفا ارتباط با سرویس پیامکی را چک کنید و یا با پشتیبانی تماس بگیرید",
          });
        }
      }else if(response.status === 403){
        notification.error({
          message: `این شماره اجازه دسترسی ندارد`,
          description: "لطفا با پشتیبانی تماس بگیرید",
        });
      }
    } catch (error) {
      if (error.response) {
        // The request was made, but the server responded with a status code
        const statusCode = error.response.status;
        console.error(`Request failed with status code: ${statusCode}`);
        notification.error({
          message: `این شماره اجازه دسترسی ندارد`,
          description: "لطفا با پشتیبانی تماس بگیرید222",
        });
      } else if (error.request) {
        notification.error({
          message: `No response received from the server.`,
          description: "لطفا با پشتیبانی تماس بگیرید",
        });
        console.error("");
      } else {
        notification.error({
          message: `Error setting up the request:`,
          description: `${error.message}`,
        });
      }
    }
  };

in this code i get the same, it works when i use http for localhost or my Windows server but when i change it to https i get this error: AxiosError: write EPROTO 483E0000:error:0A00010B:SSL routines:ssl3_get_record:wrong version number:c:wsdepsopensslopensslsslrecordssl3_record.c:355:

Array of objects, find by index as string

I have my array of objects:

export const reminderButtonLabels = [
  {
    MOT: {
      label: 'Book garage',
      url: 'xxx',
    },
  },
  { Tax: { label: 'Tax vehicle', url: 'xxx' } },
  {
    Service: {
      label: 'Book garage',
      url: 'xxx',
    },
  },
  {
    Insurance: {
      label: 'Get quote',
      url: 'xxx',
    },
  },
];

In my component I am trying to lookup the array object data by reminderType: MOT, Tax, Service, Insurance. However, I get undefined, how can I get my array data by reminderType?

const ReminderRow: FunctionComponent<{
  reminder: reminder;
}> = ({ reminder }) => {
  console.log('reminder data', reminderButtonLabels.indexOf[reminder.reminderType]);