Hey there! My fellow Techie's✌, I'm Manish Raghavan, a passionate full-Stack web developer who loves to share a story about how I made a website clone in 3 days for Masai School👈 project week with my peers Ranjith and Rabia.
For the next few minutes, I will walk you through the clone I have developed with my team
Sparkpeople.com offers nutrition advice, health-and-fitness tools, a highly engaged and supportive community. It also has some pages for tracking the food calories we eat and the weight we need to reduce. In simple words, it's a daily tracker for our personal use.
Problem Statement✍
To develop a pixel-perfect clone of Sparkpeople.com
Tech Stack
Html ✔
CSS ✔
JavaScript ✔
Cool enough to develop and UI of the website.
Coding 👨💻
The file tree consists of common Frontend components like index.html, style.css, and index.js
root/
├── index.html
├── style.css
└── index.js
Elucidation 💻
As a first step, I have visualized the website assigned to my team in which we have split the works between us. As follows are the functionalities used in the code.
** LocalStorage** -
As the website uses lot of user date we had to do with backend. As for now we was not thought the backend We planned to use the LocalStorage to store the data and retrieve the data from the local storage.Use of value -
We also needed so many data that user to enter so that it will calculate and give the user the required output such as bmi, daily food calories the user take.
So we made many input fields which stores in local storage and from there we are getting the data and giving the output.Spin Wheel functionalities - One of the page required the spin wheel, for that I have used the chart functions
We also used some of the css properties like hover, model block, etc..,to make the static page look good.
Snapshots of my art of code 🎞
Wrapping Up
Hope you enjoyed this article. As an aspiring developer I have learned and enjoyed on the process of making the website. I hope so will continue to post more blog. 🙂
Top comments (0)