How could I use links to set a JavaScript variable in the destination page?

I’m building a site with many pages containing the same type of content in the same areas. Rather than copy and paste a bunch of html pages, I created just one, mod.html. I use a script to replace each area on the page with the appropriate image or text based on an universal_id variable. Currently, changing the variable in the code changes the contents of the page.

I’d like to be able to create links on my navigation page nav.html, that can open mod.html and change the universal_id variable. I just don’t know how to do this. I know pages often add stuff to the end of the url that can be used later, but I don’t know how to implement it.

Thinking of getting universal_id by splitting window.location.href, I tried just adding another / followed by the intended id at the end of the link, but that of course messes up the file location.

A quick note: I’d prefer to only use vanilla HTML/JS, and I’m not using any servers or anything, just local html files.

Hydration Error in Next.js with Countdown Timer and Client-Side Dynamic Content

I’m encountering a “hydration failed” error in my Next.js app when trying to display a countdown timer. The error message states:

“Hydration failed because the server rendered HTML didn’t match the client.”

"use client";
import React, { useEffect, useState } from "react";
import Image from "next/image";
import ProfilPic from "../../asset/IMG_1878.jpg";

function calculateTimeLeft() {
  // Some calculation logic for the countdown
}

export default function Rsvp() {
  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());

  useEffect(() => {
    const interval = setInterval(() => {
      setTimeLeft(calculateTimeLeft());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      {/* Countdown Timer */}
      <div className="mt-6 text-xl font-semibold">
        <p className="text-lg">Wedding Countdown</p>
        <div className="flex justify-center space-x-4 mt-4">
          <div className="flex flex-col items-center">
            <span className="text-2xl">{timeLeft.days}</span>
            <span className="text-sm">Days</span>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-2xl">{timeLeft.hours}</span>
            <span className="text-sm">Hours</span>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-2xl">{timeLeft.minutes}</span>
            <span className="text-sm">Minutes</span>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-2xl">{timeLeft.seconds}</span>
            <span className="text-sm">Seconds</span>
          </div>
        </div>
      </div>
    </div>
  );
}

Problem:
When the page loads, it renders fine on the server, but once React hydrates on the client side, I get the following error:

Hydration failed because the server rendered HTML didn’t match the client.

How do I navigate to component

// Navigate from Login Screen to this screen does not load
const token = localStorage.getItem(‘token’)

token !== null ?
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
) : root.render(<BrowserRouter>
<Login />
</BrowserRouter>)

How to add image in excel using javascript

i make form website. in this form there are input text, date, radio button, and input file. The results of these inputs will be entered into Excel. But when i input file photo, the image is not included, only the file name. But when i change the code, the excel show warning
when i said yes is like this
enter image description here

in

const express = require('express');
const XLSX = require('xlsx');
const ExcelJS = require('exceljs');
const fs = require('fs');
const multer = require('multer');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();
const PORT = 3000;

// Middleware untuk parsing JSON dan URL-encoded
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// Penanganan favicon
const faviconPath = path.join(__dirname, 'public', 'favicon.ico');
if (!fs.existsSync(faviconPath)) {
    fs.writeFileSync(faviconPath, ''); // Membuat file favicon kosong jika tidak ada
}
app.use('/favicon.ico', express.static(faviconPath));

// Membuat folder respons jika belum ada
if (!fs.existsSync('respons')) {
    fs.mkdirSync('respons');
}

// Middleware untuk menyajikan file statis dari folder `uploads`
app.use('/temp', express.static(path.join(__dirname, 'temp')));

// Konfigurasi Multer
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'temp/'); // File sementara disimpan di folder temp/
    },
    filename: (req, file, cb) => {
        const uniqueName = `${Date.now()}-${file.originalname}`;
        cb(null, uniqueName);
    }
});

const upload = multer({
    storage,
    fileFilter: (req, file, cb) => {
        const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];
        if (allowedTypes.includes(file.mimetype)) {
            cb(null, true);
        } else {
            cb(new Error('Format file tidak didukung (JPEG, PNG, JPG saja).'));
        }
    }
});

