Category: javascript

Category Added in a WPeMatico Campaign

Swiper arrows from Swiper.js in Javascript not working on click

So I´m using the swiper.js library and all the mistakes on the console are fixed and my HTML and CSS are aligned correctly, the arrows are showing and i can customize them. But, as I click on them so the slide can swipe, it doesn´t do anything and its like they´re not even there.

function swiper() {
  const swiper = new swiper(".swiper", {
    // Optional parameters
    modules: [Navigation],
    spaceBetween: 5,
    slidesPerView: 2,
    loop: true,
    freeMode: true,
    loopAdicionalSlides: 5,
    speed: 500,
    cssMode: true,
    enabled: true,
    observer: true,
    observeParents: true,

    // Navigation arrows
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    },

    allowSlideNext: true,
    allowSlidePrev: true
  });

  const nextButton = document.querySelector(".swiper-button-next");
  const prevButton = document.querySelector(".swiper-button-prev");

  nextButton.addEventListener("click", () => {
    swiper.slideNext();
  });

  prevButton.addEventListener("click", () => {
    swiper.slidePrev();
  });
}

I already tried these codes:

´´´js
cssMode: true,
enabled: true,
observer: true,
observeParents: true,


And also tried creating an onClick event but nothing happens

Message Create event not getting fired in discord.js

const { Client, GatewayIntentBits } = require('discord.js');
require('dotenv').config();

// Initialize Discord Client
const client = new Client({
  intents: [
    GatewayIntentBits.DirectMessages,
    GatewayIntentBits.Guilds,
    GatewayIntentBits.MessageContent,
    GatewayIntentBits.GuildMessages]
});

const channelId = 'xxyy'; 

client.on('ready', () => {
  console.log(`Logged in as ${client.user.tag}!`);
});

client.on('messageCreate', (message) => {
    console.log("HAHAHA")
  if (message.channel.id === channelId) {
    console.log(`New message in channel: ${message.content}`);

    handleNewMessage(message);
  }
});

function handleNewMessage(message) {

  console.log(`Processing message: ${message.content}`);
}


client.login(process.env.DISCORD_BOT_TOKEN);

I have turned the Message Content Intent option on as well. Not sure why message create isnt being triggered. “Ready” event is being fired tho

Toggling a sidebar with css classes and js

I’ve been struggling with this for a while, and googling outrageously has brought me thus far.
I’ve generated a page, and despite my script, I can’t get the sidebar to disappear.
See the following

html {
  margin-left: 0;
  margin-top: 0;
}

table,
th,
td {
  border: 1px solid;
}

#body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 300px auto;
  grid-template-areas: 'menubtn header ' 'sidebar content' 'footer footer';
}

#menubtn {
  grid-area: menubtn;
  position: sticky;
  top: 0;
  height: 3rem;
}

#header {
  grid-area: header;
  background-color: white;
  position: sticky;
  top: 0;
  height: 3rem;
}

#sidebar {
  grid-area: sidebar;
  background-color: white;
  position: sticky;
  height: calc(100vh -3rem);
  align-self: start;
}

#sidebar.hidden {
  display: hidden;
}

content {
  grid-area: content;
}

#footer {
  grid-area: footer;
  background-color: white;
}

h1 {
  color: #330099;
}

h2 {
  color: #330099;
}

h3 {
  color: #330099;
}

a:link,
a:visited {
  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  padding: 3px;
  text-decoration: none
}

#content a:link {
  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  padding: 1px;
  text-decoration: none
}

#content a:visited {
  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  padding: 1px;
  text-decoration: none
}

a:hover {
  background-color: #06C
}
<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="wvv_grid.css" type="text/css">
  <title>
    Test page for toggling menu
  </title>

</head>

