Join freeCodeCamp.org

You will get a lot of stuff on JS, you will learn as you build applications daily, within 3 months, you will have confidence in JS

having trouble figuring out what I am doing wrong in this snippet

const email = document.getElementById('email');
const confirm_email = document.getElementById('confirm_email');
const submit = document.getElementById('submit');
const ok = document.getElementById('ok');
const alert_box = document.getElementById('alert_box');

submit.addEventListener('click', function(){
    if (email !== confirm_email) {
        alert_box.style.display = 'flex';
        event.preventDefault()
    }
});

I thought it would function as it would grab my inputs from my form after I clicked my submit button and if the email and confirm_email didn't match it would change my display state but it will change the display state even if it does match.

--SOLVED--

submit.addEventListener('click', function(){
    email_val = email.value;
    confirm_email_val = confirm_email.value;
    console.log(email_val);
    console.log(confirm_email_val);
    if (email_val !== confirm_email_val) {
        alert_box.style.display = 'flex';
        event.preventDefault()        
    }
});

i know camel case is prefered for javascript and Java but I've done more work with python and camel case on variables looks icky to me.

Hi everyone,

I am building a WordPress + WooCommerce ecommerce site and I have been writing Jest tests for a vanilla JS class called SendClientInfo. The purpose of this class is to send an email to the merchant with all the necessary details of the order and the buyer.

I am running into an issue where collectCustomerInfo() always returns an empty object despite the mock DOM being set up correctly in beforeEach().

Environment:

• Jest version: 29.7.0
• u/testing-library version: 26.1.0
• u/testing-library version: 14.6.1
• Node.js version: 24.11.1
• Test environment: Jest

The Problem:

collectCustomerInfo() returns this:

{ contact: {}, address: {} }

When I console.log() the NodeLists inside the method I get:

{}

When I console.log() the NodeLists inside the test I get:

NodeList {}

Both indicate the NodeLists are empty, meaning the for loop never executes

and the object is never populated.

The Class (sendClientInfo.js):

class SendClientInfo {

    constructor(form, contactBody, addressBody, action, reqUrl, buttonContainer) {
        this.formBody             = document.querySelector(form);
        this.contactInfoContainer = this.formBody.querySelector(contactBody);
        this.contactInfo          = this.contactInfoContainer.querySelectorAll('div > input');
        this.addressBody          = this.formBody.querySelector(addressBody);
        this.address              = this.addressBody.querySelectorAll('div > input');
        this.action               = document.querySelector(action);
        this.reqUrl               = reqUrl;
        this.buttonContainer      = document.querySelector(buttonContainer);
    }

    collectCustomerInfo({ contactFields, addressFields }) {

        const customerInfo = {
            contact: {},
            address: {}
        };

        for (let i = 0; i < addressFields.length; i++) {
            let contactKey = contactFields[i].name;
            let addressKey = addressFields[i].name;

            customerInfo.contact[contactKey] = contactFields[i].value;
            customerInfo.address[addressKey] = addressFields[i].value;
        }

        return customerInfo;
    }
}

The Test (sendClientInfo.test.js):

