Category: javascript

Category Added in a WPeMatico Campaign

Detect duplicate keys in javascript scripts using VSCode [duplicate]

Is there a way to highlight a warning for duplicate keys when my code looks like this?

db.locales.insertOne({
  ...
        "advanced": {
          "t0": "Calm wind",
          "t1": "Very light breeze",
          "t2": "Light breeze",
          "t3": "Stiff breeze",
          "t4": "Light wind", <-- warning
          "t4": "Stiff wind", <-- warning
          "t6": "Cool wind",
          ...
});

I am using VSCode along with ESlint and Prettier

Is it a way to use template literals in a property name declaration of an object? [duplicate]

I’ve written a diagram.appendRichElements method, that takes an object as argument, like this one :

{
  'polyline':{'id':'polyline-id','stroke':'#fee','stroke-width':'2'},
  'circle':{'id':'circle-id','cx':'10','cy':'10','r':'5','fill':'#fee'}
}

Trying to pass an object as a function argument, I must build if on the fly, like :

var diagram.appendRichElements({`${type}`:props});

But this kind of code throws an error.

I’ve tried this code in the Firefox console :

var n = 'test';
console.log({`${n}`:'coucou'});

An I got : Uncaught SyntaxError: expected property name, got '${'.

Is it a way to build an object using template literal for property name without a var o={}; o[n] = 'Hi!' ?

How do I create a reponsive MUI.COM based web app using the full window size (without scrollbars)

How do I create a MUI.COM based Material UI responsive web page that uses the full size of the browser window (without scrollbars)?

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="UTF-8">
        <link rel="stylesheet" href="http://localhost:8000/dist/index.css" type="text/css" media="all" />
    </head>
    <body>
        <div id="app" ></div>
        <script src="http://localhost:8000/dist/index.js" type="module"></script>
    </body>
</html>

Javascript:

import React from "react";
import {createRoot} from "react-dom/client";

import {Paper, AppBar, Toolbar, Typography} from "@mui/material";

const App = ({}) => {
    return <>
            <AppBar position={"static"}>
               <Toolbar>
                   <Typography>Test</Typography>
               </Toolbar>
            </AppBar>

            <Paper sx={{backgroundColor: "red", height: "100vh", width: "100%"}}>
                <Typography>Test</Typography>
            </Paper>
            </>;
    }

createRoot(document.querySelector("#app")).render(<App />);

This creates a full width red Paper, but is has a vertical scrollbar.

What am I doing wrong here?

Position button on specific place on scaling image

I have an image that scales when changing the screen size. I want to place a button in a specific place on the image (inside the cogwheel) and I want it to stay there.

Fiddle:
https://jsfiddle.net/hmnozjs2/

<div class="img">
  <button>
    My button
  </button>
</div>

.img {
  background-image: url("https://knowledge.wharton.upenn.edu/wp-content/uploads/2023/03/3.15.23-scott-snyder-esg-corporate-innovation-GettyImages-1410816388-900x605.png");
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 70%;
  position: relative;
}

button {
  width: 90px;
  position:absolute;
  top: 105px;
  left: 300px;
}

My original idea was position:absolute. However as I change the width of my screen the button does not stay inside the cogweel at all. I assume I can fix this by flexbox and somehow aligning it…

The bigger issue is when changing the height of the screen, the image then grows or shrinks and I have no idea how I would be able to keep the button in place…

I have looked around but in most places people just want to center a button on an image. That is easy with flexbox, but in my case, the problem is a bit more complicated as the button needs to stay in a very specific place.

I am sure there is a simple solution and this is a common use-case, I am just inexperienced…

Thanks in advance for the help!

Can and how do I pass class values to a Fragement in Astro?

I have the following code, which you can see below. Where I want to pass a class to an imported SVG fragment. Sadly, the class is not forwarded, and the object keeps its old width. How can I solve this? I tried to wrap the fragment, which also did not work and added an unnecessary div. Is there a way to add this directly to the raw SVG fragment?

---
import iconPlantWilt from '~/assets/icon_plant_wilt.svg?raw';
import Layout from '../layouts/Layout.astro';
---

<Layout title="404">
  <Fragment class="w-5" set:html={iconPlantWilt} />
</Layout>

P.S.: I want to achieve this, but from an imported SVG.

Parsing Excel-like Cell Range to Numeric Format in JavaScript

I need to convert Excel-like cell ranges into a numeric-like format in JavaScript. The format I am aiming for is rowStart:columnStart:rowEnd:columnEnd.

For example, a cell range like “A1:B3” should be converted to “1:1:3:2”, and a range like “AA1:AAV5” should become “1:27:5:724”.

I am struggling to come up with a way to convert the column letters to numbers, especially when the column range exceeds ‘Z’ and starts from ‘AA’, ‘AB’, and so on.

Here is what I have tried so far:

function parseCellRange(range) {
    // Split the range into start and end
    let [startCell, endCell] = range.split(':');
    
    // Split startCell and endCell into row and column
    let startColum = startCell.match(/[a-zA-Z]+/g);
    let startRow = startCell.match(/(d+)/)[1];
    let endColumn = endCell.match(/[a-zA-Z]+/g);
    let endRow = endCell.match(/(d+)/)[1];

    // Convert column letters to numbers
    // This is where I am stuck


    // Generate new cell range format
    let newCellRange = startRow + ":" + startColum + ":" + endRow + ":" + endColumn 
    
    return(newCellRange)
}

// Tests
parseCellRange("A1:B3"); // Should return '1:1:3:2'
parseCellRange("AA1:AAV5"); // Should return '1:27:5:724'

How to use ontouchstart instead of onclick

I am using the below code and it works on desktop but the click function is not working on mobile so I tried using ontouchstart but that is not working either.
What am I doing wrong?

var video = document.getElementById("myVideo");
var btn = document.getElementById("myBtn");

function myFunction() {
    video.muted = !video.muted;
    btn.innerHTML = video.muted ? "Unmute":'Mute';
}

<section class="video-container">

  <div class="video-description">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <video id="myVideo" autoplay loop>
    <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>

  <div class="content">

    <button id="myBtn" class="" onclick="myFunction()">Mute</button>
   <button id="myBtn" class="mobile" ontouchstart="myFunction()">Mute</button>
  </div>

Get token for ajax request

I’m trying to get the token used for the AJAX requests, but I can’t

I’ve tried to

var tokenElement = document.querySelector('input[name="token"]');
return tokenElement ? tokenElement.value : '';

but this returns empty string

My AJAX request is

function updateCartQuantity(productId, newQuantity, direction) {
    var updateCartUrl = 'http://localhost:8080/carrito?update=1&id_product=' + productId + '&id_product_attribute=0&token=ceeb4f35edebe84b3eb3267a329782d8&ajax=1&op='+direction ;

    // Realizar la solicitud AJAX
    $.ajax({
        type: 'GET',
        url: updateCartUrl,
        success: function (response)
            refreshCart();
        },
        error: function (error) {
            console.error('Error updating:', error);
        }
    });
}

