Creating dynamic web pages using HTML, CSS, and JavaScript.
Our Problem statement is creating a pixel-perfect clone of https://www.rawpressery.com/.This Website allows us to buy fresh cold pressed fruit juice, almond milk, protein milkshake and value packs online.
A Dynamic webpage is the one that provides custom content for the user based on the results of a search or some other request or in simple words interactive webpages.
This is the landing page of our clone website in which we used some Carousel effects with decent transitions so as to make this landing page similar to the original one .
In our website we also tried making a chatbot which will be responsive will give recommendation according to the user's requirement .
We made a Search bar in our webpage so that a user can search directly for his product after logging in . This was done by using the modal box feature .
By clicking on the log in button user will be re-directed to the login page from the landing page . Here user can log in by using his mail id and password.
This process is done by using Local Storage method in the back-end .
After clicking on submit button in login page the user will be re-directed to the My-Account page where he can access to his account details which he has mentioned , he can edit his details from this page .
As the account section is filled by the user he can go to the cart section where if the cart is empty he can click on the continue shopping button and will be re-directed to product pages.
In the Product page user can select his item from the item list and add them to his cart by clicking on the add to cart button .
User can also add or delete the number of items by clicking on the toggle buttons .
We made the npm server and tried to fetch all these items from our API which will make our code go live in the browser.
Once User is done selecting his Items from the product list he can go to the cart page and do the check-out process by placing the order .He can add or delete the products from this page as well .
By clicking on the continue button on the cart page the user will be re-directed to the order page for the final submission of the item .
By clicking on the Place Order button , he will receive a notification about his order been placed successfully.
Challenges:
- Git handling.
- Communication. (Worked Remotely)
- Implementation of dynamic pages.
This is the Git hub repository we have used to bring our code together.
Git link:https://github.com/SachinReddyKunta/RawPressery
TECH STACK :
- HTML.
- CSS.
- JavaScript.
Team:
- Rinish Ojha
- Sachin Reddy