Blancer.com Tutorials and projects

I would like to use some JS to perform a function if a checkbox is checked. However, my input field checkbox keeps returning false when it’s checked and I can’t understand why.

Here’s the HTML:

<input id="option_service_desk" type="checkbox"/>

Here’s the JS:

if (document.getElementById('option_service_desk').checked)
 { 
 console.log('service 247 checked');
} else {
 console.log("service 247 not checked");
}

I’ve tried checking in the console and indeed, it’s returning as false, even though it is checked on the screen.

I have this javascript regex:

let output = 'This role involves:n   - Steering the direction of universal expansion and resource allocation.';
console.log('before:', JSON.stringify(output));

output = output.replace(/[^a-zA-Z0-9 _-srnt]/gi, '');
console.log('after:', JSON.stringify(output));
// This role involvesn   - Steering the direction of universal expansion and resource allocation

It doesn’t leave in there n, but replaces it with just the n

Secondly, I would like to replace the - Steering to just one space, then the minus sign and then another space and then the word - Steering. But it seems that it’s not just a normal space. Or how do I debug that best?

I’m working with SvelteKit and Firebase to build a website. There’s a document in my Firestore that only logged in users can accces, I already set a rule for that. The problem that I’m facing is that the load function which fetchs data from the database is sending back a permission denied error as if the user is not logged in. The load function seems to run before the auth state if changed.

I tried using a simple store that stores the authenticated user to check if the user is signed in, but unfortunately the getDoc function can’t be awaited

// $lib/stores/authStore.js
import { writable } from 'svelte/store';
import { auth } from '$lib/firebase';
import { onAuthStateChanged } from 'firebase/auth';
export function authStore(auth) {
    let unsubscribe;

    const { subscribe } = writable(auth.currentUser, (set) => {
        unsubscribe = onAuthStateChanged(auth, (user) => {
            set(user);
    });
    return () => unsubscribe;
    });

    return {
    subscribe
    };
}

// +page.server.js
import { authStore } from '$lib/stores/authStore.js';
import { doc, getDoc } from 'firebase/firestore';

export async function load() {
    let protectedDoc;
    authStore.subscribe((user) => {
        if (user) {
            const docRef = doc(db, 'myCollection/myDoc')
        await getDoc(docRef).then((snapshot) => {
                protectedDoc = snapshot.data();
            });
            return { protectedDoc }
        };
    })
}

I tried something similar to a few discussions, but had no success
SvelteKit async function load not working or Firebase onAuthStateChanged cannot be made blocking

Firebase split second authentication confirmation is messing with Sveltekit pages due to Firestore rules

Sveltekit: Wait for resolve in +layout.ts before load() in +page.ts

How should I write this load function in order to the read the firebase document only after user auth state is not null?

So, I’m collecting cellphone numbers from a textarea: the values are held in state.
I will validate them and/or add a country prefix based on whether or not they already have the prefix. For each validated number I want to store it in an array.
After I submit the data in the array in a fetch call, I want the contents of the array to be reset to an empty array to get it ready to receive a fresh batch of numbers.

I have decomposed the problem into two functions. One for processing the numbers and the other for making the fetch call

.
.
.
const [phoneNos, setPhoneNos] = useState('') // values from the textbox
const [validatedPhoneNos, setValidatedPhoneNos] = useState([]); // array to hold validated numbers

function addPhoneNosToDB () {
        fetch(`end_point`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            mode: 'cors',
            body: JSON.stringify({
                somefield: fieldValue,
                list: validatedPhoneNos
            }),
        }).then(r => {
            toast.success('Your list was added')
            setPhoneNos('');
            setValidatedPhoneNos([])    // ***
        }).catch(err => toast.warning(err)) 
    }

//function to validate and format numbers
function procPhoneNos () {
        if (phoneNos) {
            const countryCodePattern = /^(?:+?234|0)?(7d{8})$/;
            const phoneNumberPattern = /^(0|+?234)(d{10})$/;

            let list = phoneNos.split(',').map(phoneno => phoneno.trim());

            list.forEach(phoneNumber => {
                if (phoneNumber.match(countryCodePattern)) {
                    setValidatedPhoneNos(prev => [...prev, phoneNumber])
                } else if(phoneNumber.match(phoneNumberPattern)) {
                    setValidatedPhoneNos(prev => [...prev, phoneNumber.replace(phoneNumberPattern, '234$2')]);
                } else {
                    toast.warning("One or more phone numbers not properly formatted")
                    return
                }
            });
            
                        //call the function to submit formatted numbers to db
            addPhoneNosToDB()
        } else toast.warning("you need to enter at least one phone number")
    }

Testing this out, I get an empty array whenever addPhoneNosToDB was called. If I removed line *** I do get the numbers in the array but mostyly only after a second request. Also, all the previous phone numbers get retained in the array. How do I fix it so that the array elements only get cleared after a successful fetch request? Preferably without useEffect except if necessary.
Thanks

In Javascript, I want to read from a URL into a string. I rearranged the answer from a previous SO answer (28828029), and it didn’t work. Below is my code.
When run, it shows the alert at 3.
Then the alert at 16 shows readyState=1 and status=0.
Then it shows the alert at 5.
Then [sic] the alert at 18 shows readyState=4 and status still=0, instead of the desired 200.
No other alerts were shown.
I thought that maybe the original URL had disappeared in the interim, so I also tried it with https://finance.yahoo.com/quote/SPY, but got the same result.

How can I debug this further?

<script>
// rearranged from SO question 28828029 html-read-txt-file-from-url-location-in-javascript
alert("at 3");
    var outer_text = getText();
alert("at 5");
    var lot = outer_text.length;
alert("at 7: lot=" + lot);
outer_text = outer_text.split('n');    
alert("at 9" + outer_text);