event.stopPropagation() is not working, not able to stop a ul div from getting closed automatically

i have the following Code where, when the user types in the search box suggestion list opens. in this list there are a list of characters and each character has it’s own favorite icon on click of which the it can be added or removed from the favorite list.

my issues are

when a user clicks on any

  • item or heart icon the suggestionsList gets closed automatically. It should not happen like this.
    what should actually happen is that if the user clicks on character name it should open another page and if the user clicks on the heart icon against a particular character, it should get added to favorite list by calling “clickFav” function and through whatever process is running the suggestionlist box should remain open. Only if the user clicks outside it, it should get closed

    I tried using event.stopPropagation(); but it is not working. i want to use vanilla js ony to solve the issue

    html code

    <div class="search-container">
    <input class="input" type="text" id="searchInput" placeholder="Type to search">
    <ul class="suggestions" id="suggestionsList">
        
    </ul>
</div>

    Js code

    searchInput.addEventListener('input', () => {
    let userInput = searchInput.value.toLowerCase();
    let filterSuggestion = heroList.filter((char) => char.name.toLowerCase().startsWith(userInput));
    displaySuggestionList(filterSuggestion);
});

function displaySuggestionList(suggestion) {
    suggestionsList.innerHTML = '';
    if (suggestion.length > 0) {
        suggestion.forEach((char) => {
            let searchDiv = `
                <li data-index=${char.id} >
                    <a href="#"> ${char.name} </a>
                    <i class="fa-heart 
                        ${
                            favList ? 
                            favList.includes(char.id) ? 'fa-solid' : 'fa-regular' 
                            : 'fa-regular'
                        }
                    "></i>
                </li>`;
            suggestionsList.insertAdjacentHTML('beforeEnd', searchDiv);
        });

        // Add event listener to suggestionsList to prevent automatic closure
        suggestionsList.addEventListener('click', (event) => {
            event.stopPropagation();
        });

        // Add event listeners to <li> elements
        suggestionsList.querySelectorAll('li').forEach((li) => {
            li.addEventListener('click', () => {
                // Call the clickFav function with the corresponding data-index
                clickFav();
            });
        });

    } else {
        suggestionsList.innerHTML = '<li>No suggestions found</li>';
    }
}

function clickFav(event) {
    if (event.target.classList.contains('fa-heart')) {
        const id = event.target.parentElement.dataset.index;
        createFavAndLocal(id,event);
    }
}

    • Vue library upload documents

    Could someone please assist me in identifying a library that simplifies the process of uploading documents? I’m seeking a solution that streamlines the document upload process, and any recommendations or insights would be greatly appreciated.