Commit3 //JavaScript Fundamentals [Let & Const]

Picture of me jam reffing from a roller derby game in early 2023.

I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above.
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!

Let & Const Intro Video

SCOPE - the context that decides which variables are visible to different parts of your code
CONTEXT - the place your code evaluates and executes, like inside an if statement or function

1. Global Scope - variables are available for the whole program
2. Function Scope - function is within the curly brace and variables defined within the function are scoped to that function only
3. Block Scope - like function scope, the curly braces define the block scope, like an if statement or loops

Basically, we are doing away with using the VAR keyword, but we will still use "variables" they will just be called LET and CONST now.
LET - keyword used to define variables with block scope
CONST - keyword used to define a variable with block scope

This will help us reducing errors as our code expands.

Scope, Input, & Creating Elements

How do we determine when do use LET versus CONST?

• CONST will be used basically 95% of the time
• LET will be used inside code blocks like loops, if/else if statements
• LET will be used when you may want to reassign the value of the variable

GitHub Repo for Let & Const

GATHER INPUT & CREATE ELEMENTS
This is the part I'm excited for because in my mind all along I've wanted to be able to make the data more malleable or user-input friendly. Having previously worked with databases this is what makes sense to me.

TOOLS: value, createElement(), append(), querySelectorAll()

This one was a lot of fun!

GitHub Repo for Input & Creating Elements

Practice Quiz: Scope

The question I struggled with was the final one where I had to fill in the blank.

addPetButton.addEventListener("click", function () {
  const pet = petInput.
value
;
  if (pet !== "") {
    addToList(pet);

updatePetCount
//I'm not sure how I would have known this answer
();
  }
});

const addToList = function (pet) {
  const listItem = document.
createElement
("li");
  listItem.innerText = pet;
  petList.
append
(listItem);
};

const updatePetCount = function () {

const
//this one I just wasn't paying attn and typed in let instead  
 pets = document.
querySelectorAll
(".pet-list li");
  petCount.innerText = pets.length;
};

If you have any insight on the updatePetCount please let me know!

Assemble a Potluck Guest List

There were several points where I got stuck on this and needed to refer to the solution code, but I felt good about the portions that I was able to write on my own without reference. The last aspect was the instruction of saying to add the "hide" class and I guess the classList is just not something I'm fully knowledgeable on. Another reason I want to go back and redo the first half of my JavaScript classes.

I have a headache during this lesson and my brain feels kind of like a sloppy joe at the moment, so to some extent I'm happy I was able to do anything in this state.

GitHub Repo for Assemble Potluck Guest List

Assign A Potluck Dish

Persevering through swamp brain into the next lesson. I got most of it done on my own. I did refer to the solution code a couple times, but really it ended up being some misplaced {} braces. Fixed those, but the assignments still aren't going out properly. I've submitted my code to a TA to see if they can point out my flaw.

So I was just missing the "li" in this line of code:

  const allGuests = document.querySelectorAll(".guest-list li");

This made it so it was assigning a dish to the entire guest list instead of each individual person.

GitHub Repo for Assign a Potluck Dish

Obligatory "Nice." tweet for my GitHub contributions number.

Practice Exercises: Scope

Exercise #1
I'm having a hard time understand the instructions of what to accomplish. So I am definitely referring to the solution code a lot. I think there's a gap for me between the complete hand-holding of a code building process to instructions being more of a normal request. Or maybe I'm not quite grasping the concepts still.

GitHub Repo for Scope Practice Exercises 1

Exercise #2
This exercise comes with a code along video, so I'm going to take advantage of that since my brain doesn't seem to be fully picking up on these instructions this week.

GitHub Repo for Scope Practice Exercises 2

Exercise #3
Another code along video! This is nice. Time to wrap up this module. Oh actually, it looks like it's practice at debugging, so I'm going to try to see if I can diagnose the issues without the video first. I'm definitely not focused or tuned in today. Most of this was formatting and typos. Normally something I'm good at identifying.

GitHub Repo for Scope Practice Exercises 3

Well that's it for Let, Const, and Scope! I feel like I've learned a lot, but it was a really hard week.

Next week I'm returning to working out a few times a week, so I hope I can keep up the work of doing this several hours a day along with continuing my job search.

Thanks for checking out my work! If you have any thoughts or advice I'd love to hear it.

<3