function getText()
{   // read text from URL location
    var request = new XMLHttpRequest();
    request.open('GET', 'http://www.puzzlers.org/pub/wordlists/pocket.txt', true);
    request.send(null);
    alert("at 16: request.readyState="+request.readyState+", request.status="+request.status);
    request.onreadystatechange = function () 
    {   alert("at 18: request.readyState="+request.readyState+", request.status="+request.status);
        if (request.readyState === 4 && request.status === 200) 
        {   var type = request.getResponseHeader('Content-Type');
            alert("at 21: type = " + type + "request.responseText="+request.responseText);
            if (type.indexOf("text") !== 1) 
            {   return request.responseText;
}   }   }   }
</script>
</body></html>```

I am trying to place 2 noUiSliders to the right of 3 other sliders since having multiple sliders takes up too much vertical space. My HTML page has 4 main tabs, and this all within a single tab, where I have one main collapsible header (Filters), which has further collapsible headers based on the type of filter ( Filters -> Phenotypic Data Filters)

I have 5 sliders in the Phenotypic Data Filters header which has an additional div called .slidercontainer because I wanted to restrict the width of the slider. Additionally each input header is linked to the Help tab which is what the href and onclick() functions are for.

I have tried setting up 2 different div for the slider (one with 3 and one with 2), with the purpose of trying to move the div with 2 sliders to the right, but I tried many ways and nothing seems to have worked.

My code is messy so please excuse that and it is below for reference:

Relevant CSS:

.collapsible {
            background-color: #777;
            color: white;
            cursor: pointer;
            padding: 12px;
            width: auto;
            border: 1px solid ;
            text-align: left;
            outline: none;
            font-size: 15px;
            display: flex;
            align-items: center;
        }
        .collapsible.active, .collapsible:hover {
            background-color: #555;
        }
        .collapsible::before {
            content: "25BA";
            margin-right: 10px;
        }
        .active.collapsible::before {
            content: "25BC";
        }
        .content {
            padding: 0 18px;
            display: none;
            border: 1px solid ;
            overflow: hidden;
            background-color: #f1f1f1;
            box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
        }
.slidecontainer {
            width: 50%;
            margin-left: 10px;
        }

HTML:

<div class="collapsible">Phenotypic Data Filters</div>
                <div class="content">
                    <button id="reset_all_sliders" class="reset-all-button">Reset ALL Sliders</button>
                    <br>
                        <a href="#" onclick="openTab(event, 'help', 'help_year')" style = "margin-left:10px;" id="year_help"> Year: </a>&nbsp;&nbsp;<input type="checkbox" name="year" value="2015" checked> 2015
                        <input type="checkbox" name="year" value="2016"> 2016
                        <input type="checkbox" name="year" value="2017"> 2017
                        <input type="checkbox" name="year" value="2018"> 2018
                        <br><br>

                        <a href="#" onclick="openTab(event, 'help', 'help_location')" style = "margin-left:10px;" id="location_help">Location: </a>&nbsp;&nbsp;<input type="checkbox" name="location" value="Channel-North"> Channel-North
                        <input type="checkbox" name="location" value="Channel-South"> Channel-South
                        <input type="checkbox" name="location" value="Creek-West"> Creek-West
                        <input type="checkbox"  name="location" value="Creek-East"> Creek-East
                        <br><br>

                        <a href="#" onclick="openTab(event, 'help', 'help_mortality')" style = "margin-left:10px;" id="mortality_help">Mortality: </a>&nbsp;&nbsp;<input type="checkbox" name="mortality" value="Alive"> Alive
                        <input type="checkbox" name="mortality" value="Missing"> Missing
                        <input type="checkbox" name="mortality" value="Dead"> Dead
                        <input type="checkbox" name="mortality" value="New"> New
                        <br><br>
                        
                        <div class="slidecontainer">
                        <a href="#" onclick="openTab(event, 'help', 'help_eco_vol')" id="eco_vol_help">Ecological Volume (units):</a>
                        <button id="eco_vol_reset" class="reset-button">Reset slider</button>
                        <div id="eco_vol_value" class="hover-value"></div><br><br><br><br>
                        <div id="eco_vol"></div>
                        <br><br><br>

                        <a href="#" onclick="openTab(event, 'help', 'help_ln_eco_vol')" id="ln_eco_vol_help">Natural Log of Ecological Volume (units):</a>
                        <button id="ln_eco_vol_reset" class="reset-button">Reset slider</button>
                        <div id="ln_eco_vol_value" class="hover-value"></div><br><br><br><br>
                        <div id="ln_eco_vol"></div>
                        <br><br><br>

                        <a href="#" onclick="openTab(event, 'help', 'help_length')" id="length_help">Length (cm):</a>
                        <button id="length_reset" class="reset-button">Reset slider</button>
                        <div id="length_value" class="hover-value"></div><br><br><br><br>
                        <div id="length"></div>
                        <br><br><br>
                        
                        <a href="#" onclick="openTab(event, 'help', 'help_width')" id="width_help">Width (cm):</a>
                        <button id="width_reset" class="reset-button">Reset slider</button>
                        <div id="width_value" class="hover-value"></div><br><br><br><br>
                        <div id="width"></div>
                        <br><br><br>
                        
                        <a href="#" onclick="openTab(event, 'help', 'help_height')" id="height_help">Height (cm):</a>
                        <button id="height_reset" class="reset-button">Reset slider</button>
                        <div id="height_value" class="hover-value"></div><br><br><br><br>
                        <div id="height"></div>
                        <br><br><br>
                    </div>
                </div>

noUiSlider code:

// Sliders
        var ecoVolSlider = document.getElementById('eco_vol');
        var ecoVol_field = document.getElementById('eco_vol_value');
        var lnEcoVolSlider = document.getElementById('ln_eco_vol');
        var lnVol_field = document.getElementById('ln_eco_vol_value');
        var alleleFreqSlider = document.getElementById('allele_freq');
        var allele_field = document.getElementById('allele_freq_value');
        var lengthSlider = document.getElementById('length');
        var length_field = document.getElementById('length_value');
        var widthSlider = document.getElementById('width');
        var width_field = document.getElementById('width_value');
        var heightSlider = document.getElementById('height');
        var height_field = document.getElementById('height_value');

        noUiSlider.create(ecoVolSlider, {
            start: [0],
            tooltips: true,
            connect: 'lower',
            behaviour: 'hover-snap',
            range: {
                'min': 0,
                'max': 35000
            },
            pips: {
                mode: 'values',
                values: [0, 10000, 20000, 30000, 35000],
                density: 4
            }
        });
        ecoVolSlider.noUiSlider.on('update', function (values, handle) {
            ecoVol_field.innerHTML = values[handle];
            ecoVol_field.style.display = 'none';
        });
        
        noUiSlider.create(lnEcoVolSlider, {
            start: [0],
            tooltips: true,
            connect: 'lower',
            behaviour: 'hover-snap',
            range: {
                'min': -4,
                'max': 12
            },
            pips: {
                mode: 'values',
                values: [-4, 0, 4, 8, 12],
                density: 4
            }
        });
        lnEcoVolSlider.noUiSlider.on('update', function (values, handle) {
            lnVol_field.innerHTML = values[handle];
            lnVol_field.style.display = 'none';
        });

        noUiSlider.create(lengthSlider, {
            start: [0],
            tooltips: true,
            connect: 'lower',
            behaviour: 'hover-snap',
            range: {
                'min': 0,
                'max': 50
            },
            pips: {
                mode: 'values',
                values: [0, 10, 20, 30, 40, 50],
                density: 4
            }
        });
        lengthSlider.noUiSlider.on('update', function (values, handle) {
            length_field.innerHTML = values[handle];
            length_field.style.display = 'none';
        });
        
        noUiSlider.create(widthSlider, {
            start: [0],
            tooltips: true,
            connect: 'lower',
            behaviour: 'hover-snap',
            range: {
                'min': 0,
                'max': 50
            },
            pips: {
                mode: 'values',
                values: [0, 10, 20, 30, 40, 50],
                density: 4
            }
        });
        widthSlider.noUiSlider.on('update', function (values, handle) {
            width_field.innerHTML = values[handle];
            width_field.style.display = 'none';
        });
        
        noUiSlider.create(heightSlider, {
            start: [0],
            tooltips: true,
            connect: 'lower',
            behaviour: 'hover-snap',
            range: {
                'min': 0,
                'max': 25
            },
            pips: {
                mode: 'values',
                values: [0, 5, 10, 15, 20, 25],
                density: 4
            }
        });
        heightSlider.noUiSlider.on('update', function (values, handle) {
            height_field.innerHTML = values[handle];
            height_field.style.display = 'none';
        });

Thank you in advance for your help and I appreciate any input!

I am making an overlay using CSS but need an onclick event to change the content of the class.

I made a sign Up form to be under the sign in form. At the click of the sign Up, the sign Up form class should be added to the container while also at the click of the sign in button, I want the sign Up form to be removed and the sign In id to replace the container.

I have tried using JavaScript to create a variable for the container, sign Up and sign In unique id to select their respective area in the DOM. I also made event listeners to add and remove the class that won’t display at first (since the sign in form would display first, that would mean that it’ll be the sign up form that would need to be added and removed).

BELOW IS THE CODE I ATTEMPTED.

// ACCOUNTS Overlay
const container = document.getElementById('container');
const signIpButton = document.getElementById('signIn');
const signUpButton = document.getElementById('signUp');

    // Add the classname to container
signUpButton.addEventListener('click', () => 
    container.classList.add('right-panel-active')
);

    // Remove the classname from container
signUpButton.addEventListener('click', () => 
    container.classList.remove('right-panel-active')
);

Basically, this is my problem. I want to automate file upload onto the windows file upload GUI through code, but I don’t know how to do so. I can’t use Selenium because Selenium opens up a new browser and I don’t want that. I’ll likely be using a chrome extension to do this. Can someone help?

I am trying to use mysql2 in the backend but it seems to messing with my routes when I use it in production.

My server file looks like this:

const express = require('express')
const app = express()
const PORT = process.env.PORT || 5001
const path = require('path')

const cors = require('cors')
const bodyParser = require('body-parser')

// const mysql = require('mysql2')

app.use(cors())
app.use(bodyParser.json())


app.get('/test', (req, res) => {
    res.send({message: 'Working Again'})
})

app.get('/budgettracker/pull', (req, res) => {
    res.send({message: '/budgettracker/pull hit'})
})

app.post('/budgettracker/push', (req, res) => {
    console.log(req.body)
    res.send(req.body)
})

app.get('*', (req, res) => {                       
    res.sendFile(path.resolve(__dirname, '../public_html','index.html'));                               
  });


app.listen(PORT, () => {
    console.log(`Listening on port http://localhost:${PORT}`) 
})

