Category: javascript

How can I create a global state that can be accessed or modified from these pages?

import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import './index.css'

import Home from './pages/Home.jsx'
import Login from './pages/Login.jsx'
import SignUp from './pages/SignUp.jsx'

const router = createBrowserRouter([
  {path: '/', element: <Home />},
  {path: '/login', element: <Login />},
  {path: '/register', element: <SignUp />},
])

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

I have a brush overlay that tracks zoom events. it is stretched over the entire graph area and is drawn first, and then the graph lines. This is done so that I can process click events, mouseover, mouseout separately, for example, to highlight the graph. At the same time, I want to maintain the ability to zoom while being above the graph line, but my brush is lost, how can I fix this?

I thought about sending the event to the overlay using dispatchEvent, but I don’t understand how to create brush events.
Or maybe you need to somehow reactivate the brush?

How can I open next tab upon closing existing tab? The main thing here is I have a continuasly reloading pages in executingFunctions and as soon as one of the pages has proper html, puppeteer starts to interact with it, closes it and opens a new one. But what if I don’t want this page to be interacted and I want to close it.

concurrentOrders.js

export default async function concurrentOrders(limit, links) {
  const executingFunctions = [];

  let currentIndex = 0;

  while (currentIndex < links.length) {
    while (executingFunctions.length < limit && currentIndex < links.length) {
      const link = links[currentIndex];
      currentIndex++;

      const promise = createBuyOrderPromise(...link).finally(() => {
        const index = executingFunctions.indexOf(promise);
        if (index !== -1) executingFunctions .splice(index, 1);
      });
      executingFunctions.push(promise);
    }

    await Promise.race(executingFunctions);
  }
}

createBuyOrderPromise.js

export default async function createBuyOrderPromise(link) {
  return new Promise(async (resolve, reject) => {
    try {
      const page = await makeConnection();  // launch in existing browser using puppeteer (via webSocketUrl)
      await gotoMarketItemPage(page, link);
      await closeTabPage(page);     // closing tab
      resolve();
    } catch () {
      reject();
    }
  });
}

gotoMarketItemPage.js

export default async function gotoMarketItemPage(page) {
  try {
    await page.goto(page,
      {
        waitUntil: "domcontentloaded",
        timeout: 0,
      }
    );

    const image = await page.$(itemImageSelector);

    if (image) elementFound = true;
    if (!image) await page.reload();
  }
}

Tried to implement puppeteer’s

     await page.on("close", () => {
       reject();
     });

with passing reject function to gotoMarketItemPage

in gotoMarketItemPage.js but it made it work like:
if I close one of html loaded pages without the content that I need, this action stops reloding other pages in process in addition to that it stops adding up a page to the stack.

P.S. That is not full version of code for the sake of understanding. Sorry for bad explanation. Let me know if I can clarify this.

Firebase = has their own database that’s why I don’t like it because it creates their dependency and it is super hard to migrate from Firebase.

Supbase = It is good but it does not have MongoDB support and their auto-generated APIs are not that much feature-rich.

• And for custom business logic, anyway need to create separate backend projects and need to use supabase sdk.

I want something that is self-hosted and should be super easy and free/open source and feature-rich also.

I am facing a strange problem in my Nuxt 3 application. I do want to add my first middleware to my project called auth.ts. This middleware should protect certain pages from users who are not logged in. Basically it should grant access to the requested page to those who are logged in and navigate those who are not logged in to the login page. Quite simple and straight forward.

However, my to and from variables in my middleware are always the same. This results in an infinite redirection in a navigation guard.

This is my middleware:

export default defineNuxtRouteMiddleware((to, from) => {
    const userStore = useUserStore();

    console.log('From auth middleware')
    console.log('to', to)
    console.log('from', from)
    console.log('authenticated', userStore.authenticated)

    // If the user is authenticated, continue to the requested route
    if (userStore.authenticated === true) {
        return navigateTo(to.fullPath);
    }

    // If the user is not authenticated, redirect to the login page
        return navigateTo('/login');
    })

The authenticated variable comes from my Pinia store.

