Hello Everyone, we are a team of 4 members from the Masai School (Web-12 batch) who worked on cloning Adidas official webpage as a part of our second unit construct week, and yes, this is a replicate of the Adidas official webpage which was not developed by the Adidas SDE’s.

The topics which I have implemented in our project from our Unit-2 Curriculum

• I have used the basic functionalities involved in HTML and CSS which was taught during our curriculum and also used some extra CSS properties.

• Using media query I have made all pages responsive for mobile applications.

• All basics on DOM manipulation have been implemented on all pages.

• The knowledge on local storage has been used efficiently to show the product details on the product description page, check out page and the Payment page.

Our Project

As a team, we were given a project to clone the Adidas official webpage and we were able to achieve almost all the content we planned on day one to implement on this project like user interactions, functionalities and responsiveness. We have also covered a few extra functionalities and CSS stylings which we decided to implement after we complete the mandatory concepts.

Our project demonstrates a basic flow of an e-commerce page, where a customer can view products, filter them as per their requirements, read about a specific product, add their product to cart, checkout and place his or her happy order.

My Contribution

I started my project by creating an Adidas Product Display page using a little bit of HTML, CSS and more of JavaScript. On this page, customers can view all the products and the basic product details. I create a database of all the product details including name, price, image, category, gender, division etc using an Array of objects and use that to display all the product details in a grid format. I attach this screenshot of my product page along with highlighting the functionality of my page & I'll explain all of them one by one in brief.

Some of the key functionalities I have used on this page are as follows,

1. Total product count - Here you can see the total product count of all the displayed products.

2. Price Sorting Functionality - Here you can sort the products according to their price like:- low to high or high to low.

3. Clear all filters - Here you can clear all the filters & the products will come to their original position.

4. Different Filters - Here you can filter the products according to Gender, Divison, Product Type, Brand, Collection & sustainability.

5. Image Hover - Here when use put the mouse cursor on any Image, then that image will change to another image of the same product & when the user moves the cursor from that image it will show the previous image.

6. Back & Home Buttons - By using these buttons users can navigate the website.

7. Adidas Logo - If users click on this Logo, they will be redirected to the home page.

8. Signup, Login & Cart page - If users click on any of these buttons, they will be redirected to the respective pages.

I also worked on the Media Queries of this page for Tablet Mode & Mobile Mode to make the webpage responsive.

1. In the Tablet Mode, in a single row, only 3 products will be shown. In Mobile Mode, in a single row, only 2 products will be shown.

2. Here in the top header part it will be static for desktop mode but it will become dynamic when the size of the display will be reduced. There are 3 lines that will be displayed in every 3 seconds, one by one using the 'setTimeout' functionality (JS part).

Here I store the data of the products (Array of Objects) in local storage so that other people can use this data on the product description page to showcase the details. Using the proper CSS properties and JavaScript functionalities, I have tried and achieved to make the page responsive with neat UI and better functionality similar to the original.

Apart from this, I have also contributed to displaying the shipping details on the payment page so that the users can recheck their order summary & the shipping details before they place their order. And all the pages are worked in such a way they are adaptable for mobile applications as well.

My Team

Taher Ahmed

Taher took the responsibility of working on the product description page, Home page & Payment page, its styling and all the functionalities.

Pabitra Saikia

Pabitra has worked on all the HTML, CSS and Javascript functionality on the Cart page and also, he has contributed to displaying the order details on the Checkout page.

Renu Kumari

Renu has contributed to all the HTML, CSS and JavaScript functionalities on the signup page, forgotten password page, and check-out page.

Apart from this each of the team members have worked on the media query on their corresponding pages.

What did I learn?

• By end of this project, I was able to learn how effective work can be done as a team when ideas are trajected in multiple spectrums.

• The coordination while presenting the project was a new experience for all the members of the team which was fun driven as well as professional learning.

• Effective learning involves how we were able to suggest constructive feedback on each other’s work and debug before we present our project.

GitHub Repository