Category: javascript

I am trying to write a simple html document that returns a downloadable square image of a color defined by the user input of a single color. Any help would be much appreciated.

No code yet, any source code is appreciated.

As a new learner of JavaScript, it’s really confusing that undefined == null and [] != [], and [0] == 0.
And I even can’t search it.

As I before said,

const a1 = [1, 2, 3, 4]
const a2 = Array.from(a1)


console.log(a1 === a2);
console.log([0] == 0)

I expected: false, true

The array contains a list with products that are consecutive duplicated. I need to remove the consecutive duplicate products in the array and sum their quantities.

In this list of objects we have four values of (D) and two values of (U). If the values are repeated and consecutive, I want to remove prev value and sum qty in last duplicate value.

let books = [
  { id: "1", type: "D", price: 25, qty: 27},// *
  { id: "2", type: "D", price: 22, qty: 75},// *
  { id: "3", type: "D", price: 21, qty: 19},// *
  { id: "4", type: "D", price: 19, qty: 62},

  { id: "5", type: "U", price: 23, qty: 19},
  { id: "6", type: "D", price: 20, qty: 22},

  { id: "7", type: "U", price: 25, qty: 14},// *
  { id: "8", type: "U", price: 29, qty: 14}
]

The result will be like this:

[
  { id: "4", type: "D", price: 19, qty: 121},
  { id: "5", type: "U", price: 23, qty: 19},
  { id: "6", type: "D", price: 20, qty: 22},
  { id: "8", type: "U", price: 29, qty: 28}
]

and Thank you in advance.

I am facing a pretty big challenge. I have build a website/funnel system on Clickfunnels and now I figured out the Program is setting tracking cookies and Google Fonts, and many more. In order to be DSGVO compliant I have to use a cookie consent banner what I absolutely do not want. Is there any way to write a piece of code what disables all tracking cookies withinpicture to explain the system I want to build the Clickfunnels system?

Your help would be much appreciated.

A little about the system I want to build, there may be a different solution or different program.

A URL that randomly leads to 32 different pages what functions as a kind of raffle game, all of them have a button to click that lead towards a different page with a cal to action button.

And Ideally I want to be able to clone the whole system, change the subdomain and the raffle prices.

Therefor a cookie banner will absolutely kill the experience for the attendee. I struggle to find the right system to build this on as I have zero coding experience and all funnel builder are setting cookies that requires a cookie banner.

Thanks heaps for your help

contacted support team without any solution, read all different articles on different funnel builders if they have the functionality to disable cookies

The code below uses Auth and Analytics. Auth successfully generates anonymous accounts, but Analytics dashboard always show 0 for new users.
I referred to the official documentation.

    private firebaseConfig = {
      // ............
    };
    
    private app = initializeApp(this.firebaseConfig);
    public analytics = getAnalytics(this.app);
    public auth = getAuth(this.app);

    public async loginAnonymous() {
        await signInAnonymously(this.auth)
        .then(() => {
        })
        .catch((error) => {
            console.log(error);
        });
    }

Some answers on StackOverflow say that it will be reflected in a few days, but I have been waiting for 3 days.
My understanding is that calling getAnalytics() counts as one user, is this correct? The dashboard doesn’t work no matter how long…

I have a react component that traverses a js object and dynamically generates a form showing all members of the object. I am using js String() method to convert all members before rendering them. At render i use this code:
<TextField style={{ marginTop: '8px', marginRight: '8px', width: fieldLength}} size='small' variant='outlined' label={key} value={valueString} />
This works fine for elements that were strings from the beginning, but strings that are converted from numbers or booleans are rendered with what seems to be the size attribute set to ‘normal’. I assume this is due to mui internal handling.

Anyone knowing how to circumvent this?

I have tried to set the height explicitly in the style prop and in InputProps. Neither of these changes the behaviour for numbers and booeans, but both methods works for strings.

Need help with region select. I need to have opportunity to choose region and visualize points on html. What’s wrong? I don’t see the list of regions, only “{{regions}}” photo

I use FastAPI for it. Data is in sample_json

from fastapi import FastAPI, Request, Form
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates

app = FastAPI()

templates = Jinja2Templates(directory="templates")

sample_json = {
    "Moscow": [[12.1, 111], 100],
    "SPB": [[51.993538, 127.685484], 1410000]
}

@app.get("/", response_class=HTMLResponse)
async def read_root(request: Request):
    return templates.TemplateResponse("map.html", {"request": request, "regions": sample_json})

