Category: javascript

I am looking to implement the RandomX Proof of Work hash function in JavaScript + WebAssembly. The README explains how this isn’t possible:

Web mining is infeasible due to the large memory requirement and the lack of directed rounding support for floating point operations in both Javascript and WebAssembly.

Due to the pervasive use of repeatedly switching the rounding modes using a CFROUND instruction inside the bytecode and the fact that JavaScript has no ability to change the rounding mode or even use any other rounding mode other than ties to even, its impossible.

The CFROUND instruction manipulates the fprc abstract register inside the RandomX spec. fprc starts at zero, so round ties to even and is updated seemingly randomly on every instruction execution.

RandomX uses 5 properly rounded operations, add, sub, mul, div, and sqrt guaranteed to be properly rounded by the IEEE754 spec in double precision. My question is this. Soft float is not an option, I have access to floating point arithmetic only in round ties to even for those 5 operations. I need to find a way to emulate double precision arithmetic with all of the other rounding modes implemented in terms of one rounding mode for those 5 operations. This would be much faster than soft float.

Bruce at the Random ASCII blog had something to say:

If I understand correctly then the other three rounding modes will produce results that are either identical to round-to-nearest-even or one ULP away. If the round-to-nearest-even operation is exact then all rounding modes will give the same result. If it is not exact then you’d have to figure out which results would be different. I think that either round-towards-negative or round-towards-positive would be one ULP away, but not both.

FMA (fused multiply add) operations aren’t available in JavaScript, however they are available in WebAssembly but gated behind non deterministic operations (which aren’t widely supported). Those operations are f32x4.relaxed_*madd and f64x2.relaxed_*madd. If the use of FMA is required, this is fine, I can implement fallbacks.

The only paper that was even slightly close to floating point rounding mode emulation was Emulating round-to-nearest ties-to-zero ”augmented” floating-point operations using round-to-nearest ties-to-even arithmetic. It makes some interesting points but not useful.

This is a question that I am not qualified to answer, but I believe its possible. How could I?

This is as far as I tried to emulate round toward zero in terms of round to nearest, ties to even.

double add_fe_towardzero(double a, double b) {
    if (a + b >= 0) {
        return (a + b + 0.5 * ulp(a + b)) - 0.5 * ulp(a + b);
    } else {
        return (a + b - 0.5 * ulp(a + b)) + 0.5 * ulp(a + b);
    }
}

I have a test harness iterating over a random selection of floating point values and computing the outputs from the reference and the implementation and comparing them similar to the post There are Only Four Billion Floats–So Test Them All! The above function has a 1/4 success rate, not 100%.

From what i know, game maker library like Unity can inport several file like .mb .ma, .max, and .blend. But Phaser 3 seem to only hava atlas import as animation. I want to ask:

• Is there other way i can input animation other than frame by frame form atlas?
• If there is, which import is faster to load, because my webgame is slow

I want to create cards and render them. For that I use <template> tag.

    <template id="hero-template">
          <div class="card">
              <div class="card-header">
                  <span class="card-name"></span>
                  <span class="card-cost"></span>
                </div>
                <img class="card-image" src="" alt="" />
                <p></p>
                <!-- template for table -->
                <table class="card-stats"></table>
                <div class="card-footer">
                  <span class="card-priority"></span>
                  <span class="card-attack-and-defence"></span>
                </div>
              </div>
            </template>

Everything is fine but here <table> tag should fetch from the api which is an object. It should loop through object and create

<tr>
<th></th>
<td></td>
</tr>

and append it inside <table> tag until loop finishes.

In my code I have rendered the cards but I am unable to render the table can you help me ?
Here is the code to render card :

function renderCardItem(hero) {
  const $template = document
    .querySelector("#hero-template")
    .content.firstElementChild.cloneNode(true);

  $template.querySelector(".card-header .card-name").innerText = hero.name;
  $template.querySelector(".card-header .card-cost").innerText =
    hero.cost;
  $template.querySelector(".card-image").src = hero.image.url;
  $template.querySelector(".card-image").alt = hero.name;
  $template.querySelector("p").innerText = hero.biography.alignment;

  // stats
  // const $statTable = $template.querySelector("#table-template"); // creating a template method 
  // renderTable(".card-stats", hero.powerstats); // using createElement tag 

  // footer part
  $template.querySelector(".card-footer .card-priority").innerText = hero.priority;
  $template.querySelector(".card-footer .card-attack-and-defence").innerText = 
  `${hero.attack}/${hero.defence}`;

  return $template;
}

