Category: javascript

Category Added in a WPeMatico Campaign

Move an svg icon along scroll on a specified path

I am working on a project which have a requirement of moving a bee svg icon along scroll, as the user move through the website. Here is the ss i am attaching for refrence.
As the user scroll the bee starts from top and fills in the grey color line with the pink color, and as user scroll backward the bee svg icon moves back.Screen Shot for Refrence

What i have done so far is the code below.
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>

    <div
        style="height: 100vh; background-color: blue; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; color: yellow; font-size: x-large;">
        Main View
    </div>
    <div style="position: relative;">
        <div style="position:absolute; top:0; right:0; width:100%; height:auto; background:url('background-map.jpg') no-repeat;"
            id="route">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 2000" id="svgRoute">
                <path id="path" data-name="Path 71803"
                    d="M50.786,1439.052C-3.729,1320.367,79.128,1289.559,346.6,1288.436c145.008-.609,229.222-45.98,230.488-110.767L561.214,820.374C615.729,701.689,532.872,670.881,265.4,669.758c-145.008-.609-229.222-45.98-230.488-110.767L50.786,219.374C-3.729,100.689,79.128,69.881,346.6,68.758c145.008-.609,229.222-45.98,230.488-110.767L558.918-430.4c-10.105-20.388-36.6-42.469-104.6-42.969C328.9-474.294,285-547.92,310.561-646.052"
                    fill="none" stroke="#eee" stroke-linecap="round" stroke-width="2" />

                <circle r="2" cy="18.591" cx="169.887" fill="#CE0F69" fill-opacity=".96" fill-rule="evenodd"
                    stroke="#CE0F69" stroke-width=".55" />

                <!-- car svg  -->
                <path id="c"
                    d="M 3.02008,-2.00446 A 0.384,0.384 0 0 0 2.99106,-1.85469 L 2.99789,-0.835296 2.98889,-0.837286 A 0.113,0.113 0 0 0 2.87613,-0.723255 L 2.88243,0.358786 A 0.113,0.113 0 0 0 2.99646,0.471542 L 3.00492,0.469969 3.01203,1.63073 A 0.384,0.384 0 0 0 3.39872,2.01296 L 8.65185,1.97994 C 8.80663,1.97929 8.93788,1.88712 8.99825,1.75528 9.02715,1.83055 9.09151,1.91021 9.23511,1.90987 L 12.491,1.88891 12.2534,2.32758 A 0.134,0.134 0 0 0 12.4886,2.45492 L 12.797,1.88816 14.2024,1.87929 C 14.7857,1.87543 15.2515,1.40414 15.2473,0.821764 L 15.2448,0.438872 A 0.113,0.113 0 0 0 15.4372,0.357561 L 15.4309,-0.72448 A 0.113,0.113 0 0 0 15.2373,-0.803744 L 15.2349,-1.18664 C 15.2319,-1.76949 14.7597,-2.23574 14.1774,-2.23146 L 12.5876,-2.22247 12.3653,-2.81052 A 0.133,0.133 0 0 0 12.1927,-2.88767 0.133,0.133 0 0 0 12.1143,-2.71463 L 12.3018,-2.22003 9.25118,-2.20155 C 9.08154,-2.20452 9.00514,-2.13533 8.9706,-2.05654 A 0.382,0.382 45 0 0 8.62474,-2.27078 L 3.37245,-2.23957 A 0.384,0.384 0 0 0 3.01965,-2.00355 Z"
                    fill="black" fill-rule="evenodd" />
            </svg>
        </div>

    </div>


    <!-- Include jQuery from CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Your custom JavaScript file -->
    <script src="./index.js"></script>
</body>

</html>

index.css

#route {
    /* margin-top: 200px; */
}

.code {
    height: 150px;
    width: 250px;
    background: #000;
    color: #fff;
    margin: 20px;
    width: 40%;
    clear: both;
    height: 200px;
    background: #000;
    border-radius: 2px;
    margin: 100vh 0;
    padding: 10px;
}

svg {
    position: relative;
    height: 300vh;
}

index.js

$(document).ready(function () {

    $(window).scroll(function () {
        drawLine($('#bx_a'), document.getElementById('path'));
        positionTheDot();
        positionCar();
    });

    // init the line length
    drawLine($('#bx_a'), document.getElementById('path'));
    positionTheDot();
    positionCar();

    function positionTheDot() {
        // What percentage down the page are we? 
        var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
        // Get path length
        var path = document.getElementById("path");
        var pathLen = path.getTotalLength();
        // Get the position of a point at <scrollPercentage> along the path.
        var pt = path.getPointAtLength(scrollPercentage * pathLen);

        var scrollY = window.scrollY || window.pageYOffset;
        var maxScrollY = document.documentElement.scrollHeight - window.innerHeight;
        var path = document.getElementById("path");
        // Calculate distance along the path the car should be for the current scroll amount
        var pathLen = path.getTotalLength();
        var dist = pathLen * scrollY / maxScrollY;
        var pos = path.getPointAtLength(dist);
        // Calculate position a little ahead of the car (or behind if we are at the end), so we can calculate car angle
        if (dist + 1 <= pathLen) {
            var posAhead = path.getPointAtLength(dist + 1);
            var angle = Math.atan2(posAhead.y - pos.y, posAhead.x - pos.x);
        } else {
            var posBehind = path.getPointAtLength(dist - 1);
            var angle = Math.atan2(pos.y - posBehind.y, pos.x - posBehind.x);
        }

        // Position the red dot at this point
        // var dot = document.getElementById("dot");
        // dot.setAttribute("transform", "translate(" + pt.x + "," + (pt.y + 5) + ")");
    };

    //draw the line
    function drawLine(container, line) {
        var pathLength = line.getTotalLength(),
            maxScrollTop = $(document).height() - $(window).height(),
            percentDone = $(window).scrollTop() / maxScrollTop,
            length = percentDone * pathLength;
        line.style.strokeDasharray = [length, pathLength].join(' ');
    }

    function positionCar() {
        var scrollY = window.scrollY || window.pageYOffset;
        var maxScrollY = document.documentElement.scrollHeight - window.innerHeight;
        var path = document.getElementById("path");
        // Calculate distance along the path the car should be for the current scroll amount
        var pathLen = path.getTotalLength();
        var dist = pathLen * scrollY / maxScrollY;
        var pos = path.getPointAtLength(dist);
        // Calculate position a little ahead of the car (or behind if we are at the end), so we can calculate car angle
        if (dist + 1 <= pathLen) {
            var posAhead = path.getPointAtLength(dist + 1);
            var angle = Math.atan2(posAhead.y - pos.y, posAhead.x - pos.x);
        } else {
            var posBehind = path.getPointAtLength(dist - 1);
            var angle = Math.atan2(pos.y - posBehind.y, pos.x - posBehind.x);
        }
        // Position the car at "pos" totated by "angle"
        var car = document.getElementById("c");
        car.setAttribute("transform", "translate(" + (pos.x) + "," + (pos.y) + ") rotate(" + (rad2deg(angle)) + ")");
    }

    function rad2deg(rad) {
        return 180 * rad / Math.PI;
    }

});

