Hey everyone, I created this MindWeb Board with a collection, of all the videos, tutorials, articles and websites I personally used when I was learning JavaScript. I hope it will help some of you. Does anyone have any suggestions about resources I may have missed?

Here we are at Week 20. Week 20's focus will be Make a Game.

It will work like this:

• Monday: Announce focus (eg, make a game)

• Build throughout the week... Two rules: 1) must use javascript 2) must create some kind of game (ie, something where a user can interact with a program for points or entertainment or whatever).

• Friday: Post demos/projects in this thread (can begin reviewing immediately); first line of an entry should be ENTRY and it should be a top level comment (ie, don't put your entry in a reply)

• Sat and Sun: Review projects/figure out focus for next week

GENERAL GUIDELINES FOR FEEDBACK:

• Be nice!! ALL KNOWLEDGE/SKILL LEVELS ARE WELCOME AND ENCOURAGED TO PARTICIPATE.

• If you don't want feedback, if it makes you uncomfortable or you're just not interested, simply say so... Others, please be respectful of this. Conversely, if you do want feedback, try to be specific on which aspects... even if you just say "all/everything.

But that's about it... Have fun! :) Feel free to ask questions and discuss throughout the week!

Here we are at Week 19. Week 19's focus will be Symbols.

Reference material: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol

It will work like this:

• Monday: Announce focus (eg, Symbols)

• Build throughout the week... Two rules: 1) must use javascript 2) must provide at least one example of using the symbol data type.

• Friday: Post demos/projects in this thread (can begin reviewing immediately); first line of an entry should be ENTRY and it should be a top level comment (ie, don't put your entry in a reply)

• Sat and Sun: Review projects/figure out focus for next week

GENERAL GUIDELINES FOR FEEDBACK:

• Be nice!! ALL KNOWLEDGE/SKILL LEVELS ARE WELCOME AND ENCOURAGED TO PARTICIPATE.

• If you don't want feedback, if it makes you uncomfortable or you're just not interested, simply say so... Others, please be respectful of this. Conversely, if you do want feedback, try to be specific on which aspects... even if you just say "all/everything.

But that's about it... Have fun! :) Feel free to ask questions and discuss throughout the week!

So here we are at Week 16. Week 16's focus will be object creation.

It will work like this:

• Monday: Announce focus (eg, object creation)

• Build throughout the week... Two rules: 1) must use javascript 2) must provide at least one example of creating an object.

