Update to Homework Tracker Project
Tags: webdev, javascript, beginners
Published: 2023-01-11 01:23:43

## 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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vuie9bovqfn75x5cc30s.png)

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": 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9cdr5jvvmo9u0udewrh.png)

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!