<body>
  <div id="body">
    <div id="menubtn">
      <button id="Button" onclick="myFunc()">Toggle menu</button> </div>
    <div id="header">
      <h1>Welcome to my test page</h1>
    </div>
    <div id="sidebar" ,>
      <ul>
        <li>this</li>
        <li>item</li>
        <li>tests</li>
        <li>the</li>
        <li>button</li>
      </ul>
    </div>
    <div id="content">
      <h2>welcome again!</h2>
      <p>this page has been created to test my button to toggle menus. I've put another sentence here just to check whether or not the content area is expanded when the menu is hidden.</p>
    </div>
  </div>

  <script defer="true">
    function myFunc() {
      let sb = document.getElementById("#sidebar");
      sb.classList.toggle("hidden");
    }
  </script>
</body>

</html>

I’m confused over a couple of things which may help point any help in the right direction. Not sure if my hidden class is correctly defined. Further to this, you’ll notice I’ve not used semantic tags. what do I need to change to make this happen?
Many thanks.

nodejs child process spawned, determine origin of childProcess.stdout.on “data”

if you spawn a persistent child process in nodejs, a bash shell:

childProcess = cp.spawn('bash', { shell: true, serialization: "json" });

and then send (childProcess.stdin.write) it commands (multiple times) that take a different amount of time to execute:

command_100ms = "some bash code that takes ca. 100ms to execute"
command_01sec = "some bash code that takes ca. 1 sec to execute"
command_02sec = "some bash code that takes ca. 2 sec to execute"
and so on..

when each one is done executing and the stdout.on “data” event fires (multiple times):

childProcess.stdout.on("data", (data) => {
    console.log(`Data from child process: ${data}`);
});

how do you determine to which command does a response correspond?

When I try to create a new button, it doesn’t duplicate

I want to create a remove button in each row of a table, so I created a removeButton element in JavaScript and appended it to each row. However, it moves to the last row whenever I create new rows.

Here is my table

Here is my table when i create a new row

Code:

I created a removeButton element:

const removeButton = document.createElement("button");
removeButton.innerText = "Remove book";
removeButton.className = "table__remove-btn";

And append it to each row when update the table:

function updateTable() {
  table.innerHTML =
    "<tr><th>Title</th><th>Author</th><th>Pages</th><th>Is read?</th></tr>";
  if (myLibrary.length != 0) {
    const tableContent = document.createDocumentFragment();
    myLibrary.forEach((value) => {
      const tableRow = document.createElement("tr");
      const titleCell = document.createElement("td");
      const title = document.createElement("p");
      const author = document.createElement("td");
      const pages = document.createElement("td");
      const isRead = document.createElement("td");
      title.innerText = value.title;
      titleCell.appendChild(title);
      titleCell.appendChild(removeButton); // <------------------- Here!
      titleCell.className = "table__title-cell";
      tableRow.appendChild(titleCell);
      author.innerText = value.author;
      tableRow.appendChild(author);
      pages.innerText = value.pages;
      tableRow.appendChild(pages);
      isRead.innerText = value.isRead ? "Yes" : "No";
      tableRow.appendChild(isRead);
      tableContent.appendChild(tableRow);
    });
    table.appendChild(tableContent);
  }
}

How i can solve it? I want to have the removeButton on each row

How to create an object with a for loop?

  var sels = //Here is your array of SELECTs
    var json = { };

    for(var i = 0, l = sels.length; i < l; i++) {
    json[sels[i].id] = sels[i].value;
    }

sorry for the noob question in advanced I hope this wont cause me being banned from this site

hi guys I am new at javascript. I know I need to edit this code so it would work but I couldnt make this work can someone help me please?
I read about arrays and objects but things I readed did not help me with this.
what I am trying to do is create a json and put things inside through for loop like 100 word like 1name,2name,,,100name etc.

how to make an interactive grid work better?

I have this grid with 3 columns, and when i click one of the divs it’ll go down a row and span the whole row, it also closes back up when i click on it again. Also, when I open a different div, it’ll close all the other ones if theyre open. so that there’s only one open at a time

document.querySelectorAll('#gridALBUM > div').forEach((D,_,A)=>
  {
    D.addEventListener('click', e=>
    {
      if (D.classList.toggle('span'))
        A.forEach(d =>{ if(d!=D) d.classList.remove('span') });
    })
  })
