Category: javascript

I have the below code. It exists in a file that has the route “login”. From root, I have another route, “create-account”.
Whenever I click on this “a” element in Login.jsx to bring me to “create-account”, it takes me to “login/create-account” instead. I’ve also tried “./create-account” and “../create-account”.
Is there anything I can do? I can’t find any solutions.
I am using React-Router-Dom 6.9.0.

Login.jsx

import { useNavigate } from "react-router-dom";

export default function LoginForm() {
  const navigate = useNavigate();

  return (
    <div className="loginForm">

      <h1>Login</h1>
      <p>
        Don't have an account? 
        <a onClick={() => navigate("../create-account")}> Create an account </a>.
      </p>

And my App.jsx (which is serving as my Router)

import React, { useState, createContext } from 'react'
import { Routes, Route } from 'react-router-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import { useCookies } from 'react-cookie'

import Master from './Master.jsx'
import HomePage from './HomePage.jsx'
import DashCards from './DashCards.jsx'
// Authentication Pages
import LoginForm from './Auth/SignInForm.jsx'
//import CreateAccountForm from './Auth/CreateAccount.jsx'
//import LogoutPage from './Auth/SignOut.jsx'

export const AppContext = createContext()

export default function App() {

  const [cookies, setCookie, removeCookie] = useCookies(['token'])
  let [authenticated, setAuthenticated] = useState(cookies.token !== undefined)
  let [loggedInUser, setLoggedInUser] = useState([])
  let [users, setUsers] = useState([])

  return (
    <AppContext.Provider value={{ authenticated, setAuthenticated, loggedInUser, setLoggedInUser, setCookie, removeCookie, users, setUsers, }}>
      <Router className="react-stuff">
        <Routes>

          <Route path="/" element={<Master/>} >
            <Route index element={<HomePage />} />

            <Route path="login" element={<LoginForm />} />
            {/* <Route path="logout" element={<LogoutPage />} /> */}
            <Route path="create-account" element={<div>404: Page Under Construction</div>} />
          </Route>

        </Routes>
      </Router>
    </AppContext.Provider >
  )
}

I’m actually work with fullcalendar and in some scenarios my resource IDs may have a suffix equivalent to a specific category. Example: 1234-abc and 1234-bcd
In the case where the former is identical, the calendar is not subdivided into resources, even though getResources returns two elements.
How can I find out more about how fullcalendar handles resource IDs?You can see it here

The calendar should be divided into many resources, as the two ids are quite different. unless there’s a constraint I don’t know about???

the resizing works while smalling site but wont work on responsive view and i couldnt understand its html css js code but the image on site scale is all done with js can you guys help me please

 function scaleImage(img, ctx) {
    var canvas = ctx.canvas;
    var hRatio = canvas.width / img.width;
    var vRatio = canvas.height / img.height;
    var ratio = Math.max(hRatio, vRatio);
    var centerShift_x = (canvas.width - img.width * ratio) / 2;
    var centerShift_y = (canvas.height - img.height * ratio) / 2;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(
      img,
      0,
      0,
      img.width,
      img.height,
      centerShift_x,
      centerShift_y,
      img.width * ratio,
      img.height * ratio
    );
  }

Before anything, I know that I WANT to make my own database system, I already made one in the past that worked perfectly, I am simply looking to take on difficult challenges.

This Database system will be memory based.
I am looking for methods to read / write data the most efficient way and for that I made a couple of benchmarks, here are the code/results:

// 1. JSON array system | 84.289ms
let testDataJson = new Array(10000000).fill({ id: 1, username: "TestUsername", password: "MyPassword1234", email : "[email protected]" })
testDataJson.push({ username: "FoundUsername" }); // Insert matching element

console.time("dataJson");
console.log(testDataJson.find(elem => elem.username === "FoundUsername");
console.timeEnd("dataJson");

// 2. TEXT array system | 86.041ms
let testDataText = new Array(10000000).fill(`1|TestUsername|MyPassword1234|[email protected]`.split("|"));
testDataText.push(`|FoundUsername||`.split("|"));

console.time("dataText");
console.log(testDataText.find(elem => elem[1] === "FoundUsername");
console.timeEnd("dataText");

Now onto the problematic part, I decided for this version to work using NodeJS Workers to spread the load accross multiples threads.
For that I am spreading the array into x amount of workers and split the data array.
I am then loading in each worker memory its designated data block and wait 3 seconds to let everything settle. I then run the search, and the result is, quite bad, here is my code

// PROGRAM CODE | 56.698ms
function loadThreads()
{
    let dataChunks = fs.readFileSync("./db.txt", 'utf-8').split("n");
    let workersParts = chunkArrayInGroups(dataChunks, 2000000); // File is 10 000 000 Lines, resulting in 5 workers
    for (let workerPart of workersParts)
    {
        const worker = new Worker("./dbTester_thread.js", { workerData: workerPart.join("n") });
        threads.push(worker);
    }
}

function performSearch()
{
    console.time("threadTest");
    for (let thread of threads)
    {
        thread.on('message', (message) => {
            console.timeEnd("threadTest")
        });
        thread.postMessage("HelloMan")
    }

}

// THREAD CODE
const { parentPort, workerData } = require('node:worker_threads');

let data = workerData.split("n").map(line => line.split(","));
parentPort.on('message', (message) => 
{
  let found = data.find(line => line[1] === message);
  if (found) parentPort.postMessage("FOUND");
});

My first theory was that maybe parentPort.postMessage is poorly optimised and takes x amount of time to fully contact the main thread, but after trying an immediate postMessage after any message reception, the delay of an instant response was 0.444ms so I am out of explainations.

I am out of solutions besides what I placed up there

I’m currently working on selecting individual elements within the IFC model. I’m essentially using a ray-caster (SimpleRayCaster) to cast a ray onto the object, which is functioning well. I’m receiving a FragmentMesh as the identified object. How can I retrieve the expressId or global id for this entity that I’ve intersected, so that I can highlight it individually? Currently, I’m receiving an array of ids that appear to be all the entities of this type. I kindly inquire whether it’s possible to achieve this without using the highlighter.

So far I’ve made a ray-cast and receiving a fragment-mesh (holds a fragment), but without any individual ID.

I’m having a little trouble with using checkboxes as a separate component. I just have a simple child component that contains a template for a card with some data and also a checkbox, like a product list, each product card should have a checkbox and once selected the user should be able to delete it. Right now the way I’ve written the code, depending on how many items are in an array I’m looping through it and displaying cards, but if I check one checkbox, the second checkbox is also checked, even though I’m giving the input an individual id when rendered. Couldn’t find a proper solution anywhere so I’d appreciate any help! This is the child component : ProductCard.vue

<template>
    <div>
        <input :id="id" type="checkbox" :checked="modelValue" 
        @change="$emit('update:modelValue',$event.target.checked)">

    </div>
</template>

<script setup>
defineProps(['id','modelValue'])
</script>

and this is the parent component :

<template>
    <ProductCard v-for="item in array" :key="item.id" v-model="newsletter"/>
</template>

<script setup>
import ProductCard from '@/components/ProductCard.vue'
const array = [{},{}];
</script>

Thanks in advance!

I’m making a website with a mostly working shop. I can’t do somethings as of right now because I cannot pay for actual shopping functions and hosting.

I’ve been testing it outside of my actual website and when I tried to put it in the actual website its not showing.

I’m assuming the issue is to do with the CSS. I’ve tried altering the CSS and looking for where something may be hiding it in CSS but I cannot find the issue.

The shop system is mostly in Javascript. It’s supposed to look something like this: test
However it’s actually looking like this: result

I removed a good bit of parts that don’t really play into anything with the issue.

let openShopping = document.querySelector('.shopping');
let closeShopping = document.querySelector('.closeShopping');
let list = document.querySelector('.list');
let listCard = document.querySelector('.listCard');
let body = document.querySelector('body');
let total = document.querySelector('.total');
let quantity = document.querySelector('.quantity');

openShopping.addEventListener('click', () => {
  body.classList.add('active');
})
closeShopping.addEventListener('click', () => {
  body.classList.remove('active');
})

let products = [{
    id: 1,
    name: 'Bear My Teeth',
    image: 'Bare my teeth._20240226193326.png',
    price: 80.25
  },
  {
    id: 2,
    name: 'Krampus',
    image: 'krampus door project.jpg',
    price: 109.88
  },
  {
    id: 3,
    name: 'Pix',
    image: 'Untitled57_20240119222533.png',
    price: 60.45
  }
];
let listCards = [];

function initApp() {
  products.forEach((value, key) => {
    let newDiv = document.createElement('div');
    newDiv.classList.add('item');
    newDiv.innerHTML = `
            <img src="image/${value.image}">
            <div class="title">${value.name}</div>
            <div class="price">${value.price.toLocaleString()}</div>
            <button onclick="addToCard(${key})">Add To Cart</button>`;
    list.appendChild(newDiv);
  })
}
initApp();

function addToCard(key) {
  if (listCards[key] == null) {
    // copy product form list to list card
    listCards[key] = JSON.parse(JSON.stringify(products[key]));
    listCards[key].quantity = 1;
  }
  reloadCard();
}

function reloadCard() {
  listCard.innerHTML = '';
  let count = 0;
  let totalPrice = 0;
  listCards.forEach((value, key) => {
    totalPrice = totalPrice + value.price;
    count = count + value.quantity;
    if (value != null) {
      let newDiv = document.createElement('li');
      newDiv.innerHTML = `
                <div><img src="image/${value.image}"/></div>
                <div>${value.name}</div>
                <div>${value.price.toLocaleString()}</div>
                <div>
                    <button onclick="changeQuantity(${key}, ${value.quantity - 1})">-</button>
                    <div class="count">${value.quantity}</div>
                    <button onclick="changeQuantity(${key}, ${value.quantity + 1})">+</button>
                </div>`;
      listCard.appendChild(newDiv);
    }
  })
  total.innerText = totalPrice.toLocaleString();
  quantity.innerText = count;
}

function changeQuantity(key, quantity) {
  if (quantity == 0) {
    delete listCards[key];
  } else {
    listCards[key].quantity = quantity;
    listCards[key].price = quantity * products[key].price;
  }
  reloadCard();
}

h1 {
  font-size: 150px;
  margin-top: 100px;
  margin-bottom: 5px;
  /*   text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
    0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092;
  color: #fccaff; */
  text-shadow: 0 0 5px #ff0000, 0 0 15px #ff0000, 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px #ff0000, 0 0 10px #800000, 0 0 98px #ff0000;
  color: #280000;
  font-family: 'Guttural';
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  animation: blink 9s infinite;
  -webkit-animation: blink 9s infinite;
}

h2 {
  font-size: 80px;
  margin-top: 18px;
}

h3 {
  font-size: 30px;
}

h6 {
  font-size: 20px;
}

body {
  font-family: 'Glitch Goblin';
  color: red;
  text-align: center;
}

p {
  font-size: 40px;
}

.right-elements {
  text-align: right;
  padding-top: 20px;
  padding-right: 50px;
  width: auto;
  height: 50px;
  margin: 0 auto;
  justify-content: right;
  align-items: right;
  display: flex;
  border-radius: 10%;
}

.cart {
  padding-right: 12px;
  transition: transform .1s;
}

.cart:hover {
  transform: scale(1.2);
}

.user {
  transition: transform .1s;
}

.user:hover {
  transform: scale(1.2);
}


/*before i added new shop stuff leaving so i can go back if needbe
.product {
    box-shadow: 0px 7px 10px 5px red;
    border-radius: 20px;
}
.container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 25px;
}
.product img{
    padding: 10px;
}
.product_desc h7{
    font-size: 44px;
    padding-left: 10px;
    padding-right: 10px;
}
.product_desc p{
    font-size: 32px;
}

*/


/*shop*/

.container {
  width: 1000px;
  margin: auto;
  transition: 0.5s;
}

header {
  display: grid;
  grid-template-columns: 1fr 50px;
  margin-top: 50px;
}

header .shopping {
  position: relative;
  text-align: right;
}

header .shopping img {
  width: 40px;
}

header .shopping span {
  background: maroon;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: absolute;
  top: -5px;
  left: 98%;
  padding: 3px 10px;
}

.list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  row-gap: 20px;
  margin-top: 50px;
}

.list .item {
  text-align: center;
  padding: 20px;
  box-shadow: 0 50px 50px red;
  border-radius: 20px;
  letter-spacing: 1px;
}

.list .item img {
  width: 90%;
  height: 430px;
  object-fit: cover;
  border-radius: 16px;
}

.list .item .title {
  font-weight: 600;
}

.list .item .price {
  margin: 10px;
}

.list .item button {
  background-color: red;
  color: black;
  width: 100%;
  padding: 10px;
  border-radius: 16px;
}

.card {
  position: fixed;
  top: 0;
  left: 100%;
  width: 500px;
  background-color: black;
  height: 100vh;
  transition: 0.5s;
  border-radius: 10px 0px 0px 10px;
}

.active .card {
  left: calc(100% - 500px);
}

.active .container {
  transform: translateX(-200px);
}

.card h1 {
  color: red;
  font-weight: 100;
  margin: 0;
  padding: 0 20px;
  height: 80px;
  display: flex;
  align-items: center;
  border-radius: 10px;
}

.card .checkOut {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.card .checkOut div {
  background-color: red;
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
  border-radius: 0px 0px 0px 10px;
}

.card .checkOut div:nth-child(2) {
  background-color: maroon;
  color: black;
  border-radius: 0px;
}

.listCard li {
  display: grid;
  grid-template-columns: 100px repeat(3, 1fr);
  color: red;
  row-gap: 10px;
}

.listCard li div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.listCard li img {
  width: 90%;
}

.listCard li button {
  background-color: Red;
  border: none;
  border-radius: 5px;
}

.listCard .count {
  margin: 0 10px;
}


/* 3 images */

pictures1:nth-last-child(3):first-child {
  offset-distance: 17%;
}

pictures1:nth-last-child(2):nth-child(2) {
  offset-distance: 49%;
}

img:last-child:nth-child(3) {
  offset-distance: 81%;
}


/* 4 images */

.pictures1:nth-last-child(4):first-child {
  offset-distance: 10%;
}

.pictures1:nth-last-child(3):nth-child(2) {
  offset-distance: 35%;
}

.pictures1:nth-last-child(2):nth-child(3) {
  offset-distance: 65%;
}

.pictures1:last-child:nth-child(4) {
  offset-distance: 90%;
}


/* 5 images */

.pictures1:nth-last-child(5):first-child {
  offset-distance: 0%;
}

.pictures1:nth-last-child(4):nth-child(2) {
  offset-distance: 25%;
}

.pictures1:nth-last-child(3):nth-child(3) {
  offset-distance: 51%;
}

.pictures1:nth-last-child(2):nth-child(4) {
  offset-distance: 75%;
}

.pictures1:last-child:nth-child(5) {
  offset-distance: 100%;
}


/* effect for title*/


/* NAV BUTTON*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media only screen and (max-width: 600px) {
  .glowing-btn {
    font-size: 1em;
  }
}

.common-section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 10px 0;
}

.body-section {
  margin: 0px 100px 0px 100px;
}


/*SOCIALS*/

.social-icons {
  padding: 30px;
  text-align: center;
}

.social-icons a {
  color: red;
  line-height: 30px;
  font-size: 100px;
  margin: 0 1px;
  text-decoration: none;
}

.social-icons a i {
  line-height: 30px;
  font-size: 30px;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);
}

.social-icons a:hover i {
  box-shadow: 0px 0px 150px #000000;
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.5);
}


/*messaging*/

.form {
  width: 300px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-left: 150px;
  margin-top: 150px;
  position: relative;
  display: flex;
  justify-content: center;
  align-content: center;
}


/* Add styles to the form container */

.form-container {
  margin: 40px 150px 0 150px;
  padding: 10px;
  background: linear-gradient(black, grey);
  border-radius: 16px;
}


/* Full-width textarea */

.form-container textarea {
  font-family: "Glitch Goblin";
  color: red;
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: 2px solid red;
  border-radius: 8px;
  background: linear-gradient(grey, black);
  resize: none;
  min-height: 200px;
}


/* When the textarea gets focus, do something */

.form-container textarea:focus {
  background-color: #FF0004;
  outline: none;
}


/* Set a style for the submit/login button */

.form-container .btn {
  font-family: "Glitch Goblin";
  background-color: #FF0307;
  color: black;
  padding: 16px 20px;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  width: 100%;
  margin-bottom: 10px;
  opacity: 0.8;
}


/* Add a red background color to the cancel button */

.form-container .cancel {
  background-color: maroon;
}


/* Add some hover effects to buttons */

.form-container .btn:hover,
.open-button:hover {
  opacity: 1;
}

.container1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10vmin;
  overflow: hidden;
  transform: skew(5deg);
}

.container1 .card {
  flex: 1;
  transition: all 1s ease-in-out;
  height: 75vmin;
  position: relative;
}

.container1 .card .card__head {
  color: black;
  background: #ff0000;
  padding: 0.5em;
  transform: rotate(-90deg);
  transform-origin: 0% 0%;
  transition: all 0.5s ease-in-out;
  min-width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1em;
  white-space: nowrap;
}

.container1 .card:hover {
  flex-grow: 10;
}

.container1 .card:hover img {
  filter: grayscale(0);
}

.container1 .card:hover .card__head {
  text-align: center;
  top: calc(100% - 2em);
  color: red;
  background: rgba(0, 0, 0, 0.5);
  font-size: 2em;
  transform: rotate(0deg) skew(-5deg);
}

.container1 .card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 1s ease-in-out;
  filter: grayscale(100%);
}

