Posting and Commenting Guidelines

Wes bos has a black friday sale if you are interested in any of his courses.. 50% OFF

Thank you for the responses.

need a JavaScript script simple for register form which will confirm password, an user will have to type the same password to confirm it. Chat gpt did one for me but it's not working on register form inside of a modal

Hi, I want to take a piece of data from a google sheets cell and then post it to discord- this part I have working- its the moving down 1/2 rows each time the program is run(e.g when I click run it outputs data in cell a in row 1, program ends then click the run button again outputs cell a in row 2 etc etc - I tried coding a counter which didn’t work- I have no experience in JavaScript - got some experience in Python and Lua… please can someone help me with this probably simple task?

I have posted the code below obviously removed the discord webhook- there are indented lines - probably not showing as this is a copy and paste on a phone… Thanks

function postToDiscord(paradenightuniform) {

const url="CLASSIFIED"

const formData = {

  content: "The uniform tonight is " + paradenightuniform

}

const options = {

'method' : 'post',

'payload' : formData

}

const res= UrlFetchApp.fetch(url,options)

}

function postfromspreadsheet() {

var ss = SpreadsheetApp.getActiveSpreadsheet();

var sheet = ss.getSheets()[1];

var cell = sheet.getRange("D3");

var paradenightuniform = cell.getValue()

console.log(paradenightuniform)

postToDiscord(paradenightuniform)

}

CSS tutorials.....
✔️ Source code provided
✔️ Design with beautiful, responsive CSS
✔️ Beginner friendly
📌 Watch now and start creating: https://youtu.be/0j8SkdI4720?si=a4vb5Ub0saJwye2J
👉 Don’t forget to like, share, and subscribe for more frontend tutorials! 💻 #FrontendDevelopment #HTML #CSS #WebDesign #CodingTutorials #ResponsiveDesign

https://i.imgur.com/eBaiR96.png (about:config)

Console Message:

Error copying text to clipboard: DOMException: Clipboard write was blocked due to lack of user activation.

Whole Code:

// ==UserScript==
// u/name         clipboard error test
// u/match        https://real-debrid.com
// ==/UserScript==

(function() {
    // ----------------------  ----------------------
    'use strict'
    setTimeout(ADD_TO_CLIPBOARD, 1000)

    function ADD_TO_CLIPBOARD(){
        navigator.clipboard.writeText("hello there")
        .then(function() {
            alert("SUCCESS: string added to clipboard")
        })
        .catch(function(error) {
            alert("Error copying text to clipboard:", error)
            console.log("Error copying text to clipboard:", error);
        })
    }
})()

const express = require('express');
const https = require('https');
const http = require('http');
const app = express();
const port = 5500;

app.use(express.static('public'));

app.get('/search', (req, res) => {
  res.send('You must type in a Youtube link!');
});

app.get('/urls', (req, res) => {
  if (!req.query.url) {
    return res.status(400).send('Missing URL query parameter.');
  }

  let targetUrl = decodeURIComponent(req.query.url);
  if (!targetUrl.startsWith('https://www.youtube.com')) {
    console.log('You must type in a Youtube link!');
    return res.status(400).send('Invalid URL. Please provide a YouTube link.');
  }

  const client = targetUrl.startsWith('https://') ? https : http;
  console.log(`Fetching URL: ${targetUrl}`);

  client.get(targetUrl, (response) => {
    let data = '';
    response.on('data', (chunk) => {
      data += chunk;
    });
    response.on('end', () => {
      res.send(data);
    });
  }).on('error', (err) => {
    console.error('Error fetching URL:', err.message);
    res.status(500).send('Error: ' + err.message);
  });
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

Right now, I have a proxy, which I'm planning to use in school, however, when I visit it, it's blocked for, "Internet communications and telephony." I can double check this with urlfilter (https://urlfiltering.paloaltonetworks.com/) and I'm just wondering how other proxy websites such as Rammerhead can get around this (input https://chlorofluorocarbonchernobyl.sml.wtf into checkURL). If it helps, here's the relevant part of my code (above on my screen, I don't know why). Thank you!

Hey guys I’ve been learning html css and js from YouTube but I feel like I’m not very structured on my learning I was thinking about doing a boot camp, any suggestions or advice?

Hey, can anyone recommend a platform which has dedicated problems for Arrays and Strings manipulation in Javascript please ?

I need to practice my skills using Maps,objects....etc

I know there are sites like leetcode, but lots of problems are like 90% about problem solving the extra stuff. I am looking for something more about the practice itself than solving the problem.

Thanks in advance.

Hello everyone,

I am an absolute beginner when it comes to JavaScript, HTML and CSS. I'm trying to code a website and I'm stuck on my header. If I open a menu item that contains a submenu, the menu item should not lead to the page but should first open the submenu. The page should only be opened with the second click. How do I best solve this?

Thank you!

I'm trying to make a table that has a button at the end of the row that deletes that row only. The rows are added dynamically with a button below the table. I can't seem to find a way to tell the o click function which button called it, and what the index of the corresponding row is. This is what I have right now.

<table id="initTable">
  <thead>
    <tr>
      <th scope="col">Roll</th>
      <th scope="col">Combatant</th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class="initValue" type="number"></td>
      <td><input class="name" type="text"></td>
      <td><button class="actionBtn" onclick="remRow()">Remove</button></td>
    </tr>
  </tbody>
</table>
<button class="actionBtn" id="sortBtn">Sort!</button>
<button class="actionBtn" id="addBtn" onclick="addRow()">Add Row</button>

function addRow(){

let initTable = document.getElementById("initTable"); let newRow = initTable.insertRow(-1); let newValue = newRow.insertCell(0); let newName = newRow.insertCell(1); let newBtn = newRow.insertCell(2);

let newValueInput = document.createElement("input"); let newNameInput = document.createElement("input"); let newButton = document.createElement("button");

newValueInput.setAttribute("class", "initValue"); newValueInput.type = "number"; newValue.appendChild(newValueInput);

newNameInput.setAttribute("class", "name"); newNameInput.type = "text"; newName.appendChild(newNameInput);

newButton.setAttribute("class", "actionBtn"); newButton.innerHTML = "Remove"; newButton.setAttribute("onclick","remRow()"); newBtn.appendChild(newButton); }

function remRow(){ console.log("Remove Clicked!"); console.log("index:" + this.ParentElement.rowIndex); //let tableHandle = document.getElementById("initTable"); //console.log(tableHandle); //tableHandle.deleteRow(1); }

Ontario Tree Removal Service The OTRS company offers the following services to its clients: a) tree removal ($500 per tree) b) tree trimming ($80 per hour) c) stump grinding ($25 plus $2 per inch **) 

** $2 per inch for each stump whose diameter exceeds ten inches.  The $2 charge is ONLY for the diameter inches in excess of ten inches.

Program Requirements Write a complete program to allow the manager, Mr. Sorwind, to provide an estimate when he bids on a job.  Your output should include a listing of each separate charge and a total.  A 10% discount is given for any job whose total exceeds $1000.  A typical input case looks like the following string:

R 7 T 6.5 G 8 : 8 10 12 14 15 15 20 25

where "R", "T", and "G" are codes for removal, trimming and grinding, respectively.  The integer following "G" represents the number of stumps to be ground.  The next sequence of integers, following the colon represents the diameter of stumps to be ground.  NOTE: some estimates do not include

Title.

I’ve been reading textbooks, watching YT tutorials, doing the Odin project and I’m still struggling w how to “think” in JavaScript. Everyone says just do projects but how do I even start seriously. I can read the basics but it’s like when I sit down and try I blank and don’t know where to start. The goal is to create dynamic websites w JavaScript to elevate my skills from HTML and CSS. I’m starting to become discouraged but at the same time I’m not gonna give up. Does anyone have any tips?

Not sure if this is the place to ask, but since it's related to .js I think I might as well try! I do a lot of work on a game wikipedia and am trying to create a good resource for players. I'm trying to create a rotating schedule and have made some pretty good progress; however, I'm having issues...

I'm having trouble with making it so the visitors that have weekly schedule rotations won't repeat twice in the table.

For instance — in the the template I made, Pompompurin Mama + Papa & Poron visit this week, however, they are not supposed to have "visited" last week.

EDIT: Here's a link to a codepen! https://codepen.io/BevBuddy/pen/RNbPLwQ

Here's the code block for the js:

// Dynamic Island Visitors Function
window.addEventListener("load", function() {
    console.log("Window fully loaded.");

    var today = new Date();
    console.log("Today's date is:", today.toDateString());

    // Calculate the current week based on Tuesday as the start of each week
    var daysSinceLastTuesday = (today.getDay() + 5) % 7; // Adjust so Tuesday is the start (day 2)
    var startOfWeek = new Date(today);
    startOfWeek.setDate(today.getDate() - daysSinceLastTuesday); // Go back to last Tuesday
    var weekNumber = Math.floor(startOfWeek.getTime() / (1000 * 60 * 60 * 24 * 7)) % 5; // 5-week rotation
    console.log("Current week number in the 5-week rotation:", weekNumber);

    // Function to detect the current season based on the month
    function getSeason(month) {
        if (month >= 2 && month <= 4) {
            return "spring"; // March, April, May
        } else if (month >= 5 && month <= 7) {
            return "summer"; // June, July, August
        } else if (month >= 8 && month <= 10) {
            return "fall"; // September, October, November
        } else {
            return "winter"; // December, January, February
        }
    }

    var currentMonth = today.getMonth(); // 0-11 (0 = January, 8 = September, etc.)
    var currentSeason = getSeason(currentMonth);
    console.log("Current season:", currentSeason);

    // Define a mapping for shorthand content
    var visitorContentMap = {
    Baku: '<a href="/wiki/Baku" title="Baku"><img alt="Baku.png" src="/images/thumb/b/bd/Baku.png/28px-Baku.png" decoding="async" loading="lazy" width="28" height="16"></a>&nbsp; <a href="/wiki/Baku">Baku</a>',
    Berry: '<a href="/wiki/Berry" title="Berry"><img alt="Berry.png" src="/images/thumb/e/ed/Berry.png/31px-Berry.png" decoding="async" loading="lazy" width="31" height="14"></a>&nbsp; <a href="/wiki/Berry">Berry</a>',
    Buppi: '<a href="/wiki/Buppi" title="Buppi"><img alt="Buppi.png" src="/images/thumb/3/35/Buppi.png/28px-Buppi.png" decoding="async" loading="lazy" width="28" height="22"></a>&nbsp; <a href="/wiki/Buppi">Buppi</a>',
    Cappuccino: '<a href="/wiki/Cappuccino" title="Cappuccino"><img alt="Cappuccino (Character).png" src="/images/thumb/9/9f/Cappuccino_%28Character%29.png/32px-Cappuccino_%28Character%29.png" decoding="async" loading="lazy" width="32" height="12"></a>&nbsp; <a href="/wiki/Cappuccino">Cappuccino</a>',
    Cherry: '<a href="/wiki/Cherry" title="Cherry"><img alt="Cherry.png" src="/images/thumb/2/20/Cherry.png/32px-Cherry.png" decoding="async" loading="lazy" width="32" height="15"></a>&nbsp; <a href="/wiki/Cherry">Cherry</a>',
    Chiffon: '<a href="/wiki/Chiffon" title="Chiffon"> <img alt="Chiffon.png" src="/images/thumb/6/68/Chiffon.png/32px-Chiffon.png" decoding="async" loading="lazy" width="32" height="14"></a>&nbsp; <a href="/wiki/Chiffon">Chiffon</a>',
    Coco: '<a href="/wiki/Coco" title="Coco"> <img alt="Coco.png" src="/images/thumb/d/d8/Coco.png/30px-Coco.png" decoding="async" loading="lazy" width="30" height="11"></a>&nbsp; <a href="/wiki/Coco">Coco</a>',
    Corune: '<a href="/wiki/Corune" title="Corune"> <img alt="Corune" src="/images/thumb/1/18/Corune.png/20px-Corune.png" decoding="async" loading="lazy" width="20" height="26"></a>&nbsp; <a href="/wiki/Corune">Corune</a>',
    Espresso: '<a href="/wiki/Espresso" title="Espresso"><img alt="Espresso.png" src="/images/thumb/a/ad/Espresso.png/32px-Espresso.png" decoding="async" loading="lazy" width="32" height="13"></a>&nbsp; <a href="/wiki/Espresso">Espresso</a>',
    Fenneko: '<a href="/wiki/Fenneko" title="Fenneko"><img alt="Fenneko.png" src="/images/thumb/9/90/Fenneko.png/28px-Fenneko.png" decoding="async" loading="lazy" width="28" height="26"></a>&nbsp; <a href="/wiki/Fenneko">Fenneko</a>',
    Macaron: '<a href="/wiki/Macaron" title="Macaron"><img alt="Macaron Icon.png" src="/images/thumb/6/67/Macaron_Icon.png/32px-Macaron_Icon.png" decoding="async" loading="lazy" width="32" height="15"></a>&nbsp; <a href="/wiki/Macaron">Macaron</a>',
    Mocha: '<a href="/wiki/Mocha" title="Mocha"><img alt="Mocha Icon (Character).png" src="/images/thumb/3/33/Mocha_Icon_%28Character%29.png/32px-Mocha_Icon_%28Character%29.png" decoding="async" loading="lazy" width="32" height="16"></a>&nbsp; <a href="/wiki/Mocha">Mocha</a>',
    MyMelodyGrandma: '<a href="/wiki/My Melody%27s Grandma" title="My Melody%27s Grandma"><img alt="My Melody%27s Grandma Icon.png" src="/images/thumb/3/34/My_Melody%27s_Grandma_Icon.png/30px-My_Melody%27s_Grandma_Icon.png" decoding="async" loading="lazy" width="30" height="32"></a>&nbsp; <a href="/wiki/My Melody%27s Grandma">My Melody Grandma</a>',
    MyMelodyGrandpa: '<a href="/wiki/My Melody%27s Grandpa" title="My Melody%27s Grandpa"><img alt="My Melody%27s Grandpa Icon.png" src="/images/thumb/9/9d/My_Melody%27s_Grandpa_Icon.png/25px-My_Melody%27s_Grandpa_Icon.png" decoding="async" loading="lazy" width="25" height="32"></a>&nbsp; <a href="/wiki/My Melody%27s Grandpa">My Melody Grandpa</a>',
    Nuts: '<a href="/wiki/Nuts" title="Nuts"><img alt="Nuts.png" src="/images/thumb/4/40/Nuts.png/30px-Nuts.png" decoding="async" loading="lazy" width="30" height="11"></a> <a href="/wiki/Nuts">Nuts</a>',
    Pam: '<a href="/wiki/Pam" title="Pam"><img alt="Pam.png" src="/images/thumb/d/da/Pam.png/21px-Pam.png" decoding="async" loading="lazy" width="21" height="18"></a>&nbsp; <a href="/wiki/Pam">Pam</a>',
    Panya: '<a href="/wiki/Panya" title="Panya"><img alt="Panya.png" src="/images/thumb/b/bc/Panya.png/28px-Panya.png" decoding="async" loading="lazy" width="28" height="20"></a>&nbsp; <a href="/wiki/Panya">Panya</a>',
    PompompurinMama: '<a href="/wiki/Pompompurin%27s Mama" title="Pompompurin%27s Mama"><img alt="Pompompurin%27s Mama Icon.png" src="/images/thumb/e/e8/Pompompurin%27s_Mama_Icon.png/32px-Pompompurin%27s_Mama_Icon.png" decoding="async" loading="lazy" width="32" height="19"></a>&nbsp; <a href="/wiki/Pompompurin%27s_Mama">Pompompurin Mama</a>',
    PompompurinPapa: '<a href="/wiki/Pompompurin%27s Papa" title="Pompompurin%27s Papa"><img alt="Pompompurin%27s Papa Icon.png" src="/images/thumb/6/68/Pompompurin%27s_Papa_Icon.png/32px-Pompompurin%27s_Papa_Icon.png" decoding="async" loading="lazy" width="32" height="21"></a>&nbsp; <a href="/wiki/Pompompurin%27s_Papa">Pompompurin Papa</a>',
    Poron: '<a href="/wiki/Poron" title="Poron"><img alt="Poron" src="/images/thumb/e/e8/Poron.png/32px-Poron.png" decoding="async" loading="lazy" width="32" height="18"></a>&nbsp; <a href="/wiki/Poron">Poron</a>',
    Sora: '<a href="/wiki/Sora" title="Sora"><img alt="Sora.png" src="/images/thumb/9/99/Sora.png/28px-Sora.png" decoding="async" loading="lazy" width="28" height="20"></a>&nbsp; <a href="/wiki/Sora">Sora</a>',
    Tam: '<a href="/wiki/Tam" title="Tam"><img alt="Tam.png" src="/images/thumb/d/d0/Tam.png/22px-Tam.png" decoding="async" loading="lazy" width="22" height="20"></a>&nbsp; <a href="/wiki/Tam">Tam</a>',
    Wanwa: '<a href="/wiki/Wanwa" title="Wanwa"><img alt="Wanwa.png" src="/images/thumb/0/0d/Wanwa.png/28px-Wanwa.png" decoding="async" loading="lazy" width="28" height="18"></a>&nbsp; <a href="/wiki/Wanwa">Wanwa</a>',
   
   
    // Add additional entries as needed
};

    // Function to resolve shorthand to full content
    function resolveContent(visitor) {
        if (typeof visitor.content === "string" && visitorContentMap[visitor.content]) {
            visitor.content = visitorContentMap[visitor.content];
        }
        return visitor;
    }

    // Sample visitors with schedules and starting weeks
    var visitors = [
      { content: "Baku", schedule: "everyweek", season: "fall", startingWeek: 0 },  // Starts at week 0
        { content: "Berry", schedule: "2week", season: "fall", startingWeek: 1 },  // Starts at week 1
        { content: "Buppi", schedule: "5week", startingWeek: 0 },  // Starts at week 0
        { content: "Cappuccino", schedule: "4week", startingWeek: 2 },  // Starts at week 2
        { content: "Cherry", schedule: "2week", season: "fall", startingWeek: 0 },  // Starts at week 0
        { content: "Chiffon", schedule: "4week", startingWeek: 1 },  // Starts at week 1
        { content: "Coco", schedule: "2week", season: ["summer", "winter"], startingWeek: 3 },  // Starts at week 3
        { content: "Corune", schedule: "4week", startingWeek: 1 },  // Starts at week 1
        { content: "Espresso", schedule: "4week", startingWeek: 3 },  // Starts at week 3
        { content: "Fenneko", schedule: "2week", startingWeek: 0 },  // Starts at week 0
        { content: "Macaron", schedule: "everyweek", season: "spring", startingWeek: 0 },  // Starts at week 0
        { content: "Mocha", schedule: "4week", startingWeek: 0 },  // Starts at week 0
        { content: "MyMelodyGrandma", schedule: "4week", startingWeek: 3 },  // Starts at week 3
        { content: "MyMelodyGrandpa", schedule: "4week", startingWeek: 3 },  // Starts at week 3
        { content: "Nuts", schedule: "2week", season: ["fall", "spring"], startingWeek: 0 },  // Starts at week 0
        { content: "Pam", schedule: "everyweek", season: ["summer", "winter"], startingWeek: 0 },  // Starts at week 0
        { content: "Panya", schedule: "5week", startingWeek: 4 },  // Starts at week 4
        { content: "PompompurinMama", schedule: "4week", startingWeek: 4 },  // Starts at week 4
        { content: "PompompurinPapa", schedule: "4week", startingWeek: 4 },  // Starts at week 4
        { content: "Poron", schedule: "2week", startingWeek: 4 },  // Starts at week 4
        { content: "Sora", schedule: "5week", startingWeek: 3 },  // Starts at week 3       
        { content: "Tam", schedule: "everyweek", season: ["summer", "winter"], startingWeek: 0 },  // Starts at week 0
        { content: "Wanwa", schedule: "5week", startingWeek: 2 },  // Starts at week 2

 // Add more visitors with their schedules and starting weeks...

    ];

    // Function to assign visitors to specific weeks based on their schedule and starting week
    function assignVisitorToWeeks(visitor, currentWeek) {
        var weeks = [];
        var startWeek = visitor.startingWeek;

        switch(visitor.schedule) {
            case "everyweek":
                weeks = [0, 1, 2, 3, 4]; // All weeks (0-4 in the 5-week cycle)
                break;
            case "2week":
                weeks = [(startWeek + 0) % 5, (startWeek + 2) % 5, (startWeek + 4) % 5]; // Bi-weekly (starts at startingWeek, every 2nd week)
                break;
            case "3week":
                weeks = [(startWeek + 0) % 5, (startWeek + 3) % 5]; // Every third week
                break;
            case "4week":
                weeks = [(startWeek + 0) % 5, (startWeek + 4) % 5]; // Every fourth week
                break;
            case "5week":
                weeks = [startWeek % 5]; // Only on the start week of the cycle
                break;
            default:
                weeks = [];
        }
        return weeks;
    }

    // Function to filter visitors based on the current week and season
    function filterVisitors(currentWeek) {
        var result = [];
        for (var i = 0; i < visitors.length; i++) {
            var visitor = visitors[i];
            var visitorWeeks = assignVisitorToWeeks(visitor, currentWeek);

            // Check if the current week is one of the assigned weeks for the visitor
            if (visitorWeeks.includes(currentWeek) && (visitor.season === currentSeason || !visitor.season)) {
                result.push(resolveContent(visitor));
            }
        }
        return result;
    }

    // Display visitors for this week, last week, and next week
    function displayVisitors() {
        var lastWeekVisitors = filterVisitors((weekNumber - 1 + 5) % 5); // Adjust for circular rotation
        var thisWeekVisitors = filterVisitors(weekNumber);
        var nextWeekVisitors = filterVisitors((weekNumber + 1) % 5);

        // Function to display the visitors in the HTML
        function renderVisitors(weekLabel, visitorsArray) {
            var weekElement = document.getElementById(weekLabel);
            if (weekElement) {
                weekElement.innerHTML = "";
                visitorsArray.forEach(function(visitor) {
                    var visitorElement = document.createElement("div");
                    visitorElement.innerHTML = visitor.content;
                    weekElement.appendChild(visitorElement);
                });
            }
        }

        // Render visitors for each week
        renderVisitors("lastWeek", lastWeekVisitors);
        renderVisitors("thisWeek", thisWeekVisitors);
        renderVisitors("nextWeek", nextWeekVisitors);
    }

    displayVisitors();
});

YT Link:

https://www.youtube.com/watch?v=_ISsjt0GXww&ab_channel=javascriptfanatic

Source code :
https://github.com/zlatnaspirala/matrix-engine-starter/tree/main/projects/hang3d

Hey everyone,

I’ve been struggling to book an appointment for the past three months. The available slots are usually open for just 5-7 seconds before they're gone. I’ve automated the form-filling process to save time, but I’m stuck at solving the captchas.

The captchas are quite tough, and even though I’ve increased my typing speed, I still can’t solve them fast enough. I’m wondering if it’s possible to create a script, perhaps in JavaScript or another language, to solve the captchas automatically within 1-1.5 seconds.

If anyone knows a way to achieve this or can guide me through the process, I’d greatly appreciate it. Please note that I’ve already tried extensions, but their autofill time is too slow.

Looking forward to your suggestions!

Best regards,

I tried using HOF but i couldn't

Let nums = [2,1,2,1,2,4,1,3,3,1,3,4,4] Let specialNums = [] for (let i = 0; i < nums.length; i++) { nums.sort() if (!specialNums.includes(nums[i])) specialNums.push(nums[i]) }

// final value specialNums = [1,2,3,4]

I come from a programming backgorund, with Java experience.

My only goal is to develop as quickly as possible the frontend of a web-app. The web-app will be pretty standard, with a login page, profile page, and a few other pages where you can view events others publish.

Which of the two options would be easier for me to learn in a short span of time? Which one has higher quality documentation and sources to learn from?

Hi everyone,

I'm creating a little platform game in javascript (even though I literally have no experience with it, I followed a youtube tutorial and used Chat GPT when I had to fix my mistakes), using a canvas and I have this problem :

Basically I have this png for the platforms, and in this png there are more assets (3 rows and 4 columns for a total of 16 assets, all 16x16)

I want to pick only one asset and apply it to my platform but I don't know how to do it.

If you want a clue here's the code :

import platform from '../img/Terrain (16x16).png'
import background from '../img/Yellow.png'
import idle_player from '../img/Idle_Player(32x32).png'
import run_right from '../img/Run_Right (32x32).png'
import run_left from '../img/Run_Left(32x32).png'
import jump from '../img/Jump (32x32).png'
import fall from '../img/Fall (32x32).png'
import hit_player from '../img/Hit_Player(32x32).png'

console.log(platform)
const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')

canvas.width = 1024
canvas.height = 576

const backgroundImage = new Image();
backgroundImage.src = background; // Usa la tua immagine 16x16

console.log(c)

const gravity = 0.5

class Player { //Tutto ciò che riguarda il player
    constructor() {
        this.frameTimer = 0; // Tempo accumulato per il cambio di frame
        this.frameInterval = 10; // Numero di aggiornamenti prima di cambiare frame

        this.position = { //Posizione del player
            x: 100,
            y: 100
        }
        this.velocity = { //Velocità del player
            x: 0,
            y: 0
        }

        this.widht = 70
        this.height = 70

        this.image = createImage(idle_player)
        this.frames = 0
        this.sprites = {
            idle : {
                idle_player : createImage(idle_player)
            },
            run : {
                right : createImage(run_right),
                left : createImage(run_left)
            },
            jump : {
                jump_player : createImage(jump)
            },
            fall : {
                fall_player : createImage(fall)
            },
            hit : {
                hit_player : createImage(hit_player)
            }
        }

        this.currentSprite = this.sprites.idle.idle_player
    }

draw() {
    c.drawImage(
        this.currentSprite, 
        32 * this.frames,
        0,
        32,
        32,
        this.position.x, 
        this.position.y, 
        this.widht, 
        this.height 
        )
    }

    update() {
        this.frameTimer++;
    if (this.frameTimer >= this.frameInterval) {
        this.frames++;
        this.frameTimer = 0; // Resetta il timer
    }
        if (this.frames >= 10) this.frames = 0
       this.draw()
       this.position.x += this.velocity.x
       this.position.y += this.velocity.y

       if (this.position.y + this.height+ this.velocity.y <= canvas.height)
       this.velocity.y += gravity
    else this.velocity.y = 0
    }
}

class Platform {
    constructor({ x, y, image, cropX = 0, cropY = 0, cropWidth = 16, cropHeight = 16 }) {
        this.position = {
            x,
            y
        }

        this.image = image
        this.widht = 320
        this.height = 176
        this.cropX = cropX
        this.cropY = cropY
        this.cropWidth = cropWidth
        this.cropHeight = cropHeight
    }

    draw() {

        // Calcolo delle coordinate del frame
        c.drawImage(
            this.image, 
            this.cropX,
            this.cropY,
            this.position.x, 
            this.position.y,
            this.cropWidth,
            this.cropHeight,
            this.widht,
            this.height
        )
    }
}

class GenericObject {
    constructor({ x, y, image }) {
        this.position = {
            x,
            y
        }

        this.image = image
        this.widht = image.widht
        this.height = image.height
        }
        draw() {
            c.drawImage(this.image, this.position.x, this.position.y)
        }
    }

    function createImage(imageSrc) {
        const image = new Image()
        image.src = imageSrc
        return image
    }

const platformImage = createImage(platform)
platformImage.onload = () => {
    console.log('Platform image loaded');
};

const player = new Player()
const platforms = [new Platform({         //Colonna 0 → cropX = 0
    x: -1,                                //Colonna 1 → cropX = bloccoLarghezza
    y: 470,                               //Colonna 2 → cropX = 2 * bloccoLarghezza
    image : platformImage,
    cropX : 32,                            //Riga 0 → cropY = 0
    cropY : 0,                            //Riga 1 → cropY = bloccoAltezza
    cropWidth : 16,                       //Riga 2 → cropY = 2 * bloccoAltezza
    cropHeight : 16
    })
    , 
    new Platform({ 
        x: platformImage.width - 2, 
        y: 470,
        image : platformImage, 
        cropX : 1,
        cropY : 4, 
        cropWidth : 16,
        cropHeight : 16
    }),

        new Platform({ 
            x: platformImage.width * 2 - 2,
            y: 470, 
            image : platformImage,
            cropX : 1,
            cropY : 1,
            cropWidth : 16,
            cropHeight : 16
    })
        ]

    const genericObject = [
    new GenericObject({
    x : 0,
    y : 0,
    image : createImage(background)
})
    ]

const keys = {
    right: {
        pressed: false
    },
    left: {
        pressed: false
    },
}

let scrollOffset = 0

function animate() {
    requestAnimationFrame(animate)

    if(backgroundImage.complete) {
        c.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
    }
    
    platforms.forEach((platform) => {
    platform.draw()
    })

    player.update()
    
    if (keys.right.pressed && player.position.x <= 963) {
        player.velocity.x = 3
            }
    else if (keys.left.pressed && player.position.x >0){
        player.velocity.x = -3
        }
    else {
        player.velocity.x = 0
    }

    console.log(scrollOffset)

    //Cadere dalla piattaforma (collisioni della piattaforma)
    platforms.forEach((platform) => {
    if (player.position.y + player.height <= platform.position.y 
        && player.position.y + player.height + player.velocity.y >= platform.position.y 
        && player.position.x + player.widht >= platform.position.x 
        && player.position.x <= platform.position.x + platform.widht)
            {
       player.velocity.y = 0 
        }
    })
    if (scrollOffset > 100) {
        console.log('Hai vinto')
    }
    if (player.velocity.y > 0 && player.currentSprite 
        !== player.sprites.fall.fall_player) {
        player.currentSprite = player.sprites.fall.fall_player;
        }
    if (player.velocity.y > 0 && player.currentSprite 
        === player.sprites.fall.fall_player){
        player.currentSprite = player.sprites.idle.idle_player
    }
    if(player.currentSprite === player.sprites.jump.jump_player 
        || player.currentSprite === player.sprites.fall.fall_player){
            player.frames = 0
        }
}

animate()

window.addEventListener('keydown', ({ keyCode })=> {
    console.log(keyCode)
    switch (keyCode) {
        case 37:
            console.log('left')
            keys.left.pressed = true
            player.currentSprite = player.sprites.run.left
            break

            case 40:
            console.log('down')
            break

            case 39:
            console.log('right')
            keys.right.pressed = true
            player.currentSprite = player.sprites.run.right
            break

            case 38:
            console.log('up')
            player.velocity.y -= 12
            player.currentSprite = player.sprites.jump.jump_player
            if (keyCode.repeat) { return }
            player.velocity.y += 12
            break

            case 65:
            console.log('left')
            keys.left.pressed = true
            player.currentSprite = player.sprites.run.left
            break

            case 83:
                console.log('down')
                break

                case 68:
            console.log('right')
            keys.right.pressed = true
            player.currentSprite = player.sprites.run.right
            break

            case 87:
            console.log('up')
            player.velocity.y -= 12
            player.currentSprite = player.sprites.jump.jump_player
            if (keyCode.repeat) { return }
            player.velocity.y += 12
            break
    }
})

window.addEventListener('keyup', ({ keyCode })=> {
    console.log(keyCode)
    switch (keyCode) {
        case 37:
            console.log('left')
            keys.left.pressed = false
            player.currentSprite = player.sprites.idle.idle_player
            break

            case 40:
            console.log('down')
            break

            case 39:
            console.log('right')
            keys.right.pressed = false
            player.currentSprite = player.sprites.idle.idle_player
            break

            case 38:
            console.log('up')
            player.velocity.y -= 12
            break

            case 65:
            console.log('left')
            keys.left.pressed = false
            player.currentSprite = player.sprites.idle.idle_player
            break

            case 83:
                console.log('down')
                break

                case 68:
            console.log('right')
            keys.right.pressed = false
            player.currentSprite = player.sprites.idle.idle_player
            break

            case 87:
            console.log('up')
            player.velocity.y -= 12
            break
    }
})

Previous Chapter: Chapter1: Intro To Variables

In the previous chapter, when I declared variables, I didn't specify their types or the kinds of values they were expected to hold. I simply declared them and began assigning values without any restrictions. This might seem unusual or unfamiliar to those of you coming from languages like Java, C, or similar, where variable types are typically strictly defined. In this chapter, I will explain the various data types available in JavaScript, with the exception of the object type, which I will cover in the next section

Type and typeof:

JavaScript is a dynamically typed language, which means that the type of a variable is not defined when the variable is declared. Instead, the type of the variable is determined at runtime based on the value it holds. In contrast, statically typed languages like Java or C require you to declare the type of a variable when it is created, and that type cannot change.

For example, let's start by assigning the value 36 to the variable cusAge. If we check the type of the variable using the typeof operator, it will return "number". Now, if we change the value to "36" (a string), JavaScript allows this without throwing an error. If we check the type again, it will return "string".

As shown, the type of the variable changes based on the value it holds. This is a key feature of dynamic typing in JavaScript.

let cusAge;

cusAge = 36;
console.log(typeof cusAge); // returns "number"

cusAge = "36";
console.log(typeof cusAge); // returns "string"

The typeof Operator:

We use the typeof operator to check the type of the value stored in a variable, rather than the variable itself. The typeof operator returns the type of the value as a string literal, such as "number", "string", "boolean", "object", and so on.

let num = 42;
let str = "Hello, World!";
let isTrue = true;
let obj = {};
let nothing = null;
let notDefined;

console.log(typeof num);    // "number"
console.log(typeof str);    // "string"
console.log(typeof isTrue); // "boolean"
console.log(typeof obj);    // "object"
console.log(typeof nothing); // "object" (this is a known JavaScript quirk)
console.log(typeof notDefined); // "undefined"

Data Types in JavaScript:

In JavaScript, there are 8 fundamental data types. These are:

1. String
2. Number
3. BigInt
4. Boolean
5. Undefined
6. Null
7. Symbol
8. ObjectIn this chapter, I'll focus on the first 6 types, which are known as primitive data types. Primitive types are those that hold a single value and cannot be broken down into smaller parts. The Symbol type is also considered primitive, but I won’t cover it in this section. I plan to explore Symbols in more detail later.

As for Object, I’ll explain this type in the next chapter, as it deserves separate attention.

Strings:

A string is a sequence of characters used to represent text-based data in JavaScript. Strings are immutable, meaning that once a string is created, it cannot be modified directly. If you try to add, remove, or change any part of a string, a new string is created, and the old string remains unchanged. If the original string is no longer in use, it gets garbage collected.

In JavaScript, there are three primary ways to create a string:

1. Using Single Quotes (')
2. Using Double Quotes (")
3. Using Backticks (`)

The first two methods (single and double quotes) are virtually identical in functionality. The choice between them is mostly a matter of preference or consistency within your project. Choose one style and stick with it for the sake of readability and maintainability.Backticks (also called template literals) offer additional features that the other two methods don’t. Here are the benefits of using backticks:

• Multiline Strings: You can create strings that span multiple lines without the need for escape characters like \n or \t.
• String Interpolation: You can insert expressions directly into strings using ${} syntax. This makes it easy to embed variables or calculations within the string.Also keep in mind that if you create a string with any type of quotes, you can’t use the same quote in between the string unless you use escape characters to insert them.

​

let cusFirstName = 'John';
let custLastName = "Doe";
let cusAddress = `123, Dummy Street,
      Dummy City,
      Dummy State`;

let sampleExp = `Sum of 23 + 45: ${23 + 45}`;
let errorText = 'I'm the president'; // Throws error
let crctText = 'I\'m the president';
Numbers:

Unlike other programming languages where there are distinct types for integers (e.g., int) and floating-point numbers (e.g., float, double), JavaScript has only one number type: number. This type represents both integers, decimal values, and a few special cases, such as NaN and Infinity.

In JavaScript, all numbers (whether they appear to be integers or floating-point values) are represented as 64-bit floating-point values. This means that even when you assign an integer value like 36 to a variable, it’s internally stored as 36.0 (a floating-point number).

Although cusAge looks like an integer when logged to the console, JavaScript actually stores it as a floating-point number (36.0). This is simply how JavaScript handles numbers behind the scenes, but it presents them in the most readable form for the developer.

let cusAge = 36;
console.log(cusAge);  // Outputs: 36
console.log(typeof cusAge);  // Outputs: "number"

Apart from standard numbers, JavaScript has two special numeric values that represent unique cases:

• NaN (Not-a-Number): NaN is a special value that represents a computational error or an invalid number. It results from operations that don't produce a valid number. For example, dividing 0 by 0, or trying to perform mathematical operations on undefined or non-numeric values.
• Infinity and -Infinity: JavaScript also has two special values to represent positive and negative infinity.
  • Infinity represents a value greater than the largest finite number. For example, dividing a positive number by zero results in positive infinity.
  • -Infinity represents a value smaller than the smallest finite number (essentially negative infinity). For example, dividing a negative number by zero results in negative infinity.

​

let invalid = NaN + 10;
console.log(invalid);  // Outputs: NaN

console.log(1 / 0);   // Outputs: Infinity
console.log(-1 / 0);  // Outputs: -Infinity

// You can also manually assign Infinity or -Infinity to variables
let posInf = Infinity;
let negInf = -Infinity;
console.log(posInf);  // Outputs: Infinity
console.log(negInf);  // Outputs: -Infinity

BigInt:

In JavaScript, the number type can safely represent integer values within a specific range. The safe integer range for JavaScript’s 64-bit floating-point representation is between -2\^53 + 1 and 2\^53 - 1, or roughly -9,007,199,254,740,992 to 9,007,199,254,740,991.

If you try to represent numbers outside this range, you may encounter precision issues, meaning JavaScript won't be able to represent the number accurately.

console.log(9007199254740991 + 1); // 9007199254740992
console.log(9007199254740991 + 2); // 9007199254740992

To work with integers larger than this safe range, JavaScript provides a BigInt type. BigInt allows you to represent arbitrarily large integers without losing precision.

To create a BigInt, you can either:

1. Append n to the integer
2. Use the BigInt() constructor function

​

let bigNum = 9007199254740991n;  // Note the 'n' at the end
console.log(bigNum);  // Outputs: 9007199254740991n

let bigNum = BigInt(9007199254740991);
console.log(bigNum);  // Outputs: 9007199254740991n

While BigInt is useful for representing very large integers, there is a key limitation: You cannot mix BigInt and number types in arithmetic operations. Performing calculations between a BigInt and a number will result in a TypeError. To perform calculations involving both types, you must explicitly convert one type to the other.

let bigNum = 9007199254740991n;
let regularNum = 1;

console.log(bigNum + regularNum);  // Throws TypeError: Cannot mix BigInt and other types

Boolean:

A Boolean is a data type that can have only two possible values: true (often represented as "yes") and false (often represented as "no"). These values are used to represent logical conditions, indicating whether something is true or false. Booleans comes across in conditional statements (such as if and while loops) and logical operations (such as && for "and", || for "or", and ! for "not").

In addition to their use in control flow (deciding whether code should execute), Booleans also play a role in evaluating expressions. For example, comparisons between values (e.g., x > 10 or name === "John") result in Boolean values, which can be used in decision-making.

let isActive = true;  // A Boolean value indicating the condition is true
let isCompleted = false;  // A Boolean value indicating the condition is false

console.log(isActive);  // Outputs: true
console.log(isCompleted);  // Outputs: false

Null and Undefined:

Both null and undefined are similar in that they represent "empty" or "no value," but they have distinct meanings and intended uses in JavaScript.

• Null: null is an explicit assignment, often used to represent the intentional absence of any value. It is typically used to indicate that a variable has been deliberately set to "no value" or is intentionally empty, especially for objects. When you assign null to a variable, you're telling the program that the variable is intentionally empty or devoid of any object reference.
• Undefined: undefined usually indicates that a variable has been declared, but not assigned a value. This is the default value for uninitialised variables. If you create a variable but don’t assign it a value, JavaScript automatically assigns it the value undefined.

​

let user;  // Declared, but not assigned a value yet (implicitly undefined).
console.log(user);  // undefined

user = null;  // Explicitly set to no value (no user object).
console.log(user) // object (Weird right? This is an error made while designing JS itself and it can't be fixed)

Undefined can also be explicitly assigned to a variable, but doing so may lead to confusion, as its meaning could get muddled with null, which has a more specific intent.

I have share my basic understanding above, and I also know that there is more to be explored on string and numbers regarding methods and it's use cases. Please share me the list of topics that I should cover further, will explore on it.

I have this code:

cells[1].textContent = dnf ? "dnf" : ((plus2 ? time + 2 : time).toFixed(2));

I wrote it as shown below, but I'm not sure if it's readable.

cells[1].textContent =
  dnf ? "dnf" 
    : ((plus2 ? time + 2 
      : time).toFixed(2));

Node.js' node:wasi modules includes disclaimers such as

The node:wasi module does not currently provide the comprehensive file system security properties provided by some WASI runtimes. Full support for secure file system sandboxing may or may not be implemented in future. In the mean time, do not rely on it to run untrusted code.

and

The current Node.js threat model does not provide secure sandboxing as is present in some WASI runtimes.

While the capability features are supported, they do not form a security model in Node.js. For example, the file system sandboxing can be escaped with various techniques. The project is exploring whether these security guarantees could be added in future.

He asks the bartender for some advice on how to get into Javascript. The WP Developer has some familiarity with basic CSS, HTML and embedding it into WordPress some times even taking pens from CodePen to embed them with the occasional debugging.

In explaining this, the WP Dev asks the bartender 'Is there a course you could recommend or a method of learning that will enable me to start getting that Javascript money?'

What does the bartender (you) say to the WP "Developer"?

I just used the ZZZ Code AI generator and pasted it in tampermonkey. I also tried chatgpt for it but apparently either the site is way too hard coded or AI not just yet there so I can only make a request so maybe one day someone makes this feature. I tried both here https://www.moddb.com/mods and in any game category so I thought that maybe it'd be easier to do something like this. So there's no buttons or any extra expandable filters after installing the script. Here's the code. Thx for checking this

// ==UserScript==

// u/nameModDB Sort Mods by Size

// u/namespacehttp://tampermonkey.net/

// u/version0.1

// u/description Adds a button to sort mods by size on ModDB

// u/authorYour Name

// u/matchhttps://www.moddb.com/mods

// u/grantnone

// ==/UserScript==

(function() {

'use strict';

// Create a button to sort mods by size

const button = document.createElement('button');

button.innerText = 'Sort Mods by Size';

button.style.position = 'fixed';

button.style.top = '10px';

button.style.right = '10px';

button.style.zIndex = '1000';

document.body.appendChild(button);

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

const mods = Array.from(document.querySelectorAll('.mod'));

mods.sort((a, b) => {

const sizeA = parseInt(a.querySelector('.size').innerText.replace(/[^0-9]/g, ''));

const sizeB = parseInt(b.querySelector('.size').innerText.replace(/[^0-9]/g, ''));

return sizeB - sizeA; // Sort in descending order

});

const container = document.querySelector('.mod-list');

container.innerHTML = '';

mods.forEach(mod => container.appendChild(mod));

});

})();

Hi I'm very new so I'm playing around with a program called RunJS. It's outputting something very weird and I'm not sure why.

const s = "Hello World!";

console.log(s.substring(0, 5).toUpperCase());

console.log(s.split(''));

This logs " 'HELLO'

[ ' ', ' ', 'c', 'o', 'n', 's', 'o', 'l', 'e', '.', 'l', 'o', 'g', '(', 's', '.', 's', 'p', 'l', 'i', 't', '(', "'", "'", ')', ')', ';' ] "

Am I doing something wrong? If I take out the substring line it gives "[ 'H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd', '!' ]" which is more in line with what I expected.

I'm writing a dice rolling page where users can press buttons for various dice and have the results all added together. I'm adding event listeners as follows:

const d4 = document.getElementById("d4");
const d6 = document.getElementById("d6");

d4.addEventListener("click", () => {   
    addDie(4);
});
d6.addEventListener("click", () => {   
    addDie(6);
});

And so on. Is there a way to write one event listener for all of these button clicks? Perhaps by assigning all the buttons a class and assigning that class to a constant?

I'm trying to create a webpage where you can click on different dice and it will add them to a sum total, like 2D6+3D8+4. I'm having trouble with my first function. I'm trying to get it to add which die I'm using to one array, and the total to another array when the user presses the die button, but for some reason it's only doing it when the page loads or reloads.

HTML:

<button class="dieButton" id="d6">🎲</button>

JS:

const d6 = document.getElementById("d6");
const dice = [];
const dieRolls = [];

d6.addEventListener("click", addDie(6)); 

function addDie(die) {
    dice.push(die);
    dieRolls.push((Math.floor(Math.random() * die) + 1));
    console.log(dice);
    console.log(dieRolls);
}

What have I done wrong?

I'm thinking about studying Swagger to create documentation for my nodejs api, what tips would you give me and how can I do this in the best way?

I found a date parsing function on stack overflow that was marked as correct, but while testing it, I found something peculiar that doesn't work for my use case. I can't figure this out, despite reading through stack overflow comments, mdn docs, and asking chatgpt, so I'm asking here.

I isolated the issue with the parser function to the following: The parsing function uses .setMonthUTC() but when I set this to 0, 1, and 2 respectively, the outputs of getMonthUTC() are 0, 2, and 2.

testUTCMonth(0);
testUTCMonth(1);
testUTCMonth(2);

function testUTCMonth(monthInteger){
var date = new Date();
console.log(date);
date.setUTCMonth(monthInteger);
console.log(date.getUTCMonth());
}

VM295:2 Sat Nov 30 2024 16:21:00 GMT-0600 (Central Standard Time)
VM295:4 0
VM295:7 Sat Nov 30 2024 16:21:00 GMT-0600 (Central Standard Time)
VM295:9 2
VM295:12 Sat Nov 30 2024 16:21:00 GMT-0600 (Central Standard Time)
VM295:14 2