#gridALBUM {
  background : lightblue;
  margin     : 50px auto;
  max-width  : 908px;
  display    : grid;
  grid-gap   : 0 4px;
  grid-template-columns: repeat(3, 300px);
  }
#gridALBUM > div {
  border  : 1px solid black;
  display : flex;
  }
#gridALBUM > div:not(.span) > div {
  display : none; 
  }
#gridALBUM > div.span {
  grid-column      : 1 / 4;
  background-color : #47479c;
  }
<div id="gridALBUM">
  <div id="one"   ><h1>1</h1> <div><h2> one   </h2></div></div>
  <div id="two"   ><h1>2</h1> <div><h2> two   </h2></div></div> 
  <div id="three" ><h1>3</h1> <div><h2> three </h2></div></div>
  <div id="four"  ><h1>4</h1> <div><h2> four  </h2></div></div>
  <div id="five"  ><h1>5</h1> <div><h2> five  </h2></div></div>
  <div id="six"   ><h1>6</h1> <div><h2> six   </h2></div></div>
  <div id="seven" ><h1>7</h1> <div><h2> seven </h2></div></div>
  <div id="eight" ><h1>8</h1> <div><h2> eight </h2></div></div>
  <div id="nine"  ><h1>9</h1> <div><h2> nine  </h2></div></div>
  <div id="ten"   ><h1>10</h1><div><h2> ten   </h2></div></div>
</div>

is there a way so that when I click on one of them, itll bring the next one up to fill the gap? I don’t know if that makes sense… Let’s say I click #two, there’ll be two empty spaces besides #one.. is there a way to bring #three and #four to fill up that space?

Translating Cubes to touch corners diagonally

The issue I’m having is I am trying to have 7 cubes in which they are translated vertically. Then they are rotated by 20 degrees with respect to each other. Then I need to exactly have the edges of the cubes touch. What I mean is I need the bottom right edge of the next cube to touch the top left edge of the previous cube. Heres my code to attempt to do that, which is fairly close, however not exact. Note I am coding this in Three.js

//*Note p is the length of my cubes that I have defined elsewhere in my code
function touchingCornerTranslationMatrix(modelTransformation, p) {
    const l = p/6;
    // define local positions for top-right and bottom-left corners of the cube in local space
    const bottomLeft = new THREE.Vector3(-l, -l, 0);  // Bottom-left corner in local space
    const topRight = new THREE.Vector3(l, l, 0);       // Top-right corner in local space

    // apply the current transformation matrix to both corners
    bottomLeft.applyMatrix4(modelTransformation);
    topRight.applyMatrix4(modelTransformation);

    // compute the translation needed to align bottom-left of next cube with top-right of previous cube
    const xTranslation = topRight.x - bottomLeft.x;
    const yTranslation = topRight.y - bottomLeft.y;

    // return the translation matrix to apply
    return translationMatrix(xTranslation, yTranslation, 0); // Use positive translations
}

And heres my implementation of it also including the rotation and translation, which must be done first.

const rotation = rotationMatrixZ(20 * Math.PI/180); //rotation matrix by 20 degrees
const translation = translationMatrix(0, 2*l, 0); // Translate 2l units in the y direction
let model_transformation = new THREE.Matrix4(); // model transformation matrix we will update
let previousPosition = new THREE.Vector3();
let touching = touchingCornerTranslationMatrix(model_transformation, l);

for (let i = 0; i < cubes.length; i++) {

    //change to matrix.copy
    cubes[i].matrix.copy(model_transformation);
    //shifting vertically
    model_transformation.multiplyMatrices(translation, model_transformation); 
    //rotating by 20 degrees
    model_transformation.multiplyMatrices(rotation, model_transformation); 
    //shifting it so that they now touch corners
    model_transformation.multiplyMatrices(touching, model_transformation);

    //for debugging 
    let position = new THREE.Vector3();
    position.setFromMatrixPosition(model_transformation);
    console.log("Current Position: ", position);
    console.log("Previous Position: ", previousPosition);
    console.log(" ");

    previousPosition.copy(position);

}

