Category: javascript

Category Added in a WPeMatico Campaign

getParameter javascript not working on iOS with apostrophes

I have a html form that submits text data to a database and passes it through to be displayed on the redirected page. Some characters, particularly apostrophes, are working on desktop browsers but not iOS. I’ve narrowed down the issue to my getParameterByName function but after a number of trial and error on the expression statements I cannot get the data to encode correctly. Here is my function:

      function getParameterByName(name, url) {
             if (!url) url = window.location.href;
             name = name.replace(/[[]]/g, '\$&');
             var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
                 results = regex.exec(url);
             if (!results) return null;
             if (!results[2]) return '';
             return decodeURIComponent(results[2].replace(/+/g, ' '));
      }

Can anyone help point me in the right direction of how to correct my name/regex variable?

I have tried adjusting the regex variable to try

`'new RegExp("^[a-zA-ZÀ-ÿ '‘’]{2,60}$")'
/^[a-zA-ZÀ-ÿ u2018u2019']{2,60}$/; `

and others but the url is not being parsed correctly.

Multiple custom field values in strong soap for Netsuite

Long shot, I’m using strong SOAP to retrieve saved search results from Netsuite.

If my search contains just 2 columns, sales rep and revenue then it works fine.

The revenue column in the search is from a custom field.

If I add another custom field then everything is undefined.

I have tried so many combinations, but I cannot fathom the syntax for the below for me to pass values from multiple custom columns to variables in the script.

the ‘const fieldId’ variable does show me the fields internal id in the logs, but again as soon as I add another column to the search this also becomes undefined.

I know it will have something to do with identifying the searchValue by the scriptId of the field, but can’t make it all connect.