Problems i am facing

1- I want to scroll the bee as soon as the div containing the bee scrolls in view, not before that.
2- Instead of moving forward the icon move backward, idk it might be because of some css property of transform is applied on the svg of path.
3- I have the bee icon of my own which i want to use instead of the car icon, the code for the bee icon is

bee.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46.302" height="47.062" viewBox="0 0 46.302 47.062">
  <defs>
    <clipPath id="clip-path">
      <rect id="Rectangle_37645" data-name="Rectangle 37645" width="34.608" height="36.107" fill="#ce0f69"/>
    </clipPath>
  </defs>
  // code for the svg
</svg>

4- I want to center align the bee path and want it to be responsive.
5- As long as i am using the car svg the andle for car remains perfect, but when i use my own svg, the angle for bee along the whole journey disturbs and becomes irregular.

Here is the link to the site to whom’s code i am trying to mimic

https://codepen.io/yesvin/pen/XymwvX

How can I use Paste in a Website that doesn’t allow pasting?

I am on a website that doesn’t allow pasting into a text area field and I would like to bypass it as I use voice typing and paste my text from there.

Everytime I try to paste something into the text area field, it gives me a warning/error message underneath stating: ‘This field doesn’t allow pasting’.

I am not a HTML, CSS, Javascript expert but have tried a lot of different options but to no avail.

Some of the things I have tried which didn’t work:

  1. Highlighting the text and drag it into the text field.
  2. Manually editing the inner HTML of the field when inspecting Element on Google Chrome
  3. Going through Event Listeners tab within the Inspect Element and removing all ‘paste’ related event listeners.
  4. Using this code that I found online – I ran it in console and tried pasting again but still didn’t work.
      var allowPaste = function(e) {
      e.stopImmediatePropagation();
      console.log("Free the paste!")
      return true;
    };
    document.addEventListener('paste', allowPaste, true);

I am not sure if this is a red-herring but while trying multiple things, I tried to copy the event listeners object. So, I went to Event Listeners tab, in the ‘DOMContentLoaded’ event, there is Window object.
This object has key value pairs as such:

useCapture:false
passive:false
once: false
handler: f()

I right clicked and selected ‘Copy Property Path’. Then I accidently pasted this in the text area field and it worked! but it only pasted the word ‘passive’. I have since tried everything but you can only paste the ‘useCapture’, ‘passive’ and ‘once’ words. I have tried pasting anything else from keyboard, CTRL V and from Windows Clipboard as well but to no avail.

Here’s the HTML of the field:

<textarea rows="1" aria-invalid="false" name="Explanation: *-0" class="MuiInputBase-input MuiOutlinedInput-input jss373 MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline" style="height: 624px; overflow: hidden;">

Any help would be much appreciated.

Can npm Help Identify the Compatible Version of Primeng for Angular 16 Dependencies?

When attempting to install primeng, I encountered the following error message:

npm i primeng
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"~16.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^17.0.0" from [email protected]
npm ERR! node_modules/primeng
npm ERR!   primeng@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!

The reason for this error is that primeng requires Angular version 17, while my project is currently using Angular version 16. The relevant dependencies listed in my package.json file include:

   "@angular/animations": "~16.2.0",
    "@angular/common": "~16.2.0",
    "@angular/compiler": "~16.2.0",
    "@angular/core": "~16.2.0",
    "@angular/forms": "~16.2.0",
    "@angular/platform-browser": "~16.2.0",
    "@angular/platform-browser-dynamic": "~16.2.0",
    "@angular/router": "~16.2.0",
    "@nx/angular": "16.10.0"

To identify which version of primeng is compatible with my current Angular version without resorting to trial and error with different versions, I need a method to determine compatibility through npm.

Is there a way for npm to provide information on which version of primeng is compatible with the Angular versions specified in my package.json file?

How to determine if a web page, stream ouput is via ssr or websocket?

I’m a js newbie, I’ve been working on LLM applications lately, and I’ve seen that openai uses SSR, but I’d like to analyze the interface and format of a specific request via F12, and use it as a reference for my LLM application interface design.

How should I analyze interfaces like streaming output?

I’m looking at the interface via F12, but I can’t see the specific streaming outputs

Why this.add.group({}) works well in tutorial but not in my game?

I’m making a game with Phaser and I’m trying to group tiles together and
render them out like this:

My code:

let gameScene = new Phaser.Scene('Game');