// Middleware untuk melayani file statis
app.use(express.static('public'));
app.use('/temp', express.static('temp')); // Menyajikan file dari folder uploads


// Endpoint untuk form
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'templates', 'index.html'));
});

// Function untuk memindahkan file dan menyisipkan gambar di Excel
const insertImagesToExcel = async (files, subFolderName, columnLetter, worksheet, workbook, folderPath) => {
    if (files && files.length > 0) {
        const subFolderPath = path.join(folderPath, subFolderName);
        if (!fs.existsSync(subFolderPath)) {
            fs.mkdirSync(subFolderPath, { recursive: true });
        }

        // Menyisipkan gambar ke Excel
        for (let i = 0; i < files.length && i < 5; i++) {
            const file = files[i];
            const newPath = path.join(subFolderPath, file.originalname);
            fs.renameSync(file.path, newPath);

            // Mengonversi gambar menjadi buffer
            const imageBuffer = fs.readFileSync(newPath);

            // Menambahkan gambar ke workbook
            const imageId = workbook.addImage({
                buffer: imageBuffer,
                extension: file.mimetype.split('/')[1] // Format gambar berdasarkan mimetype
            });

            // Menentukan posisi gambar di worksheet
            const colIndex = columnLetter.charCodeAt(0) - 65; // Kolom dihitung dari huruf
            worksheet.addImage(imageId, {
                tl: { col: colIndex, row: i }, // Posisi gambar
                ext: { width: 100, height: 100 } // Ukuran gambar
            });

            console.log(`Gambar disisipkan: ${file.originalname} ke kolom ${columnLetter}, baris ${i + 1}`);
        }
    }
};