I am using react router to handles routes in the front end, and res.sendFile on my node server to serve index.html for unspecified routes.

When I include the “require mysql2” line, I get a 503 error when refreshing the page on child routes.
When I leave it commented out, the routing works as intended. I don’t understand what the problem is, and I have half a mind to just switch to sequelize and see if that works.

Any suggestions would be appreciated.

I tried reinstalling mysql2 on the server, but that doesn’t seem to change anything. I’m not sure if there should be a specific order when declaring the routes and database stuff.

frontendsrccomponentsCronJobTable.js:

import React, { useState } from 'react';
import { Table, Button, Form, InputGroup, Col } from 'react-bootstrap';

function CronJobTable() {
  const [cronJobs, setCronJobs] = useState([]);
  const [newCronJob, setNewCronJob] = useState({
    minute: '',
    hour: '',
    day: '',
    month: '',
    weekday: '',
    command: '',
  });

  const [validationErrors, setValidationErrors] = useState({});

  const handleInputChange = (e) => {
    setNewCronJob({ ...newCronJob, [e.target.name]: e.target.value });
    setValidationErrors({ ...validationErrors, [e.target.name]: '' }); // Clear error on change
  };

  const validateCronExpression = (expression, fieldName) => {
    // You can implement a more robust validation using a cron parsing library here
    // For now, let's do a basic check for allowed characters and ranges
    const allowedChars = /[*,/-0-9]/;
    if (!allowedChars.test(expression)) {
      setValidationErrors({ ...validationErrors, [fieldName]: 'Invalid characters' });
      return false;
    }
    return true;
  };

  const addCronJob = () => {
    const isValidMinute = validateCronExpression(newCronJob.minute, 'minute');
    const isValidHour = validateCronExpression(newCronJob.hour, 'hour');
    const isValidDay = validateCronExpression(newCronJob.day, 'day');
    const isValidMonth = validateCronExpression(newCronJob.month, 'month');
    const isValidWeekday = validateCronExpression(newCronJob.weekday, 'weekday');

    if (isValidMinute && isValidHour && isValidDay && isValidMonth && isValidWeekday) {
      setCronJobs([...cronJobs, newCronJob]);
      setNewCronJob({
        minute: '',
        hour: '',
        day: '',
        month: '',
        weekday: '',
        command: '',
      });
      setValidationErrors({}); // Clear all errors
    }
  };

  const deleteCronJob = (index) => {
    setCronJobs(cronJobs.filter((_, i) => i !== index));
  };

  return (
    <div>
      <h2>Add New Cron Job</h2>
      <Form>
        <Form.Row>
          <Form.Group as={Col}>
            <Form.Label>Minute:</Form.Label>
            <Form.Control
              type="text"
              name="minute"
              value={newCronJob.minute}
              onChange={handleInputChange}
              isInvalid={!!validationErrors.minute}
            />
            <Form.Control.Feedback type="invalid">
              {validationErrors.minute}
            </Form.Control.Feedback>
          </Form.Group>
          <Form.Group as={Col}>
            <Form.Label>Hour:</Form.Label>
            <Form.Control
              type="text"
              name="hour"
              value={newCronJob.hour}
              onChange={handleInputChange}
              isInvalid={!!validationErrors.hour}
            />
            <Form.Control.Feedback type="invalid">
              {validationErrors.hour}
            </Form.Control.Feedback>
          </Form.Group>
        </Form.Row>
        <Form.Row>
          <Form.Group as={Col}>
            <Form.Label>Day:</Form.Label>
            <Form.Control
              type="text"
              name="day"
              value={newCronJob.day}
              onChange={handleInputChange}
              isInvalid={!!validationErrors.day}
            />
            <Form.Control.Feedback type="invalid">
              {validationErrors.day}
            </Form.Control.Feedback>
          </Form.Group>
          <Form.Group as={Col}>
            <Form.Label>Month:</Form.Label>
            <Form.Control
              type="text"
              name="month"
              value={newCronJob.month}
              onChange={handleInputChange}
              isInvalid={!!validationErrors.month}
            />
            <Form.Control.Feedback type="invalid">
              {validationErrors.month}
            </Form.Control.Feedback>
          </Form.Group>
          <Form.Group as={Col}>
            <Form.Label>Weekday:</Form.Label>
            <Form.Control
              type="text"
              name="weekday"
              value={newCronJob.weekday}
              onChange={handleInputChange}
              isInvalid={!!validationErrors.weekday}
            />
            <Form.Control.Feedback type="invalid">
              {validationErrors.weekday}
            </Form.Control.Feedback>
          </Form.Group>
        </Form.Row>
        <Form.Group>
          <Form.Label>Command:</Form.Label>
          <Form.Control 
            type="text" 
            name="command" 
            value={newCronJob.command} 
            onChange={handleInputChange} 
          />
        </Form.Group>
        <Button variant="primary" onClick={addCronJob}>
          Add New Cron Job
        </Button>
      </Form>

      <br />

      <h2>Current Cron Jobs</h2>
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>Minute</th>
            <th>Hour</th>
            <th>Day</th>
            <th>Month</th>
            <th>Weekday</th>
            <th>Command</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {cronJobs.map((cronJob, index) => (
            <tr key={index}>
              <td>{cronJob.minute}</td>
              <td>{cronJob.hour}</td>
              <td>{cronJob.day}</td>
              <td>{cronJob.month}</td>
              <td>{cronJob.weekday}</td>
              <td>{cronJob.command}</td>
              <td>
                <Button variant="danger" onClick={() => deleteCronJob(index)}>
                  Delete
                </Button>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
}

export default CronJobTable;

Then in the calling file frontendsrcpagesmainApp.js I do:

import CronJobTable from "../components/CronJobTable";

And I get the error on the React frontend:

Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined. You
likely forgot to export your component from the file it’s defined in,
or you might have mixed up default and named imports.

Check the render method of `CronJobTable`.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `CronJobTable`.
    at createFiberFromTypeAndProps (http://192.168.1.34:3000/static/js/bundle.js:76423:21)
    at createFiberFromElement (http://192.168.1.34:3000/static/js/bundle.js:76444:19)
    at createChild (http://192.168.1.34:3000/static/js/bundle.js:65013:32)
    at reconcileChildrenArray (http://192.168.1.34:3000/static/js/bundle.js:65253:29)
    at reconcileChildFibers (http://192.168.1.34:3000/static/js/bundle.js:65595:20)
    at reconcileChildren (http://192.168.1.34:3000/static/js/bundle.js:68527:32)
    at updateHostComponent (http://192.168.1.34:3000/static/js/bundle.js:69171:7)
    at beginWork (http://192.168.1.34:3000/static/js/bundle.js:70616:18)
    at HTMLUnknownElement.callCallback (http://192.168.1.34:3000/static/js/bundle.js:55602:18)
    at Object.invokeGuardedCallbackDev (http://192.168.1.34:3000/static/js/bundle.js:55646:20)

In a Solid JS app, I am attempting to utilize the Sort feature of a Tanstack Table (V8). I’m also using Webpack5 and Module Federation, if that could potentially cause an issue.

I have a column that utilizes values from multiple data fields/columns to format progress on a task. It needs to be able to be sorted:

{ cell: ({row}) =>
        <span
            class={`${row.original.commit_dt === row.original.trend_dt ? 'text-blue-100' : row.original.commit_dt < row.original.trend_dt ? 'text-red-400' : 'text-green-500'} font-bold`}
            title={`${row.original.commit_dt === row.original.trend_dt ? 'On track...' :
                `${row.original.commit_dt < row.original.trend_dt ? 'Behind by ' + wkDayDiff(row.original.commit_dt, row.original.trend_dt, true) : 'Ahead by ' + wkDayDiff(row.original.trend_dt, row.original.commit_dt)} working day(s)...`}`}>
                {row.original.trend_dt}
                </span>
        , header: 'Trend Date', size: 100, enableSorting: true, sortType: trendSort }

As you can see, I have created a sort function that should handle this, but for whatever reason it is failing. I believe I’m using the correct format, as documented for Tanstack Table V8 for Solid JS:

const trendSort = (rowA, rowB, id) => {
        const a = new Date(rowA.values[id]), b = new Date(rowB.values[id]);
        return a > b ? 1 : b > a ? -1 : 0;
    };

My header definition in the table is a bit complex, too, as it utilizes Solid-Icons and also contains a column resizer:

<thead class='uppercase bg-gray-700 display'>
    <For each={table.getHeaderGroups()}>
        {(headerGroup) => (
            <tr>
                <For each={headerGroup.headers}>
                    {(header) =>
                        <th key={header.id} style={{ width: `${header.getSize()}px` }} class={`p-1 text-xs`}>
                            {header.isPlaceholder ? null :
                                <>
                                    <span class={`${header.column.getCanSort() && 'cursor-pointer'} inline-flex`} onClick={header.column.getToggleSortingHandler()}>
                                        {flexRender(header.column.columnDef.header, header.getContext())}
                                    </span>
                                    <button class='inline float-right hover:bg-darkprimary hover:border-primary border-2 border-gray-600 p-0 resizing' onMouseDown={header.getResizeHandler()} onDoubleClick={header.column.resetSize()}>&#177;</button>
                                    {{asc: <AiOutlineCaretUp size={15} class="float-right text-secondary" />, desc: <AiOutlineCaretDown size={15} class="float-right text-secondary" />}[header.column.getIsSorted()?? null]}
                                </>
                            }
                        </th>
                    }
                </For>
            </tr>
        )}
    </For>
</thead>

Let me know if you need more code, as I have a large quantity of it for this purpose.

I pretty much copied a vary basic search bar that is functional using HTML, CSS and Javascript.

When you type something in the search bar it does show up in the console.

The results are supposed to go from the home index.html to a different page: searchresults.html and display on the page.

I do not understand what part of the function is not working and why it will not display on the second page at all.

Inspiration: https://codepen.io/simplyramaken/pen/dyqVPBz

My code:

https://codepen.io/sarahprogram/pen/abxQydz

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Finance Blog</title>

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-        awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<header>
<h1>Finance Blog</h1>

    <div class="search-div">
      <form action="searchresults.html" method="get" onclick="searchResult ()">
     <button type="submit" class="search-button" id="search-b"><i class="fa fa-search" style="font-size:24px"></i></button>
      <input type="text" class="search" id="search-i" placeholder="search...">
    </form>
    </div>

  <nav>
  <ul>
  <li>
   <a href="deals.html" class="nav-bar" id="deals">Deals</a>
  </li>
  <li>
  <a href="free.html" class="nav-bar" id="free">Free</a>
  <li>
    <a href="savingmoney.html" class="nav-bar" id="savingmoney">Saving Money</a>
  </li>
  <li>
    <a href="investing.html" class="nav-bar" id="investing">Investing</a>
  </li>
  <li>
    <a href="makemoney.html" class="nav-bar" id="makemoney">Make Money</a>
  </li>
  <li>
    <a href="recipies.html" class="nav-bar" id="recipes">Recipies</a>
  </li>
</ul>
</nav>
</header>

<main>
<section class="blog"> 

<div class="BlogContainer">
  <a href="#">
  <img src="" alt="" class="blog-img">
    <h2 class="blog-title">FREE Workouts: My Favorite Fun Youtube Workout Channel</h2>
  <p class="blog-copy"></p>
  <span class="time"></span>
</a>
</div>

<div class="BlogContainer">
<a href="#" class="bloglink">
 <img src="" alt="" class="blog-img">
<h2 class="blog-title">How to Get FREE Coffee Grounds from Starbucks for Your Garden!
  </h2>
  <p class="blog-copy"></p>
  <span class="time"></span>
  </a>
</div>

<div class="BlogContainer">
  <a href="#">
  <img src="" alt="" class="blog-img">
  <h2 class="blog-title">My Favorite Simple and Easy Credit Card 
  </h2>
  <p class="blog-copy"></p>
  <span class="time"></span>
</a>
</div>

</section>


<div class="sidebar">
<aside>
<div><img src="pig.image" alt="pig photo" class="aside-img"></div>

<br>

<div>
  <p class="aside-p">Sign up to never miss a post!</p>
  <br>
  <form method="post">
  <input type="text" class="aside-input" placeholder="YOUR EMAIL ADDRESS" pattern="[email protected]" required>
  <br>
  <button class="button-submit">SIGN UP</button>
  </form>
</div>

<br>

<div class="social">
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-tiktok"></a>
<a href="#" class="fa fa-instagram"></a>
</div>


</aside>
</div>
</main>


<div class="container-pagination">
<div class="pagination">
    <ul>
    <li><a href="" class="pagination-previous">Previous</a></li>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="" class="pagination-next">Next</a></li>
    </ul>
</div>
</div>





<footer>

<div class="social-footer">
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-tiktok"></a>
<a href="#" class="fa fa-instagram"></a>
</div>

<div class="footer-content">
<p><a href="about.html" class="footer-p" id="about">About</a></p>
<br>
<p><a href="contact.html" class="footer-p" id="contact">Contact</a></p>
<br>
<p><a href="privacy.html" class="footer-p" id="privacy">Privacy Policy</a></p>
<br>
<p><a href="terms.html" class="footer-p" id="terms">Terms</a></p>
</div>

</footer>

<p class="footer-copyright" id="date"></p>

<script src="js.js"></script>

</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="searchresults.css">
<title>Search Results</title>
</head>
<body>
<div>
<ul id="search-results"></ul>
</div>
<script src="js.js"> 
</script>
</body>
</html>



* {
margin: 0;
padding: 0;
}

html body { 
overflow: auto; 
height: 100%;
}

header {
display: flex;
}

body {
height: 100%;
}

h1 {
color: #FB6F92;
margin-top: 82px;
margin-left: 40px;
margin-bottom: 10px;
}

.search-div {
position: absolute;
right: 25px;
margin-top: 82px;
display: flex;
}

.search-button {
color:#FB6F92;
margin: 5px;
border: none;
background: none;
padding: 0;

}

.search {
position: relative;
border-color:#FB6F92;
width: 250px;
border-style: solid;
padding: 6px;
border-radius: 25px;
font-size: 16px;
}

nav {
position: fixed;
top: 0px;
width: 100%;
height: 50px;
background-color: #fbe5e5;
font-family: arial;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}

nav a {
  text-align: center;
  display: inline-block;
}

nav ul li a {
color: #FB6F92;
text-decoration: none;
}

li {
display: inline;
margin: 20px;
}

.nav-bar:hover {
color: gray;
}

main {
display: flex;
}

.blog {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 0px;
width: 80%;
}

.BlogContainer {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: auto auto auto;
grid-auto-rows: 0px;
overflow: hidden;
width: 25%;
margin: 15px;
}

.blog-title {
color: black;
font-family: 'Times New Roman', Times, serif;
font-size: 20px;
overflow: wrap;
}

.BlogContainer a h2:hover {
color: gray;
}

.BlogContainer a {
text-decoration: none;
}

.blog-img {
display: flex;
justify-content: center;
margin-bottom: 20px;
}

.next-page {
font-family: Arial;
position: relative;
display: flex;
justify-content: center;
}

.next-page a {
text-decoration: none;
color: black;
display: flex;
justify-content: center;
position: absolute;
bottom: 0;
}

.sidebar {
position: relative;
display: flex;
flex-grow: 1;
justify-content: center;
margin-top: 35px;
}

aside {
color: black;
font-family: arial;
position: sticky;
display: flex;
flex-direction: column;
overflow: auto;

}

.aside-img {
width: 200px;
height: 200px;
margin-bottom: 30px;
margin-left: 9px;
}

.aside-p {
font-weight: bold;
font-size: 16px;
}

.aside-input {
margin-bottom: 5px;
width: 209px;
color: black;
border-style: solid;
padding: 5px;
border-color: black;
font-size: 14px;
}

.aside-span {
font-weight: bold;
font-size: 22px;
}

.button-submit {
font-weight: bold;
font-size: 14px;
margin-bottom: 30px;
padding: 6px;
color:#FB6F92;
background-color: #fbe5e5;
width: 223px;
border-style: none;

}

.social a {
 color: black;
 text-decoration: none;
 }


.container-pagination {
text-align: center;
margin-bottom: 50px;
}

.container-pagination a {
color: black;
text-decoration: none;
}

footer {
width: 100%;
height: 298px;
font-family: arial;
background-color: #fbe5e5;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}

.social-footer {
margin-top: 20px;
margin-left: 25px;
}

.social-footer a {
color: black;
text-decoration: none;
}

.footer-content {
grid: 2/4fr;
margin-top: 20px;
}

.footer-copyright {
width: 100%;
text-align: center;
font-size: 14px;
color: black;
font-family: arial;
background-color: #fbe5e5;
display: block;
padding-bottom: 10px;
}

.footer-p {
color: black;
text-decoration: none;
}




const search = document.getElementById('search-i');
const links = document.getElementsByClassName('.blog-title');

function searchResult() {

search.addEventListener("click", searchResult);
const searchValue = search.value.toLowerCase();

for (let i = 0; i < links.length; i++) {
const text = links[i].textContent.toLowerCase();                                                 
  if (text.includes(searchValue)) {
document.getElementById('search-results').innnerHMTL;
    links[i].style.display = 'block';
  } else {
document.getElementById('search-results').innerHTML;
    links[i].style.display = 'none';
  }
}
console.log(searchValue);
};

console.log(searchResult);
}

I do not know why the javascript does not display the results on page

I am currently using the code:

   aboutTest = () => {
        const { username } = this.state;
        const proxyUrl = 'https://cors-anywhere.herokuapp.com/'; // Proxy URL to bypass CORS
        const targetUrl = `http://roblox.com/users/profile?username=${username}`; // Target URL
    
        fetch(proxyUrl + targetUrl, {
            method: 'GET',
            headers: {
                'Accept': 'text/html', // Accept HTML content
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text(); // Parse response body as text
        })
        .then(htmlContent => {
            // Handle the HTML response data
            const parser = new DOMParser();
            const htmlDoc = parser.parseFromString(htmlContent, 'text/html');
            const elements = htmlDoc.querySelectorAll('span.profile-about-content-text');
            if (elements.length > 0) {
                console.log("Found elements with class 'profile-about-content-text':");
                elements.forEach(element => {
                    console.log(element.textContent.trim());
                });
            } else {
                console.log("No elements found with class 'profile-about-content-text'");
            }
        })
        .catch(error => {
            // Handle errors
            console.error('There was a problem with the fetch operation:', error);
        })
        .finally(() => {
            console.log("Function execution completed."); // Log completion of function execution
        });   
    }

yet when i try and run, no matter what i get the same response of no elements found in this class.

i have tried changing the const elements = htmlDoc.querySelectorAll('span.profile-about-content-text') removing the span, the dot and writing using the different names the image below could have

i am looking to call the in this case “beautiful dog rainbow dog car” but i think the problem may be that the url “https://roblox.com/users/profile?username=$%7Busername%7D” redirects to an url that looks like this: https://www.roblox.com/users/2630350688/profile (uses the user id) and i havent got the code to call from the redirected url but from the first url.

Does anyone have a fix – if so please write an answer

This is a question regarding the order book on Binance’s trading page, like here: https://www.binance.com/en-GB/trade/SOL_USDT?_from=markets&type=spot

I am confused as to how the width of the bars in the order book are being calculated. I mean the red SELL bars and the green BUY bars at different price levels. If you check the HTML on the Binance trading page, I am specifically referring to the the ‘.progress-bar’ elements.

The width of the bars are obviously some calculation representing how big the order size is. However the width of the bars is NOT based on a comparative percentage with the largest order size in the book. You can tell this because several bars are more than 100% in width, so the calculation must be slightly more complex.

Does anyone know how the width of those bars are calculated?

I have a question, so please, if you know how I can do this, tell me. I need to implement the following in Rust: Develop a graphical user interface application in the chosen programming language that simulates the operation of three stopwatches controlled by three threads, each performing incremental increases of one second, three seconds, and six seconds, respectively. Each stopwatch should feature four buttons (Start, Pause, Resume, Stop (kill the thread)), and a general button that pauses the progress of all three stopwatches for five seconds.

Here My codes: In this Order, HTML, JAVASCRIPT, RUST MAIN

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRONOMETROS</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .contenedor {
            width: 200px;
            height: 350px;
            background-color: #1B72E4 ;
            border: 2px solid #3777CB ;
            text-align: center;
            padding: 20px;
            margin-right: 40px;
            border-radius: 20px;
        
        }

        .resultado {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background-color: white;
            border: 2px solid lightgrey;
            font-size: 35px;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            margin-bottom: 50px;
            width: 200px;
            height: 50px;
            border-radius: 20px;
            margin-top: 10px;

        }

        .botonInicio {
            width: 100%;
            padding: 10px 0;
            margin-top: 10px;
            background-color: #4CAF50;
            border: none;
            color: white;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            letter-spacing: 2px;

        }

        .botonPausar {
            width: 100%;
            padding: 10px 0;
            margin-top: 10px;
            background-color: #EE7E21;
            border: none;
            color: white;
            text-align: center;
            text-decoration: none;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            letter-spacing: 1px;


        }

        .botonReiniciar {
            width: 100%;
            padding: 10px 0;
            margin-top: 10px;
            background-color:#F2D30A  ;
            border: none;
            color: white;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            border-radius: 5px;
            letter-spacing: 1px;


        }

        .botonDetener {
            width: 100%;
            padding: 10px 0;
            margin-top: 10px;
            background-color: #DD0A03  ;
            border: none;
            color: white;
            text-align: center;
            text-decoration: none;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-size: 15px;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            letter-spacing: 1px;
        }

        .botonDetenerTodos {
            position: fixed;
            width: 815px;
            height: 50px; 
            bottom: 45px; 
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-size: 15px;
            left: 50%;
            transform: translateX(-53.1%);
            background-color: #DD0A03 ;
            text-align: center;
            color:white;
            letter-spacing: 2px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div  class="contenedor">
        <div id="crono1" class="resultado">5</div>
        <div>
          <button  class="botonInicio"   id="iniciar1" >INICIAR</button>
          <button  class="botonPausar"  id="pausar1" >PAUSAR</button>
          <button class="botonReiniciar"  id="reiniciar1">REINICIAR</button>
          <button  class="botonDetener"  id="detener1" >DETENER</button>
        </div>
    </div>
    <div class="contenedor">
        <div id="crono2" class="resultado">10</div>
        <div>
            <button  class="botonInicio"   id="iniciar2" >INICIAR</button>
            <button  class="botonPausar"  id="pausar2" >PAUSAR</button>
            <button class="botonReiniciar"  id="reiniciar2">REINICIAR</button>
            <button  class="botonDetener"  id="detener2" >DETENER</button>
        </div>
    </div>
    <div class="contenedor">
        <div id="crono3" class="resultado">5</div>
        <div>
            <button class="botonInicio" id="iniciar3">INICIAR</button>
            <button  class="botonPausar" id="pausar3">PAUSAR</button>
            <button  class="botonReiniciar" id="reiniciar3" >REINICIAR</button>
            <button  class="botonDetener" id="detener3" >DETENER</button>
        </div>
    </div>
    <div>
        <button class="botonDetenerTodos" id="DetenerTodos">DETENER TODOS LOS CRONOMETROS POR 5 SEGUNDOS</button>
    </div>
   <script src="./main.js"></script>
</body>

  
</html>

Java Script

const iniciar1 = document.querySelector('#iniciar1')
const iniciar2 = document.querySelector('#iniciar2')
const iniciar3 = document.querySelector('#iniciar3')

const pausar1 = document.querySelector('#pausar1')
const pausar2 = document.querySelector('#pausar2')
const pausar3 = document.querySelector('#pausar3')

const reiniciar1 = document.querySelector('#reiniciar1')
const reiniciar2 = document.querySelector('#reiniciar2')
const reiniciar3 = document.querySelector('#reiniciar3')

const detener1 = document.querySelector('#detener1')
const detener2 = document.querySelector('#detener2')
const detener3 = document.querySelector('#detener3')

const { invoke } = window.__TAURI__.tauri;

const detenerTodos = document.querySelector('#DetenerTodos')

iniciar1.addEventListener('click', () => {
  invoke('enviarAccion', { accion: 'detener1' })
});


iniciar2.addEventListener('click', () => {
  invoke('greet')
 })

iniciar3.addEventListener('click', () => {
  invoke('greet')
 })

pausar1.addEventListener('click', () => {
  invoke('greet')
})

pausar2.addEventListener('click', () => {
  invoke('greet')
})

pausar3.addEventListener('click', () => {
  invoke('greet')
})

reiniciar1.addEventListener('click', () => {
  invoke('greet')
})

reiniciar2.addEventListener('click', () => {
  invoke('greet')
})

reiniciar3.addEventListener('click', () => {
  invoke('greet')
})

detener1.addEventListener('click', () => {
  invoke('greet')
})

detener2.addEventListener('click', () => {
  invoke('greet')
})

detener3.addEventListener('click', () => {
  invoke('greet')
})

detenerTodos.addEventListener('click', () => {
  invoke('greet')
})




 



let greetInputEl;
let greetMsgEl;

async function greet() {
  // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
  greetMsgEl.textContent = await invoke("greet", { name: greetInputEl.value });
}

window.addEventListener("DOMContentLoaded", () => {
  greetInputEl = document.querySelector("#greet-input");
  greetMsgEl = document.querySelector("#greet-msg");
  document.querySelector("#greet-form").addEventListener("submit", (e) => {
    e.preventDefault();
    greet();
  });
});

RUST MAIN

use std::sync::mpsc;
use std::thread;
use std::time::Duration;

// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
#[tauri::command]
fn iniciar(accion: String) -> String{
    println!("sirve:");
    format!("{}",accion).into()
}


fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![iniciar])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
    let (_in1, r1) = mpsc::channel();
    let mut activo_1 = false;
    let mut contador1 = 0;
    let mut mensaje1 = "";

    thread::spawn(move || {
        loop {
            while activo_1 {
                thread::sleep(Duration::new(1, 0));
                contador1 += 1;
                println!( "ads {}",contador1);
                mensaje1 = r1.recv().unwrap();
                if mensaje1 == "pausar" {
                    activo_1 = false;
                }
                if mensaje1 == "detener" {
                    activo_1 = false;
                }
                if mensaje1 == "reiniciar" {
                    contador1 = 0;
                    activo_1 = false;
                }
            }
            mensaje1 = r1.recv().unwrap();
            if mensaje1 == "iniciar" {
                activo_1 = true;
            }
            if mensaje1 == "detener" {
                break;
            }
        }
    });
    let (_in2, r3) = mpsc::channel();

    let mut activo_3 = false;
    let mut contador3 = 0;
    let mut mensaje = "";

    thread::spawn(move || {
        loop {
            while activo_3 {
                thread::sleep(Duration::new(3, 0));
                contador3 += 1;
                mensaje = r3.recv().unwrap();
                if mensaje == "pausar" {
                    activo_3 = false;
                }
                if mensaje == "detener" {
                    activo_3 = false;
                }
                if mensaje == "reiniciar" {
                    contador3 = 0;
                    activo_3 = false;
                }
            }
            mensaje = r3.recv().unwrap();
            if mensaje == "iniciar" {
                activo_3 = true;
            }
            if mensaje == "detener" {
                break;
            }
        }
    });
    let mut activo_6 = false;
    let mut contador6 = 0;
    let mut mensaje6 = "";

    let (_in3, r6) = mpsc::channel();
    thread::spawn(move || {
        loop {
            while activo_6 {
                thread::sleep(Duration::new(6, 0));
                contador6 += 1;
                mensaje6 = r6.recv().unwrap();
                if mensaje6 == "pausar" {
                    activo_6 = false;
                }
                if mensaje6 == "detener" {
                    activo_6 = false;
                }
                if mensaje6 == "reiniciar" {
                    contador6 = 0;
                    activo_6 = false;
                }
            }
            mensaje6 = r6.recv().unwrap();
            if mensaje6 == "iniciar" {
                activo_6 = true;
            }
            if mensaje6 == "detener" {
                break;
            }
        }
    });
}

However, I’ve been using Tauri, and I need to pass a parameter to my main function to execute the threads in my graphical user interface application. Could you please advise on the best approach to use my buttons to activate the stopwatches in the main function? Specifically, I’ll need the listener to pass a String to the main function when a button is clicked