Heres a picture for reference of what I have right now:

Visual Cube Rotation
Any help would be greatly appreciated thank you!

I tried to change the direction in which I am doing the translation aka matrix multiplication however, that didn’t work. I’m fairly certain my implementation is along the right lines, however my function doesn’t seem to be correct, I also tried to subtract my xtranslation by saying instead bottomleft.x – topright.x however that sueded me to the right which isn’t what i want.

npm install error, looking for package.json in a nested directory

im on an ec2 ubuntu instance (24.04), with npm v9.2.0 & node v18.19.1, and i attached my git repo to my remote and pulled the code. i am getting this error though whenever i try to npm install

the project is react & vite, and when i goto my project root dir, and do npm install, i get:

`root@ip-172-31-17-191:/var/www/project# npm i
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /var/www/project/.eslint-rules/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/var/www/project/.eslint-rules/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent`

Obviously, it’s looking for a package.json inside my eslint-rules directory, but why? that isnt the root of the project. i have a package.json at my root. my eslint-rules directory has a polyfill rule for my eslint in dev.

inside my package.json i have these in my devDependencies:

"devDependencies": {
    "@rollup/plugin-replace": "^5.0.5",
    "@types/core-js": "^2.5.8",
    "@types/crypto-js": "^4.2.2",
    "@types/react": "^18.0.21",
    "@types/react-window": "^1.8.8",
    "eslint-plugin-structured-clone-import": "file:.eslint-rules",
    "rollup-plugin-visualizer": "^5.12.0"
  },

when i remove the “eslint-plugin-structured-clone-import” line it can fully install all the other packages, but when it’s there it hits the error mentioned. I’ve set this repo up on my local, AND other ubuntu VMs, so why all of a sudden is npm trying to find a package.json file inside the .eslint-rules?

I tried to npm init in the root of my project again, just to make sure it was looking at the root level package.json, but it gives the same error.

and yes, I made sure I was in the root of the project repo before using npm install.

Why the console.log in last use is working even though response is sent by get

    app.use((req, res, next) => {
    console.log('First middleware ran');
    console.log("host: ", req.hostname);
    console.log("path: ", req.path);
    console.log("method: ", req.method);
    next();
});

app.get('/home', (req, res) => {
    res.send('<h1>Home Page</h1>');
});

app.use((req, res) => {
    console.log('Second use middleware ran');
    res.send('<h1>About Page</h1>');
});

app.listen(3000, () => {
    console.log('Server is listening on port 3000');
});

I an confused it shouldn’t run the last use since get is sending a response, please explain why is it happening

How do I panic the build of a Vue 2 project if an environment variable is not set?

In a Vue 2 project, an environment variable (let it be VUE_APP_IMPORTANT_VAR, for example) is mandatory, so I want to get a failed build if somebody has forgotten to specify the variable in .env (or in another way). I tried this code:

/* main.js */
...

if (!process.env.VUE_APP_IMPORTANT_VAR) {
  console.error("Critical: VUE_APP_IMPORTANT_VAR is not set")
  throw 1
}

...

But this obviously gives successful build. So how do I break the build if the variable is not set?

How to simply reuse async user fetching logic in multiple Vue components?

I am fetching the OAuth User-Data and returning its corresponding DB-User-Value (from prisma) in my exported function getLoggedInAccount().

import axios from 'axios';
import { client } from './client/trpc.ts';

async function getUserObject() {
  const user = await axios.get('http://localhost:3000/auth/guard', {
    withCredentials: true,
  });
  return user.data;
}

export async function getLoggedInAccount() {
  const userObject = await getUserObject();
  return client.auth.loggedInAccount.query({
    oAuthID: userObject.user.id,
  });
}

I want to use that User in the Frontend (Vue):

type Account = RouterOutput['auth']['loggedInAccount'];
let currentAccount = ref<Account>({} as Account);
async function fetchAccount() {
  try {
    currentAccount.value = await getLoggedInAccount();
  } catch (error) {
    console.error('Failed to fetch:', error);
  }
}