gameScene.preload = function() {
    this.load.image('background', 'assets/backgrounds/beach/game_background_1.png');
    this.load.image('tile', 'assets/images/tile.png');
    

}

gameScene.create = function() {
    let bg = this.add.sprite(0, 0, 'background').setOrigin(0, 0);
    this.tiles = this.add.group({
        key: 'tile',
        repeat: 5,
        setXY: {
            x: 150,
            y: this.sys.game.config.height - 80,
            stepX: 150,
            stepY: this.sys.game.config.height - 80,
        }
    });

    Phaser.Actions.ScaleXY(this.tiles.getChildren(), -0.5, -0.5);

}

gameScene.update = function() {

}

code in tutorial:

gameScene.preload = function(){
  // load images
  ...
  ...
  this.load.image('enemy', 'assets/dragon.png');
  ...
};

gameScene.create = function() {
    this.enemies = this.add.group({
      key: 'enemy',
      repeat: 5,
      setXY: {
        x: 90,
        y: 100,
        stepX: 80,
        stepY: 20
    }
  });

  Phaser.Actions.ScaleXY(this.enemies.getChildren(), -0.4, -0.4);

this.add.group({}) works fine in tutorial but when I use it in my game I get only 1 tile rendered. What’s happening here ?

Why does the footer menu get cropped when I add the “Product we sell in our website”

Here is the pic when there is no “Product we sell in our website”, the footer is not cropped
Not croped

But when I add the “Product we sell in our website”, here is the code

<!DOCTYPE html>


<!---------- Meta HTML Starts --------->

<html>
   <head>
      <title>Website Site</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
      <script src="https://kit.fontawesome.com/22fa5330d1.js" crossorigin="anonymous"></script>
      <style>
/********** Common CSS Starts **********/  
html, body {
  font-family: Roboto, sans-serif, arial;
  font-size: 14px;
  color: #242424;
  font-weight: 400;
}
html {
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
  font-size:10px;
  -webkit-tap-highlight-color:transparent;
}
* {
  margin:0px;
  padding:0px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  margin:0;
  padding:0;
  outline:0;
}
img{
  border-radius: 8px;
}
/*-----section-----*/
nav{
  display: flex;
  padding: 2% 6%;
  justify-content: space-between;
  align-items: center;
}
nav-img{
  width: 100px;
}
.nav-links{
  flex: 1;
  text-align: right;
}
.nav-links ul li{
  list-style: none;
  display: inline-block;
  padding: 8px 12px;
  position: relative;
}
.nav-links ul li a{
  color: #fff;
  text-decoration: none;
  font-size: 13px;
}
.nav-links ul li::after{
  content: '';
  width: 0%;
  height: 2px;
  background: #fff;
  display: block;
  margin: auto;
  transition: 0.5s;
}
.nav-links ul li:hover::after{
  width: 100%;
}
.header{
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(jennie.png);
    background-position: center;
    background-size: cover;
    position: relative;
}
.text-box{
    width: 90%; 
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.text-box h1{
    font-size: 62px;
}
.text-box p{
    margin: 10px 0 40px;
    font-size: 14px;
    color: #fff;
}
.hero-btn{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}
.hero-btn:hover{
    border: 1px solid #787eff;
    background: #787eff;
    transition: 1s;
}
.container {
  width:1150px;
  margin:0px auto;
  display:table;
}
.width-100 {
  width:100%;
  float:left;
}
.width-50 {
  width:50%;
  float:left;
}
.width-25 {
  width:25%;
  float:left;
}
.width-75 {
  width:75%;
  float:left;
}
.width-80 {
  width:80%;
  float:left;
}
.width-60 {
  width:60%;
  float:left;
}
.width-40 {
  width:40%;
  float:left;
}
.width-33 {
  width:33%;
  float:left;
}
.width-30 {
  width:30%;
  float:left;
}
.width-20 {
  width:10%;
  float:left;
}
.main-section {
  width:100%;
  float:left;
  padding-top:80px;
  padding-bottom:80px;
}
.bg-grey {
  background:#f0f3fa;
}
.heading-section {
  font-size: 25px;
  text-align: center;
}
.heading-section span {
  color: #787eff;
}
.subhead-section {
  font-size: 16px;
  text-align: center;
  margin-bottom: 40px;
}
/********** Common CSS Ends **********/
/**********  Logo and Search Panel CSS Code Starts  **********/
.search-panel {
  background: #31bbf1;
  padding: 12px 0px;
}
.search-textbox {
  padding-left: 16px;
  height: 40px;
  width: 80%;
  border: 1px solid #fff;
  float: left;
}
.search-button {
  height: 42px;
  width: 55px;
  border: none;
  background: white;
  float: left;
}
.search-button i {
  color: #f13f31;
}
.cart-sect {
  list-style: none;
  float: right;
  margin-top: 8px;
}
.cart-sect li {
  float: left;
  padding: 0px 6px;
}
.cart-sect li a {
  font-size: 14px;
  color: #ffffff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
}
.cart-sect li i {
  font-size: 14px;
  color: #ffffff;
}
/**********  Logo and Search Panel CSS Code Ends  **********/
/**********  Main Menu CSS Code Starts  **********/
.main-menu {
  list-style: none;
}
.main-menu a {
  font-weight: 500;
  color: #2b304a;
  font-size: 17px;
  font-family: Roboto, sans-serif, arial;
  text-decoration: none;
}
.main-menu li {
  float: left;
  padding: 12px 20px;
  margin-left: 60px;
}
/**********  Main Menu CSS Code Ends  **********/

/**********  Product-Section CSS Code Starts  **********/
.small-container{
    max-width: 1080px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;
}
.row{
  margin-top: 5%;
  display: flex;
  justify-content: space-between;
}
.col-3{
    flex-basis: 30%;
    min-width: 250px;
    margin-bottom: 30px;
    transition: transform 0.5s;
}
.col-3 img{
    width: 90%; 
}
.col-3:hover{
    transform: translateY(-5px);
}
.title{
    text-align: center;
    margin: 0 auto 80px;
    position: relative;
    line-height: 60px;
    color:#ffffff;
}
.categories{
    margin: 70px 0;
}
.col-3{
    flex-basis: 30%;
    min-width: 250px;
    margin-bottom: 30px;
    transition: transform 0.5s;
}
.col-3 img{
    width: 90%; 
}
.col-3:hover{
    transform: translateY(-5px);
}
.small-container{
    max-width: 1080px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;
}
.col-4{
    flex-basis: 25%;
    padding: 10px;
    min-width: 200px;
    margin-bottom: 50px;
    transition: transform 0.5s;
}
.col-4 img{
    width: 100%;
}
.col-2{
    flex-basis: 50%;
    min-width: 300px;
}
.col-2 img{
    max-width: 100%;
    padding: 5px 0;
}
.title{
    text-align: center;
    margin: 0 auto 80px;
    position: relative;
    line-height: 60px;
    color:#000;
}
.title::after{
    content: '';
    background: #0F1035;
    width: 80px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.offer{
    background: radial-gradient(#fff,#537EC5);
    margin-top: 80px;
    padding: 30px 0;
}
.col-2 .offer-img{
    padding: 50px;
}
/**********   Product-Section CSS Code Ends  **********/

/**********   About us   **********/
.course{
  width: 80%;
  margin: auto;
  text-align: center;
  padding-top: 100px;
}
.course-col{
  flex-basis: 31%;
  background: #BBE2EC;
  border-radius: 10px;
  margin-bottom: 5%;
  padding: 20px 12px;
  box-sizing: border-box;
  transition: 0.5s;
}
.course-col:hover{
  box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
}
.course-col-2{
  flex-basis: 31%;
  background: #ffffff;
  border-radius: 10px;
  margin-bottom: 5%;
  padding: 20px 12px;
  box-sizing: border-box;
  transition: 0.5s;
}
/**********   About us Ends  **********/

/**********  Footer-Section CSS Code Starts  **********/
.footer {
  background: #232f3e;
  padding: 50px 0px;
}
.quicklink-menu {
  list-style: none;
  padding-left: 10px;
}
.quicklink-menu li a {
  color: #fff;
  line-height: 2.5;
  font-size: 15px;
  text-decoration: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.social-media {
  list-style: none;
  margin-top: 10px;
}
.social-media li a img {
  width: 30px;
}
.social-media li {
  float: left;
  padding: 0px 8px;
}
.quicklink-heading {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-bottom: 10px;
}
.get-in-touch {
  list-style: none;
  padding-left: 10px;
}
.get-in-touch li i {
  color: #ed372c;
  font-size: 20px;
}
.get-in-touch li {
  color: #fff;
  line-height: 2.5;
  font-size: 15px;
  text-decoration: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.footer-e-mail {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
}
.footer-website {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
}
.footer2-bacbor {
  background: #232f3e;
  padding: 10px 0px;
  border-top: 1px solid #898989;
}
.footer2-content {
  font-size: 14px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
}
/**********   Footer-Section CSS Code Ends  **********/
      </style>
   </head>
   <body>

<!---------- Meta HTML Ends --------->



<!---------- Logo and Search Panel HTML Code Starts --------->

<section class="header">
  <nav>
    <a href="Comp QA.html"><img src="logo.png" width="60px"></a>
    <div class="nav-links" id="navLinks">
        <i class="fa fa-xmark" onclick="hidemenu()"></i>
        <ul> 
            <li><a href="E:COMP QAhome.html" target="_blank">HOME</a></li>
            <li><a href="" target="_blank">STORE</a></li>
            <li><a href="" target="_blank">ABOUT</a></li>
            <li><a href="" target="_blank">ACCOUNT</a></li>
            <li><a href="" target="_blank">CART (0)</a></li>
        </ul>
    </div>
    <i class="fa fa-bars" onclick="showmenu()"></i>
  </nav>

    <div class="text-box">
        <h1>Smell Good and Look Good</h1>
        <p>We believe that PTK Clothing can give you the best clothing you can wear!</p>
        <a href="home.html" target="_blank" class="hero-btn">Shop Shirts</a>
        <a href="home.html" target="_blank" class="hero-btn">Shop Traditional Wear</a>
    </div>
</section>

  <!---------- Logo and Search Panel HTML Code Ends --------->

    <!------ featured products ------>
  <div class="small-container">
    <h2 class="title">Shirts</h2>   
    <div class="row">
      <div class="col-3">
        <img src="tee1.png" width="100">
        <h4>"THE SCENT YOU CAN'T SMELL" - BLACK</h4>
        <div class="rating">
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
        </div>
      </div>   
      <div class="col-3">
        <img src="tee2.png" width="100">
        <h4>"NEVER ENDING FRAGRANCE" - BROWN</h4>
        <div class="rating">
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
        </div>
      </div>
      <div class="col-3">
        <img src="tee3.jpg" width="100">
        <h4>PTK STREETWEAR - BLACK</h4>
        <div class="rating">
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
        </div>
      </div>
      <div class="col-3">
        <img src="tee4.jpg" width="100">
        <h4>"FRAGRANCE" - WHITE</h4>
        <div class="rating">
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
          <i class="fa-solid fa-star"></i>
        </div>
      </div>
    </div>

    <!------ featured products ------>

    <section class="course">
      <h1>Products We Sell On Our Website</h1>
      <p>Displayed here are the products we sell to our Customers!</p>
  
      <div class="row">
          <div class="course-col">
              <h3>Sports Equipments</h3>
              <p> 
                  Sports equipment encompasses a wide range of specialized gear tailored to enhance athletic performance and safety. 
                  Each piece serves a crucial role in facilitating the practice and enjoyment of various sports. 
                  Innovations in design and technology continually evolve to meet the evolving needs and demands of athletes across different disciplines.</p>
          </div>
          <div class="course-col">
              <h3>Sports Wear</h3>
              <p> 
                  Sports wear refers to clothing specifically designed to optimize performance and comfort during physical activity. 
                  Engineered with moisture-wicking fabrics, breathable materials, and ergonomic designs, sports wear allows athletes to move freely while staying dry and comfortable. 
                  From compression garments to specialized footwear, sports wear plays a crucial role in enhancing mobility, reducing fatigue, and preventing injuries during workouts and competitions.</p>
          </div>
          <div class="course-col">
              <h3>Our Own Merchandise</h3>
              <p> Our own merchandise represents an extension of our brand identity, embodying our values, style, and message. 
                      Crafted with meticulous attention to detail and quality, each item serves as a tangible representation of our commitment to excellence.
                      By offering our own merchandise, we aim to deepen connections with our audience, foster brand loyalty, and create memorable experiences for our customers.</p>
          </div>
      </div>
      </div>

  <!-- Footer-Section HTML Code STARTS -->
<div class="width-100 margin-top-50 footer">
    <div class="container">
      <div class="width-25">
        <h2 class="quicklink-heading">Account Detail</h2>
        <ul class="quicklink-menu">
          <li><a href="#">Home</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="#">Search</a></li>
          <li><a href="#">Cart</a></li>
          <li><a href="#">Checkout</a></li>
        </ul>
      </div>
      <div class="width-25">
        <h2 class="quicklink-heading">Quick Link</h2>
        <ul class="quicklink-menu">
          <li><a href="#">My Profile</a></li>
          <li><a href="#">Change Password</a></li>
          <li><a href="#">Order History</a></li>
          <li><a href="#">My Whislist</a></li>
          <li><a href="#">My Cashback</a></li>
        </ul>
      </div>
      <div class="width-25">
        <h2 class="quicklink-heading">Quick Link</h2>
        <ul class="quicklink-menu">
          <li><a href="#">Login</a></li>
          <li><a href="#">Faq</a></li>
          <li><a href="#">Contact us</a></li>
          <li><a href="#">Download App</a></li>
          <li><a href="#">Refer & Earn Cashback</a></li>
        </ul>
      </div>
      <div class="width-25">
        <h2 class="quicklink-heading">GET IN TOUCH</h2>
        <ul class="get-in-touch">
          <li><i class="fa fa-envelope-o" aria-hidden="true"></i> E-MAIL:<a href="#" class="footer-e-mail"> [email protected]</a></li>
          <li><i class="fa fa-headphones" aria-hidden="true"></i> WHATS-APP: +63 -1234 456 7890</li>
          <li><i class="fa fa-fax" aria-hidden="true"></i> CONTACT NO.: +63 -(123)-4567890</li>
        </ul>
        <ul class="social-media">
          <li><a href="#"><img src="facebook.png"></a></li>
          <li><a href="#"><img src="twitter.png"></a></li>
          <li><a href="#"><img src="linkedin.png"></a></li>
          <li><a href="#"><img src="instagram.png"></a></li>
        </ul>
      </div>
    </div>
  </div>

  <!---------- Footer-Section HTML Code Ends --------->


  <!-----Javascript for Toggle Menu----->

  <script>

    var navLinks = document.getElementById("navLinks")
    function showmenu(){
        navLinks.style.right= "0";
    }
    function hidemenu(){
        navLinks.style.right = "-200px";
    }

  </script>

</body>
</html>

Here is a pic if you can’t run the code

enter image description here

This is what happens. Please someone help

I already tried searching google and asking blackbox ai for answers but instead adds more errors to my code. I tried adding
after the blue blocks thinking that it will fix the problem, buti it still does not

requireJS element is not a function

simple example RequireJs
I get Error :
Uncaught TypeError: hi is not a function

say.js

define(function () { 
    var say={};
    say.hi=function hi(){
    console.log('hi');
    }
    return say;
});

index.html

<script src="/js/require.js"  data-main="/js/config.js"  ></script>
<script>
    var hi; 
    require(['say'], function(say){
        hi=function() { say.hi();}
    }); 
    hi();
</script>

config.js

require.config({
    baseUrl: '/js',
    paths: {jquery: 'jquery'},   
});

createError is not defined

I’m trying to get my code to return me to my flights detail page with a controller function. My routes for the createTicket and new ticket are working and render the create ticket form but once I press the ‘create ticket in the browser I am hit with a createError is not defined.

I have checked my routes and controllers and It seems that all of it is correct and working except when I hit the create ticket button it send me to the createError. It seems to be that when my page is rendering out it is trying to render the path /flights//tickets and I dont have this defined anywhere in my code.

```
async function createTicket(req, res) {
  const flightId = req.params.flightId;

  try {
    const ticket = await Ticket.create({
      ...req.body,
      flight: flightId,
    });

    res.redirect(`/flights/${flightId}`);
  } catch (error) {
    console.error(error);
    res.status(500).send("Internal Server Error");
  }
}

module.exports = {
  createTicket,
};

const express = require("express");
const router = express.Router();
const ticketsController = require("../controllers/ticketsController");

router.post("/flights/:flightId/tickets", ticketsController.createTicket);

module.exports = router;
```

Can you please help me to display the news properly from the api to my webpage inside a card

link of the api is : https://rapidapi.com/letscrape-6bRBa3QguO5/api/real-time-news-data/

this is the src/services/cryptoNewsApi.js file

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

const cryptoNewsHeaders = {
    'X-RapidAPI-Key': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    'X-RapidAPI-Host': 'real-time-news-data.p.rapidapi.com'
}

const baseUrl = "https://real-time-news-data.p.rapidapi.com";

const createRequest = (url) => ({ url, headers: cryptoNewsHeaders })

export const cryptoNewsApi = createApi({
    reducerPath: "cryptoNewsApi",
    baseQuery: fetchBaseQuery({ baseUrl }),
    endpoints: (builder) => ({
        getCryptoNews: builder.query({
            query: ({ newsCategory, count }) => createRequest(`/search?query=${newsCategory}&country=IN&lang=en&count=${count}`),
        })
    })
});

export const {
    useGetCryptoNewsQuery,
} = cryptoNewsApi;

can anyone please complete this function to show news title, image and clickable link to go to the news as well

please complete this src/component/news.jsx file

import React from "react";
import { Select, Typography, Row, Col, Avatar, Card } from "antd";
import moment from "moment";

import { useGetCryptoNewsQuery } from "../services/cryptoNewsApi";

const { Text, Title } = Typography;
const { Option } = Select;

const News = ({ simplified }) => {
    const { data: cryptoNews } = useGetCryptoNewsQuery({ newsCategory: "Cryptocurrency", count: simplified ? 10 :100 });
    
    

    return (
        <div>
            News
        </div>
    )
}

export default News

Language Switching and Page Routing Issue in HTML Header

I’m encountering an issue with language switching and page routing in the header of my HTML website. I’ve implemented a header with language options and navigation links, but the language switching and page routing behavior doesn’t work as expected.

Here’s a breakdown of the problem and the relevant code snippets:

Problem Description:

  • Language Switching: I have language links (EN and BG) in my header that should allow users to switch between English and Bulgarian versions of the website.
  • Page Routing: When a user clicks on a navigation link like “Contact”, they should be routed to the appropriate language version of the Contact page (e.g., /contact/en or /contact/bg).

Current Behavior:

  • When the homepage language is set to Bulgarian and I click on “Contact”, it routes me to the English version of the Contact page instead of the Bulgarian version of the Contact page.
  • Additionally, when I attempt to change the language on the Contact page to Bulgarian, it routes me back to the Bulgarian version of the homepage.

Relevant Code Snippets:

<header
  id="header"
  class="header--has-languages header--has-search header--has-cta header--has-contact header--has-social-links header--has-collision-detection header--has-expanded-panel"
  style="
    background-image: url('https://demo.lsvr.sk/html/beautyspot/images/header_bg.jpg');
  "
>
  <div class="header__inner">
    <div class="header__content">
      <!-- HEADER LANGUAGES : begin -->
      <div class="header-languages">
        <span class="screen-reader-text">Choose language</span>
        <ul class="header-languages__list">
          <li class="header-languages__item header-languages__item--active">
            <a href="#en" class="header-languages__item-link">EN</a>
          </li>

          <!-- Inside the header-languages__list -->
          <li class="header-languages__item">
            <a href="#bg" class="header-languages__item-link">BG</a>
          </li>
        </ul>

        <button
          type="button"
          class="header-languages__toggle"
          title="Choose language"
        >
          <span
            class="header-languages__toggle-icon icon-close"
            aria-hidden="true"
          ></span>
          <span class="header-languages__toggle-label">EN</span>
        </button>
      </div>
      <!-- HEADER LANGUAGES : end -->

      <!-- HEADER BRANDING : begin -->
      <div class="header-branding">
        <div class="header-branding__inner">
          <!-- HEADER LOGO : begin -->
          <div class="header-logo">
            <a href="http://localhost:4000" class="header-logo__link">
              <img
                src="/images/logo.png"
                class="header-logo__image"
                alt="Logo"
              />
            </a>
          </div>
          <!-- HEADER LOGO : end -->

          <!-- HEADER TITLE TAGLINE : begin -->
          <div class="header-title-tagline">
            <div class="header-title">
              <a href="http://localhost:4000" class="header-title__link"
                >BeautySpot</a
              >
            </div>

            <p class="header-tagline">HTML Template for Beauty Salons</p>
          </div>
          <!-- HEADER TITLE TAGLINE : end -->
        </div>
      </div>
      <!-- HEADER BRANDING : end -->

      <!-- HEADER MENU : begin -->
      <nav class="header-menu" aria-label="Header menu">
        <ul class="header-menu__list" role="menu">
          <!-- MENU ITEM : begin -->
          <li
            class="header-menu__item header-menu__item<%= (selection == 'home' && '--current') %> header-menu__item <% menu.items.home.length > 0 && --has-children %>"
          >
            <span class="header-menu__item-link-wrapper">
              <a
                href="<%= menu.items.home.hrefs[0]%>"
                class="header-menu__item-link"
                >Home</a
              >
            </span>

            <% if(menu.items.home.length > 0) { %>

            <button
              type="button"
              class="header-menu__submenu-toggle"
              title="Expand submenu"
            >
              <span
                class="header-menu__submenu-toggle-icon"
                aria-hidden="true"
              ></span>
            </button>

            <ul class="header-menu__submenu">
              <li class="header-menu__item header-menu__item--current">
                <a
                  href="index.html"
                  class="header-menu__item-link"
                  role="menuitem"
                  >Home 1</a
                >
              </li>

              <li class="header-menu__item">
                <a
                  href="index-2.html"
                  class="header-menu__item-link"
                  role="menuitem"
                  >Home 2</a
                >
              </li>
            </ul>
            <% }; %>
          </li>
          <!-- MENU ITEM : end -->

          <!-- MENU ITEM : begin -->
          <li
            class="header-menu__item header-menu__item<%= (selection == 'services' && '--current') %>"
          >
            <span class="header-menu__item-link-wrapper">
              <a
                href="<%= menu.items.services.hrefs[0] %>"
                class="header-menu__item-link"
                >Our Services</a
              >
            </span>
          </li>
          <!-- MENU ITEM : end -->

          <!-- MENU ITEM : begin -->
          <li
            class="header-menu__item header-menu__item<%= (selection == 'store' && '--current') %> <% menu.items.store.length > 0 && --has-children %>"
          >
            <span class="header-menu__item-link-wrapper">
              <a
                href="<%= menu.items.store.hrefs[0] %>"
                class="header-menu__item-link"
                >Store</a
              >
            </span>

            <% if(menu.items.store.length > 0) { %>

            <button
              type="button"
              class="header-menu__submenu-toggle"
              title="Expand submenu"
            >
              <span
                class="header-menu__submenu-toggle-icon"
                aria-hidden="true"
              ></span>
            </button>

            <ul class="header-menu__submenu">
              <li class="header-menu__item">
                <a
                  href="product-archive.html"
                  class="header-menu__item-link"
                  role="menuitem"
                  >Products</a
                >
              </li>

              <li class="header-menu__item">
                <a
                  href="http://localhost:4000/cart"
                  class="header-menu__item-link"
                  role="menuitem"
                  >Cart</a
                >
              </li>

              <li class="header-menu__item">
                <a
                  href="product-checkout.html"
                  class="header-menu__item-link"
                  role="menuitem"
                  >Checkout</a
                >
              </li>
            </ul>

            <% }; %>
          </li>
          <!-- MENU ITEM : end -->

          <!-- MENU ITEM : begin -->
          <li
            class="header-menu__item header-menu__item--has-children header-menu__item<%= (selection == 'about us' && '--current') %>"
          >
            <span class="header-menu__item-link-wrapper">
              <a
                href="<%= menu.items.about.hrefs[0] %>"
                class="header-menu__item-link"
                >About Us</a
              >
            </span>

            <button
              type="button"
              class="header-menu__submenu-toggle"
              title="Expand submenu"
            >
              <span
                class="header-menu__submenu-toggle-icon"
                aria-hidden="true"
              ></span>
            </button>

            <ul class="header-menu__submenu">
              <% if(menu.items.about.submenus.length > 0) { %> <% for(let i = 0;
              i < menu.items.about.submenus.length; i++) { %>
              <li class="header-menu__item">
                <a
                  href="<%= menu.items.about.hrefs[i] %>"
                  class="header-menu__item-link"
                  role="menuitem"
                >
                  <%= menu.items.about.submenus[i] %>
                </a>
              </li>
              <% } %> <% } %>
            </ul>
          </li>
          <!-- MENU ITEM : end -->

          <!-- MENU ITEM : begin -->
          <li
            class="header-menu__item header-menu__item<%= (selection == 'contact' && '--current') %>"
          >
            <span class="header-menu__item-link-wrapper">
              <a
                href="<%= menu.items.contacts.hrefs[0] %>"
                class="header-menu__item-link"
                >Contact</a
              >
            </span>
          </li>

This below is my endpoint in app.js:


app.get("/contact/:lang?", async (req, res) => {
  let lang = req.params.lang === "bg" ? "bg" : "en"; // Default to English if language parameter is not provided or not 'bg'

  // Load JSON file for contact based on the selected language
  const contactJSON = require(`./json/${lang}/contact.json`);

  // Load header and footer HTML content
  const headerHtml = await renderAsync("components/header", {
      menu: menuJson,
      selection: "contact",
  });
  const footerHtml = await renderAsync("components/footer", {
      info: footerJson,
  });

  // Render the contact page with appropriate content and HTML
  res.status(200).render("contact", {
      details: contactJSON,
      html: {
          header: headerHtml,
          footer: footerHtml,
      },
  });
});

Additional Context:

  • The website is built using HTML, CSS, and JavaScript.
  • I’ve tried adjusting the language links and routing logic but haven’t been able to resolve the issue.
  • The website is hosted locally using a development server.
  • I’d appreciate any insights or suggestions on how to fix this language switching and page routing issue in the header. Thank you in advance for your help!

Modify clipboard in paste event and paste new text

Is it possible to modify the clipboard in a paste event and to paste that modifed text?

I’m building an app that we first modify the clipboard in a json string, then in the paste event we parse it to json but we don’t want it to be pasted a json, we want to paste the attribute text. For example:

{
  "initialCharacters":"5",
  "text": "hello",
}

This is the logic in the paste event:

$(document.body).on('paste', (e) => {
   
      const pastedText = e.originalEvent.clipboardData.getData('text/plain');

      const validSourcesIndex = {
        'gg': 0,
        'gg1': 1,
        'gg3': 2,
        'gg4': 3,
      };

      let parseClipboardData;
      let sourceIndex;

      try {
        parseClipboardData = JSON.parse(pastedText);
        sourceIndex = validSourcesIndex[parseClipboardData.gizmo];
        const restoreClipboard = async () => {
          await navigator.clipboard.writeText(parseClipboardData.text);
        };
        restoreClipboard();
      } catch (error) {
        sourceIndex = 4;
      
    });

This doesn’t work, the text pastes as json.

DOM not updating automatically despite functioning countdown TS, JS

Question:
I am working on a countdown timer using JavaScript, and the functionality seems to be working fine. However, I am facing an issue where the DOM is not updating automatically. I’ve tried using setInterval in various ways and places, but the issue persists.
I’m relatively new to JavaScript and TypeScript, be patient please, (i solve this problem with witout using classes , i want make this class to for refermce to other projects)

Code Overview:
I have a CountdownDate class with methods to calculate remaining days, hours, minutes, and seconds. The countdown itself is initiated on a specific date, and the goal is to update the DOM dynamically.

Problem:
The countdown itself is accurate, and the console logs show the correct values. Still, the displayed values on the DOM are not updating in real-time.

Attempts to Solve:
I have attempted to use setInterval to update the remaining time at one-second intervals. Additionally, I’ve used setTimeout within the app method to check if the countdown has ended. Despite these efforts, the DOM doesn’t seem to reflect the updated values.

Code Snippet:

type Months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
type Weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

const months: Months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const weekdays: Weekdays =  ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];



const sold = document.querySelector<HTMLHeadingElement>('.sold');
const deadline = document.querySelector<HTMLDivElement>('.deadline');
const items = document.querySelectorAll<HTMLHeadingElement>('.deadline-format .times');

class CountdownDate {
  constructor(
    public year: number = 0,
    public month: number = 1,
    public day: number = 1,
    public hours: number = 0,
    public minutes: number = 0,
    public seconds: number = 0,
    public startedDate: Date = new Date(),
    public targetDate: Date = new Date(year, month - 1, day, hours, minutes, seconds),
    public startedTime: number = startedDate.getTime(),
    public RemainingTime: number = targetDate.getTime() - startedDate.getTime(),
  ) { }

  private static staticTime(t?: 'year' | 'month' | 'hour' | 'min'): number {
    if (t === 'hour') {
      return 60 * 60 * 1000;
    } else if (t === 'min') {
      return 60 * 1000;
    }
    return 24 * 60 * 60 * 1000; // Default to days
  }

  get RemainingDays(): number {
    let oneDay = CountdownDate.staticTime();
    return Math.floor(this.RemainingTime / oneDay);
  }

  get RemainingHours(): number {
    let oneDay = CountdownDate.staticTime();
    let oneHour = CountdownDate.staticTime('hour');
    return Math.floor((this.RemainingTime % oneDay) / oneHour);
  }


  get RemainingMinutes(): number {
    let oneMinute = CountdownDate.staticTime('min');
    let oneHour = CountdownDate.staticTime('hour');
    return Math.floor((this.RemainingTime % oneHour) / oneMinute);
  }

  get RemainingSeconds(): number {
    let oneMinute = CountdownDate.staticTime('min');
    return Math.floor((this.RemainingTime % oneMinute) / 1000);
  }


  public countedTime() {
    let arrTimes = [
      countdownDate.RemainingDays,
      countdownDate.RemainingHours,
      countdownDate.RemainingMinutes,
      countdownDate.RemainingSeconds,
    ];
    return arrTimes
  }

  get check() {
    return this.RemainingTime < 0;
  }

  app(callback: any) {
    if (this.check) {
      clearInterval(callback);
      deadline!.innerHTML = '<b>Sorry, the time has expired!</b>';
    } else {
      setInterval(callback, 1000);
      return this.countedTime;
    }
  }
}


let countdownDate = new CountdownDate(2024, 3, 1);

const year = countdownDate.targetDate.getFullYear();
const hours = countdownDate.targetDate.getHours();
const minutes = countdownDate.targetDate.getMinutes();
const month = months[countdownDate.targetDate.getMonth()];
const date = countdownDate.targetDate.getDay();
const dayWeek = weekdays[date];



if (sold) {
  sold.textContent = `
      sold Ends On ${dayWeek}, ${date} ${month} ${year} ${hours}:${minutes}am
      `;
} else {
  throw new Error("'sold' is undefined");
}



function updateDom() {
  let values = countdownDate.countedTime();
  items.forEach((item, i) => {
    item.textContent = String(values[i]);
  });
}
countdownDate.app(updateDom);

i try updath the RemainingTime by make i method and iject it inside the updateDom()

class CountdownDate {

  /// con

  updateRemainingTime(): void {
    setInterval(() => {
      this.RemainingTime = this.targetDate.getTime() - this.startedDate.getTime();
    }, 1000);
  }

}


function updateDom() {
  countdownDate.updateRemainingTime()
  let values = countdownDate.countedTime();
  items.forEach((item, i) => {
    item.textContent = String(values[i]);
  });
}

and to many others wys using setInterval;

Question:

  1. How can I ensure that the DOM updates automatically as the countdown progresses?
  2. Are there any specific considerations or best practices for updating the DOM in real-time with a countdown timer?

Any insights or suggestions on resolving this issue would be greatly appreciated.

Log duplication with asynchronous event handlers

I have a simple React snippet which produces surprising console output in the browser:

import { useEffect, useState, useCallback } from "react";

export default function App() {
  const [data, setData] = useState([]);
  const [isFetching, setIsFetching] = useState(false);

  const fetchData = useCallback(async () => {
    if (isFetching) return;
    setIsFetching(true);
    console.log("fetch 1");
    console.log("fetch 2");

    try {
      const response = await new Promise((resolve) => {
        setTimeout(() => {
          resolve(Math.floor(Math.random() * 10));
        }, 10);
      });
      setData((prev) => [...prev, response]);
    } finally {
      setIsFetching(false);
      console.log(`done 1`);
      console.log(`done 2`);
    }
  }, [setData, isFetching]);

  useEffect(() => {
    window.addEventListener("scroll", fetchData);
    return () => {
      window.removeEventListener("scroll", fetchData);
    };
  }, [fetchData]);

  return (
    <div className="App">
      <button
        onClick={() => {
          setData([]);
        }}
      >
        Clear
      </button>
      <h1 className="Data">Data: {data}</h1>
    </div>
  );
}

Code sandbox

When scrolling there is an uneven ratio of adjacent console.log prints, where you may see:

  • fetch 1
  • fetch 2
  • fetch 2
  • done 1
  • done 2

or some combination where 5 or more statements appear to make up one function call.

While React itself is not desynchronized, the strange output caused me to worry about lifecycle bugs in a complex project. Not to mention clouding the logs so much that they lost readability.

Note:

  • Refs do not help
  • Throttling/debouncing does not help