Initial commit to CodeNewbie community - JS fundamentals [Keydown & Change Events]

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!

Hi there! I'm beginning my coding journey again.
Learn more about me here: Twixmixy.com

I am beginning to write part way through my JS journey. I've already completed my CSS and HTML courses. I figure it's best to begin writing here than not to begin at all!

Module 7 - Function Powered Modal
Learning how to use keydown functions to open and close a modal.

I'm really struggling with interpreting the instructions given at Skillcrush. It's much easier for me to look at the code and interpret what is going on.

For example, with the lesson above they gave us the code on how to close the modal with a keydown function. However, I took that and added a bonus keydown function which opens the modal when you hit "Enter".

JS has been very difficult for me to understand through these lessons. I think I will really need to dive into some other free JS coding courses to aid my learning process.

GitHub Repo for Function Powered Modal

Module 7 - Build a Subscription Calculator
I am going to try implementing some new study habits with this lesson from the beginning. To initiate, I'm writing about my experience and what I'm learning. Then, I'm having a read-aloud program read me the lesson. Then, I will fork the starter code and attempt to go through the prompts. I may need to reflect back on previous projects or even watch the intro video again. The main objective in my study process right now is to stop rushing myself. I went through HTML and CSS so quickly I feel like I need to keep up the same pace for some reason.

I'm really struggling in this lesson. I'm trying to not look at the solution code and to keep researching and re-reading to try and figure it out on my own. So far I am not successful. I may just have to use the solution code, power through, and then take additional JS courses outside of Skillcrush to solidify these skills. I'm just not understanding the instructions being made in parts of these lessons. Currently waiting to hear from the teacher assistants, but I'm impatient and would prefer to keep pushing ahead.

Here is what I am struggling with:
In the body of the callback function, reassign the value of subType to the value of the target: subType = e.target.value. The target of the event is the option element, and you’re grabbing its value (look at the HTML for more info).
AND
Create a new event listener for the subDurationElement variable that will listen for a change event. Reassign the value of subDuration to the target value. To ensure the value is a number data type, wrap the reassigned value with Number().

1. I'm not sure how to grab the value (yes, I know how to find it in the HTML), but I'm not sure what JS code I am writing to "grab" this.
2. Reassign the value to the target value. I understand what we're trying to accomplish here, but I don't know the code to write.

So, now it's probably time to look at the solution code to determine what I'm not understanding.

Here is my code so far:

var subTypeElement = document.querySelector("#subscription");
var subDurationElement = document.querySelector("#months");
var result = document.querySelector(".result");
var subType = "basic";
var subDuration = Number(1);

subTypeElement.addEventListener("change", function (e) {
  subType = e.target.value;
});

console.log(subType);

subDurationElement.addEventListener("change", function () {
  subDuration = Number();
});
console.log(subDuration);

Here is the solution code up until this point:

var subTypeElement = document.querySelector("#subscription");
var subDurationElement = document.querySelector("#months");
var result = document.querySelector(".result");
var subType = "basic";
var subDuration = 1;

subTypeElement.addEventListener("change", function (e) {
  subType = e.target.value;
  // console.log(subType);
  updateSubscriptionDiv();
});

subDurationElement.addEventListener("change", function (e) {
  subDuration = Number(e.target.value);
  // console.log(subDuration);
  updateSubscriptionDiv();
});

OK. So... I was pretty close. I am not sure how I would have known to write "updateSubscriptionDiv();". Also I did not include the "e.target.value" in the number for subDuration. The last aspect was the var subDuration, I made it a strict Number. Not sure if that would throw anything off, but I removed that.

That probably comes later in the lesson, so there must be something else the lesson was requesting me to write. Reviewing the remainder of the code... I don't see anything obvious that would be based off the prompts.

Looks like I'm not missing much of anything and will potentially have to lean on the solution code for these lessons. I'll keep powering through!

GitHub Repo for Build A Subscription Calculator

Module 7 - Practice Exercises: Keydown & Change Events
Yesterday was a real struggle. So now time to dive into the practice exercises. I'm going to continue using the solution code, but I'll try to get as far as I can before I resort to using it.

The first two exercises are to change the numbers 1, 2, and 3 to emojis with keydown events, and then change them back to numbers with a click event. The course provided a code-along video, so after I did all of my var's I went ahead and watched the video. I was beginning to get the correct if-statement code, but I wasn't fully sure how to type it out properly.

For the click function I got stuck on how to properly name it. With keyboard event listeners you write it to the document. With mouse function event listeners you have to write it to the var property. This is what I ended up with:

var box1 = document.querySelector(".box-1");
var box2 = document.querySelector(".box-2");
var box3 = document.querySelector(".box-3");

document.addEventListener("keydown", function (e) {
  // console.log(e.key);
   var key = e.key;
  if (e.key === "1") {
    box1.innerText = "🤖";
  } else if (e.key === "2") {
    box2.innerText = "👽";
  } else if (e.key === "3") {
    box3.innerText = "🍄";
  }
});

var clear = document.querySelector("button");

clear.addEventListener("click", function () {
  box1.innerText = "1";
  box2.innerText = "2";
  box3.innerText = "3";
});

I think I am beginning to get it. One more practice to go in this module!

GitHub Repo for Practice Exercises: Keydown & Change Events

Mood Ring
I'm still not really understanding from the instructions what I should be accomplishing. Not sure if I'm just struggling to understand what's written or if it's written in a way that's left open to interpretation.

What I wasn't understanding is that they wanted me to target the body (background). Also when comparing the request to the JS guide it didn't seem to expect me to list my e.target.value as a var. Not sure why/why not.

Here is the final code:

var moodOption = document.querySelector("#moods");
var body = document.querySelector("body");

moodOption.addEventListener("change", function (e) {
  var mood = e.target.value;
  if (mood === "happy") {
    body.classList.remove("sad");
    body.classList.remove("passionate");
    body.classList.add("happy");
  } else if (mood === "sad") {
    body.classList.remove("happy");
    body.classList.remove("passionate");
    body.classList.add("sad");
  } else if (mood === "passionate") {
    body.classList.remove("happy");
    body.classList.remove("sad");
    body.classList.add("passionate");
  }
});

I also didn't immediately pick up on the fact that we were sourcing our changes from the CSS. Maybe I'm just a bit dense and need it spelled out more for me right now.

GitHub Repo for Mood Ring

Well, that's all for Keydown & Change Events. Next entry we will be moving on to Arrays & Loops.

Thoughts? feedback? please feel free to comment here to @ me on twitter.