Hello there 👋, I'm Abhinav Raj, a passionate trainee web developer who loves to share his tech ideas, knowledge and works with the community.

Git Link👇

The Idea

Since I am pursuing a Full Stack Web Development course from Masai School, I was given a Project that was to clone a fitness website. Since this is Corona time and we need to stay healthy, it was a pretty good project to work upon. I was given a team of three members including me and the task was to clone the pixel perfect clone of the website.Let's look at how we designed it 👇

What this WebSite is all about?

MyNetDiary is basically a website where the user can track his/her diet plans ,exercise, how much calories he/she is taking, fats, protein intake from every diet ,carbs and a lot more to stay fit. MyNetDiary helps the user to loose or gain weight according to what they want. this information is taken from the Signup page where the page takes all the details of user. 👇

Team Mates

1. Abhinav Raj
2. Sohail Shaikh
3. Bharath Reddy

The team that i worked with was a great team.They Put tremendous efforts to make it happen. This website was build in just Three days which to be honest was a difficult task, but thanks to my team members Sohail Shaikh & Bharath Reddy who made it possible to complete this project .

Tech Stack

• HTML
• CSS
• JavaScript

External sources were also used for Ajax, J Query and CanvasJS from Cloudflare CDN 👇

Coding

First of all, let's have a look at the file tree 👇 It consists of common Frontend components like

homepage.html, signin.css and food.js

Code for Home Page

Here goes the code for our home page 👇

How the Home Page looks👇

Code for DashBoard Page

Here goes the code for our DashBoard page 👇

How the DashBoard page looks👇

Code for Food Page

Here goes the code for our Food page 👇

How the Food Page looks👇

Now, Food page in this project holds a special place as it keeps the count of

• Calories
• Fats
• Protein
• Carbs

which helps the user to maintain their diet plan and stay in the routine.

Don't worry, I am not gonna overwhelm you with all the codes. The above codes are just an example of our work.

That's It, we have just developed our website 🚀

Endings

Hope our work has impressed you all. Looking forward to make more projects like this. Its just a start.

On that note Wishing you all a Very Happy and Prosperous New Year