This is how I add the middleware to my /profile page:

definePageMeta({ middleware: ["auth"] });

This is the error I get:

[Vue Router warn]: Detected a possibly infinite redirection in a navigation guard when going from "/profile" to "/profile". Aborting to avoid a Stack Overflow. Are you always returning a new location within a navigation guard? That would lead to this error. Only return when redirecting or aborting, that should fix this. This might break in production if not fixed.

This is the console log I get from my auth.ts middleware:

From auth middleware auth.ts:4:9

to Object { fullPath: "/profile", hash: "", query: {}, name: "profile", path: "/profile", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: {…}, href: "/profile" } auth.ts:5:9

from Object { fullPath: "/profile ", path: "/profile", query: {}, hash: "", name: "profile", params: {}, matched: (1) […], meta: {…}, redirectedFrom: undefined, href: "/profile " } auth.ts:6:9

authenticated true

When the user is not authenticated it successfully navigates the user to the /login page. But when the user is logged in I always get the error. It would make sense to me if I am already on the profile page and then refresh the page.

But I get this error as well when I am at / and navigate to the /profile page. But how can the from variable be /profile when I navigate from the / page to the /profile page?

Kind regards

I’ve come across several good looking ChartJS line charts that have just a small and fading shading under each line. However, I’m not able to implement that for myself, nor have I found any good example code on the internet that does the thing with React/NextJS. Below is a picture of my desired state and the current component which adds a shadow to the line chart but does not make it more transparent to the outside. Any ideas or solutions to that?

import React, { useEffect } from 'react';
import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);
Chart.defaults.borderColor = "#434343";
Chart.defaults.color = "#bfbfbf";
Chart.defaults.font.family = 'Inter, sans-serif'; 
Chart.defaults.font.size = 12;

const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        y: {
            type: 'linear',
            display: true,
            position: 'left',
            grid:{
                display:false,
                drawOnCharArea: false,
            }
        },
        y1: {
            type: 'linear',
            display: true,
            position: 'right',
            grid:{
                display:false,
                drawOnCharArea: false,
            }
        },
        x : {
            display: true,
            beginAtZero:true,
            grid:{
                display:false,
                drawOnCharArea: false,
            }
        }
    },
    plugins:{
    }, 
};

export default function OverviewSalesLine({ data }) {

    // Custom shadow for chart
    useEffect(() => {
        Chart.register({
        id: 'customShadow',
        beforeDraw: (chart) => {
            const ctx = chart.ctx;
            ctx.save();

            const originalLineDraw = ctx.stroke;
            ctx.stroke = function () {
            ctx.save();
            ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
            ctx.shadowBlur = 10;
            ctx.shadowOffsetX = 4;
            ctx.shadowOffsetY = 4;
            originalLineDraw.apply(this, arguments);
            ctx.restore();
            };
        }
        });
    }, []);

    const chartData = {
        type: 'customShadow',
        labels: data.map(item => item.interval_start),
        datasets: [

            {
                label: 'Gross Sales',
                data: data.map(item => item.total_sales),
                borderColor: 'rgba(143, 143, 143, 1)', 
                backgroundColor:  'rgba(143, 143, 143, 0.2)',
                yAxisID: 'y',
                fill: true,
                tension:0.4,
            },

            {
                label: 'Items Sold',
                data: data.map(item => item.total_items_sold),
                borderColor: 'rgba(119, 111, 252, 1)', 
                backgroundColor: 'rgba(119, 111, 252, 0.2)', 
                yAxisID: 'y1',
                fill: true,
                tension:0.4,
            },

        ],
    };


    return (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', width: "100%" }}>
            {!data || data.length == 0 ?<div> No data available </div> : <Line options={chartOptions} data={chartData} />}
         </div>
    ) 

I would like to test the following code:

// DocRepo.ts
export class DocRepo {
    constructor() {}

    async fetchDocs(id: String) {
        return Promise.resolve([])
    }
}

// Person.ts
import {DocRepo} from "./DocRepo";

export default class Person {
   let docRepo;

    constructor() {
       docRepo = new DocRepo();
    }

     async findDocs(){
        return docRepo.fetchDocs()
    }
}

I came up with the following test cases:

import Person from "./Person";
import { DocRepo } from "./DocRepo";

jest.mock("./DocRepo");

describe("Person", () => {

  it("should fetch documents", async () => {

    const mockFetchDocs = jest.fn().mockResolvedValue([]);

    DocRepo.prototype.fetchDocs = mockFetchDocs; // bad practice?

    const person = new Person();
    await person.findDocs();

    expect(mockFetchDocs).toHaveBeenCalledTimes(1);
  });
});

Is it bad practice to override the function prototype like DocRepo.prototype.fetchDocs = mockFetchDocs? If yes, please suggest the correct way to test this code ( WITHOUT changing the constructors).

I’ having a little trouble between load order of my CSS and JavaScript.

Basically, what is happening, is that I have a div with blue background, and my css applies a “cut” on it, slicing it diagonally. When the page first loads (or when CTRL+SHIFT+R), the “cut” is not there for a very short but noticeable duration, and then appears after the JavaScript loads.

I have this CSS

.banner-bottom-fx 
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 0 solid transparent; /* changes via JavaScript */
    border-right: 0 solid white; /* changes via JavaScript */
}