// Endpoint POST untuk /submit
app.post('/submit', upload.fields([
    { name: 'photos_whetherdoorisproperlygettingclosedornot', maxCount: 5 },
    { name: 'photos_door_filter_replaced_or_not', maxCount: 5 },
    { name: 'photos_door_filter_is_replaced', maxCount: 5 },
    { name: 'photos_properly_clean_up_the_rack_including_routing_of_cables', maxCount: 5 }
]), async (req, res) => {
    try {
        const {
            pic, date, sitecategorytype, siteid, latlong, address, area, region, rack_type,
            value_racktype_makeorelse, punchpointclerancesupportrequiredbyioh_racktype_makeorelse,
            punchpointclearancebymsh_racktype_makeorelse, whether_door_is_properly_getting_closed_or_not,
            value_whetherdoorisproperlygettingclosedornot, punchpointclerancesupportrequiredbyioh_whetherdoorisproperlygettingclosedornot,
            punchpointclearancebymsh_whetherdoorisproperlygettingclosedornot,
            grounding_or_rack_is_proper, value_grounding_or_rack_is_proper, 
            punchpointclerancesupportrequiredbyioh_grounding_or_rack_is_proper, 
            punchpointclearancebymsh_grounding_or_rack_is_proper,
            door_filter_replaced_or_not, value_door_filter_replaced_or_not, 
            punchpointclerancesupportrequiredbyioh_door_filter_replaced_or_not,
            punchpointclearancebymsh_door_filter_replaced_or_not,
            any_water_seepage_indication, value_any_water_seepage_indication,
            punchpointclerancesupportrequiredbyioh_any_water_seepage_indication,
            punchpointclearancebymsh_any_water_seepage_indication,
            any_other_opening_is_visible, value_any_other_opening_is_visible,
            punchpointclerancesupportrequiredbyioh_any_other_opening_is_visible,
            punchpointclearancebymsh_any_other_opening_is_visible,
            lock_and_key_is_working, value_lock_and_key_is_working, 
            punchpointclerancesupportrequiredbyioh_lock_and_key_is_working,
            punchpointclearancebymsh_lock_and_key_is_working,
            door_filter_is_replaced, value_door_filter_is_replaced, 
            punchpointclerancesupportrequiredbyioh_door_filter_is_replaced,
            punchpointclearancebymsh_door_filter_is_replaced,
            cooling_fan_is_working_or_not, value_cooling_fan_is_working_or_not,
            punchpointclerancesupportrequiredbyioh_cooling_fan_is_working_or_not,
            punchpointclearancebymsh_cooling_fan_is_working_or_not,
            properly_clean_up_the_rack_including_routing_of_cables, 
            value_properly_clean_up_the_rack_including_routing_of_cables,
            punchpointclerancesupportrequiredbyioh_properly_clean_up_the_rack_including_routing_of_cables,
            punchpointclearancebymsh_properly_clean_up_the_rack_including_routing_of_cables
        } = req.body;

        console.log('Files:', req.files);
        console.log('Body:', req.body);

        // Membuat nama folder baru
        const folderName = `${pic}_${siteid}_${date}`;
        const folderPath = path.join(__dirname, 'respons', folderName);

        // Membuat folder jika belum ada
        if (!fs.existsSync(folderPath)) {
            fs.mkdirSync(folderPath, { recursive: true });
        }

        // Memproses data ke Excel dan menyimpannya
        const filePath = 'Audit_Site.xlsx';
        if (fs.existsSync(filePath)) {
            const workbook = new ExcelJS.Workbook();
            await workbook.xlsx.readFile(filePath);

            // Akses sheet pertama
            const worksheet = workbook.getWorksheet('Sheet1');
            let worksheetSheet2 = workbook.getWorksheet('Sheet2');
            if (!worksheetSheet2) {
                worksheetSheet2 = workbook.addWorksheet('Sheet2');
            }

            // Menyisipkan gambar pada masing-masing foto
            await insertImagesToExcel(req.files['photos_whetherdoorisproperlygettingclosedornot'], 'photos_whetherdoorisproperlygettingclosedornot', 'A', worksheetSheet2, workbook, folderPath);
            await insertImagesToExcel(req.files['photos_door_filter_replaced_or_not'], 'photos_door_filter_replaced_or_not', 'B', worksheetSheet2, workbook, folderPath);
            await insertImagesToExcel(req.files['photos_door_filter_is_replaced'], 'photos_door_filter_is_replaced', 'C', worksheetSheet2, workbook, folderPath);
            await insertImagesToExcel(req.files['photos_properly_clean_up_the_rack_including_routing_of_cables'], 'photos_properly_clean_up_the_rack_including_routing_of_cables', 'D', worksheetSheet2, workbook, folderPath);

            worksheet.getCell('B2').value = pic;
            worksheet.getCell('A5').value = date;

            worksheet.getCell('E5').value = sitecategorytype;
            worksheet.getCell('E6').value = siteid;
            worksheet.getCell('E7').value = latlong;
            worksheet.getCell('E8').value = address;
            worksheet.getCell('E9').value = area;
            worksheet.getCell('E10').value = region;

            worksheet.getCell('E11').value = value_racktype_makeorelse;
            worksheet.getCell('F11').value = rack_type;
            worksheet.getCell('H11').value = punchpointclerancesupportrequiredbyioh_racktype_makeorelse;
            worksheet.getCell('I11').value = punchpointclearancebymsh_racktype_makeorelse;

            worksheet.getCell('E12').value = value_whetherdoorisproperlygettingclosedornot;
            worksheet.getCell('F12').value = whether_door_is_properly_getting_closed_or_not;
            worksheet.getCell('H12').value = punchpointclerancesupportrequiredbyioh_whetherdoorisproperlygettingclosedornot;
            worksheet.getCell('I12').value = punchpointclearancebymsh_whetherdoorisproperlygettingclosedornot;

            worksheet.getCell('E13').value = value_grounding_or_rack_is_proper;
            worksheet.getCell('F13').value = grounding_or_rack_is_proper;
            worksheet.getCell('H13').value = punchpointclerancesupportrequiredbyioh_grounding_or_rack_is_proper;
            worksheet.getCell('I13').value = punchpointclearancebymsh_grounding_or_rack_is_proper;

            worksheet.getCell('E14').value = value_door_filter_replaced_or_not;
            worksheet.getCell('F14').value = door_filter_replaced_or_not;
            worksheet.getCell('H14').value = punchpointclerancesupportrequiredbyioh_door_filter_replaced_or_not;
            worksheet.getCell('I14').value = punchpointclearancebymsh_door_filter_replaced_or_not;

            worksheet.getCell('E15').value = value_any_water_seepage_indication;
            worksheet.getCell('F15').value = any_water_seepage_indication;
            worksheet.getCell('H15').value = punchpointclerancesupportrequiredbyioh_any_water_seepage_indication;
            worksheet.getCell('I15').value = punchpointclearancebymsh_any_water_seepage_indication;

            worksheet.getCell('E16').value = value_any_other_opening_is_visible;
            worksheet.getCell('F16').value = any_other_opening_is_visible;
            worksheet.getCell('H16').value = punchpointclerancesupportrequiredbyioh_any_other_opening_is_visible;
            worksheet.getCell('I16').value = punchpointclearancebymsh_any_other_opening_is_visible;

            worksheet.getCell('E17').value = value_lock_and_key_is_working;
            worksheet.getCell('F17').value = lock_and_key_is_working;
            worksheet.getCell('H17').value = punchpointclerancesupportrequiredbyioh_lock_and_key_is_working;
            worksheet.getCell('I17').value = punchpointclearancebymsh_lock_and_key_is_working;

            worksheet.getCell('E18').value = value_door_filter_is_replaced;
            worksheet.getCell('F18').value = door_filter_is_replaced;
            worksheet.getCell('H18').value = punchpointclerancesupportrequiredbyioh_door_filter_is_replaced;
            worksheet.getCell('I18').value = punchpointclearancebymsh_door_filter_is_replaced;

            worksheet.getCell('E19').value = value_cooling_fan_is_working_or_not;
            worksheet.getCell('F19').value = cooling_fan_is_working_or_not;
            worksheet.getCell('H19').value = punchpointclerancesupportrequiredbyioh_cooling_fan_is_working_or_not;
            worksheet.getCell('I19').value = punchpointclearancebymsh_cooling_fan_is_working_or_not;

            worksheet.getCell('E20').value = value_properly_clean_up_the_rack_including_routing_of_cables;
            worksheet.getCell('F20').value = properly_clean_up_the_rack_including_routing_of_cables;
            worksheet.getCell('H20').value = punchpointclerancesupportrequiredbyioh_properly_clean_up_the_rack_including_routing_of_cables;
            worksheet.getCell('I20').value = punchpointclearancebymsh_properly_clean_up_the_rack_including_routing_of_cables;

            // Simpan workbook ke Excel
            const newExcelPath = path.join(folderPath, `${folderName}.xlsx`);
            await workbook.xlsx.writeFile(newExcelPath);
            console.log(`Data Excel disimpan di ${newExcelPath}`);
            return res.json({ message: `Data dan file berhasil disimpan di folder: ${folderName}` });
        } else {
            return res.status(400).send('File Excel template tidak ditemukan.');
        }
    } catch (error) {
        console.error('Error:', error);
        res.status(500).send({ message: 'Terjadi kesalahan server.' });
    }
});

