Update to Homework Tracker Project

#webdev #javascript #beginners

Introduction:

Hello there reader! Before I start this blog I must let you know that this is based on an added function to my previous blog called "Homework Tracker Project"

About:

As a part of my assessment for my project, this update was requested from a live coding session to test my knowledge and skills of JavaScript. So aside from talking about the code I added, I will also talk about some of the mistakes I was making and conclude on how to improve for future live coding sessions.

Added function to Homework Tracker Project Code:

Here is the challenge that was posed to me, I will provide it in bullet points:

Add a button to each HW card with the text “priority” on it and the word “NO” as its default value.
When the button is clicked the word should switch to “yes”:
“Priority: NO” when clicked changed to “Priority: YES”

To start off, I needed to add a button to the function that creates my cards, here is the code I used to add the button which was then added to the div variable containing the elements of the card:

//This variable holds the decision of default of "NO"

   let decision = 'NO'

//Create button and give its inner text of decision

   const priorityButton = document.createElement('button')
   priorityButton.innerText = `Priority: ${decision}`

So from the above code, I first created a declared a 'decision' variable and assigned it with the default value of 'NO'. I then created my button to show assignment priority and called it 'priorityButton'. I then set the inner text of the button to an interpolation string: Priority: ${decision}. This image shows how the card looks like after the button is added:

Now that we have the button on the card, the last task is to the priority from 'NO' to 'YES' and vice-versa. Here is the code that does that:

/*Create an event listener for the button and pass an anonymous function that changes the decision when the button is clicked.*/

priorityButton.addEventListener('click', () => {
 if(decision === 'NO'){
   decision = 'YES'
 }else{
   decision = 'NO'
 }
priorityButton.innerText = `Priority: ${decision}`
})

What I did first was add an event listener to the priority button. The type of event is a 'click' event, the first parameter and an anonymous function, the second parameter, which will change 'NO' to 'YES' and vice versa when clicked. To make the change I implemented an if...else statement to the 'decision' variable I declared earlier. The statement says that if the 'decision' variable has a value of 'NO' then its value is reassigned to 'YES', otherwise the value of 'decision' is changed to 'NO'. Here is a picture of the button showing the Priority changed to 'YES":

Finally we give the the inner text of the button a string interpolation of Priority: ${decision} so that the value can be changed when the button is clicked.

Common Live Coding Mistakes:

I was able to complete the first part with ease and at first the challenge was to just change the decision to 'YES'. Then the second portion took me a while to figure out. A mistake I was making was what to set the condition to: Priority: ${decision}. This was not making any changes to the button at all. Another mistake was confusing = assigning operator with strict equality comparison operator ===. I made this confusion with both the condition and the block of code being executed in the if...else statement. I also had trouble understanding the order in which the code should be written. I also struggled with what to do which led me to get nervous as well as panic. When this happened, I forgot to stay calm and think about the possible mistakes in my code or structure.

Conclusion:

At the end I figured out how to change the value of the button from 'NO' to 'YES' and vice versa. Based on my mistakes, I will work on staying calm and not trying to do random things to my code and hoping that it fixes the issues. I should also refer to the console and carefully read the mistakes being shown and console log certain aspects of the code to get a better understanding of what may be a possible mistake or if I am on the right track. Thank you for reading this blog and hope you learn from my mistakes as a beginner. Have a great day!

DEV Community