.container1 .card:not(:nth-child(7)) {
  margin-right: 1em;
}

    <div class="right-elements">
      <a href="cart.html" class="cart">
        <img src="sitestyles/cart.png" width="46" height="47" alt="cart" />
      </a>
      <a href="profile.html" class="user">
        <img src="sitestyles/profile.png" width="49" height="45" alt="profile" />
      </a>
    </div>
    <p> Here is all the artworks I am currently selling! Check in frequently for new drops! </p>
  </div>
</div>
<div class="container">
  <header>
    <div class="shopping">
      <img src="image/cart.png" alt="">
      <span class="quantity">0</span>
    </div>
  </header>
  <div class="list"></div>
</div>
<div class="card">
  <h1>Cart</h1>
  <ul class="listCard"></ul>
  <div class="checkOut">
    <div class="total">0</div>
    <div class="closeShopping">Close</div>
  </div>
</div>

I am attempting to re-create a design system in SCSS/JavaScript that has the following requirements:

1. Data is displayed in a table
2. The table is horizontally-scrollable to always be contained in the viewport
3. The right-most table column is positioned as sticky and contains a hover-menu
4. The hover-menu uses absolute positioning and some JavaScript to break out of the sticky container and appears alongside the hovered menu button (based on a previous question).

After studying a multitude of tutorials and attempting various approaches I am about 99% complete, apart from a curious issue with Chrome (Firefox works perfectly).