// Menjalankan server
app.listen(PORT, () => {
    console.log(`Server berjalan di http://localhost:${PORT}`);
});

can you guys help me. thank you

How to validate text length in Yup schema while ignoring HTML tags?

I am working on a project where I use the react-quill package in the frontend for a rich text editor. The entered content includes HTML tags, and I need to validate its plain text length in the backend using a Yup schema.

The frontend allows access to the document object, making it easier to strip HTML tags using libraries or browser APIs. However, on the backend, I don’t have access to the document object, so I need a solution that avoids using additional libraries to count only the plain text (ignoring HTML tags).

Here is the helper function I wrote to strip HTML tags and decode HTML entities:

  if (!html) return '';

  // Remove script and style tags first
  html = html
    .replace(/<script[^>]*>([sS]*?)</script>/gi, '')
    .replace(/<style[^>]*>([sS]*?)</style>/gi, '');

  // Remove all remaining HTML tags
  const textWithoutTags = html.replace(/</?[^>]+(>|$)/g, '');

  // Decode HTML entities
  const decodedText = textWithoutTags
    .replace(/&nbsp;/g, ' ')
    .replace(/&amp;/g, '&')
    .replace(/&lt;/g, '<')
    .replace(/&gt;/g, '>')
    .replace(/&quot;/g, '"')
    .replace(/&#039;/g, "'");

  return decodedText.trim(); // Trim any leading/trailing spaces
}
Description: Yup.string().test(
  'max-length',
  'Description cannot exceed 1000 characters',
  function (value) {
    const plainText = stripHtmlTags(value || '');
    return plainText.length <= 1000;
  }
),