This works perfectly fine, but I don’t want to copy/paste that logic into every component. Due to it’s asynchronous nature, I cant seem to find any simpler solution (e.g. just exporting a const)

Thanks, hope you can help 🙂

Ace-Editor error when showing StatusBar in Vim mode

I want to show the status bar when using vim mode in Ace editor. There seems to already exist a statusbar extension however using it causes some error. I am using the following code. I am new to JS so any help is appreciated.

<!DOCTYPE html>
<html>

<body>
    <div id="container" style="width: 400px; height: 300px; border: 1px solid grey"></div>
    <div id="status"></div>

    <script src="/static/js/ace-editor/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/ace-editor/src-noconflict/ext-statusbar.js" type="text/javascript"
        charset="utf-8"></script>

    <script>
        var editor = ace.edit("container");
        editor.session.setMode("ace/mode/golang");
        editor.session.setValue('package mainnnfunc main(){n    fmt.Println("hw")n}');
        editor.setKeyboardHandler("ace/keyboard/vim");

        const sb = ace.require("ace/ext/statusbar");
        var statusBar = sb.StatusBar(editor, document.getElementById("status"));
    </script>
</body>

</html>

The error in the console is

ext-statusbar.js:13 Uncaught TypeError: this.updateStatus is not a function
    at Object.<anonymous> (ext-statusbar.js:13:14)
    at callback (ace.js:1369:9)
(anonymous) @   ext-statusbar.js:13
callback    @   ace.js:1369
setTimeout      
_self   @   ace.js:1374
EventEmitter._signal    @   ace.js:3459
(anonymous) @   keybinding-vim.js:6145
EventEmitter._signal    @   ace.js:3459
CodeMirror.signal   @   keybinding-vim.js:227
clearInputState @   keybinding-vim.js:1861
handleEsc   @   keybinding-vim.js:1702
handleKeyInsertMode @   keybinding-vim.js:1722
findKey @   keybinding-vim.js:1781
handleKey   @   keybinding-vim.js:1680
(anonymous) @   keybinding-vim.js:5975
operation   @   keybinding-vim.js:285
Vim.handleKey   @   keybinding-vim.js:5974
multiSelectHandleKey    @   keybinding-vim.js:6011
handleKeyboard  @   keybinding-vim.js:6123
$callKeyboardHandlers   @   ace.js:4202
onCommandKey    @   ace.js:4234
onCommandKey    @   ace.js:13397
normalizeCommandKeys    @   ace.js:875
(anonymous) @   ace.js:893

.style object on VS code for JS

Okay guys so when i try to search about the country that I’m looking for, it does not Work and I do not know It’s the style object, html problems, typos, API or whatever and sorry if I make any mistake posting this because I’m a beginner at stack overflow I even went and saw the original creator and I used their source code but it didn’t work (Creator : ASMR Prog) but it still didn’t work

const container = document.querySelector('.container');
const search = document.querySelector('.search-box button');
const weatherBox = document.querySelector('.weather-box');
const weatherDetails = document.querySelector('.weather-details');
const error404 = document.querySelector('.not-found');