Firefox (working fine)

Chrome (working until wrapped text occurs)

In my sticky table cell, when the cursor reaches a row that contains wrapped text, the menu suddenly appears in the wrong place (always 17 pixels too far right). Stranger still, on the first hover it appears correctly but then subsequently in the wrong place, as are all the following row menus:

I believe the issue is JavaScript-related rather than CSS, as the console appears to produce different values for the menu button’s left position (shown in video).

CodePen repro

https://codepen.io/evildr/pen/LYvxBMJ

I’d be very grateful if anyone can tell me what is actually causing the discrepancy to occur, and why Chrome/Firefox behave differently?

Based on other SO questions, I have already tried:

1. Removing margins/paddings
2. Ensured screen zoom is 100%
3. Tried a CSS-only approach (see question link above)
4. Forced scroll bars to appear all the time.

I build a side menu with similar functionality as the one in windows file explorer.

I’m wondering if there is a way to simplify the html so it doesn’t take super long to build menus.

Here’s an example of what I would like the html code to look like:

<menu link= "src/linktofile.html">
Layer 1.1
    <submenu link="...">
        layer 1.2
    </submenu>
    <submenu link="...">
        layer 2.2
    </submenu>
</menu>


<menu link= "src/link.html">
Layer 2.1
    <submenu link="...">
        layer2.2
    </submenu>
    <submenu link="...">
        layer2.2
        <submenu link = "...">
            layer 3.1
        </submenu>
    </submenu>