Where border-top and border-right values change via this JavaScript

function UpdateBannerFx()
{
    const banner = document.querySelector('.banner-bottom-fx');

    const borderRightWidth = window.innerWidth;
    const borderTopWidth = borderRightWidth / 30;

    banner.style.borderRightWidth = borderRightWidth + 'px';
    banner.style.borderTopWidth = borderTopWidth + 'px';
}

document.addEventListener("DOMContentLoaded", function() 
{
    UpdateBannerFx();
    // Update border widths when window is resized
    window.addEventListener('resize', UpdateBannerFx);
});

I know the “flicker” is due to my CSS styles.css, which loads in my header, and then the JavaScript which loads from main.js in the footer. Is there any way to prevent said flicker?

I am following a react tutorial and I am adding a POST request and ran into the following error:

Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

Before this I was looking at submit events, and everything was fine. The website still runs but I’m getting a fetch aborted message when I inspect my console.

I know They are a lot of similar errors on Stack overflow already and have reviewed several. I’ve seen a lot of problems and solutions, understood some. But none of them fit what I’m trying to do. Note: I’m a complete beginner in react this is my first web-application. The error only popped up after adding my POST request .
Create.js

import { useState } from "react";

const Create = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [author, setAuthor] = useState('mario');
  const [isLoading, setIsLoading] = useState(false);

   //Submit events
   const handleSubmit = (e) => {
    e.preventDefault();
    const blog = { title, body, author };
     setIsLoading(true);

    //POST request
     fetch("http://localhost:8000/blogs", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(blog),
      }).then(() => {
        console.log("new blog added");
        setIsLoading(false);
      });
     }

return (
 <div className="create">
  <h2>Add a new blog</h2>

//Input form
   <form onSubmit={ handleSubmit } >
    <label>Blog title</label>
    <input
     type="text"
     required
     value={ title }
     onChange={(e) => setTitle(e.target.value)}
    />
     <label>Blog body</label>
     <textarea
      required
      value={ body }
      onChange={(e) => setBody(e.target.value)}
      ></textarea>
      <label>Blog author</label>
    <select>

//Blog author
  value={ author}
  onChange={(e) => setAuthor(e.target.value)}
    <option value="mario">Mario</option>
     <option value="yoshi">Yoshi</option>
     </select>
    </form>

//Button
  { !isLoading && <button>Add blog</button> }
  { isLoading && <button disabled>Adding blog...</button> }
   <p>{ title }</p>
   <p>{ body }</p>
   <p>{ author }</p>
  </div>
  );
}
 
export default Create;

I need to automate an app installation, but first I need to log in Shopify account. I have got a ‘403 Forbidden’ status when I try to enter this page in my test browser: http://www.shopify.com/login/. When I do it manually it is okay

This is the error:

I wrote it in my config json:

"include":   
"baseUrl": "http://www.shopify.com/login",   
"chromeWebSecurity": false

This in my tests:

cy.visit('http://www.shopify.com/login', ) {
headers: {
  'accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7',
  'user-agent': 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Mobile Safari/537.36'
}
});
failOnStatusCode: false

This didn’t help, I still have got this error. Does anybody knows hoe to handle this?

I use Prisma and Postgresql for a project to store and manage recipes.

I am struggling to implement a Many to Many relationship where I can constrain one side to require at least one value for the relation field.

Recipes can have one or more aromas. Aromas can be included in zero or more recipes.

I use an explicit relation table because I need to store additional data in it (the quantity for each aroma in a recipe).

The Recipe, Aroma and relation models are the following:

model Recipe {
  id          Int              @id @default(autoincrement())
  name        String
  base        String?          @default("50/50")
  description String?          @default("aucune description")
  rating      Int?             @default(1)
  aromas      RecipeToAromas[]
}

model Aroma {
  id      Int              @id @default(autoincrement())
  name    String
  brand   Brand?           @relation(fields: [brandId], references: [id])
  brandId Int?             @default(1)
  recipes RecipeToAromas[]

  @@unique([name, brandId], name: "aromaIdentifier")
}

model RecipeToAromas {
  id         Int    @id @default(autoincrement())
  recipeId   Int
  aromaId    Int
  quantityMl Int
  recipe     Recipe @relation(fields: [recipeId], references: [id])
  aroma      Aroma  @relation(fields: [aromaId], references: [id])
}

I want to constrain recipes to have at least one aroma.

By definition Many to Many defines zero to many relationship.

I thought about solving the problem with adding an additional One to Many relationship between Recipe and Aroma.

That would imply adding an additional aroma field in Recipe to store the one aroma that is required (and rename aromas field to additionalAromas to avoid confusion) :

model Recipe {
  id          Int              @id @default(autoincrement())
  name        String
  base        String?          @default("50/50")
  description String?          @default("aucune description")
  rating      Int?             @default(1)
  aromas      RecipeToAromas[]
  aroma       Aroma            @relation(fields: [aromaId], references: [id])
  aromaId     Int
}

And adding a recipe field in Aroma as it required to establish the relation :

model Aroma {
  id      Int              @id @default(autoincrement())
  name    String
  brand   Brand?           @relation(fields: [brandId], references: [id])
  brandId Int?             @default(1)
  recipes RecipeToAromas[]
  recipe  Recipe[]

  @@unique([name, brandId], name: "aromaIdentifier")
}

But that feels wrong as I will have duplicates : recipes and recipe fields in Aroma would store identical data.

I could of course workaround the problem by just relying on validation in mutation functions and user input. And probably try to add a layer of safety with types as I am using typescript.
But I feel like it would make the database brittle and is prone to error especially if I have to collaborate with other devs, or even use the database in a different projet.

I could not find any resource covering a similar situation, and of course I have spend a lot of time searching and re-reading the documentation.

I am new to prisma (started yesterday) and I dont have too much experience with RDBMS, so it feels like I am missing something.

enter image description here

This is my componentsPromptCard.jsx code :-

"use client";

import { useState } from "react";
import Image from "next/image";
import { useSession } from "next-auth/react";
import { usePathname, useRouter } from "next/navigation";