This works well for the backend, but I am wondering if there is a more efficient way to handle this without any third-party library.

Astrojs – Google Map embed

I want to embed google map into my astro app.

i found this site give a tutorial and follow the instruction.

However I got errors:

GET https://maps.googleapis.com/maps/api/mapsjs/gen_204?csp_test=true net::ERR_BLOCKED_BY_CLIENT

Uncaught (in promise) InvalidValueError: initMap is not a function

I am not sure how to debug this.

below are my code in astro:

<Layout>
<div id="map"></div>
</Layout>
<script>
  function initMap() {
    // Set the coordinates for the center of the map
    var center = { lat: 37.7749, lng: -122.4194 };

    // Create a new Google Maps object
    var map = new google.maps.Map(document.getElementById("map"), {
      center: center,
      zoom: 13,
    });

    // Add a marker to the map
    var marker = new google.maps.Marker({
      position: center,
      map: map,
    });
  }
</script>
<script
  async
  defer
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDk0w5DoyG684rkQ3pU1zXJTboceFPM2LY&callback=initMap"
></script>

<style>
  /* Set the height of the map container */
  #map {
    height: 400px;
  }
</style>

which layout tag is just some header and footer stuffs. How can I resolve this?

Passing props not working on my YouTube clone app

I am trying to change the feed of my YouTube clone according to the text the user pressed in sidebar. but it kept on showing the error Uncaught TypeError: updateCtg is not a function at onClick. plz help here are the Homepage.jsx and Sidebar.jsx.

const HomePage = () => {
  const [ctg, setctg] = useState(0); // Default category: Home

  return (
    <>
     <Sidebar categories={ctg} updateCtg={setctg} />
      <Feed categories={ctg} />
    </>
  );
};
export const Sidebar = ({ isVisible, categories, updateCtg }) => {
  return (
    <section className={`containerSidebar ${isVisible ? "visible" : "hidden"}`}>
      <div className="sidebar">
        <div className="sub-first">
          <ul>
            <div
              className={`sidelink ${categories === 0 ? "active" : ""}`}
              onClick={() => updateCtg(0)}
            >
              <img src={home} alt="home logo" />
              <p>Home Page</p>
            </div>

i tried all i can i am a beginner TvT

Jquery Range Slider Show and Hide Div

I am Trying to Show() and Hide() Divs ..But this way only works escalating and not backwards. heres the code im fiddling with.

    body {
        background-color: #6A6A6A;
    }

    html,
    body {
        height: 100%;
    }

    .box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    #slider1 {
        position: absolute;
        top: 25px;
        left: 1%;
        height: 6vh;
        width: 175px;
        z-index: 9999;
    }

    .ui-slider .ui-slider-horizontal {
        height: .6em;
    }

    .ui-slider .ui-slider-handle {
        position: absolute;
        z-index: 2;
        width: 25px !important;
        height: 10vh !important;
        cursor: default;
    }

    .div1,
    .div2,
    .div3,
    .div4,
    .div5 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
    }

    .div1 {
        background-color: #16168f;
    }

    .div2 {
        background-color: #268226;
    }

    .div3 {
        background-color: #ffbb00;
    }

    .div4 {
        background-color: #565656;
    }

    .div5 {
        background-color: #66668f;
    }

<div class="box">
    <div id="slider1"></div>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
</div>

<link rel="stylesheet" href="https://tim-school.com/codepen/jquery-slider/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<script>
    $(function () {
        $("#slider1").slider({
            range: "min",
            min: 0,
            max: 5,
            value: 0,
            slide: function (event, ui) {
                $(".div" + ui.value).show();
                $(".div" + ui.value - 1).hide();
            }
        });
    });