search.addEventListener('click', () => {

    const APIKey = 'b8ce744f89d884624abc5d9baa02f7de';
    const city = document.querySelector('.search-box input').value;

    if (city === ''){
        return;
    }

    fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${APIKey}`)
        .then(response => response.json())
        .then(json => {

            if (json.cod === '404') {
                container.style.height = '400px';
                weatherBox.style.display = 'none';
                weatherDetails.style.display = 'none';
                error404.style.display = 'block';
                error404.classList.add('fadeIn');
                return;
            }

            error404.style.display = 'none';
            error404.classList.remove('fadeIn');

            const image = document.querySelector('.weather-box img');
            const temperature = document.querySelector('.weather-box .temperature');
            const description = document.querySelector('.weather-box .description');
            const humidity = document.querySelector('.weather-details .humidity span');
            const wind = document.querySelector('.weather-details .wind span');

            switch (json.weather[0].main) {
                case 'Clear':
                    image.src = 'images/clear.png';
                    break;

                case 'Rain':
                    image.src = 'images/rain.png';
                    break;

                case 'Snow':
                    image.src = 'images/snow.png';
                    break;

                case 'Clouds':
                    image.src = 'images/cloud.png';
                    break;

                case 'Haze':
                    image.src = 'images/mist.png';
                    break;

                default:
                    image.src = '';
            }

            temperature.innerHTML = `${parseInt(json.main.temp)}<span>°C</span>`;
            description.innerHTML = `${json.weather[0].description}`;
            humidity.innerHTML = `${json.main.humidity}%`;
            wind.innerHTML = `${parseInt(json.wind.speed)}Km/h`;

            weatherBox.style.display = '';
            weatherDetails.style.display = '';
            weatherBox.classList.add('fadeIn');
            weatherDetails.classList.add('fadeIn');
            container.style.height = '590px';


        });


});
*{
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    box-sizing: border-box;
}

body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #06283D;
}

.container{
    position: relative;
    width: 400px;
    height: 105px;
    background: #fff;
    padding: 28px 32px;
    overflow: hidden;
    border-radius: 18px;
    font-family: 'Roboto', sans-serif;
    transition: 0.6s ease-out;
}

.search-box{
    width: 100%;
    height: min-content;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search-box input{
    color: #06283D;
    width: 80%;
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase;
    padding-left: 32px;
}

.search-box input::placeholder{
    font-size: 20px;
    font-weight: 500;
    color: #06283D;
    text-transform: capitalize;
}

.search-box button{
    cursor: pointer;
    width: 50px;
    height: 50px;
    color: #06283D;
    background: #dff6ff;
    border-radius: 50%;
    font-size: 22px;
    transition: 0.4s ease;
}

.search-box button:hover{
    color: #fff;
    background: #06283D;
}

.search-box i{
    position: absolute;
    color: #06283D;
    font-size: 28px;
}

.weather-box{
    text-align: center;
}

.weather-box img{
    width: 60%;
    margin-top: 30px;
}

.weather-box .temperature{
    position: relative;
    color: #06283D;
    font-size: 4rem;
    font-weight: 800;
    margin-top: 30px;
    margin-left: -16px;
}

.weather-box .temperature span{
    position: absolute;
    margin-left: 4px;
    font-size: 1.5rem;
}

.weather-box .description{
    color: #06283D;
    font-size: 22px;
    font-weight: 500;
    text-transform: capitalize;
}

.weather-details{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.weather-details .humidity, .weather-details .wind{
    display: flex;
    align-items: center;
    width: 50%;
    height: 100px;
}

.weather-details .humidity{
    padding-left: 20px;
    justify-content: flex-start;
}

.weather-details .wind{
    padding-right: 20px;
    justify-content: flex-end;
}

.weather-details i{
    color: #06283D;
    font-size: 26px;
    margin-right: 10px;
    margin-top: 6px;
}

.weather-details span{
    color: #06283D;
    font-size: 22px;
    font-weight: 500;
}

.weather-details p{
    color: #06283D;
    font-size: 14px;
    font-weight: 500;
}

.not-found{
    width: 100%;
    text-align: center;
    margin-top: 50px;
    scale: 0;
    opacity: 0;
    display: none;
}

.not-found img{
    width: 70%;
}

.not-found p{
    color: #06283D;
    font-size: 22px;
    font-weight: 500;
    margin-top: 12px;
}

.weather-box, .weather-details{
    scale: 0;
    opacity: 0;
}

.fadeIn{
    animation: 0.5s fadeIn forwards;
    animation-delay: 0.5s;
}

@keyframes fadeIn{
    to {
        scale: 1;
        opacity: 1;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;700;900&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Weather App | Radmehr Firoozbkaht</title>
</head>

<body>

    <div class="container" id=".container">
        <div class="search-box" id=".search-box">
            <i class="fa-solid fa-location-dot"></i>
            <input type="text" placeholder="Enter your location">
            <button class="fa-solid fa-magnifying-glass"></button>
        </div>

        <div class="not-found" id=".not-found">
            <img src="images/404.png">
            <p>Oops! Invalid location :/</p>
        </div>

        <div class="weather-box" id=".weather-box">
            <img src="">
            <p class="temperature"></p>
            <p class="description"></p>
        </div>
    <div class="weather-details" id=".weather-details">
        <div class="humidity">
            <i class="fa-solid fa-water"></i>
            <div class="text">
                <span></span>
                <p>Humidity</p>
            </div>
        </div>
        <div class="wind">
            <i class="fa-solid fa-wind"></i>
            <div class="text">
                <span></span>
                <p>Wind Speed</p>
            </div>
        </div>
    </div>

</div>

<script src="https://kit.fontawesome.com/7c8801c017.js" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>

</html>

I tied everything but it didn’t work. but I noticed something interesting, whenever I tried to run it in VS code, it didn’t work. but if I tried the same on console it worked and I was so confused that I just came here to just ask about it and wherever I searched I didn’t get any answer so I’d be very thankful of anyone who helps me out and with love, thanks again and pls let me know of any problem I made posting this question

Too much clickable space around checkbox

I’m building a to-do list website and for some reason all the tasks created have too much space around the checkbox. screenshot of the tasks added.

I tried styling the checkbox to have 0 padding, 0 margin, changing the justify-content and align-items of the task but nothing seems to work. Here’s the html, relevant part of css and javascript:

<!DOCTYPE html>
<html>
    <head>
        <title>task-ify - by livia</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <header>
            <h2 id="website-title">task-ify</h2>
        </header>
        <div class="screen">
            <form>
                <p id="newtask">new task</p>
                <input type="text" id="task" maxlength="27">
                <button type="button" id="savebttn" onclick="saveTask()">save</button>
            </form>
            <div class="todofield">
                <nav>
                    <p>filters:</p>
                    <button type="button" id="filter" onclick="viewAll()">ALL</button>
                    <button type="button" id="filter" onclick="viewToDo()">TO-DO</button>
                    <button type="button" id="filter" onclick="viewDone()">DONE</button>
                </nav>
                <div class="taskgallery" id="taskgallery">
                    <div class="taskview" id="taskview">
                    </div>
                </div>
            </div>
        </div>
        <footer><p>made by livia&copy;</p></footer>
        <script src="script.js"></script>
    </body>
</html>

.taskgallery{
    box-sizing: border-box;
    border-radius: 8px;
    border: 0.1em solid #49311d;
    width: 90%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 3em;
    padding: 20px;
}

.taskview{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    flex-wrap: wrap;
    width: 98%;
    height: 98%;
    gap: 1.5vw 3vw;
}

#task1{
    display: flex;
    flex-direction: row;
    width: 30%;
    height: 5%;
    align-content: center;
}

#task1 > label{
    margin: 0px 10px;
    border-radius: 20px;
    width: 95%;
    align-content: center;
    padding-left: 10px;
    font-size: 1.8vh;
    color: #0A0903;
    background-color: #feaf55;
}

input [type="checkbox"]{
    padding: 0 !important;
    margin: 0 !important;

}

function saveTask(){
    const newTask = document.getElementById('task');

    if(newTask.value != ''){
        const task = document.createElement('div');
        task.className = 'task';
        task.id = 'task1'

        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';

        const label = document.createElement('label');
        label.textContent = newTask.value;
        
        //task.classList.add('to-do');

        checkbox.addEventListener('change', function() {
            if (this.checked) {
                label.style.textDecoration = 'line-through';
                task.classList.remove('to-do');
                task.classList.add('done'); 
            } else {
                label.style.textDecoration = 'none';  
                task.classList.remove('done');
                task.classList.add('to-do'); 
            }
        });

        task.appendChild(checkbox);
        task.appendChild(label);

        document.getElementById('taskview').appendChild(task);
        tasks.push(task);
        newTask.value = '';
    }
}