@app.post("/selected-region/")
async def get_selected_region(region: str = Form(...)):
    selected_data = sample_json.get(region)
    return selected_data

And here it is html part of code

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map with FastAPI</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>
    <h1>Map with FastAPI</h1>
    <label for="region-select">Select a region:</label>
    <select id="region-select">
        {% for region, data in regions.items() %}
        <option value="{{ region }}">{{ region }}</option>
        {% endfor %}
    </select>
    <div id="map" style="height: 400px;"></div>

    <script>
        var map = L.map('map').setView([55.7558, 37.6176], 5); // Default center and zoom level

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
        }).addTo(map);

        var marker;

        // Function to update map with selected region data
        function updateMap(regionData) {
            if (marker) {
                map.removeLayer(marker);
            }
            var regionCoords = regionData[0];
            var regionSum = regionData[1];
            marker = L.marker(regionCoords).addTo(map);
            marker.bindPopup(`<b>${regionSum}</b>`).openPopup();
            map.setView(regionCoords, 10); // Set map center and zoom level to selected region
        }

        // Event listener for region selection
        document.getElementById('region-select').addEventListener('change', function() {
            var selectedRegion = this.value;
            fetch('/selected-region/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `region=${selectedRegion}`
            })
            .then(response => response.json())
            .then(data => updateMap(data))
            .catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

the code is above, don’t know, where is the problem

I always get this error whenever I submit ”
Warning: Undefined array key “seats” in C:xampphtdocsLaCineReservabooking.php on line 30

Warning: foreach() argument must be of type array|object, null given in C:xampphtdocsLaCineReservabooking.php on line 34
” I don’t know why it always say null even if I checked some boxes.

This is the code I’ve used for this.

if(isset($_POST["btn_booking"]))
{
    // include("checkSeat.php");
    $con=new connec();

    $cust_id=$_POST["cust_id"];
    $show_id=$_POST["show_id"];
    $no_tikt=$_POST["no_ticket"];
    $bkng_date=$_POST["booking_date"];
    $total_amnt=(600 * $no_tikt);

    $bookedSeats = $_POST['seats'];

    $data = array();

    foreach($bookedSeats as $seat)
    
    $data[] = addslashes($seat);
    
    $data = implode("," , $data);

    $sql="insert into seat_reserved values(0,$show_id,$cust_id,'$data','true')";
    $abc= $con->insert_lastid($sql);

    $sql="insert into seat_detail values(0,$cust_id,$show_id,$no_tikt)";
    $seat_dt_id=$con->insert_lastid($sql);


    $sql="insert into booking values(0,$cust_id,$show_id,$no_tikt,$seat_dt_id,'$bkng_date',$total_amnt)";
    $con->insert($sql,"Your Ticket is Booked");
}

<div class="row">
    <form method="POST">
         <table style="width:100%;color:white;">
<tr>
   <td>A</td>
     <td><input type="checkbox" name="seats[]" value="A-01" onclick="checkboxtotal()" <?php checkme("A-01",$ajaycomma); ?>></td>
     <td><input type="checkbox" name="seats[]" value="A-02" onclick="checkboxtotal()" <?php checkme("A-02",$ajaycomma); ?>></td>
    <td><input type="checkbox" name="seats[]" value="A-03" onclick="checkboxtotal()" <?php checkme("A-03",$ajaycomma); ?>></td>
                            
</tr>

      </table>
    </form>
  </div>

I’m trying to implement smooth scrolling action using GSAP in react. Note that this is different from usual smooth scrolling. An example of what I’m trying to replicate can be seen in this website:

This is my attempt:

import React, { useRef, useEffect, useState } from 'react';
import { TweenLite } from 'gsap';

const Scroller = () => {
  const [scroller, setScroller] = useState({
    target: null,
    ease: 0.05,
    endY: 0,
    y: 0,
    resizeRequest: 1,
    scrollRequest: 0,
  });

  const requestRef = useRef(null);

  const onLoad = () => {
    updateScroller();
    window.focus();
    window.addEventListener("resize", onResize);
    document.addEventListener("scroll", onScroll);
  };

  const updateScroller = () => {
    const resized = scroller.resizeRequest > 0;

    if (resized) {
      const height = scroller.target.clientHeight;
      document.body.style.height = height + "px";
      setScroller(prevState => ({
        ...prevState,
        resizeRequest: 0,
      }));
    }

    const scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

    setScroller(prevState => ({
      ...prevState,
      endY: scrollY,
      y: prevState.y + (scrollY - prevState.y) * prevState.ease,
    }));

    if (Math.abs(scrollY - scroller.y) < 0.05 || resized) {
      setScroller(prevState => ({
        ...prevState,
        y: scrollY,
        scrollRequest: 0,
      }));
    }

    TweenLite.set(scroller.target, {
      y: -scroller.y,
    });

    requestRef.current = scroller.scrollRequest > 0 ? requestAnimationFrame(updateScroller) : null;
  };

  const onScroll = () => {
    setScroller(prevState => ({
      ...prevState,
      scrollRequest: prevState.scrollRequest + 1,
    }));

    if (!requestRef.current) {
      requestRef.current = requestAnimationFrame(updateScroller);
    }
  };

  const onResize = () => {
    setScroller(prevState => ({
      ...prevState,
      resizeRequest: prevState.resizeRequest + 1,
    }));

    if (!requestRef.current) {
      requestRef.current = requestAnimationFrame(updateScroller);
    }
  };

  useEffect(() => {
    setScroller(prevState => ({
      ...prevState,
      target: document.querySelector("#scroll-container"),
    }));
  }, []);

  useEffect(() => {
    if (scroller.target) {
      TweenLite.set(scroller.target, {
        rotation: 0.01,
        force3D: true,
      });
    }
  }, [scroller.target]);

  useEffect(() => {
    window.addEventListener('load', onLoad);
    return () => {
      window.removeEventListener('load', onLoad);
      window.removeEventListener('resize', onResize);
      document.removeEventListener('scroll', onScroll);
      cancelAnimationFrame(requestRef.current);
    };
  }, []);

  return (
    <section className="viewport">
      <div id="scroll-container" className="scroll-container">
        <div className="content">

          <div className="img-container">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-10.jpg" alt="" />
          </div>
          <div className="img-container">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-14.jpg" alt="" />
          </div>
          <div className="img-container">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-15.jpg" alt="" />
          </div>
          <div className="img-container">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/splash-16.jpg" alt="" />
          </div>

          {/* Repeat the images section as needed */}

        </div>
      </div>
    </section>
  );
};

export default Scroller;

However, this is not working. There is no error whatsoever, but there is no difference in the scrolling action either.

Please help me out, thanks in advance!

I have nodejs javascript code and I want that the video and the audio is downloaded, to combine it with ffmpeg. First, the video is longer that it should be, idk why. Second, the ffmpeg is not working because I’m getting an error, that ffmpeg can’t find (but I installed fluent-ffmpeg via npm correctly)

My code:

const fs = require('fs');
const ytdl = require('ytdl-core');
const ffmpeg = require('fluent-ffmpeg');



// Function to download the youtube video
function download() {
    const linkInput = document.getElementById('linkInp');
    const resolution = document.getElementById('resolution');
    const videoTitle = document.getElementById('videoTitle');
    const videoAuthor = document.getElementById('videoAuthor');
    const videoUploadDate = document.getElementById('videoUploadDate');
    const videoPicture = document.getElementById('videoPic');
    const link = linkInput.value;
    console.log('Downloading following video from link: ', link, ' with resolution id: ', resolution.value);

    ytdl.getInfo(link).then((info) => {
        const format = ytdl.chooseFormat(info.formats, { quality: `${resolution.value}` });
        const videoFilePath = `${info.videoDetails.title}.${format.container}`;
        const audioFilePath = `${info.videoDetails.title}.mp3`;

        // before download, collect meta datas
        videoTitle.innerHTML = info.videoDetails.title;
        videoAuthor.innerHTML = info.videoDetails.author.name;
        videoUploadDate.innerHTML = info.videoDetails.uploadDate;
        videoPicture.src = info.videoDetails.thumbnails[0].url;

        // start downloading the video
        ytdl.downloadFromInfo(info, { format: format }).pipe(fs.createWriteStream(videoFilePath));

        // download audio separately
        ytdl.downloadFromInfo(info, { filter: 'audioonly' }).pipe(fs.createWriteStream(audioFilePath)).on('finish', () => {
            // merge video and audio after both are downloaded
            ffmpeg()
                .input(videoFilePath)
                .input(audioFilePath)
                .videoCodec('copy')
                .audioCodec('copy')
                .save(`${info.videoDetails.title}_with_audio.${format.container}`)
                .on('end', () => {
                    console.log('Video with audio merged successfully!');
                    fs.unlink(videoFilePath, (err) => {
                        if (err) console.error(err);
                    });
                    fs.unlink(audioFilePath, (err) => {
                        if (err) console.error(err);
                    });
                });
        });

    }).catch((err) => {
        console.error(err);
        document.getElementById('msg').style.display = 'block';
        document.getElementById('message').innerHTML = err;
    });
}

Thanks for every help!

Building a simple electron application following a beginners tutorial and trying to control dark mode appearance through a menu checkbox using the main process.

const template = [{
  label: 'Préférences',
  submenu: [{
      label: 'Mode nuit',
      id: 'mode',
      type: 'checkbox',
      click: () => function(menuItem) {
        if (menuItem.checked) {
          mainWindow.setBackgroundColor('black');
          mainWindow.setColor('white');
        } else {
          mainWindow.setBackgroundColor('white');
          mainWindow.setColor('black');
        }
      }
    },
    {
      type: 'separator'
    },
    {
      label: 'Police',
      submenu: [{
          label: 'Petit',
          type: 'radio'
        },
        {
          label: 'Moyen',
          type: 'radio'
        },
        {
          label: 'Grand',
          type: 'radio'
        }

      ]
    }
  ]
}];

It is not working. Is it possible to do it this way or should I modify the renderer process?

Recently got interested on bootstrap 5 for my website design. I decided to add a carousel for my coffee items that will show only 3 products at same time when the right and left arrow buttons are clicked.

My current html container class is showing 3 items but when I press the buttons it doesn’t move and show my 4th item. I kind of want it to show the 4th item when i press the left and right or next and prev button while maintaining 3 items shown in the carousel

Here is my carousel html block:

<div class="container mt-5">
      <div class="carousel-container">
          <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
              <div class="carousel-inner">
                  <div class="carousel-item active">
                      <h1 class="text-white fw-bold mb-3 mt-3" style="text-align: center;">Popular Now</h1>
                      <div class="d-flex justify-content-center align-items-center">
                          <!-- First carousel item -->
                          <div class="product-item">
                              <div class="product-info bg-dark text-light p-3">
                                  <div class="product-image" style="background-image: url('/image/latte.jpg');"></div>
                                  <div class="product-text">
                                      <h5 class="mb-3">Latte Art Coffee</h5>
                                      <p class="mb-2">With Milk</p>
                                      <p class="mb-0 price-container">
                                        ₱ 60<span class="price-space"></span><button class="plus-btn">+</button>
                                      </p>
                                  </div>
                              </div>
                          </div>
                          <!-- Second carousel item -->
                          <div class="product-item">
                              <div class="product-info bg-dark text-light p-3">
                                  <div class="product-image" style="background-image: url('/image/espresso.jpg');"></div>
                                  <div class="product-text">
                                      <h5 class="mb-3">Espresso Coffee</h5>
                                      <p class="mb-2">With Milk</p>
                                      <p class="mb-0">₱ 70<span class="price-space"></span><button class="plus-btn">+</button></p>
                                  </div>
                              </div>
                          </div>
                          <!-- Third carousel item -->
                          <div class="product-item">
                              <div class="product-info bg-dark text-light p-3">
                                  <div class="product-image" style="background-image: url('/image/mocha.jpg');"></div>
                                  <div class="product-text">
                                      <h5 class="mb-3">Mocha Coffee</h5>
                                      <p class="mb-2">With Chocolate</p>
                                      <p class="mb-0">₱ 80 <span class="price-space"></span><button class="plus-btn">+</button></p>
                                  </div>
                              </div>
                          </div>
                          <!-- Fourth carousel item (hidden initially) -->
                          <div class="product-item d-none">
                              <div class="product-info bg-dark text-light p-3">
                                  <div class="product-image" style="background-image: url('/image/affogato.jpg');"></div>
                                  <div class="product-text">
                                      <h5 class="mb-3">Affogato</h5>
                                      <p class="mb-2">With Milk</p>
                                      <p class="mb-0">₱ 90 <span class="price-space"></span> <button class="plus-btn">+</button></p>
                                  </div>
                              </div>
                          </div>
                          <!-- End carousel items -->
                      </div>
                  </div>
              </div>
              <div class="carousel-controls-container">
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Next</span>
                </button>
              </div>
          </div>
      </div>

my bootstrap link:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

my bootstrap script:

 <script src="js/script.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>

I tried adding a JavaScript function but still I get the same result:

/js/script.js

// Initialize the Bootstrap Carousel component without waiting for the entire document to load
var myCarousel = document.querySelector('#carouselExampleControls');
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: false, // Disable automatic sliding
  wrap: false // Disable looping of carousel items
});