</script>

Im trying to Change the Div with the range Slider and HIDE any other Div I tried ui.value minus 1 Hide() but it doesn’t work. So my Question is How to Change a DIV with a Range Slider Forward and Backwards?

How to insert image to google forms using apps script?

I have a google forms with image upload. I captured onSubmit event value and process it to make a new google sheets. I have difficulties in inserting the image that is stored on google drive to the newly created sheet. My current script to insert the image looks like this:

    function insertImage(sheet) {

  const urlRaw = sheet.getRange('C42').getValue();
  if (!urlRaw) {
    console.log('No URL provided in cell C42.');
    return;
  }

  // Extract the file ID from the URL
  let fileId;
  if (urlRaw.includes("open?id=")) {
    fileId = urlRaw.split("open?id=")[1].split("&")[0];
  } else if (urlRaw.includes("/d/")) {
    fileId = urlRaw.split("/d/")[1].split("/")[0];
  } else {
    console.error("Invalid Google Drive URL format.");
    return;
  }

  const imgRange = sheet.getRange('C42')
  const imgUrl = DriveApp.getFileById(fileId).getUrl()
  sheet.insertImage(imgUrl,imgRange.getColumn(), imgRange.getRow())

}

How can I implement collision detection in a Pac-Man game using HTML, CSS, and JavaScript?

I’m building a simple Pac-Man game using HTML, CSS, and JavaScript. The game features Pac-Man navigating a maze, collecting points (dots), and avoiding ghosts. Pac-Man moves using arrow keys, and the game updates the score when dots are collected.

I’m having trouble implementing collision detection for:

1)Detecting when Pac-Man touches a ghost (game over).
2)Detecting when Pac-Man collects a dot (score update and dot disappears).

1.For dot collision detection:
I attempted to check if Pac-Man’s position matches the dot’s position using getBoundingClientRect():

const pacmanRect = pacman.getBoundingClientRect();
const dotRect = document.getElementById('dot1').getBoundingClientRect();

if (
  pacmanRect.left < dotRect.right &&
  pacmanRect.right > dotRect.left &&
  pacmanRect.top < dotRect.bottom &&
  pacmanRect.bottom > dotRect.top
) {
  console.log('Dot collected!');
}

However, this only works sometimes and isn’t consistent when Pac-Man moves quickly.

2.For ghost collision detection:
I tried a similar approach, but the game doesn’t detect collisions reliably.

3.Additional Attempts:

Using setInterval() to check for collisions at regular intervals.
Reducing the size of the bounding boxes for better accuracy.

Expected Behavior:
1.When Pac-Man collides with a dot, the dot should disappear, and the score should update.
2.When Pac-Man collides with a ghost, the game should display a “Game Over” message.

Giving the post to recaptcha api Axios