function renderCard($container, hero) {
  const $heroItem = renderHeroItem(hero);
  $container.insertAdjacentHTML("beforeend", $heroItem.outerHTML);
}

I have tried using creating a clone of the table using a inner <template> tag but i couldn’t.

 <template id="table-template">
<table class="card-stats"></table>
</template> 

here cloning the firstElementChild and looping through the object creating tr,td,th.

but at last i use this method but also i failed to get table :

function renderTable($statTable, powerStats) {
  for (const key in powerStats) {
    const $tr = document.createElement("tr");
    const $th = document.createElement("th");
    const $td = document.createElement("td");

    $th.innerText = key;
    $td.innerText = powerStats[key];
    $tr.insertAdjacentHTML("beforeend", $th);
    $tr.insertAdjacentHTML("beforeend", $td);

    $statTable.insertAdjacentHTML("beforeend", $tr);
  }
}

I got :
TypeError: $statTable.insertAdjacentHTML is not a function

Is this method good or should i use template inside a template to achieve this can you provide me the code please ?

I’m getting a ‘TypeError: Cannot read properties of undefined (reading ‘0’)’ for the example given in mailchimp’s api docs.
I’m using nextjs with typescript.

This is the code

import { NextRequest, NextResponse } from "next/server";
const mailchimp = require('@mailchimp/mailchimp_marketing');
const api_key = process.env.MAILCHIMP_API_KEY;

mailchimp.setConfig({
apiKey: api_key,
server: 'us18',
});

export async function POST(request: NextRequest){

    try {
        const response = await mailchimp.ping.get();
        if (response && response.health_status) {
            console.log(response.health_status);
        } else {
            console.error('Unexpected response:', response);
        }
        } catch (error) {
        console.error('Error:', error);
        }
        
    return NextResponse.json('Successfully added to the waitlist!');
}

And here is the error I’m getting