// Show/hide the fourth carousel item based on slide events
myCarousel.addEventListener('slide.bs.carousel', function (event) {
  var slideFrom = event.detail.from;
  var slideTo = event.detail.to;
  var items = myCarousel.querySelectorAll('.carousel-item');

  // Hide the fourth item if sliding from the first item
  if (slideFrom === 0) {
    items[3].classList.add('d-none');
  }
  // Show the fourth item if sliding to the first item
  if (slideTo === 0) {
    items[3].classList.remove('d-none');
  }
});

script in my html:

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

this is the 4th item i want to show when the arrows are clicked left or right:

<!-- Fourth carousel item (hidden initially) -->
                          <div class="product-item d-none">
                              <div class="product-info bg-dark text-light p-3">
                                  <div class="product-image" style="background-image: url('/image/affogato.jpg');"></div>
                                  <div class="product-text">
                                      <h5 class="mb-3">Affogato</h5>
                                      <p class="mb-2">With Milk</p>
                                      <p class="mb-0">₱ 90 <span class="price-space"></span> <button class="plus-btn">+</button></p>
                                  </div>
                              </div>
                          </div>

So I have been struggling to get setting up my vite SSR react server right so it can render my react-helmet-async meta tags.
Worked my way on getting it to render the meta tags and links with this entry-server.jsx snippet:

import React from "react";
import ReactDOMServer from "react-dom/server";
import App from "./components/App";
import { StaticRouter } from "react-router-dom/server";
import { Router, helmetContext } from "./routes/Routes";
import { Helmet } from "react-helmet-async";

export function render({ path }) {
  const html = ReactDOMServer.renderToString(
    <StaticRouter location={path}>
      <Router />
    </StaticRouter>
  );

  const { helmet } = helmetContext;
  const head = `
  ${helmet.title.toString()} 
  ${helmet.priority.toString()} 
  ${helmet.meta.toString()} 
  ${helmet.link.toString()} 
  ${helmet.script.toString()}
  `;
  return { html, head };
}

Which worked out with this snippet on the server.js:

    let template;
    let render;
    if (!isProduction) {
      // Always read fresh template in development
      template = await fs.readFile("./index.html", "utf-8");
      template = await vite.transformIndexHtml(url, template);
      render = (await vite.ssrLoadModule("/src/entry-server.jsx")).render;
    } else {
      template = templateHtml;
      render = (await import("./dist/server/entry-server.js")).render;
    }

    const rendered = await render(url, ssrManifest);

    const html = template
      .replace(`<!--app-head-->`, rendered.head ?? "")
      .replace(`<!--app-html-->`, rendered.html ?? "");