let searchRows = result.searchResult.searchRowList.searchRow;
                  searchRows.forEach((row) => {
                     const searchValue = row.basic.entityId.searchValue;
                     const fieldId = row.basic.customFieldList.customField.$attributes.scriptId;
                     const customField = row.basic.customFieldList.customField.searchValue;
                     console.log(searchValue);
                     console.log(fieldId);
                     console.log(customField);

Any help greatly appreciated.

Rendering Website from zip file via jszip and extraction to localstorage

I attempted to figure out a way to render my lil (4meg uncompressed) website from zip

  <!DOCTYPE html>
<html>
<head>
    <title>Fetch and Open ZIP File</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js"></script>
</head>
<body>
    <button onclick="fetchAndOpenZip()">Fetch and Open Website</button>
    <script>
        function fetchAndOpenZip() {
            var zip = new JSZip();
            fetch('https://alcea-wisteria.de/z_files/emoji/alceawis.de-direct.zip')
                .then(function(response) {
                    if (response.ok) {
                        return response.blob();
                    } else {
                        throw new Error('Error: ' + response.status);
                    }
                })
                .then(function(blob) {
                    return zip.loadAsync(blob);
                })
                .then(function() {
                    return zip.file('index.html').async('text');
                })
                .then(function(htmlContent) {
                    var newTab = window.open();
                    var newDoc = newTab.document.open();
                    newDoc.write(htmlContent);
                    newDoc.close();
                    zip.forEach(function(relativePath, zipEntry) {
                        if (htmlContent.includes(relativePath) && !relativePath.endsWith('.php')) {
                            zipEntry.async('text').then(function(content) {
                                var fileType;
                                if (relativePath.endsWith('.js')) {
                                    fileType = 'script';
                                } else if (relativePath.endsWith('.css')) {
                                    fileType = 'style';
                                } else if (relativePath.endsWith('.html')) {
                                    fileType = 'html';
                                } else {
                                    fileType = 'asset';
                                }
                                if (fileType === 'script') {
                                    var script = newDoc.createElement('script');
                                    script.textContent = content;
                                    newDoc.body.appendChild(script);
                                } else if (fileType === 'style') {
                                    var style = newDoc.createElement('style');
                                    style.textContent = content;
                                    newDoc.head.appendChild(style);
                                } else if (fileType === 'html') {
                                    var newDiv = newDoc.createElement('div');
                                    newDiv.innerHTML = content;
                                    newDoc.body.appendChild(newDiv);
                                } else if (fileType === 'asset') {
                                    // Create a Blob object from the content
                                    var blob = new Blob([content], { type: 'text/plain' });
                                    var reader = new FileReader();
                                    reader.onload = function(event) {
                                        // Create a data URL for the asset file
                                        var dataUrl = event.target.result;
                                        var mimeType = zipEntry.name.endsWith('.png') ? 'image/png' : 'image/jpeg';
                                        var img = newDoc.createElement('img');
                                        img.src = dataUrl;
                                        img.type = mimeType;
                                        newDoc.body.appendChild(img);
                                    };
                                    reader.readAsDataURL(blob);
                                }
                            });
                        }
                    });
                })
                .catch(function(error) {
                    console.error('Error:', error);
                });
        }
    </script>
</body>
</html>

Sadly it only loads parts of it.
Is there a mistake in my code ?

I tried changing thge code to iterate files in the zip.
Sadly it won’t read them all and only render the index.html with most assets missing.

None of the suggestions online manage to load a proper website sadly.

I even wrote a reference mapper, but it seems superfluos ( https://codepen.io/ryedai1/pen/xxBNoBK ) as I would have some loop it each call ?

Button effect with js

I want to set mousemove effect on the btn-primary button, similar to the button on (https://www.aldoria.com/), when mouse moves over button, it slightly moving with mouse and have a subtle shadow

let pb = document.getElementsByClassName("btn-primary");
for (let i = 0; i < pb.length; i++){
    pb[i].addEventListener("mousemove", function(e) {
        var pos = pb[i].getBoundingClientRect(); // Get the position of the element relative to the viewport
        var mx = e.clientX; // Get the mouse position when
        var my = e.clientY; // mousemove on the element
        if (mx && my) {
            pb[i].style.transform = 'translate3d(' + 0.1*(mx - pos.left) + 'px,' + 0.2*(my - pos.top) + 'px,0)'; //translate 10% X and 20% Y of distance that mouse has moved on
        }
    });
    pb[i].addEventListener("mouseleave", function() {
        pb[i].style.transform = 'none'; // Reset the transform when the mouse leaves
    });
}

At these code, I just have tried to let the button moving with mousemove but it doesn’t work well

ReferenceError: apiUrl is not defined when fetching data from InfluxDB using JavaScript

I have created an influxDB container on my raspbarry PI. Now Im trying to write an Website where i can show the data that is in my database on my Website. I have created a JavaScript library to fech data from my database and display it on my website. Im using the fetch API to send an HTTP request to the InfluxDB API and retrieve the data. However, Im getting this when i refresh my website:

ReferenceError: apiUrl is not defined
    datenAbrufen file:///C:/Users/Amir/Desktop/Projekt/index.html:102
    abrufenUndAnzeigen file:///C:/Users/Amir/Desktop/Projekt/index.html:135
    <anonymous> file:///C:/Users/Amir/Desktop/Projekt/index.html:140

Why am I getting this and how can I resolve the issue.

class InfluxDBLibrary {

    // Klassen konstruktor
    constructor(optionen){
        this.host = optionen.host;
        this.port = optionen.port;
        this.datenbank = optionen.datenbank;
    }
    
    async datenAbrufen(abfrage){
        // Methode zum Abrufen von Daten aus der Datenbank
        const url = 'http://${this.host}:${this.port}/abfrage?db=${encodeURIComponent(this.datenbank)}&q=${encodeURIComponent(abfrage)}';
        
        // Der API-URL wird basierend auuf den Host, Port und Datenbankname erstellt
        const antwort = await fetch(url, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'       
            }
        });
    
        // Hier wird eine HTTP-GET Anfrage an die Datenbank geschickt und der Datenbank soll eine Antwort zurück schicken
        if(!antwort.ok){
            
            // Wenn die Antwort nicht erfolgreich ist, soll eine Fehler meldung mit der entsprechende Fehlermeldungm, ausgegeben werden
            throw new Error('Abrufen der Daten, Fehlgeschlagen:${antwort.statusText}');
        }
    
        // Die Antwort von Server, wird in eine JavaScript-Objekt interpretiert
        const daten = await antwort.json();
        return daten;
        
        }
    }

            // Hier wird die Verbindung zur Datenbank definiert
            const optionen = {
                host: 'Pi_IP',
                port: '8087',
                datenbank: 'Web_Test'
            };

            const influxDB = new InfluxDBLibrary(optionen)

            // Hier werde die Daten abgerufen und in HTML-Seite angezeigt
            async function abrufenUndAnzeigen(){
                const abfrage = 'select Temperatur from test';
                const daten = await influxDB.datenAbrufen(abfrage);
                const datenAnzeigenElement = document.getElementById('Temperatur');
                datenAnzeigenElement.innerText = JSON.stringify(daten);
            }

            abrufenUndAnzeigen().catch(console.error);

React scripts not loading on localhost using npm start, but load when opening the index.html in firefox

I’ve been learning react and webpack at the same time to try set up a webapp to learn web development. I’ve recently started learning react to make some toggle buttons work, but for some reason they don’t work when i run npm start and navigate to localhost, but they do work when i double click my html file in my dist folder. There are no error messages, just a few warnings about script sizes.

The buttons load, so I assume my app.js is correct

import React from "react";
import ToggleButton from "./togglebutton";

const App = () => {
    return (
      <div>
        <h1>Hello, React with Webpack!</h1>
        <ToggleButton label="button1" />
        <ToggleButton label="button2" />
        <ToggleButton label="button3" />
      </div>
    )
  }
  
  export default App;

But the buttons have seemingly no functionality. Leading me to believe the issue is in my togglebutton.js

import React, { useState } from 'react';

const ToggleButton = ({ label }) => {
    // Use state to track the current state (On or Off)
    const [isOn, setIsOn] = useState(false);
  
    // Function to handle button click and toggle the state
    const handleClick = () => {
      setIsOn((prevIsOn) => !prevIsOn);
      console.log(`${label} toggled: ${isOn ? 'On' : 'Off'}`);
    };
  
    return (
      <button onClick={handleClick}>
        {isOn ? 'On' : 'Off'} - {label}
      </button>
    );
};

export default ToggleButton;

Any help would be appreciated!

This is my index.html incase its relevant.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>React with Webpack</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="togglebutton.bundle.js"></script>
        <script src="app.bundle.js"></script>
        <script src="index.bundle.js"></script>
    </body>
</html>

This seems to have happened while I have been trying to make the button update synchonrous.

How to validate only specific routes/subpaths using express-openapi-validator?

I have an express server that I want to validate against an OpenAPI spec. All the documentation for express-openapi-validator only provides examples of validating all routes with app.use(OpenApiValidator.middleware()).

However, for a server with many subpaths, I want to only validate some and not others. Let’s say, I only want to validate the path example.com/subpath1/subSubpath1, and only after some checks and assigning needed body parser.

This is my current setup:

const app : express.Express = express();
app.use('/subpath1', getSubpathOneRouter()); // part of this needs validation
app.use('/subpath2', getSubpathTwoRouter()); // doesn't need validation

export function getSubpathOneRouter() : express.Router {
    let subpathOneRouter = express.Router();
    
    subpathOneRouter.post('/subSubpath1',
        async (req, res, next) => {
            await somethingCustom(req, res, next, somethingElse);
        },
        express.json(),
        // VALIDATION SHOULD HAPPEN HERE
        async (req, res, next) => { res.sendStatus(200); }
    );

    // No validation needed for this one
    subpathOneRouter.get('/subSubpath2',
        async (req, res, next) => { /* whatever */ },
    );

    return subpathOneRouter;
}

How would I achieve validation only on that specific subpath?

Testing async functions which use await Karma+Jasmine JS

Im trying to test a async function using Karma and Jasmine in an angularjs v1.5.0 project. This async function (a) has 2 await like so:

async function a(){
    let var1 = await b()
    console.log(var1)
    let var2 = await c()
}

function b(){
    return $http.get(url1).then(
        function(response){
            ...
        }
    )
}

function c(){
    return $http.get(url2).then(
        function(response){
            ...
        }
    )
}

My test:

it('testA', inject(async function($httpBackend) {
    $httpBackend.when('GET','url1').respond(200, [myresult])
    $httpBackend.when('GET','url2').respond(200, [myresult])
    MyController().a()
    $httpBackend.flush();
}));

The problem is that $httpBackend.flush(); is only ‘flushing’ the first await and then the execution of the function ‘a’ does not continue, it can’t even reach the console.log(var1). Can anybody help me with this?

I can’t change the code, i just want to make a test for that code.

I tried to do await a() in the test, but that just doesnt work, it doesn’t event resolve the first await.

Logic for a basic calculator project

I only know array attributes loops and if statement does it require more to build an logic for this calculator project? also I’m a beginner so the code is long but readable i guess so in the equals button function pls tell me a logic for this project

here’s the code :

let firstBtnEl = document.getElementById("div1")
let secondBtnEl = document.getElementById("div2")
let thirdBtnEl = document.getElementById("div3")
let fourthBtnEl = document.getElementById("div4")
let fifthBtnEl = document.getElementById("div5")
let sixthBtnEl = document.getElementById("div6")
let seventhBtnEl = document.getElementById("div7")
let eigthBtnEl = document.getElementById("div8")
let ninthBtnEl = document.getElementById("div9")
let zeroethBtnEl = document.querySelector("#div0")
let userEntryEl = document.querySelector("#userEntry")

let entry = []

function firstBtn() {
  entry.push("1")
  userEntryEl.innerHTML = ""

  for (let i = 0; i < entry.length; i++) {
    userEntryEl.innerHTML += entry[i]
  }
}

function secondBtn() {
  entry.push("2")
  userEntryEl.innerHTML = ""

  for (let i = 0; i < entry.length; i++) {
    userEntryEl.innerHTML += entry[i]
  }
}

function thirdBtn() {
  entry.push("3")
  userEntryEl.innerHTML = ""

  for (let i = 0; i < entry.length; i++) {
    userEntryEl.innerHTML += entry[i]
  }
}

function fourthBtn() {
  entry.push("4")
  userEntryEl.innerHTML = ""

  for (let i = 0; i < entry.length; i++) {
    userEntryEl.innerHTML += entry[i]
  }
}

function fifthBtn() {
  entry.push("5")
  userEntryEl.innerHTML = ""

  for (let i = 0; i < entry.length; i++) {
    userEntryEl.innerHTML += entry[i]
  }
}

function sixthBtn() {
  entry.push("6")
  userEntryEl.innerHTML = ""

  for (let i = 0; i < entry.length; i++) {
    userEntryEl.innerHTML += entry[i]
  }
}

function seventhBtn() {
  entry.push("7")
  userEntryEl.innerHTML = ""

  for (let i = 0; i < entry.length; i++) {
    userEntryEl.innerHTML += entry[i]
  }
}

function eigthBtn() {
  entry.push("8")
  userEntryEl.innerHTML = ""

  for (let i = 0; i < entry.length; i++) {
    userEntryEl.innerHTML += entry[i]
  }
}

function ninthBtn() {
  entry.push("9")
  userEntryEl.innerHTML = ""

  for (let i = 0; i < entry.length; i++) {
    userEntryEl.innerHTML += entry[i]
  }
}

function zeroethBtn() {
  entry.push("0")
  userEntryEl.innerHTML = ""

  for (let i = 0; i < entry.length; i++) {
    userEntryEl.innerHTML += entry[i]
  }
}

function additionBtn() {
  entry.push("+")
  userEntryEl.innerHTML = ""

  for (let i = 0; i < entry.length; i++) {
    userEntryEl.innerHTML += entry[i]
  }
}

function subtractionBtn() {
  entry.push("-")
  userEntryEl.innerHTML = ""

  for (let i = 0; i < entry.length; i++) {
    userEntryEl.innerHTML += entry[i]
  }
}

function multiplicationBtn() {
  entry.push("×")
  userEntryEl.innerHTML = ""

  for (let i = 0; i < entry.length; i++) {
    userEntryEl.innerHTML += entry[i]
  }
}

function divisionBtn() {
  entry.push("÷")
  userEntryEl.innerHTML = ""

  for (let i = 0; i < entry.length; i++) {
    userEntryEl.innerHTML += entry[i]
  }
}

function clearBtn() {
  userEntryEl.innerHTML = ""

  while (entry.length > 0) {
    entry.pop();
  }
}

function equalBtn() {
  if (entry.includes("+")) {
    let k = entry.indexOf("+")
    for (let i = 0; i < entry[k]; i++) {

    }
  }
}

i have written all the code necessary i pushed elements into an array also the now how do i convert those before +-× and ÷ and those after to a single numbers then add them I’m confused i couldn’t think of anything

container issue showed up in console. In next js project

I got this issue on my console when I was working on next.js and is using React. JS and tailwind, and I don’t know where to fix it.

“Please ensure that the container has a non-static position, like ‘relative’, ‘fixed’, or ‘absolute’ to ensure scroll offset is calculated correctly.”

enter image description here

my project is working fine but that console bugging on my head

here’s my code enter image description here

<html lang="en" className="!scroll-smooth"> <body
className={`${inter.className} h-[100%] bg-gray-50 text-gray-950
relative pt-28 sm:pt-36 dark:bg-slate-900 dark:text-white`}
>

ask me for more information

I will be glad if you solve this question

I want to fix my console’s container issue. I already added relative class, but it’s still asking for position on scroll offset.

Ideas on how to make a timeline for video playing in Javascript

I’m currently working on a side project and i have to make a timeline for playing videos in certain times and be able to go to specific seconds, etc. I would like to do something like blender has, or adobbe premier (if you know about those). I have tried 3 different ways to do it and it seems to not be the correct answer.

I have tried 3 different ways of doing this but they all have the same problem:

I tried to make a full width square with some height, then I tried to render one line (i.e. one second in the video) for every second, but here comes the main problem I have in all attempts, the spacing or position of the line doesn’t match the actual second, so for example if I go to 1 second, maybe the actual position is 1.5 or something (not perfect). I forgot to mention that my cursor is the one that moves and points to the position. Therefore, I just change the X.

Regarding spacing, I also tried to use the calculation for space between elements, being as follows: (containerWidth - totalWidthOfAllElements) / numberOfElemenents.
But all the ways I tried have problems and I’m working on this a couple of days ago.

Any ideas on how I can try doing something different would be appreciated. It’s important to mention that I’m using React with Typescript. Thank you!

How to change the mention plugin output DOM element in ckeditor5

Actual Output

<span class="mention" data-mention="@lilypad">@lilypad</span>

Tried below,

writer.createUIElement( 'span', null, function( domDocument ) {
 const domElement = this.toDomElement( domDocument );
 domElement.innerHTML = 'this is ui element';
 return domElement;
} );

Like mentioned here
https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_view_writer-Writer.html

editor.conversion.for( 'downcast' ).attributeToElement( { model: 'mention', view: ( modelAttributeValue, { writer } ) => { 
writer.createUIElement( 'span', null, function( domDocument ) {
 const domElement = this.toDomElement( domDocument );
 domElement.innerHTML = 'this is ui element';
 return domElement;
});
}
});

But its not working

(https://i.stack.imgur.com/rFIPS.png)

Expected output

<span class="mention mention-parent" data-mention="@lilypad" id="parent-id">@lilypad

Sample text

In my html code there is a bug in checkbox code

Checkbox

In the above image you can see that there is a background box with checkboxes
My html code:


{% extends 'partials/base.html'%}


{%load static%}

{% block content %}
    <style>
            /* Basic Styling */
      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        font-family: 'Roboto', sans-serif;
      }

      .containerbox {
        max-width: 1200px;
        margin: 0 auto;
        padding: 15px;
        display: flex;
      }

      /* Columns */
      .left-column {
        width: 65%;
        position: relative;
      }

      .right-column {
        width: 35%;
        margin-top: 60px;
      }


      /* Left Column */
      .left-column img {
        width: 70%;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: all 0.3s ease;
      }

      .left-column img.active {
        opacity: 1;
      }

    


      /* Right Column */

      /* Product Description */
      .product-description {
        border-bottom: 1px solid #E1E8EE;
        margin-bottom: 20px;
      }
      .product-description span {
        font-size: 12px;
        color: #358ED7;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-decoration: none;
      }
      .product-description h1 {
        font-weight: 300;
        font-size: 52px;
        color: #43484D;
        letter-spacing: -2px;
      }
      .product-description p {
        font-size: 16px;
        font-weight: 300;
        color: #86939E;
        line-height: 24px;
      }

      /* Product Configuration */
      .product-color span,
      .cable-config span {
        font-size: 14px;
        font-weight: 400;
        color: #86939E;
        margin-bottom: 20px;
        display: inline-block;
      }

      /* Product Color */
      .product-color {
        margin-bottom: 30px;
      }

      .color-choose div {
        display: inline-block;
      }

      .color-choose input[type="radio"] {
        display: none;
      }

      .color-choose input[type="radio"] + label span {
        display: inline-block;
        width: 40px;
        height: 40px;
        margin: -1px 4px 0 0;
        vertical-align: middle;
        cursor: pointer;
        border-radius: 50%;
      }

      .color-choose input[type="radio"] + label span {
        border: 2px solid #FFFFFF;
        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33);
      }

      .color-choose input[type="radio"]#red + label span {
        background-color: #C91524;
      }
      /*.color-choose input[type="radio"]#blue + label span {
        background-color: #314780;
      }
      .color-choose input[type="radio"]#black + label span {
        background-color: #323232;
      }*/

      .color-choose input[type="radio"]:checked + label span {
        background-image: url(images/check-icn.svg);
        background-repeat: no-repeat;
        background-position: center;
      }

      /* Cable Configuration */
      .size-choose {
        margin-bottom: 20px;
      }

      .size-choose button {
        border: 2px solid #E1E8EE;
        border-radius: 6px;
        padding: 13px 20px;
        font-size: 14px;
        color: #5E6977;
        background-color: #fff;
        cursor: pointer;
        transition: all .5s;
      }

      .size-choose button:hover,
      .size-choose button:active,
      .size-choose button:focus {
        border: 2px solid #86939E;
        outline: none;
      }

      .size-config {
        border-bottom: 1px solid #E1E8EE;
        margin-bottom: 20px;
      }

      .size-config a {
        color: #358ED7;
        text-decoration: none;
        font-size: 12px;
        position: relative;
        margin: 10px 0;
        display: inline-block;
      }
      .size-config a:before {
        content: "?";
        height: 15px;
        width: 15px;
        border-radius: 50%;
        border: 2px solid rgba(53, 142, 215, 0.5);
        display: inline-block;
        text-align: center;
        line-height: 16px;
        opacity: 0.5;
        margin-right: 5px;
      }

      /* Product Price */
      /*.product-price {
        display: flex;
        align-items: center;
      }

      .product-price span {
        font-size: 26px;
        font-weight: 300;
        color: #43474D;
        margin-right: 20px;
      }*/

      .cart-btn {
        display: inline-block;
        background-color: #FFB6C1;
        border-radius: 6px;
        font-size: 16px;
        color: #FFFFFF;
        text-decoration: none;
        padding: 12px 30px;
        transition: all .5s;
      }
      .cart-btn:hover {
        background-color:  #ff0000;
      }
      .buynow-btn {
        display: inline-block;
        background-color: #FFB6C1;
        border-radius: 6px;
        font-size: 16px;
        color: #FFFFFF;
        text-decoration: none;
        padding: 12px 30px;
        transition: all .5s;
      }
      .buynow-btn:hover {
        background-color:  #ff0000;
      }

      /* Responsive */
      @media (max-width: 940px) {
        .container {
          flex-direction: column;
          margin-top: 60px;
        }

        .left-column,
        .right-column {
          width: 100%;
        }

        .left-column img {
          width: 300px;
          right: 0;
          top: -65px;
          left: initial;
        }
      }

      @media (max-width: 535px) {
        .left-column img {
          width: 220px;
          top: -85px;
        }
      }
        .product-price {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .price {
            font-size: 24px;
            font-weight: bold;
            color: #333; /* Price color */
            margin-bottom: 5px;
        }

        del {
            color: #999; /* Old price color */
            font-size: 18px;
        }


    </style>
    <meta name="robots" content="noindex,follow" />

  </head>

  <body>
    <main class="containerbox">

      <!-- Left Column / Headphones Image -->
      <div class="left-column">
        {%  for p in p_image  %}
        <img data-image="black" src="{{  p.images.url  }}" alt="Hi1">
        {%  endfor  %}
        <!-- {%  for q in p_image  %}
        <img data-image="blue" src="{{  q.images.url  }}" alt="Hi2">
        {%  endfor  %} -->
        <img data-image="red" class="active" src="{{p.image.url}}" alt="Hi">
        <!-- <p class="showcase-badge">{{p.get_percentage|floatformat:0}}% off</p> -->
      </div>


      <!-- Right Column -->
      <div class="right-column">

            <!-- Product Description -->
            <div class="product-description">
              <span>{{p.vendor}}</span>
              <h1>{{p.title}}</h1>
              <p>{{p.description}}</p>
            </div>

            <!-- Product Configuration -->
            <div class="product-configuration">

              <!-- Product Color -->
              {% for c in colors %}
              <div class="product-color">
                <span>Color</span>
                <div style="background-color: {{c.code}}; padding: 10px;" class="product-color">
                  <div class="color-choose">
                    <div>
                      <!-- Your radio button and label code here -->
                      <input data-image="{{c.code}}" type="radio" id="{{c.code}}" name="color" value="{{c.code}}" checked>
                      <label for="colorCheckbox"><span style="background-color: {{c.code}}"></span></label>
                    </div>
                  </div>
                </div>
                {%  endfor  %}
                
                  <!-- <div>
                    <input data-image="blue" type="radio" id="blue" name="color" value="blue">
                    <label for="blue"><span></span></label>
                  </div>
                  <div>
                    <input data-image="black" type="radio" id="black" name="color" value="black">
                    <label for="black"><span></span></label>
                  </div> -->
                </div>

              </div>

              <!-- Cable Configuration -->
              <div class="size-config">
                {% for s in sizes %}
                <span>Sizes</span>

                <div class="size-choose">
                  <button>{{s.name}}</button>
                </div>
                {% endfor %}

                <a href="#">How to configurate your headphones</a>
              </div>
            </div>

            <!-- Product Pricing -->
            <div class="product-price">
              <p class="price">New Price: {{p.price}} </p>

              <del>Old Price: {{p.old_price}}</del>
            </div>
              <a href="#" class="cart-btn">Add to cart</a>
              <a href="#" class="buynow-btn">Buy Now</a>

    </main>


      <!-- Related Products -->

           <!-- Related Products Section -->
    <div class="related-products">
        <div style="text-align: center;">
            <h2>Related Products</h2>
        </div>

        {% for p in products %}
        <div class="showcase">
            <div class="showcase-banner">
                <img src="{{ p.image.url }}" alt="{{ p.title }}" width="300" class="product-img default">
                <p class="showcase-badge">{{ p.get_percentage|floatformat:0 }}% off</p>
            </div>
            <div class="showcase-content">
                <a href="#" class="showcase-category">{{ p.category }}</a>
                <a href="#"><h3 class="showcase-title">{{ p.title }}</h3></a>
                <div class="price-box">
                    <p class="price">{{ p.price }}</p>
                    <del>{{ p.old_price }}</del>
                </div>
                <a href="#" class="cart-btn">Add to cart</a><br>
                <!-- <button class="btn-buy-now">Buy Now</button> -->
            </div>
        </div>
        {% endfor %}
    </div>


    <!-- Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
<script>
      $(document).ready(function() {
        // Your existing code here

        $('.color-choose').on('click', 'input', function() {
            var productColor = $(this).attr('data-image');

            $('.active').removeClass('active');
            $('.left-column img[data-image = ' + productColor + ']').addClass('active');
            $(this).addClass('active');
        });
      });
</script>

  </body>
{% endblock content %}

Other things are working perfectly but the only problem with the background boxes in checkboxes. My models and vies are working perfectly no need to see django codes. there is problem only in html and css.**

Please remove this background boxes which is coming with the checkboxes.

Correct way to render an image inside a Carbon Design System Web Component

Following the docs for the UI Shell in Carbon Design System.

The example given renders the following in their global header:

enter image description here

I want to replace the text, “IBM [Platform]”, with a logo.

The Web Components code given in the docs is

<cds-header aria-label="IBM Platform Name">
    <cds-header-menu-button button-label-active="Close menu"  button-label-inactive="Open menu"></cds-header-menu-button>

    <cds-header-name href="javascript:void 0" prefix="IBM">[Platform]</cds-header-name>

 // ...

I can remove the prefix="IBM" part to stop that from being output. If I replace the string “[Platform]” with an <img src="logo.svg"> it won’t render anything in its place:

enter image description here

If I fully remove <cds-header-name> ... </cds-header-name> and add the image as a child of <cds-header> e.g.

<cds-header>
   <img src="logo.svg">
   // ...

It will render the logo, but of course the styles for the padding and position won’t apply so it appears in an odd place.

In any event I can’t think this is the correct way to do it. But the docs don’t show an examples of using an image in place of this text.

I understand that the Web Components code renders inside the shadow root. Do I need to add the image via JS as opposed to trying to use a regular HTML <img> tag in the template?

I’m new to using Carbon and haven’t used Web Components much up to this point.

How can I send data between two pages in Next.js?

The specific case is that I use one page filter.jsx to get the request from the user like the subject, the grade of student, the difficulty level, … Then I process them via an API filter/route.js to filter the question database and send the filtered data back to the page filter.jsx.

How can I create a button in filter.jsx that when clicked will move to other page test.jsx and use the filtered data in this test.jsx page?

I used Link and router.push but they dont work. Maybe I was using it the wrong way.