Error: TypeError: Cannot read properties of undefined (reading '0')
    at isInsideNodeModules (node:internal/util:511:17)
    at showFlaggedDeprecation (node:buffer:178:8)
    at new Buffer (node:buffer:266:3)
    at encoder (webpack-internal:///(rsc)/./node_modules/superagent/lib/node/index.js:498:12)
    at RequestBase._auth (webpack-internal:///(rsc)/./node_modules/superagent/lib/request-base.js:431:44)
    at Request.auth (webpack-internal:///(rsc)/./node_modules/superagent/lib/node/index.js:501:15)
    at exports.callApi (webpack-internal:///(rsc)/./node_modules/@mailchimp/mailchimp_marketing/src/ApiClient.js:396:13)
    at module.exports.getWithHttpInfo (webpack-internal:///(rsc)/./node_modules/@mailchimp/mailchimp_marketing/src/api/PingApi.js:65:27)
    at module.exports.get (webpack-internal:///(rsc)/./node_modules/@mailchimp/mailchimp_marketing/src/api/PingApi.js:77:17)
    at POST (webpack-internal:///(rsc)/./src/app/api/add-mailing-contact/route.ts:33:47)
    at /Users/mykal/Documents/kurie/kurie-homepage/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:55044

What I’m expecting to get is something in the form of the below however its just throwing an error whenever I try the .get() function.

{
   "health_status": "Everything's Chimpy!"
}

I am learning passkey implementation for the web. I’m mainly using simplewebauthn because they’re one of the FIDO conformant packages. I’ve been using MacOS with ICloud saved passkeys and most things seem to be working as expected however I will run into this error the second time I use a passkey: Error: Response counter value 0 was lower than expected 1

The source code is located in https://github.com/MasterKale/SimpleWebAuthn/blob/v10.0.0/packages/server/src/authentication/verifyAuthenticationResponse.ts line 224

  if (
    (counter > 0 || authenticator.counter > 0) &&
    counter <= authenticator.counter
  ) {
    // Error out when the counter in the DB is greater than or equal to the counter in the
    // dataStruct. It's related to how the authenticator maintains the number of times its been
    // used for this client. If this happens, then someone's somehow increased the counter
    // on the device without going through this site
    throw new Error(
      `Response counter value ${counter} was lower than expected ${authenticator.counter}`,
    );
  }

It looks like simplewebauthn mentions that MacOS multi-device keys might never increment counters: https://simplewebauthn.dev/docs/packages/server#3-post-registration-responsibilities

“It’s also not unexpected for certain high profile authenticators, like Touch ID on macOS, to always return 0 (zero) for the signature counter. In this case there is nothing an RP can really do to detect a cloned authenticator, especially in the context of multi-device credentials.”

I do have a chunk of code that has been incrementing the passkey counter each time it authenticates on MacOS, but I was wondering: Is this just how it is? Should I just not bother with incrementing the counter on my site since the MacOS ICloud saved passkeys never increment? I don’t see a way to use simplewebauthn to build out a MacOS specific handling, so I could just skip the incrementing until a future date when the counter is implemented or something else updates.

The same question was asked more than a year ago for Apple app development and the suggestion passkeys.com also used simplewebauthn, but never addresses the counter. Integrating Passkeys signCount 0

I’ve tried not incrementing the passkey in my database and that seems to be the simplest and smoothest way to authenticate, however it leaves things vulnerable if somebody manages to copy a key.

I’m assuming for all purposes, the medium term solution is to not increment these passkeys in my database, but I’m wondering if someone has more information on why the multi-device keys don’t increment and what workaround other people have been using. How dangerous is it really that someone could potentially copy one of these keys?

The contents of a POST req.body are dynamic, eg unchecked checkboxes are not sent. SQL update and insert queries are conventionally hard coded, albeit with placeholders etc. This presents problems.
Either I have to pad out the req.body to match my hard-coded query, or create a query dynamically from req.body, something like this…

<script>
let sql = "UPDATE table SET ";
let data = {};
for (let [key, value] of Object.entries(req.body)) {
    if (key != 'id' && key != 'submit') {
        sql += "$" + key + "=? ,";
    }

}
sql += " WHERE $id=" + req.body.id;

for (let [key, value] of Object.entries(req.body)) {
    if (key != 'id' && key != 'submit') {
        let newKey = "$" + key;
        data.newKey = value;
    }

} 
</script>

…so what is best here, rebuild my data to match a hard query or build a query to match my data?

i am attempting to implement the filebase client library on a browser-based application following their example:

import { FilebaseClient } from '@filebase/client'
const filebaseClient = new FilebaseClient({ token: 'API_TOKEN' })

const content = new Blob(['hello world'])
const cid = await filebaseClient.storeBlob(content)
console.log(cid);

However, Error: Body Data is unsupported format, expected data to be one of: string | Uint8Array | Buffer | Readable | ReadableStream | Blob; is being thrown at the storeBlob function call.

According to the Filebase documentation, the library supports “web browser or Node.js”, however i’ve had to use webpack.ProvidePlugin to prevent a Error: Readable.from is not available in the browser, as shown in my config-overrides.js file:

const webpack = require("webpack")

module.exports = function override(config, env) {
    config.resolve.fallback = {
        ...config.resolve.fallback,
        stream: require.resolve("readable-stream"),
        buffer: require.resolve("buffer"),
    }
    config.resolve.extensions = [...config.resolve.extensions, ".ts", ".js"]
    config.plugins = [
        ...config.plugins,
        new webpack.ProvidePlugin({
            process: "process/browser",
            stream: 'readable-stream',
            Buffer: ["buffer", "Buffer"],
        }),
    ]

    return config
}

What is the issue and how can i fix it? I do not have much experience with polyfills or webpack, so i do not know if the solution would be simple, or if my implementation of webpack is actually the correct way to prevent the Readable.from error from happening.

I have a xml file with this tags:

    <style>
        <sheet name="step">
<![CDATA[
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:template match="/">
    <html>
      <head>
        <title>Tabela</title>
        <style>
          table {
            border-collapse: collapse;
            width: 100%;
          }
          th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
          }
          th {
            background-color: #f2f2f2;
          }
        </style>
      </head>
      <body>
        <h2>Tabela</h2>
        <table>
          <thead>
            <tr>
              <xsl:for-each select="formData[1]/*">
                <th><xsl:value-of select="name()"/></th>
              </xsl:for-each>
            </tr>
          </thead>
          <tbody>
            <xsl:for-each select="formData">
              <tr>
                <xsl:for-each select="*">
                  <td><xsl:value-of select="."/></td>
                </xsl:for-each>
              </tr>
            </xsl:for-each>
          </tbody>
        </table>
      </body>
    </html>
  </xsl:template>

</xsl:stylesheet>

]]>
        </sheet>
    </style>
    <script>
        <function name="obj2xml">
<![CDATA[
function obj2xml(formData) {
    let xml = '<formData>n';

    for (let [key, value] of formData.entries()) {
        xml += `t<${key}>${value}</${key}>n`;
    }

    xml += '</formData>n';
    return xml;
}
]]>
        </function>
        <function name="xml2html">
<![CDATA[
function xml2html(xml_str, xslt_str) {
    const parser = new DOMParser();
    const xml = parser.parseFromString(xml_str, "application/xml");
    const xslt = parser.parseFromString(xslt_str, "application/xml");

    const xsltProcessor = new XSLTProcessor();
    xsltProcessor.importStylesheet(xslt);

    const resultDocument = xsltProcessor.transformToFragment(xml, document);
    const serializer = new XMLSerializer();
    const result_str = serializer.serializeToString(resultDocument);

    return result_str;
}
]]>
        </function>
    </script>

which I load to my page through this javascript code:

    // Obtém e armazena os estilos
    const sheets = xml_doc.querySelectorAll('style sheet');
    for (var i = 0; i < sheets.length; i++) {
        var sheet = sheets[i];
        var name = sheet.getAttribute('name');
        var content = sheet.textContent.trim();
        this.styles.set(name, content);
    }

    // Obtém e armazena as funções
    const functions = xml_doc.querySelectorAll('script function');
    for (var j = 0; j < functions.length; j++) {
        var func = functions[j];
        var name = func.getAttribute('name');
        var content = func.textContent.trim();
        const script_content = `window['${name}'] = ${content}`;
        eval(script_content);
        this.scripts.set(name, window[name]);
    }

and use it like that:

        var steps = this.section.sections.getElementsByClassName("form");
        for(var i=0; i<steps.length-1; i++) {
            var formElement = document.createElement("form");
            while(steps[i].firstChild) formElement.appendChild(steps[i].firstChild);

            const obj2xml = this.scripts.get("obj2xml");
            var xml = obj2xml(new FormData(formElement));
            var xslt = this.styles.get('step');
            const xml2html = this.scripts.get("xml2html");
            var result = xml2html(xml, xslt);

            document.getElementById("frame").contentDocument.write(result.body);
        }

where the variable xslt receive the correct values, but xml and result, which supposed to receive the result of functions, are both receiving the value ‘undefined’.

what I got wrong here?

I’m working on a React Native application where users can respond to questions in a modal. The app works perfectly on Android, but it hangs on iOS when I click the “No” button.
When the “No” button is pressed, the Failed function is called, which updates the state and opens a modal. This works fine on Android but causes the app to hang on iOS.
Below are the relevant parts of my code:

Failed Function
The function triggered when the "No" button is pressed:
////////////////
const Failed = () => {
  const data = {
    habitId: routeData?._id,
    responseType: 'FALSE',
  };
  actions
    .UpdateHabit(data)
    .then(res => {
      setResponseData(res);
      routeData = res;
      listHabit();
      refsheet?.current?.close();
      setIsModalVisible(true);
      setShowColor('RED');
    })
    .catch(error => {
      console.log(error, 'Error in Failed function');
    });
};

////////////
main_off_btns View
The view containing the "No" button:


<View style={styles.main_off_btns}>
  <TouchableOpacity
    onPress={Failed}
    style={styles.noButton}>
    <Text style={styles.Btn_text}>{'No'}</Text>
  </TouchableOpacity>
  <TouchableOpacity
    onPress={() => Success()}
    style={{...styles.box_btn, backgroundColor: colors._B1DC00}}>
    <Text style={{...styles.Btn_text, color: colors._020202}}>
      Yes
    </Text>
  </TouchableOpacity>
</View>


isModalVisible State
The modal visibility state:


const [isModalVisible, setIsModalVisible] = useState(false);

/////////
Modal View
The modal view that is displayed:


<Modal
  animationType="slide"
  transparent={true}
  visible={isModalVisible}
  onRequestClose={toggleModal}>
  <View style={styles.modalBackground}>
    <View style={styles.modalContent}>
      {showColor == 'RED' ? (
        <View>
          <Text style={styles.delet_red_text}>
            {getFailureMessage(routeData?.tags, routeData?.levels)}
          </Text>
        </View>
      ) : (
        <Text style={styles.delet_msg_text}>
          Y tomorrow to continue your journey.
        </Text>
      )}
      <TouchableOpacity
        style={styles.OkButton}
        onPress={redirectMatch}>
        <Text style={{...commonStyles.fontBold15, color: 'black'}}>
          Close
        </Text>
      </TouchableOpacity>
    </View>
  </View>
</Modal>

I am making a mock movie search engine where the initial search results will pull up an array on movies based on a search term, and after you click “SEE MORE” on the specific movie you want more details about all of the categories on the corresponding components page all come back undefined. I’m not sure where I went wrong.

This is the code component that is used for the initial search

import axios from "axios";
import React, { useEffect, useState } from "react";
import Nav from "../ui/Nav";
import { Navigate, useParams } from "react-router-dom";

const API_URL = "http://www.omdbapi.com/?apikey=cca6a59";

function Movies() {
  const [movies, setMovies] = useState([]);
  const params = useParams();
  const title = params.id;
  const [loading, setLoading] = useState(true);

  function onSearch() {
    setTimeout(() => {
      fetchMovies(movies);
      Navigate(`/moviecard/${movies}`)
    })
    fetchMovies(movies)
  }


  async function fetchMovies(title) {
    const { data } = await axios.get(`${API_URL}&s=${title}`);
    setMovies(data.Search);
    setLoading(false);
  }

  useEffect(() => {
    fetchMovies(title);
  }, [title]);
  return (
    <>
      <Nav />
      <div className="movie__row">
        <div className="movie__wrapper">
          {loading
            ? new Array(8).fill(0).map((_, index) => (
                <div className="movie" key={index}>
                  <div className="movie__img--skeleton">
                    <div className="movie__title--skeleton">
                      <div className="movie__year--skeleton"></div>
                    </div>
                  </div>
                </div>
              ))
            : movies.map((movie) => (
                <div className="movie" key={movie.id}>
                  <div className="movie__img">
                    <img src={`${movie.Poster}`} alt="poster" />
                    <div className="movie__content">
                      <h1>{movie.Title}</h1>
                      <h1>{movie.Year}</h1>
                      <p onClick={() => onSearch()}>SEE MORE</p>
                    </div>
                  </div>
                </div>
              ))}
        </div>
      </div>
    </>
  );
}

export default Movies;

After clicking the “SEE MORE” on the specific movie card the page navigates to my MovieCard component seen here

import React from "react";
import Nav from "../ui/Nav";
import axios from "axios";

const MovieCard = ({ movie: {Released, Actors, Genre, Director, Writer, Language, Plot } })

const API_URL = "http://www.omdbapi.com/?apikey=cca6a59";

async function moveDesc(imdbID) {
    const { movie } = await axios.get(`${API_URL}&i=${imdbID}`);
}

function Moviecard() {
  return (
    <>
      <Nav />
      <div className="movie__img--wrapper">
        <h1>${movie.Title}</h1>
        <img src={`${movie.Poster}`} alt="" />
      </div>
      <div className="movie__info--wrapper" key={imdbID}>
        <h3>
          <span className="red">Released: </span>${movie.Released}
        </h3>
        <h3>
          <span className="red">Actors: </span>${movie.Actors}
        </h3>
        <h3>
          <span className="red">Genre: </span>${movie.Genre}
        </h3>
        <h3>
          <span className="red">Director: </span>${movie.Director}
        </h3>
        <h3>
          <span className="red">Writer: </span>${movie.Writer}
        </h3>
        <h3>
          <span className="red">Language: </span>${movie.Language}
        </h3>
        <h3>
          <span className="red">Plot: </span>${movie.Plot}
        </h3>
      </div>
    </>
  );
}

export default Moviecard;

what is supposed to be shown is the movie description along with dynamic categories for each specific imdbID but i keep getting an undefined error shown here in this image error image after navigating to a specific movie

enter image description here error image after navigating to specific movie

Here is also a link to the github repository GitHub

I have a K6 test that is running multiple scenarios. I would like to export the test summary to Elastic and as part of it, would like to include the start and end times for the test run. I am trying to set these values inside my default function but then the values don’t stick when i get to the handleSummary() method.

`let startTime;
export default function () {
.. all scenarios and at the end i have a check
    if (!startTime){
        startTime = exec.scenario.startTime;
    }
}`

export async function handleSummary(data) { console.log("Start Time", startTime); }

The startTime is undefined inside my handleSummary method. Has anyone tried this before? Is there a better/easier way to get this info in the summary method?

Thank you in advance!

I am Trying to Create an auto play audio to play in website background

I am creating a web application for music and I decided to test it with an autoplay audio first to see how it goes.

<audio src="01-NF-HOPE-(JustNaija.com).mp3" loop autoplay></audio>

this code worked on my local computer but when I Hosted it, it didn’t play in the background

I do not understand the below code i.e. Which constructs are objects or methods? Which belong to the service worker api? What are interfaces like cache and caches? Are interfaces methods? With syntax like x.y(), x is usually an object and y is usually a method, so how do I understand installEvent.waitUtil(.. ? What is installEvent? It is passed as argument to the function {}.

Developer.mozilla.org lists many web api’s and many interfaces. addEventListener is listed under the EventTarget interface. What is meant by EventTarget.addEventListener? Is EventTarget an object? Do particular interfaces belong to particular api’s?

self.addEventListener("install", (installEvent) => {

  installEvent.waitUntil(
    caches.open(staticDevCoffee).then((cache) => {
      cache.addAll(assets);
    })
  );
});

Thanks

I’m simply trying to understand the serviceWorker code. I searched both google and stackoverflow.com.

In this example, the svg-plus button transforms into a close button when clicked and vice versa with svg.setAttribute("transform","rotate(45)");

Is it possible to time this transformation so that it’s not just a change from one to another but a smooth transition?

Here is the example:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <script>
            function rotate() {
                var svg = document.getElementById("svgID");
                if(svg.getAttribute("transform") === "rotate(45)") {
                    svg.setAttribute("transform","rotate(0)");
                } else {
                    svg.setAttribute("transform","rotate(45)");
                }
            }
        </script>

        <style>
            #button {
                margin: 0;
                padding: 0;
                background: none;
                outline: none;
                box-shadow: none;
                border: none;
            }
        </style>

    </head>
    <body>

     <button id="button" onclick="rotate()">
        <svg id="svgID"
        width="100%"
        height="100%"
        viewBox="0 0 142.40739 142.40991"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:svg="http://www.w3.org/2000/svg">
       <defs
          id="defs6" />
        <path
          id="rect234"
          style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-miterlimit:0;stroke-dasharray:none;paint-order:stroke fill markers"
          d="m 85.223081,28.929132 a 4.2333333,4.2333333 0 0 0 -4.233333,4.233333 v 62.801852 l -65.486442,-0.24339 a 4.107912,4.107912 0 0 0 -4.247803,3.96255 4.2333333,4.2333333 0 0 0 4.217313,4.249353 l 65.516932,0.24339 v 62.9295 a 4.107912,4.107912 0 0 0 3.978568,4.23333 4.2333333,4.2333333 0 0 0 4.233334,-4.23333 v -62.89901 l 60.21338,0.22376 a 4.107912,4.107912 0 0 0 4.2478,-3.96255 4.2333333,4.2333333 0 0 0 -4.21731,-4.248833 L 89.20165,95.994807 V 33.162465 a 4.107912,4.107912 0 0 0 -3.978569,-4.233333 z"
          transform="translate(-11.255471,-28.929132)" />
        </svg>
     </button>

    </body>
</html>

svg transformation with `setAttribute(“transform”,rotate(45)”):

I want to create an effect, where when a user scrolls to a certain Div, elements within it appear in order, starting from the left-most element to the right-most. I’ve been successful with just making multiple elements appear if a user scrolls vertically to a certain div, now I am trying achieve showing elements within a div show in a certain order.

Here is what I have tried so far. Before I get to the Jquery aspect, I gave each of the elements/their classes CSS displays of “none” and just use the .show() function in Jquery. These are all just placeholder names used in this example expect for gmp-map, or a Google Map.

window.addEventListener("scroll", function() {

    if (this.window.scrollY >= 116) {
        const div = $(".div");
        const divImg = $(".div>.col>img");
        const map = $("gmp-map");
    
        function showDiv1Elements() {
          divImg.show();
        }
    
        function showDiv2Elements() {
          map.show();
        }
    
    
        div.on(scrollY, showDiv1Elements);
        div.on(scrollY, showDiv2Elements);
    
    }

});