Web Dev Streaks Day- 32 (Milestone 5: Integrate Javascript)
Module 27: Revisit Javascript and Work on Shopping Cart
1. Shopping Cart Increase Case Count
Clone the following GitHub repository and open it via VS Code.
Now, Add the “app.js” file using the <script> tag in the index.html file. Open the file using Live Server. Look at the file closely. Now, what you have to do is “the mobile case quantity will be increased while you’ll be clicking on the plus button”.
So, to do that you have to add an event listener and then write a function where the input value will be extracted, and then after incrementing 1 the value will be reassigned in the input field.
Now, click on the plus button and you’ll see that the quantity will be incrementing.
2. Shopping Cart Handle Decrease & Update Price
It’s time to make the minus button work. Exactly like before add an event handler for the minus button. The simple difference is that you’ve to deduct 1 from the existing quantity this time with every click on the minus button. You can solve it like this,
As you can see that the previous event and this one are almost similar, so why are you repeating code instead of writing function? Write a function “updateQuantityAndPrice(isAdding)” for both of them and just call where necessary.
You’ll encounter one problem of getting the minus quantity while clicking on the minus button beyond zero (0). To solve this one you have to add a condition inside the function to prevent it from going down beyond zero.
Also, one more thing, you have to update the price with the case quantity. Do that by getting that element by Id and then multiply it by the single quantity price and set it to the innerText of that element.
3. Calculate phone cost using the same shared function
Look closely and you’ll find out that the case with the phone quantity updating is similar. So, you can use the function after a little tweaking for the phone-plus, phone-minus too. Just remember that you’ve to update the phone total price too. In that case, take the price parameter because the price of the phone and phone case differs. And you can generate some idea that how can you pass the Id parameter for both of the phone and phone case generating some idea about common string between them.
Now call this function for both of the phone and phone cases and see if the buttons are working fine or not. If you face any problem just try to debug it calmly.
4. Get All Product Sub Total Cost, Tax & Grand Total
The last thing you’ve to do is to calculate the subtotal cost of the products, calculating the tax, and finally calculate the grand total by putting them together.
In this case, you can write a function “calculateTotal()” to calculate the total and while writing the function body you’ll need the product number to calculate the price of each individual product eventually. For that, you can write one more function “getInputValue(product)” to get the product number. Just build the logic for them by yourself.
At last, you have to call that function“calculateTotal()” for all of the four event-Listeners. But you can be a little bit tricky if you’re smart enough. As you’re calling the common function “updateProductNumber(product, price, isIncreasing)” for all of them. You can easily can the “calculateTotal()” function at the last of this function. In that way, the calculation will be done for all of the four event-Listeners.
5. Pin Matcher Overview, Generate Pin & Display It
Download the following GitHub repository and open it via VS Code.
Open the index.html with Live Server and take a look at it. Here, the task is a pin will be generated while using will click on the button Generate Pin and then he/she has to input the same pin and click Submit. A different message will be displayed depending on the pin match or mismatch.
Just for the idea, you can generate a random number using the Math.random() function. To get the four-digit pin you have to multiply it by 10000 and round it using Math.round(). Then, you’ll get the four-digit in or random number whatever you say. [Note: Sometimes you may get less than four-digit, just think about how to handle this type of situation.]
Now, write a function to get the four-digit pin and set the pin in the input field to display.
That’s all you are good to go in the beginning.
6. Use Event Bubble to Create Calculator & Clear
Now, you will create a calculator which will be used to guess the generated pin.
After designing the keypad the first thing that’ll come into your mind is, to add an event listener for each of the buttons. But that’s not professional. You can use the event bubble to catch the event because all the keypad events will be delegated to its parent. So, if you add an event listener to the parent of the keypad it’ll be reached to all of the keys, and eventually, you can easily catch that event using “event.target”. Later you can extract the innerText from there and use it.
One problem will arise now. The “<” and “C” will also be added to the input field. To avoid this you have to check “isNaN()” using a condition. Inside this, you can also check one more condition for checking the “C” button and set the input field empty for that. otherwise, just add the event.target.innerText with the previous input field value to get the numbers one after another. That’ll be all for now.
7. Verify Match & Use Function to Reduce Duplicate
The final task is to add an event handler for the Submit button which will check the generated pin with the calculated pin. It’s a very easy task. Just make the message display to none in the CSS file and then extract the generated pin and calculated pin in the javascript file.
Now use an “if-else statement” to check if they get matched or not. If they then make the success message display to block and error message to none Else do the vice versa.