</menu>

Here is what my current menu code looks like:

    <div class="page" id='page'>
      <nav aria-label="School District">
        <ul class="treeview-navigation" role="tree" aria-label="School District">
          <li role="none">
            <a role="treeitem" href="#alarms" onclick="document.getElementById('frame').src='station:|slot:/.../AlarmConsole'" aria-current="page">
              <span class="label">Alarms</span>
            </a>
          </li>     

          <!--Start of Area A-->
          <li role="none">
            <a role="treeitem" aria-expanded="false" aria-owns="id-areaA-subtree" href="#areaA" onclick="document.getElementById('frame').src='file:^Px/.../floorA.px'">
              <span class="label">
                <span class="icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="10" viewBox="0 0 13 10">
                    <polygon points="2 1, 12 1, 7 9"></polygon>
                  </svg>
                </span>
                Area A
              </span>
            </a>
            <ul id="id-areaA-subtree" role="group" aria-label="areaA">
              <!--Start of schedule-->
              <li role="none">
                <a role="treeitem" href="#areaAsummary" onclick="document.getElementById('frame').src='file:^Px/.../AC_StatusScreen_A.px'">
                  <span class="label">Summary</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>

I understand that I’m missing some context in terms of js and css files, but i just need some tips on how to write better html code

I’m writing a Java Spring project using Timeleaf.