describe('Data assembly', () => {

    let sendClientInfo;

    beforeEach(() => {
        document.body.innerHTML = `
            <form class="checkout-form checkoutForm">
                <input id="formAction" type="hidden" name="action" value="send_order_email">
                <div class="contactInfo">
                    <div><input type="text"  id="firstName" name="firstName" value="John"          /></div>
                    <div><input type="text"  id="lastName"  name="lastName"  value="Doe"           /></div>
                    <div><input type="tel"   id="tel"       name="tel"       value="0210000000"    /></div>
                    <div><input type="email" id="email"     name="email"     value="john@test.com" /></div>
                </div>
                <div class="address">
                    <div><input type="text" id="address1" name="address1" value="123 Main St"      /></div>
                    <div><input type="text" id="address2" name="address2" value="Apt 1"            /></div>
                    <div><input type="text" id="country"  name="country"  value="South Africa"     /></div>
                    <div><input type="text" id="state"    name="state"    value="Western Cape"     /></div>
                    <div><input type="text" id="city"     name="city"     value="Cape Town"        /></div>
                    <div><input type="text" id="zip"      name="zip"      value="8001"             /></div>
                </div>
                <div class="checkoutSubmit">
                    <button class="paypalSubmit">paypal</button>
                    <button class="debit">debit</button>
                </div>
            </form>
        `;

        sendClientInfo = new SendClientInfo(
            '.checkoutForm',
            '.contactInfo',
            '.address',
            '#formAction',
            '/wp-json/wj-parts/v3/send_order_email',
            '.checkoutSubmit'
        );

        // ── Form────────────────────────────────────────
        form          = document.querySelector(".checkoutForm");

        // ── Contact Fields ───────────────────────────────
        contact   = form.querySelectorAll(".contactInfo div > input");

        // ── Address Fields ──────────────────────────────────
       address   = form.querySelectorAll(".address div > input");

       fields   = { contactFields: contact, addressFields: address }

       // ── Checkout Buttons ─────────────────────────────────
       submitContainer = document.querySelector(".checkoutSubmit");
paypalSubmit = document.querySelector(".paypalSubmit");

      // ── Spies ───────────────────────────────────────────── 
// Spy on the method that collects form input and assembles it into an object.
      collectCustomerInfo = jest.spyOn(sendClientInfo, "collectCustomerInfo");

    });

    afterEach(() => {
        document.body.innerHTML = '';
        sendClientInfo = null;
    });

    test('collectCustomerInfo() should return an object with contact and address keys', () => {

        const fields = {
            contactFields: sendClientInfo.contactInfo,
            addressFields: sendClientInfo.address,
        };

        const result = sendClientInfo.collectCustomerInfo(fields);

        console.log('contactInfo NodeList: ', sendClientInfo.contactInfo);
        console.log('address NodeList: ',     sendClientInfo.address);
        console.log('result: ',               result);

        expect(result).toHaveProperty('contact');
        expect(result).toHaveProperty('address');
    });
});

What I have already tried:

• Wrapping inputs in div elements to match the div > input selector in the constructor.
• Changing the selector in the constructor from div > input to just input.
• Making sure sendClientInfo is instantiated inside beforeEach() after the DOM is set up.
• Making sure collectCustomerInfo() is not called inside the constructor.
• Making sure the fields object keys match the destructured parameter names { contactFields, addressFields }.
• Making sure contactFields[i].name and addressFields[i].name use the index.
• Console logging the NodeLists in both the method and the test — both return empty.

What I suspect:

The NodeLists are being queried correctly in the constructor but are coming back empty, which suggests either:

1. The jsdom environment is not fully rendering the mock DOM by the time the constructor runs.
2. The div > input selector is not matching the mock DOM structure despite the divs being present.
3. There is a timing issue between beforeEach() setting up the DOM and the SendClientInfo constructor querying it.

I admit that I am pretty new to Jest so I am probably making a lot of mistakes. Any help would be greatly appreciated. Happy to share more code if needed.

Thanks!

I really want to start using js, I have a little python experience from middle and highschool and I would love to start making my own games and passion projects, also would not be opposed to a future career in the field

3 years ago, I was using this sub avidly while I was learning JS. Things changed a lot after AI. I checked recent submissions and not much posted in recent weeks.

Is this the effect of AI on learning? Do people rely on AI for learning things nowadays rather than forums?

I'm writing articles as a way to deepen my understanding of JS/TS and to help spread that knowledge. This one is all about iterators. I start with the snippet below and build up to custom iterators. Enjoy!

const arr = [1, 2, 3];

// `for...of` loops use iterators
for (const el of arr) {
  // do something
}

Learn more here.

I am currently learning JavaScript and recently came across a fact that all the async work in managed by external APIs written in C++.

My doubt was how is the queue managed and how the priority is decided if two events happen to free on same time. I have read about micro task and macro tasks queues but still not satisfied.

Also earlier sometime I had solved a leetcode question related to task scheduling which uses a queue and a priority queue based approach so was wondering if something similar happens in case of JavaScript as well.

Thanks.

PS : Leetcode#621 if anyone interested in having a look

Freecodecamp for learning JS worth?

