Day 17 of 100days of code

It's almost an hour until the end of the day, and I find myself documenting my learning journey, albeit amid frustrating electricity issues. 😓😓

Despite the challenges, I made a simple bill calculator, applying the knowledge I've acquired from previous studies. Can't delve into the nitty-gritty details, but I'll provide a summary of how I completed the task.

Bill calculator

This is how the Bill Calculator looks, resembling the provided image below. Breaking it down, there's a section for the bill amount, feedback from the user and their friend, and a display of the total amount, including tips. I'll add some CSS to this in a bit. 👇👇👇

Let's look at how the BillCalculator is set up. It features a label and an input field for entering the bill amount. Following that, there's a section where you can provide feedback. Depending on your choice, a specific percentage of tip is added to the bill. The parts for user and friend feedback resemble each other, so I created a reusable component named SelectPercentage. This component accepts a "children" prop, among others, making it adaptable for various uses. Lastly, the Total component displays the calculated bill.👇👇

Bill component:

I began by creating a Bill component, where I included both the label and input elements. Subsequently, I followed the three steps for managing state. First, I created the state variable in the parent component. While it's possible to create the state within the Bill component, understanding the overall structure reveals that we would still be lifting state to a common ancestor so, I created this state variable in a common parent component (BillCalculator) and passed the required information to Bill as needed. Line 13 in the image above represents the first step 👆👆👆

In the second step, I used the state variable in the Bill component's JSX after destructuring the necessary props and assigned it as the value for the input. Finally, in the third step, I used an onChange event handler to listen for a change event and modify the bill value accordingly and also used the number function here.👇👇

That's pretty much it for the bill component.👆👆

SelectPercentage component:

Next let's shift focus to the SelectPercentage component

It seems we need two states, one for each friend. So, here we go again—creating these two state variables: percentage1 and percentage2. We also established these in the common ancestor, BillCalculator (refer to the BillCalculator component). Let's pause for a moment and work on creating the reusable SelectPercentage component, utilizing the props, which implies using the state variable in our JSX as a second step.Also refer to the BillCalculator component to see props passed

Remember, a children prop is everything written inside the opening and closing tags of the component. Now that I've successfully added the children prop, let's proceed to use the state variables in my JSX as props for the component. For the first SelectPercentage component, percentage is set as percentage1, and for the second SelectPercentage component, percentage is set as percentage2. I then use these percentages as values for the select element in the SelectPercentage component.

Moving on, I need to listen for a change event in the select element. To handle this, I added the onchange prop and passed setPercentage1 for the first SelectPercentage component and setPercentage2 for the second. It looks like this. Afterward, I implement this in the select element, listening for a change event. It's important to note that each option already has a value, and I use the Number function to convert the string value to a number. So, when any of the options is clicked, the value is used and becomes the percentage in this case

Total Component:

For this we use the concept of derived state. Line 18 and passed some props at line 35👇👇