Here’s my MainController:

package com.amo.lab2.controller;

import com.amo.lab2.utils.CountingSort;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class MainController {

    @GetMapping("/form")
    public String form() {
        return "form";
    }

    @PostMapping("/processSorting")
    public String doSorting(@RequestParam("array") String array, Model model) {

        // some logic
        CountingSort countingSort = new CountingSort(intArray);
        model.addAttribute("countingSort", countingSort);
        return "chart";
    }
}

Here’s part of chart.html:

<body>
<div style="width: 80%; margin: auto;">
  <canvas id="myChart"></canvas>
</div>

<script>

  var xValues = *there should be value countingSort.xValues*;
  var yValues = *there should be value countingSort.yValues*;

  var ctx = document.getElementById('myChart').getContext('2d');
  // creating a dependency graph

</script>
</body>

Is there any way I can assign the variables xValues and yValues the values from countingSort that I passed through the model?

I tried to write

var xValues = [${countingSort.xValues}];
var yValues = [${countingSort.yValues}];

But it obviously didn’t work. I don’t even have options on how to do it.

I get an api ,when i fetch it on postman it getting response of an xml result.How to fetch that in my react code.The documentation says that it is soap version 2.0 and soapui doesn,t work correctly with our WSDL

I want to know how to fetch that data in my react app

