“Gymwolf” is my second team project by cloning the user interface and functionalities of a “gymwolf.com”

Creating a website with new team members, learning more and practising with it is exciting. We work remotely on this project.

Our team name is ‘Potassium’ which consists of 3 team members:

  • Arshad Ali
  • Chirag Agarwal
  • Sahil Sachdev
Cloned Home page of gymwolf.com

Following pages of the website are cloned:

  • Homepage
  • ‘Progress’ Page
  • Calculator Page
  • Exercise and Plane Page
  • Main Page Page
  • and, 4 Category Pages (In Progress page and main Page dynamically using JavaScript)

Firstly Let me tell you about my work in this project, I have created Progress page, Calculator page, Exercise and Plane page.

Progress Page: With embedded graph functionality.

  • Implemented Graph Using JavaScript, Html and CSS.
  • The graph will show the data by getting data from localStorage of the browser, Which is created in exercise and plane page. I used the javascript Html template to make this page dynamically.
  • I learn many new things by creating this graph animation and also in CSS. Javascript functionality is by clicking on the button, the page will change dynamically.
Cloned Progress page of gymwolf.com

Calculator Page:

  • I used the CSS hover effect of this page to show the detail of every item by hovering on it.
  • Javascript functionality is by clicking on the button, the page will change dynamically.
Cloned Calculator page of gymwolf.com

Exercise and Plane Page:

  • Implemented Data add delete Using JavaScript
  • In this page, the user will add and delete their exercise planes and planes will display in My exercise. This data will be stored in localStorage of the browser, according to this data “Progress Page” graph will display you the progress of your exercise.

Homepage Page: with embidded video

Created by Sahil Sachdev.

Features:

  • Implemented login PopUp Using JavaScript
Clone home page of gymwolf.com

Main Page Page Page:

Created by Chirag Agarwal

  • Implemented Data add Using JavaScript, by clicking on the new workout button.
  • If you click on a new workout button input popup will generating there you will add your new workout plane.
  • This page shows the list of the user by clicking on the user button.
The cloned main page of gymwolf.com

Technologies Used:

  • HTML
  • CSS
  • Javascript

Coding Style: Understanding the coding style of other team member was a challenge although we set some rules before starting the project with practice and time we got comfortable with each other's coding style.

Hope you liked the user interface, there is always room for improvement and we sure will improve this project further.

Full-Stack Developer