[DAY 36-38] I Built An Ecommerce Webpage
Hi everyone! Welcome back to another blog where I document the things I learned in web development. I do this because it helps retain the information and concepts as it is some sort of an active recall.
On days 36-38, I built an ecommerce webpage, a program that checks if an inputted number is a valid telephone number, and a leetcode challenge.
Let me start with the leetcode challenge that I solved: "shuffle the array", the problem requires you to rearrange the array based on the given description. After quickly coming up with a solution, it took me a while to come up with the code. Finally, I was able to solve it.
For the ecommerce webpage and the telephone number validator, I learned OOP, or Object Oriented Programming, where developers use objects and classes to structure their code. I also learned how to define and use classes by being able to create class instances and implement methods for data manipulation.
In the ecommerce webpage, the program works by choosing which item from the webpage to add to your cart. In the cart menu, it shows the number of items ordered and the total price to be paid.
While making this project, I was able to use the class keyword to define a set of properties and methods and create new objects with those properties and methods.
A constructor method is called when a new instance of the class is created (e.g. constructor() {logic;}).
Adding a method in a class in javascript using the syntax: myMethod() {logic;}
From my understanding, the class keyword is used as a blueprint for creating objects, similar to how a blueprint is used to build houses.
The methods and properties in a class serve as its functions, kind of like determining the number of rooms and the types of windows to be used when building a house.
The constructor method acts as the base foundation of the class, similar to how we build foundations before constructing the house itself. As soon as a new instance of the class is created, the constructor method gets called automatically to initialize the object’s properties.
Anyways, I’m done with the house analogy, moving on.
In the telephone number validator, the program works by inputting a set of numbers and pressing the check button to see if the input is a valid telephone number.
While making the project, my first solution is to:
Check if the inputted number is 10 digits or 11 digits (if there's a country code of 1 at the beginning).
Consider the hyphens, whitespaces, and parenthesis in other telephone number formats.
Validate the inputted number upon pressing the check button.
However, halfway through making the code, I realized that the solution is not ideal since it’s taking me so long to finish writing the code, and so I thought of other ways to solve the problem.
Finally, I thought of using arrays with regex to check if the input value meets the conditions of the regex declared in the said array. Now, the code works and is ideal because it is clean, easy to understand, and is drastically short compared to the first solution.
Anyways, that’s all for now, more updates in my next blog! See you there!