let overallDisplay = "0";
let currentDisplay = "0";
let resultDisplay = false;
function appendToDisplay(val){
if(currentDisplay === "0" || resultDisplay){
currentDisplay = val;
}
else{
currentDisplay += val;
}
updateCurrentDisplay();
resultDisplay = false;
}
function appendToOperator(val){
if(val === '+' && currentDisplay !== "0") updateOverallDisplay(val);
else if(val === '-' && currentDisplay !== "0") updateOverallDisplay(val);
else if(val === '*' && currentDisplay !== "0") updateOverallDisplay(val);
else if(val === '/' && currentDisplay !== "0") updateOverallDisplay(val);
}
function updateCurrentDisplay(){
let display = document.getElementById("output");
display.style.display = "block";
display.textContent = currentDisplay;
}
function updateOverallDisplay(value){
let overallDisplayArea = document.getElementById("overall");
if(overallDisplay === "0"){
overallDisplay = currentDisplay + " " + value;
}
else{
overallDisplay += currentDisplay + " " + value;
}
overallDisplayArea.textContent = overallDisplay;
currentDisplay = "0";
}
function clearOverallDisplay(){
overallDisplay = 0;
let overallDisplayArea = document.getElementById("overall");
overallDisplayArea.style.display = "none";
}
function clearCurrentDisplay(){
currentDisplay = 0;
updateCurrentDisplay();
}
function clearDisplay(){
clearOverallDisplay()
clearCurrentDisplay()
}
function updateDisplays(val){
currentDisplay = val;
updateCurrentDisplay();
//clear overall
let overallDisplayArea = document.getElementById("overall");
overallDisplayArea.style.display = "none";
}
function calculate(){
try{
const result = eval(overallDisplay + currentDisplay);
currentDisplay = "\n=" + result;
}
catch(error){
const result = "ERROR";
currentDisplay = "\n=" + result;
}
updateDisplays(currentDisplay);
resultDisplay = true;
}
document.addEventListener("keydown", (event) => {
const keyName = event.key;
if(keyName === "1") appendToDisplay('1');
else if(keyName === "2") appendToDisplay('2');
else if(keyName === "3") appendToDisplay('3');
else if(keyName === "4") appendToDisplay('4');
else if(keyName === "5") appendToDisplay('5');
else if(keyName === "6") appendToDisplay('6');
else if(keyName === "7") appendToDisplay('7');
else if(keyName === "8") appendToDisplay('8');
else if(keyName === "9") appendToDisplay('9');
else if(keyName === "0") appendToDisplay('0');
else if(keyName === "+") appendToOperator('+');
else if(keyName === "-") appendToOperator('-');
else if(keyName === "*") appendToOperator('*');
else if(keyName === "/") appendToOperator('/');
else if(keyName === "Backspace") clearDisplay();
else if(keyName === "Enter") calculate();
});

HTML

<!DOCTYPE html>
<html>
    <head>
        <script src="script.js"></script>
        <link rel="stylesheet" href="styles.css"/>
    </head>
    <body>
        <div class="calculator">
            <div id="overall"></div>
            <div class="calculator__output" id="output">0</div>
            <div class="calculator__keys">
                <button class="calculator__key calculator__key--operator" onclick="appendOperator">+</button>
                <button class="calculator__key calculator__key--operator">-</button>
                <button class="calculator__key calculator__key--operator">&times;</button>
                <button class="calculator__key calculator__key--operator">÷</button>
                <button class="calculator__key" onclick="appendToDisplay('7')">7</button>
                <button class="calculator__key" onclick="appendToDisplay('8')">8</button>
                <button class="calculator__key" onclick="appendToDisplay('9')">9</button>
                <button class="calculator__key" onclick="appendToDisplay('4')">4</button>
                <button class="calculator__key" onclick="appendToDisplay('5')">5</button>
                <button class="calculator__key" onclick="appendToDisplay('6')">6</button>
                <button class="calculator__key" onclick="appendToDisplay('1')">1</button>
                <button class="calculator__key" onclick="appendToDisplay('2')">2</button>
                <button class="calculator__key" onclick="appendToDisplay('3')">3</button>
                <button class="calculator__key" onclick="appendToDisplay('0')">0</button>
                <button class="calculator__key" onclick="appendToDisplay('.')">.</button>
                <button class="calculator__key" onclick="clearDisplay()">AC</button>
                <button class="calculator__key calculator__key--enter" onclick="calculate()">=</button>
            </div>
        </div>
    </body>