const PromptCard = ({ post, handleEdit, handleDelete, handleTagClick }) => {
    const { data: session } = useSession();
    const pathName = usePathname();
    const router = useRouter();

    const [copied, setCopied] = useState("");

    const handleProfileClick = () => {
        console.log(post);

        if (post.creator._id === session?.user.id) return router.push("/profile");

        router.push(`/profile/${post.creator._id}?name=${post.creator.username}`);
    };

    const handleCopy = () => {
        setCopied(post.prompt);
        navigator.clipboard.writeText(post.prompt);
        setTimeout(() => setCopied(false), 3000);
    };

    return (
        <div className='prompt_card'>
            <div className='flex justify-between items-start gap-5'>
                <div
                    className='flex-1 flex justify-start items-center gap-3 cursor-pointer'
                    onClick={handleProfileClick}
                >
                    <Image
                        src={post.creator.image}
                        alt='user_image'
                        width={40}
                        height={40}
                        className='rounded-full object-contain'
                    />

                    <div className='flex flex-col'>
                        <h3 className='font-satoshi font-semibold text-gray-900'>
                            {post.creator.username}
                        </h3>
                        <p className='font-inter text-sm text-gray-500'>
                            {post.creator.email}
                        </p>
                    </div>
                </div>

                <div className='copy_btn' onClick={handleCopy}>
                    <Image
                        src={
                            copied === post.prompt
                                ? "/assets/icons/tick.svg"
                                : "/assets/icons/copy.svg"
                        }
                        alt={copied === post.prompt ? "tick_icon" : "copy_icon"}
                        width={12}
                        height={12}
                    />
                </div>
            </div>

            <p className='my-4 font-satoshi text-sm text-gray-700'>{post.prompt}</p>
            <p
                className='font-inter text-sm blue_gradient cursor-pointer'
                onClick={() => handleTagClick && handleTagClick(post.tag)}
            >
                {post.tag}
            </p>

            {session?.user.id === post.creator._id && pathName === "/profile" && (
                <div className='mt-5 flex-center gap-4 border-t border-gray-100 pt-3'>
                    <p
                        className='font-inter text-sm green_gradient cursor-pointer'
                        onClick={handleEdit}
                    >
                        Edit
                    </p>
                    <p
                        className='font-inter text-sm orange_gradient cursor-pointer'
                        onClick={handleDelete}
                    >
                        Delete
                    </p>
                </div>
            )}
        </div>
    );
};

export default PromptCard;

I tried updating my NextJS to the latest version, also checked all the environment variables and all seem to work perfectly. The code was working well and good but once I deployed it using Vercel, this error showed up.
I tried running in my localhost and the same error popped up. This wasn’t there before I deployed it to vercel.

Application error: a client-side exception has occurred (see the browser console for more information).

This error shows on the browser when I deployed it.

Here’s the website link : https://quasar-prompts.vercel.app/

Here’s the Github link : https://github.com/AnanteshG/Quasar

If anybody knows how to fix it let me know please. Thanks in Advance!

I have a problem where I’m trying to generate insults, or just use this as the base for a game and other projects, but when I hit the generate insult button, it doesn’t do anything.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Unfiltered Insult Generator</title>
  <style>
        fieldset {
            margin-bottom: 1em;
        }
        legend {
            font-weight: bold;
        }
        .language-select {
            display: inline-block;
        }
        .language-select ol {
            list-style-type: none;
            padding: 1;
        }
        .language-select label {
            display: block;
        }
        .language-select input[type="checkbox"] {
            margin-right: 0.5em;
        }
        .language-select input[type="text"] {
            margin-top: 1em;
        }
        .srOnly {
           position: absolute; 
           width: 1px;
           height: 1px;
           padding: 0;
           margin: -1px;
           overflow: hidden;
           clip: rect(0,0,0,0); 
           border: 0;
        }
  </style>