I am currently developing a mobile application based on token authentication. Actually, I want to store tokens in the SQLite database of the user’s device after he or she registers or logs in to the app. I store them in devices’ SQLite database because I need to verify them when a user does some operation (for instance, when he or she creates a new group). Is it a good approach or is it an insecure approach? Please share your ideas. Thanks…

I have a JSON widget over here, where a user can input some JSON data and save it. I am able to add JSON data inside the editor and also edit the JSON data inside the editor. The editor will show a validation error if the syntax is incorrect. However if I add some values inside the editor and If I try to delete them by means of backspace or select and delete, I am unable to delete just the first character from the top. I should be able to delete all the characters from the editor. As shown in the picture. The last character can be any string value and doesn’t has to be only ‘{‘.

here’s my code

/* eslint-disable prettier/prettier */
import { isEqual } from 'lodash-es';
import * as React from 'react';
import AceEditor from 'react-ace';

import 'ace-builds/src-noconflict/ext-language_tools';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-iplastic';

interface StateProps {
  value: string;
}

interface PositionObject {
  row?: number;
  column?: number;
}

interface Selection {
  getCursor(): PositionObject;
}

export default class JsonWidget extends React.Component{
  public static defaultProps: Partial<JsonWidgetProps> = {
    isValid: true,
  };

  public state = {
    value: '',
  };

  private currentCursorPosition = {};
  private cursorPositionOnChange = null;
  private aceEditor: React.RefObject<AceEditor> = React.createRef();

  public componentDidMount() {
    this.aceEditor.current.editor.$blockScrolling = Infinity;
    this.aceEditor.current.editor.setOption('showPrintMargin', false);
  }

  public componentDidUpdate() {
    if (this.cursorPositionOnChange) {
      this.aceEditor.current.editor.moveCursorToPosition(this.cursorPositionOnChange);
    }

    if (typeof this.props.value === 'string' && this.props.value !== this.state.value) {
      this.setState({
        value: this.props.value,
      });
    } else if (typeof this.props.value !== 'string') {
      const value = JSON.stringify(this.props.value, null, 2);
      if (value !== this.state.value) {
        try {
          // We have to do the extra check here because there may be an instance after saving a widget where
          // object properties are reordered after being stringified but both state and props values are still equivalent
          if (!isEqual(JSON.parse(this.state.value), this.props.value)) {
            this.setState({
              value,
            });
          }
        } catch (e) {
          this.setState({
            value,
          });
        }
      }
    }
  }

  public render(): React.ReactNode {
    console.log('this.state.value', this.state.value);
    return (
      <div className="fc-json-widget">
        {!this.props.isValid && this.props.error.message && (
          <p className="fc-json-widget--error">{this.props.error.message}</p>
        )}
        <AceEditor
          mode="json"
          theme="iplastic"
          style={{
            width: '100%',
            height: '600px',
          }}
          readOnly={this.props.disabled}
          wrapEnabled
          debounceChangePeriod={100}
          value={this.state.value}
          onChange={this.onChangeHandle}
          onCursorChange={this.onCursorChange}
          ref={this.aceEditor}
          editorProps={{
            $blockScrolling: true,
            enableBasicAutocompletion: true,
            enableLiveAutocompletion: true,
          }}
          setOptions={{ useWorker: false }}
        />
      </div>
    );
  }

  private onChange(event: string) {
    this.cursorPositionOnChange = this.currentCursorPosition;
    this.props.onChange({
      id: this.props.id,
      value: event === '' ? undefined : event,
    });
  }

  private onChangeHandle = (event: string) => {
    try {
      if (
        (typeof this.props.value !== 'string' && !isEqual(JSON.parse(event), this.props.value)) ||
        (typeof this.props.value === 'string' && event !== this.props.value)
      ) {
        this.onChange(event);
      }
    } catch (e) {
      this.onChange(event);
    }
  };

  private onCursorChange = (selection: Selection) => {
    this.currentCursorPosition = selection.getCursor();
  };
}

When I push data to firebase it gives random string to a child, I want the push to be numbered or ordered

Values to be ordered when pushing in firebase.

I want to use the rules and google language in firebase to do this task.

How to make a javascript runtime?İs it difficult?

Source recommendation for making a javascript runtime.What languages should be used to do this?So why is bun using zig for this?And why aren’t there many resources and people working in this business?