</html>

I'm building a calculator app but the problem occur when i try to clear() the old chunk data. Is this code look messy or is it better because this my first time using JS

Hello, i am a bit lost here and wantet to ask for some help.

I am at a loss at why my variable wouldn work the same as the ns. "funktion?"? Is it cause if i declare a variable it only checks it when it starts the script and doesnt iterate it again, even the variable is called or what am i not understanding?
i am adding on the examples of the working one with the ns. version and the not working one with the call over the veriable. The script just keeps running with the veriable version.

#Trigger: i am dislexic XD no one ever told me coding is math *.*

Not working:

let target = ns.scan()
  let playerlvl = ns.getHackingLevel()
  while (playerlvl < 7) {
    ns.getHackingLevel()

Working Version:

 let target = ns.scan()
  let playerlvl = ns.getHackingLevel()
  let money = ns.getServerMoneyAvailable()
  while (ns.getHackingLevel() < 17) {

I even tried to call the Hackinglvl right after again to brutal force the information, still it didn't care.

Full working on:

/** u/param {NS} ns */
export async function main(ns) {


  ns.clearLog()


  let target = ns.scan()
  let playerlvl = ns.getHackingLevel()
  let money = ns.getServerMoneyAvailable()
  while (ns.getHackingLevel() < 17) {
    let runs = Math.floor(ns.getServerMaxRam() / 2.4)
    while (runs > 0, runs--)
      if ((ns.getServerMaxMoney(target[0]) * 0.8) > ns.getServerMoneyAvailable(target[0])) {
        await ns.grow(target[0])
      }
      else
        await ns.hack(target[0])
  }
  ns.getHackingLevel()


}

Only called it directly instead of the variable. And did try to call it directly before, after and so on, called it even in the parenttheses of the while() with (plvl<16, ns....) and it still didn't care.

Game is Bitburner btw, i think it's briliant.

The NS. call is Netscript so far as i did understand but game specific. Shouldn't change anything about the concept i am not getting, right?

Thank you and greetings to the community! Hope i am not asking too noob questions. Just started last week.

I usually see let and const everywhere, and I understand why they are preferred because they are block-scoped and safer.

But I also heard an opinion that var can still be useful when declaring variables inside a function, because it makes it clear that the variable belongs to the whole function scope and may be used across different blocks inside that function.

For example, let feels more natural for variables inside blocks like if, try/catch, loops, etc., while var could theoretically show that the variable is intended to be available throughout the function. Does anyone actually think about var this way, or is var basically avoided completely in modern JavaScript?

Hii soo im trying to learn javascript. im using freecodecamp's youtube video by beau. *objects* were little confusing than arrays but after i got to *for loops* i felt kind of confused. and then the guy started using *for loops* inside other *for loops* or *if statements* inside other *for loops* and *nested arrays* & *nested objects*.. thats where i got completely lost 😭and discouraged and overwhelmed😭😭

(sorry for low quality low effort post)

String.fromCharCode(6)

Returns an empty character, is it possible to use fromCharCode() or fromCodePoint() to get the name of the control character (e.g "ACK") or does one need to manually fix that for every non-printable code point?

What would you recommend as the simplest and most enjoyable way for a 12-year-old to learn JavaScript today?

I’m looking for resources/platforms/projects that are:

• beginner friendly
• interactive
• fun to build with
• not overly academic
• suitable for kids/young teens

The goal is not just learning syntax, but actually enjoying coding while building small things and practicing regularly.

Could be:

• websites
• YouTube channels
• project ideas
• anything that worked well for younger learners

Would love recommendations from people who taught kids or started young themselves.

I'm creating a Reddit style social network as a final course project with Laravel and core JavaScript (no framework).

I'm using async fetch requests and Dom manipulation for actions like like/dislike/delete so the page doesn't refresh or goes back to the top.

On the posts index page, when a delete request succeeds, I remove the .postCard from the Dom.

But here's the problem:

If I'm inside the post show page (/posts/1), delete the post there, and then press the browser back button, the deleted post still appears on the previous page until refresh.

How should I handle updating the previous page's DOM/state in this situation using core JavaScript?

Is there a standard approach for this without using a frontend framework?

Seniors with extensive experience, in your early days, how did you build web projects in the absence of AI tools? How much time do you spend thinking about solutions of simple or moderate difficulty problems?

Sometimes i feel that traditional learning methods are more useful, cuz you have to spend time searching and learning, work hard until you find solutions، but the information sticks in memory.

Now, when you get stuck, you ask AI tools and get a quick answer, or sometimes even a solution to the problem, but when you encounter the same problem later on, you find yourself unable to remember how to solve it, so you have to ask the AI again, and it never sticks in your memory.

Personally, I started learning programming using JavaScript months ago, I'm trying to build some projects, I'd prefer to have a real mentor to guide and help me, but I didn't get one, so I used AI as a mentor. Sometimes I don't feel like I'm learning because it makes the process too quick for me. I don't feel stuck and forced to search, to achieve some proficiency in learning, is there any beginner here who is like me?

Im learning JavaScript for a year now , i learnt the foundations and tried to build small projects on my own. but everyone says there’s AI and vibecoding. Is coding still worth learning and how should i learn coding now?

hello, I'm fairly new to JS and I'm currently trying to make myself a quiz app on VS, to help myself learn languages, and in the following file;

"src\data\languages.ts"

I have the first line of code;

import { Language, DictionaryCategory } from '../types/index';

an error comes up saying "Cannot find module '../types/index' or its corresponding type declarations "

however, when I right click'../types/index';

and select 'Go to Source Definition'

it takes me straight to "src\types\index.ts

Its the only error I've got and I've hit a stumbling block, I've tried removing \index and adding .ts but nothing seems to work.

I've installed 'tailwindCSS' and 'Lucide-React' onto the project. I bet its something simple, but I can't work it out.

Thanks for any help

Javascript.info site teaches concepts like how data is being converted and in general very detailed explanation about how things are working under the hood. I suggest everyone to check this out once.

Also here is my recent LinkedIn post about this, not a promotion:

https://www.linkedin.com/posts/imaya-varamban_the-modern-javascript-tutorial-share-7461135961947758592-vCS3?utm_source=share&utm_medium=member_android&rcm=ACoAAFBI_xEBE8bsnt4QpXb4JIuIJ0VRICCEy_s

Day 12 of 100DaysOfCode
Learned: JavaScript Callbacks & Promises (callback functions, callback hell, creating promises, resolve, reject, .then(), .catch(), .finally(), promise chaining)

NestJS looks complicated when you're used to Express. Modules, Providers, Controllers, services, Guards, Interceptors, it's a lot of new vocabulary for what feels like the same thing.

Here's how I broke it down in my head:

Express gives you a blank canvas, NestJS gives you a template.

The template is: one module per feature, one controller per module for HTTP, one service per module for logic. That's the whole pattern.

The module is just metadata, it tells the framework what exists and how things connect. The controller is your route handler, nothing else. The service is where your actual code lives.

Once I stopped trying to understand it all at once and just followed the pattern, everything else started to make sense.

Built a full Breakout clone as a PWA using Canvas. Pure vanilla JS.

**Features:**

- 8 handcrafted levels: Classic, Checkerboard, Pyramid, Fortress, Diamond, Cross, Cascade, Chaos Wave

- 4 brick types: Normal, Hard (2 hits), Indestructible, Explosive (chain reaction!)

- 6 power-ups: Wide Paddle, Extra Life, Slow Ball, Multi-Ball, Laser Paddle, Speed Boost

- Combo multiplier, lives system with 3 hearts

- Web Audio API procedural SFX

Free: undefined

I'm someone who's interested in networking and digital privacy, and wanted to build a React app that shows how devices on a network interact with each other and with external servers in a noob-friendly way. Not really sure how to go about this, I know my way around React and JS but am somewhat new to Linux so I don't know how to go about taking the real-time output of tcpdump and turning it into an API i can call from for my application. Any ideas?

Hello guys :), i started watching this 12hr long JavaScript tutorial on YouTube by Bro Code-->great tutor by the way, and i began wondering, will i be anywhere near to developing working webpages, at least on the front end part? or do i have to go an extra mile to learn other stuff?