</head>
<body>
  <script>
          function getRandom() {
            return Math.floor(Math.random() * 100);
        }

        function generateInsult() {
            let name = document.getElementById('name').value;
            let num = getRandom();
            let insult;

            if (num === 99) {
                            insult = name + " is a lucky ducky! 99, dam!";
                             id99
                        } else if (num === 98) {
                            insult = name + " was so close to success. But I guess you're just a failure in life.";
                             id98
                        } else if (num === 97) {
                            insult = name + " is kinda stupid.";
                             id97
                        } else if (num === 96) {
                            insult ="Hey" + name + "turn it upside down.";
                             id96
                        } else if (num === 95) {
                            insult = num + " is literally the most boring number you could have gotten. Go try again.";
                             id95
                        } else if (num === 94) {
                            insult = "Hey " + name + ", Can I have the name of your hair salon? I need to know where not to go.";
                             id94
                        } else if (num === 93) {
                            insult = name + ", You are the human equivalent of a participation trophy.";
                             id93
                        } else if (num === 92) {
                            insult = name + ", you have a face for radio.";
                             id92
                        } else if (num === 91) {
                            insult = name + ", whatever kind of look you were aiming for, you missed.";
                             id91
                        } else if (num === 90) {
                            insult = name + ", I smell something burning. Are you trying to think again?";
                             id90
                        } else if (num === 89) {
                            insult = name + ", you’re like a lighthouse in a desert: bright but not very useful.";
                             id89
                        } else if (num === 88) {
                            insult = name + ", you’re as useless as the “ueue” in “queue!";
                             id88
                        } else if (num === 87) {
                            insult = name + ", whatever is eating you must be suffering terribly.";
                             id87
                        } else if (num === 86) {
                            insult = name + ",  if you ever had a thought, it would die of loneliness.";
                             id86
                        } else if (num === 85) {
                            insult = name + ", this is why the gene pool needs a lifeguard.";
                             id85
                        } else if (num === 84) {
                            insult = name + ", you have the charisma of a wet sock.";
                             id84
                        } else if (num === 83) {
                            insult = name + ", I don’t understand, but I also don’t care, so it works out nicely.";
                             id83
                        } else if (num === 82) {
                            insult = name + ", I’ve seen salad that dresses better than you.";
                             id82
                        } else if (num === 81) {
                            insult = name + ", You have the communication skills of an alarm clock.";
                             id81
                        } else if (num === 80) {
                            insult = name + ", honestly, I'm just impressed you could read this.";
                             id80
                        } else if (num === 79) {
                            insult = name + ", no I'm not insulting you, I'm describing you.";
                             id79
                        } else if (num === 78){
                            insult = name + ", your birth certificate is an apology letter from the condom factory.";
                             id78
                        } else if (num === 77){
                            insult = name + ", the only way you'll ever get laid is if you crawl up a chicken's ass and wait.";
                             id77
                        } else if (num === 76) {
                            insult = name + ", my psychiatrist told me I was crazy and I said I want a second opinion. He said okay, you're ugly too.";
                             id76
                        } else if (num === 75) {
                            insult = name + ", you must have been born on a highway because that's where most accidents happen.";
                             id75
                        } else if (num === 74) {
                            insult = name + ", brains aren't everything. In your case they're nothing.";
                             id74
                        } else if (num === 73) {
                            insult = name + ", some babies were dropped on their heads but you were clearly thrown at a wall.";
                             id73
                        } else if (num === 72) {
                            insult = name + ", you can walk, but can you talk?";
                             id72
                        } else if (num === 71) {
                            insult = name + ", I'd slap you, but that would be animal abuse.";
                             id71
                        } else if (num === 70) {
                            insult = name + ", stop trying to be a smart ass, you're just an ass.";
                             id70
                        } else if (num === 69) {
                            insult = "Damn, you just got the best number!";
                             id69
                        } else if (num === 68) {
                            insult = "One off, get better at life.";
                             id68
                        } else if (num === 67) {
                            insult = "Why was six scared of seven? Because seven ate nine!";
                             id67
                        } else if (num === 66) {
                            insult = name + ", why don't you slip into something more comfortable... like a coma.";
                             id66
                        } else if (num === 65) {
                            insult = name + ", you get ten times more girls than me? ten times zero is zero...";
                             id65
                        } else if (num === 64) {
                            insult = name + ", You're so fat, you could sell shade."
                             id64
                        } else if (num === 63) {
                            insult = name + ", have you been shopping lately? They're selling lives, you should go get one.";
                             id63
                        } else if (num === 62) {
                            insult = name + ", I don't think you understand the concept of 'no eating'.";
                             id62
                        } else if (num === 61) {
                            insult = name + ", that's one small step for me, and a massive one for you.";
                             id61
                        } else if (num === 60) {
                            insult = name + ", I'd like to see things from your point of view but I can't seem to get my head that far up my ass.";
                             id60
                        } else if (num === 59) {
                            insult = name + ", every time I'm next to you, I get a fierce desire to be alone.";
                             id59
                        } else if (num === 58) {
                            insult = name + ", why do you always wear black? Do you like looking like a clown?";
                             id58
                        } else if (num === 57) {
                            insult = name + ", you're so dumb that you got hit by a parked car.";
                             id57
                        } else if (num === 56) {
                            insult = name + ", how did you get here? Did someone leave your cage open?";
                             id56
                        } else if (num === 55) {
                            insult = name + ", I didn’t ask for your opinion.";
                             id55
                        } else if (num === 54) {
                            insult = name + ", pardon me, but you've obviously mistaken me for someone who gives a damn.";
                             id54                          
                        } else if (num === 53) {
                            insult = name + ", don't you have a terribly empty feeling - in your skull";
                             id53
                        } else if (num === 52) {
                            insult = name + ", as an outsider, what do you think of the human race?";
                             id52
                        } else if (num === 51) {
                            insult = name + ", I have neither the time nor the crayons to explain this to you.";
                             id51
                        } else if (num === 50) {
                            insult = name + ", I would agree with you but then we would both be wrong.";
                             id50
                        } else if (num === 49) {
                            insult = name + ", you're so dense, light bends around you.";
                              id49
                        } else if (num === 48) {
                            insult = name + ", you're as useful as a waterproof teabag.";
                             id48
                        } else if (num === 47) {
                            insult = name + ", you're so clumsy, you could trip over a wireless network.";
                             id47
                        } else if (num === 46) {
                            insult = ", you're so slow, you make sloths look like Olympic sprinters.";
                             id46
                        } else if (num === 45) {
                            insult = name + ", you're not completely useless; you can always serve as a bad example.";
                             id45
                        } else if (num === 44) {
                            insult = name + ", you're so gullible, I could sell you air and you'd buy it.";
                             id44
                        } else if (num === 43) {
                            insult = name + ", your family tree must be a cactus, because everyone on it is a prick.";
                             id43
                        } else if (num === 42) {
                            insult = name + ", you're not just a clown; you're the entire circus.";
                             id42
                        } else if (num === 41) {
                            insult = name + ", your agility is comparable to a turtle on a trampoline.";
                             id41
                        } else if (num === 40) {
                            insult = name + ", you have the problem-solving skills of a confused penguin in a desert";
                             id40
                        } else if (num === 39) {
                            insult = name + ", you look like you were drawn with my left hand";
                             id39
                        } else if (num === 38) {
                            insult = name + ", I do not consider you a vulture. I consider you something a vulture would eat."
                             id38
                        } else if (num === 37) {
                            insult = name + ", what do you think of that, Mr. Pajama-Wearing, Basket-Face, Slipper-Wielding, Clipe-Dreep-Bauchle, Gether-Uping-Blate-Maw, Bleathering, Gomeril, Jessie, Oaf-Looking, Stauner, Nyaff, Plookie, Shan, Milk-Drinking, Soy-Faced Shilpit, Mim-Moothed, Sniveling, Worm-Eyed, Hotten-Blaugh, Vile-Stoochie, Callie-Breek-Tattie?";
                             id37
                        } else if (num === 36) {
                            insult = "Your mother was a broken down tub of junk with more gentlemen callers than the operator.";
                             id36
                        } else if (num === 35) {
                            insult = "White people are just untitled word documents.";
                             id35
                        } else if (num === 34) {
                            insult = "Mirrors can't talk. Lucky for you, they can't laugh either.";
                             id34
                        } else if (num === 33) {
                            insult = "Only 1 in 100 people get this on their first try. You aren't lucky. You're just the hundreth person.";
                             id33
                        } else if (num === 32) {
                            insult = "I’ll never forget the first time we met. But I’ll keep trying.";
                             id32
                        } else if (num === 31) {
                            insult = "Here are the first hundred digits of pi! You're welcome: 3.1415926535 8979323846 2643383279 5028841971 6939937510 5820974944 5923078164 0628620899 8628034825 3421170679";
                             id31
                        } else if (num === 30) {
                            insult = "Honestly, does " + name + " even appreciate my work?";
                             id30
                        } else if (num === 29) {
                            insult = "The number 29 is fine. But are you?";
                             id29
                        } else if (num === 28) {
                            insult = "Did the mental hospital test too many drugs on you today?";
                             id28
                        } else if (num === 27) {
                            insult = name + ", I thought of you today. It reminded me to take out the trash.";
                             id27
                        } else if (num === 26) {
                            insult = name +", somewhere out there is a tree tirelessly producing oxygen for you. You owe it an apology.";
                             id26
                        } else if (num === 25) {
                            insult = name + ", you just might be why the middle finger was invented in the first place.";
                             id25
                        } else if (num === 24) {
                            insult = name + ", if I had a face like yours, I would sue my parents.";
                             id24
                        } else if (num === 23) {
                            insult = name + ", if I wanted to kill myself, I would climb to your ego and jump to your IQ.";
                             id23
                        } else if (num === 22) {
                            insult = "Phew, I'm getting tired of typing all those insults. Why don't you help me out a little, and tell me your personality so that I can make more.";
                             id22
                        } else if (num === 21) {
                            insult = name + ", don’t be ashamed of who you are. That’s your parent’s job.";
                             id21
                        } else if (num === 20) {
                            insult = name + ", you are proof that evolution can go in reverse.";
                             id20
                        } else if (num === 19) {
                            insult = name + ", Isn’t it dangerous to use your whole vocabulary in one sentence?";
                             id19
                        } else if (num === 18) {
                            insult = name + ", if I had a dollar for every time you said something smart, I’d be broke.";
                             id18
                        } else if (num === 17) {
                            insult = "People clap when they see you. They clap their hands over their eyes.";
                             id17
                        } else if (num === 16) {
                            insult = name + ", I bet your parents change the subject when their friends ask about you.";
                             id16
                        } else if (num === 15) {
                            insult = "I find the fact that you’ve lived this long both surprising and disappointing.";
                             id15
                        } else if (num === 14) {
                            insult = "You should carry a plant around with you to replace the oxygen you waste.";
                             id14
                        } else if (num === 13) {
                            insult = "If you were the light at the end of the tunnel, I’d turn back around.";
                             id13
                        } else if (num === 12) {
                            insult = "I don’t know what your problem is, but I’m guessing it’s hard to pronounce.";
                             id12
                        } else if (num === 11) {
                            insult = "You see that door? I want you on the other side of it.";
                             id11
                        } else if (num === 10) {
                            insult = "Final 10, I can see the light. Oh wait, you're on the other side. Back we go!";
                             id10
                        } else if (num === 9) {
                            insult = "You look like a person in their 80's, but you act like someone who's 9.";
                             id9
                        } else if (num === 8) {
                            insult = "If I had a dollar for everytime you said something smart I would be broke."; 
                             id8
                        } else if (num === 7) {
                            insult = name + ", may both sides of your pillow be uncomfortably warm.";
                             id7
                        } else if (num === 6) {
                            insult = "This is the most useless number you could have gotten.";
                             id6
                        } else if (num <= 5) {
                            insult = "You had a 5% chance to get this number. Good job!";
                             id5_1
                        } else {
                             return insult;  
                        }
        }

  </script> 
  <h1><script>generateInsult(<!----->Insert Name Here</!------>)</script></h1>
</body>
</html>

I tried multiple different ways, like using getElementId, but it wouldn’t work. I was expecting a header to appear when I push generate insult, but nothing happens. (btw you can use these insults if you want)

how can I using the GET super global in PHP to fetch the id to create a Cart page

to get the id and of a particular product when clicked and when it clicked I want to fetch products 1 at a time so the image the price the description will sure when another product is clicked I want the price to be added together so the users can know the amount they are using to purchase their product

when you scroll at the bottom of my site’s footer there is a green writing**” write own HTML code”** my website earlier didn’t have the popup. However, after doing a system restore sometimes back, they appeared. Even my theme seller couldn’t help. Can you help please. PS. it’s not plugin related at all. thanks in advance

disabling all the plugins but it didnt work.