project 1: Date counter

How is it going to look? 😊👇👇

The count value updates the date, not the step value. However, the increment and decrement buttons for the count are dependent on the step value. In other words, if the step value is 2, clicking the increment button once increases the count by 2. If the step value is 3 and we want to decrement the count, then clicking the decrement button once decreases it by 3.

If the count is equal to zero, then Today's date is shown instead. 👇

Note 👆👆👆, in the image above, since the step value equals 1, clicking the count increment button increases the count by 1, and the count decrement button also decreases the count by 1. If the step value was 2, then clicking the count increment button once would increment the count by 2, and if clicked twice, the count value would be 4.

So say the count value is 0 and the step value is 2.👇

Then clicking on the decrement button for the count once decreases the count by 2👇

How it was done in three steps:

Remember our three steps of using state in practice?

First is to create state variables like so 👇. The default state variable for the count is zero, and the step is 1 so as to increment and decrement the count by one.

Second, we use it in our JSX, yeah! 💪 Like so, at line 27 and 33. 👇👇

Remember, now we create a function to update the state variable and add the onClick event handler to our JSX. Like so 👇👇

And lastly, since we need to display the date based on the value of the count, I'm going to create a date variable and also a text content that updates the date based on the count value like so at line 20 and 26👇

Project 2 : Toggle Visibility

In this exercise, I am creating a component that toggles the visibility of our date counter when a button is clicked. Expectations:

Initially, the date counter should be hidden
When the button is clicked, the date counter should become visible if it was hidden, and hidden if it was visible
I will use the useState hook to manage the visibility state.
So let's create the button first yeah?.💪

Now, onto our three steps:👇
First, we create a state variable, and in this case, our default variable will be of boolean data type at line 7.
Secondly, we use it in our JSX, specifically on Line 28 👇
Thirdly, we create a function to update the state variable that toggles isOpen and remember we use the setIsOpen at line 21.
Remember, the default value for our state variable isOpen is false, which means that by default, the date counter shouldn't be visible.
Let's attempt to toggle the button to display the text 'Close' when the date counter is visible and show 'Open' when the date counter is closed, at line 29.
Take a look at how it appears now