• Friday: Post demos/projects in this thread (can begin reviewing immediately); first line of an entry should be ENTRY and it should be a top level comment (ie, don't put your entry in a reply)

• Sat and Sun: Review projects/figure out focus for next week

GENERAL GUIDELINES FOR FEEDBACK:

• Be nice!! ALL KNOWLEDGE/SKILL LEVELS ARE WELCOME AND ENCOURAGED TO PARTICIPATE.

• If you don't want feedback, if it makes you uncomfortable or you're just not interested, simply say so... Others, please be respectful of this. Conversely, if you do want feedback, try to be specific on which aspects... even if you just say "all/everything.

But that's about it... Have fun! :) Feel free to ask questions and discuss throughout the week!

I am trying to create a order form and validate it with JavaScript. Nothing happens when I hit the submit button. It is like the js page isnt communicating with the html. Any suggestions?

  <form id="orderForm" action="" onsubmit="validateContactForm()">
        <fieldset>
          <legend>Customer Information</legend>		
		  <table summary="Customer Information">
		    <tr>
              <td><label for="firstName">First name:</label></td>
			  <td><input type="text" name="firstName"/></td>
              <td><label for="lastName">Last name:   </label></td>              
			   <td><input type="text" name="lastName"/></td>
 			</tr>  
			 <tr>
			  <td><label for="email">E-mail address:</label></td>
			  <td><input id="email" type="text" name="email"/></td>
			  <td><label for="socialSecurityNumber">Social Security Number: </label>
			  <td><input type=" submit" name="submit" value=""/></td>
			 </tr>
            <tr>
			  <td><label for="address">Address:</label></td>
			  <td><input id="address" type="textarea" name="address"/></td>
			  <td><label for="city">City:</label></td>
			  <td><input id="city"type="text" name="city"/></td>
			 </tr>
 			<tr>
			  <td><label for="state">State:</label></td>
			  <td><input id="state" type="text" name="state"/></td>
			  <td><label for="zipCode">Zip Code:</label></td>
			  <td><input id="zipCode" type="text" name="zipCode"/></td>
			 </tr>  
          </table>
        </fieldset>
		 <fieldset>
		  <legend>Products</legend>
		  <table summary="products">
		    <tr>
			  <td><label for="products">Select Product:</label></td>
			  <td><select>
		            <option id="" name="Noob">Noob</option>
                    <option id=""name="Level-2">Level 2</option>
                    <option id="" name="Level-3">Level 3</option>
                    <option id="" name="Level-4">Level 4</option>
                    <option id="" name="Level-5">Level 5</option>
                  </select></td>
			</tr>
            <tr>
			  <td><label for="quantity">Quantity (between 1 and 5):</label></td>
              <td><input type="number" name="quantity" min="1" max="5"/></td>
          </table>
	    </fieldset>
		<fieldset>
		  <legend>Complete Order</legend>
		  <table summary="Complete Order">
		   <tr>
		    <td><input type="submit" value="Enter Order"/></td>
			<td align="right"><input type="reset" value="Reset Form"/></td>
		   </tr>
		 </table>
   		</fieldset> 

//orders.js

function validateContactForm() { var orderFormObj = document.getElementById("orderForm"); var firstName = orderFormObj.firstName.value; var lastName = orderFormObj.lastName.value; var email = orderFormObj.email.value; var socialSecurityNumber = orderFormObj.socialSecurityNumber.value; var address = orderFormObj.address.value; var city = orderFormObj.city.value; var state = orderFormObj.state.value; var zipCode = orderFormObj.zipCode.value; var everythingOK = true;

if (!validateName(firstName))
{
 alert("Error: Invalid First Name.");
 everythingOK = false;

}
if (!validateName(lastName))
{
    alert("Error: Invalid last name.");
    everythingOK = false;
}

if (!validateSSN(socialSecurityNumber))
{
    alert("Error: Invalid Social number.");
    everythingOK = false;
}

if (!validateEmail(email))
{
    alert("Error: Invalid e-mail address.");
    everythingOK = false;
}

if (everythingOK)
{
    alert("All the information looks good.\nThank you!");
    return true;
}
else
    return false;

} function validateName(name) { var p = name.search(/^{[-'\w\s]+$/);} if (p == 0) return true; else return false; }

function validatePhone(phone) { var p1 = phone.search(/^{\d{3}[-\s]{0,1}\d{3}[-\s]{0,1}\d{4}$/);} var p2 = phone.search(/^{\d{3}[-\s]{0,1}\d{4}$/);} if (p1 == 0 || p2 == 0) return true; else return false; }

function validateEmail(address) { var p = address.search(/^{\w+([.-]?\w+)@\w+([.-]?\w+)(.\w{2,3})$/);} if (p == 0) return true; else return false; }

So here we are at Week 9. Big THANK YOU!!! to all who participated in Week 8 (which can now be found over in the sidebar). Week 9's focus will be Prototypical Inheritance.
 
Background info on Prototypical Inheritance:

"You make prototype objects, and then … make new instances. Objects are mutable in JavaScript, so we can augment the new instances, giving them new fields and methods. These can then act as prototypes for even newer objects. We don't need classes to make lots of similar objects… Objects inherit from objects. What could be more object oriented than that?" - Douglas Crockford

• Object.prototype

• Prototype Chain

• Object.assign() (ES6)

• The two pillars of Javascript

IT WILL WORK LIKE THIS:

• Monday: Announce focus (eg, Prototypical Inheritance)

• Build throughout the week. Two rules: 1) Must use JavaScript 2) Must show at least one example of the uses of Prototypical Inheritance.

• Friday: Post entries/demos/projects in this thread; first line of an entry should be ENTRY in bold, and it should be a top level comment (ie, don't put your entry in a reply)

• Sat and Sun: Review projects/figure out focus for next week

GENERAL GUIDELINES FOR FEEDBACK:

• Be nice!! ALL KNOWLEDGE/SKILL LEVELS ARE WELCOME AND ENCOURAGED TO PARTICIPATE.

• If you don't want feedback, if it makes you uncomfortable or you're just not interested, simply say so... Others, please be respectful of this. Conversely, if you do want feedback, try to be specific on which aspects... even if you just say "all/everything; try to be somewhat specific if possible.
   

That's about it... Have fun! Be creative... or not. :) Feel free to ask questions and discuss throughout the week!

Hey everyone! If you are eager to learn JavaScript, I created a video for you. My beginner friendly video covers the basics of JS.

Part 1 in this series reviews variables, data types, and console.log().

I kept the fluff out so only the important topics are covered. Even if you are experienced, this video will be a good brush up.

Check it out and let me know what you think! Happy learning!! 💡

YT Channel: https://youtube.com/@dylan_the_data_guy?si=1HACMwVohbiZQ4tT

JavaScript Tutorial Pt 1: https://youtu.be/jfbT9kc-mis?si=zdf4Hv3OkFrNThaw

I learned Js in codecademy but I keep forgetting it. I have several questions about it:

1. How do I learn Js?

2. How to practice Js?

3. Best resources to Js

It would be of great help if anyone can guide me!! Thanks

Just watched an awesome video on MERN stack authentication on CyberWolves. The way they explained and presented the concept was so clear and unique, it completely blew me away. Thought I’d share it here so more people can check it out and appreciate the creator’s effort. Highly recommend it for anyone into full-stack development!

Video Link => https://youtu.be/VNZQjabjolU

I'm creating a psych-social science project that requires learning mongodb and/or postgres, and I am rusty with the expres routes and don't know mongodb. DM me if interested. I've already got started but those already joined can only work with me around 6am to 9am PST and I'm still free after 3pm PST

function getCursorPosition(canvas, event) {

const rect = canvas.getBoundingClientRect()

const x = event.clientX - rect.left

const y = event.clientY - rect.top

console.log("x: " + x + " y: " + y)

}

1. Why do we have you subtract clientX by rect.left?

2. Why cant we just console log clientX and clientY?

3. Whats the difference between ClientX/Y and rect./top? Please help

Hello everybody! I spent 2 weeks stuck on a decrypt function (I'm a beginner). I managed to fix it with the help of chatgpt, but can you all help explain to me what made this new code work?

Here's my new code:

function decrypt(encryptedMessage, shiftValue) { let decryptedMessage = ""; let charCount = 0; for (let i = 0; i < encryptedMessage.length; i++) { let char = encryptedMessage[i];

    // Skip random letters added during encryption
    if ((charCount + 1) % 3 === 0) {
        charCount++;
        continue; // Skip this character
    }
    
    if (alphabet.includes(char.toLowerCase())) {
        let index = alphabet.indexOf(char.toLowerCase());
        let shiftedIndex = (index - shiftValue) % alphabet.length;
        if (shiftedIndex < 0) {
            shiftedIndex += alphabet.length;
        }
        decryptedMessage += alphabet[shiftedIndex];
    } else {
        // If not an alphabetic character, just append it to the decrypted message
        decryptedMessage += char;
    }
    charCount++; // Increment character count
}
return decryptedMessage;

}

Here's my old code:

function decrypt (encryptedMessage, shiftValue) { let decryptedMessage = ""; let charCount = 0; for (let i = 0; i < encryptedMessage.length; i++) { // Skip random letters added during encryption// if ((charCount + 1) % 3 === 0) { continue; //Skip this character }

    let char = encryptedMessage[i]
    if (alphabet.includes(char.toLowerCase())) {
        let index = alphabet.indexOf(char.toLowerCase());
        let shiftedIndex = (index - shiftValue) % alphabet.length;
        //Ensure shiftedIndex is positive//
        if (shiftedIndex < 0) {
            shiftedIndex += alphabet.length;
        }
        decryptedMessage += alphabet[shiftedIndex];
        //Skip if not an alphabetic character//
    } 
    else {
         
    }
    charCount++; //Increment character count
}

// Your decryption code here return decryptedMessage; }

The project was a Caesar's cipher. My original code didn't handle the decryption like it should've, and the problem was that the "random letter after every two characters" wasn't executed the same from my encrypt and decrypt. My encrypt was correct, my decrypt wasn't.

What about this new code allowed my decryption to work? Thank you all in advance

Hi, I'm learning JavaScript and this is one of the exercises that I can't get through, I was hopping someone could guide me a bit.

You see I'm leaning Objects, this is what I have to do:

• Add a new property to the pirateProfile
  called pirateName
  and set this to the value of 'Blackbeard'

• Remove the realName
  property.

• Change the value of piecesOf8
  on the treasure
  key to be 8 rather than 7.

• Change the shipName
  property to its new value of Queen Anne's Revenge without changing the orinigal object.

• This is the code given:

function createPirate() {
const pirateProfile = {
        realName: 'Edward Teach',
        shipName: 'La Concorde',
        treasure: {
            gems: 10,
            piecesOf8: 7,
            goldCoins: 150
        }
    };
return pirateProfile;
}
----

I literal tried to find how to mutate a function Object but without luck. And every time I write the way is taught like pirateProfile.pirateName = 'Blackbeard' it gives '✕ ReferenceError: pirateName is not defined '.

I hope you're all doing great. As the title states I am looking for an accountability to study JS for now, will branch out to Full Stack . It doesn't matter if you've just taken your first steps or have been at it for a little while. The important thing is that we can motivate and support each other throughout this learning journey.

🗓️ How We'll Do It: We can decide on a suitable time and frequency to study together—whether it's daily or a few times a week. We can also discuss the topics we plan to cover in advance. Having a study plan will help us stay organized and focused.

❓ What We'll Do Together: Our sessions can include going through online tutorials, working on coding challenges, and building small projects to solidify our understanding. We can also reserve time to discuss any doubts or questions we might have.
Looking forward to connecting with a fellow JavaScript enthusiast! Let's make learning fun and productive together. 💪🌟

If interested drop me a message here in the group or send me a direct message. Feel free to tag anyone you know who might be interested or drop a comment below. :)

P.S. If you're aware of any active groups of Js , Web development on platforms like WhatsApp, Facebook, or other online forums that focus on meaningful discussions rather than just sharing promoted videos, please don't hesitate to share the links here! Let's collaborate and support each other's learning journeys.