It works on my local machine, don’t get me wrong. It renders the server side when I build and preview; I know this by viewings the source code on my Google Chrome browser – not via inspect or dev mode.

But now, when I deploy my app to Vercel for some reason the SEO doesn’t get recognised by crawlers and when I view the source code, the meta tags and html doesn’t get injected, therefore it only gets rendered on the client side.

I have a feeling that this might be an error on the Vercel server but I can’t be sure about that.

I want to understand how I could go about it.

Here is the project repo:
https://github.com/unnamed-lab/fullmoon-real-estate

I have a user object returned by some function in user.model.js

const user = {
    id: "ASwsd122Wqwe1",
    name: "sam",
    email: "[email protected]",
    createdDate : 1721323231123
}

In another file, I’m returning this

const user = getUser();

How do i create a type for user?

I ran into a problem importing js files (these are libraries). I am using NextJS 14.1.3 and ReactJS 18.2.0.

Here is the path to these files
Here is the path to these files

Project structure
Project structure

This is the way I imported the files

import Script from 'next/script';

render() {
        const {Component, pageProps}: any = this.props;

        // During SSR, this will create new store instances so having `initialData` is crucial.
        // During the client-side hydration, same applies.
        // From then on, calls to `getStores()` return existing instances.
        const stores = getStores();

        return (
            <StoreProvider value={stores}>
                <Script
                    src='/public/js/LunaPass.1.6.8.js'
                    strategy="beforeInteractive"
                />
                <Script
                    src='/public/js/LPMessageRenderer.1.6.8.js'
                    strategy="beforeInteractive"
                />
                <Component {...pageProps} />
            </StoreProvider>
        );
    }

Error itself
Error in console

Has anyone encountered such a problem?

My expectation of my actions is to import js files and then use them in other pages.