I’m working with axios and I’m trying to post to “https://footlocker.queue-it.net/challengeapi/verify” with the following data

        const data = {
            challengeDetails: challengeDetails,  // Captcha Challenge
            challengeType: "recaptcha-invisible", // CAPTCHA Type (recaptcha-invisible)
            customerId: `${cValue}`,            // customerId 
            eventId: `${eValue}`,               // eventId 
            sessionId: sessionId,                // sessionId from challenge
            solution: captchaResponse            // get by 2captcha

const headers = {
            "Accept": "application/json, text/plain, */*",
            "Content-Type": "application/json",
            "X-Requested-With": "XMLHttpRequest",
            "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36"
}
         

But I keep getting status 400, the url where i get that proccess is https://footlocker.queue-it.net/?c=footlocker&e=cxcdtest02

Can I use cookies for a standard HTML file?

I was trying to use cookies to store transactions, but it is in a file html formate, and it prevents me from using cookies.

I tried to pass a cookie to remember the user’s login details, here is the code for collecting the cookie from my database.

const expiresIn24Hours = new Date(Date.now() + 24 * 60 * 60 * 1000).toUTCString(); 

        document.cookie = `uuid=${userId}; expires=${expiresIn24Hours}; path=/; `;
        document.cookie = `firstName=${firstName}; expires=${expiresIn24Hours}; path=/; `;

When I used an HTML file this exact code and console.log the cookie, it shows… nothing.

However, When I run it in liveserver for VS Code, the cookie displays properly:
uuid=[MyUUID]; firstName=[MyFirstName]

Therefore, I am just asking if a cookie can be implemented in a .html file, or do you need to have a server for it.

Altering CKEEditor Version 4 to include Upload Image

The library for CKEDITOR in flask is only updated to version 4. Which i believe is fine for my purposes.

The desired result is to add the image2 option to the CKEDITOR. Below is my current Javascript but i am not seeing the desired result.

<div class="mb-3">
<label for="content" class="form-label">Content</label>
{{ form.content(class="form-control", id="content") }}
</div>

<script>
CKEDITOR.replace('editor', {
    filebrowserImageUploadUrl: '/upload',
    extraPlugins: 'uploadimage,image2',
    removeDialogTabs: 'image:advanced;link:advanced',
    height: 300,  // Adjust the height of the editor
    toolbar: [
        { name: 'document', items: ['Source'] },  // Add source editing
        { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo'] },
        { name: 'styles', items: ['Format'] },
        { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
        { name: 'insert', items: ['Image', 'Table', 'HorizontalRule'] }
    ]
});


// Sync CKEditor content with the hidden textarea before form submission
const form = document.querySelector('form');
form.addEventListener('submit', function () {
    for (const instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].updateElement();
    }
});

Anticipated comments:

  1. label = content but replace = editor.

    a. not sure why but when change the replace = content i do not see the input box at all.

Formatting hovertext in vscode in repo with both ts & proptypes

I have a repo using both typescript and proptypes (it started with proptypes and we only recently added ts so I don’t want to remove proptypes as the runtime checking is useful), and the hover text on components shows the typescript type and then the proptypes, which is a bit redundant.
screenshot

I was wondering if

  • there is a way to have only one or the other, preferably typescript.
  • there is a way to add comments to individual params.

I have no idea about potentially removing either proptypes or typescript, but as for the individual comments, I’ve tried adding JSDoc /** comment */ before individual props in both the typescript type (I also tried interface) and the proptypes,

type Props = {
  children: React.ReactNode;
  /**  comment */
  customTestId?: string;
}

but they don’t show up. I can’t even get a comment above Props to show up on the hover text. I’ve only been able to get a component comment to show up using the below, but the text shows up at the bottom of the hovertext and the params/props don’t show up in any detail.

/**
 * Common_InputField is a wrapper component for input fields that includes:
 * - Label with optional icon and tooltip.
 * - Error handling display.
 * - Loading state.
 * @param {Props}
 * @type {React.FC<Props>}
 * @returns {React.ReactElement}
 */

I know I could probably get it to show up with JSDocs if I did the params individually, but I don’t want to have to make and maintain a THIRD set of props just for JSDocs.

Ideally I’d like to hover over a component and have the hover text show

  • Component description first
  • Then component type with props, including any comments on individual params

“Cards in my flip card game flip back even when they match, despite correct data-type values and console logs. How can I fix this?”

I am building a flip card game where players match pairs of cards by flipping them over. Each card has a data-type attribute to identify its type. When two cards are flipped, my JavaScript code compares their data-type values to determine if they match.

If the cards match, they should stay flipped. If they don’t match, they should flip back after a short delay. However, the behavior isn’t consistent. Sometimes matched cards flip back, and other times mismatched cards remain flipped.

I’ve tried debugging by adding console.log statements to verify the data-type values, and they match correctly. I’ve also experimented with setTimeout for the flip-back animation but haven’t been able to fix the issue.

I tried comparing the data-type attributes of the two flipped cards using an if statement in my checkMatch function. I expected the cards with matching data-type values to stay flipped and mismatched cards to flip back after a delay.

However, in practice, even when the data-type values match, the cards sometimes flip back. I’ve added console.log statements to verify the data-type values, and they appear correct. I also tried using setTimeout for the flip-back animation, but it didn’t fix the issue.

I expected the game to correctly detect matches and mismatches every time, but the behavior is inconsistent.