This is a solution to the E-commerce product page challenge on Frontend Mentor.
This is my final project on Frontend Web Coding & Developement. On this project you will notice how hard I tried to replicate the origal project - its design and behavour. I started with bootstrap framework but I realised I would not be able to show my skills, everything that I learnt on course so far. I had to make an important decision, should I carry on with bootstrap or just pure HTMl, CSS and Javascript!
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Open a lightbox gallery by clicking on the large product image
- Switch the large product image by clicking on the small thumbnail images
- Add items to the cart
- View the cart and remove items from it
- Started by downloading the entire project from learning people to my laptop
- Looked at the entire project first, thought how to go about it
- Created the folder on github
- Decided to use Visual Studio Code
- I followed the sugestion - working from the top to the bottom, one task at time and making sure that was happy with it before moving to a different task
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- JavaScript - JS library
The most rewarding part of the project was the LightBox design. Being able to achive it is a milestone indeed.
To see how you can add code snippets, see below:
<div id ="idActivateStatesLightBox" class="hideAnyElement">
<div class ="squareLightBox">
<div id="idCloseLightBox" class="closeLightBox"> </div>
<img id ="idSquareLightBoxMainImg" src="static/images/image-product-1.jpg" class="squareLightBoxMainImg" alt="sneackers">
<div class="imgButtonsLightBox">
<div data-cell-index="1" class="lightBoxPreviewsImg classLightBox"></div>
<div data-cell-index="2" class="lightBoxNextImg classLightBox"></div>
</div>
<div class="thumbnailLightBox">
<div><img data-cell-index="1" src="static/images/image-product-1-thumbnail.jpg" class="fourLightBoxImgs"></div>
<div><img data-cell-index="2" src="static/images/image-product-2-thumbnail.jpg" class="fourLightBoxImgs"></div>
<div><img data-cell-index="3" src="static/images/image-product-3-thumbnail.jpg" class="fourLightBoxImgs"></div>
<div><img data-cell-index="4" src="static/images/image-product-4-thumbnail.jpg" class="fourLightBoxImgs"></div>
</div>
</div>
</div>/* lightbox section starts here, all the classes associated with it are here from 160 to 259*/
.lightBoxPicture {
cursor: pointer;
position: fixed;
z-index: 2;
width: 100vw;
min-height: 100vh;
left: 0px;
right: 0px;
top: 0px;
background: rgba(0, 0, 0, 0.6);
}
.squareLightBox {
justify-content: center;
position: absolute;
width: 500px;
height: 500px;
z-index: 2;
top: 10%;
left: 0;
right: 0;
margin: auto;
}
.squareLightBoxMainImg{
position: absolute;
z-index: 2;
width: 450px;
height: 450px;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
border-radius: 10px;
}
.closeLightBox {
position:absolute;
right: 25px;
top: -5px;
color: white;
}
.closeLightBox:hover {
color: orange;
}
.closeLightBox::after {
content: "\00d7";
font-weight: bold;
font-size: 30px;
}
.imgButtonsLightbox {
z-index: 2;
display: inline-block;
}
.lightBoxPreviewsImg::after {
content: "\003c";
font-size: 30px;
font-weight: bold;
}
.lightBoxNextImg::after {
content: "\003e";
font-size: 30px;
font-weight: bold;
}
.imgButtonsLightBox .lightBoxPreviewsImg {
position: absolute;
left: 2px;
}
.lightBoxNextImg, .lightBoxPreviewsImg {
background-color:white;
border: 2px solid white;
height: 50px;
width: 50px;
border-radius: 50%;
color: black;
text-align: center;
line-height: 40px;
top: 230px;
z-index: 2;
}
.imgButtonsLightBox .lightBoxNextImg {
position: absolute;
right: 2px;
}
.thumbnailLightBox {
grid-template-columns: 20% 20% 20% 20%;
display: grid;
justify-content: space-evenly;
position: absolute;
height: 100px;
width: 450px;
z-index: 2;
top: 500px;
left: 5%;
right: 5%;
}
.fourLightBoxImgs {
display: flex;
width: 90px;
height: 90px;
border-radius: 10px;
}
.fourLightBoxImgs:hover {
border: 2px solid orange;
}
/*lightbox ends here */ //this function shows the pictuires in the main image and lightbox too
function displayLightBoxPicture(event) {
const cellValue = event.target;
const cellIndex = parseInt(cellValue.getAttribute("data-cell-index"));
if(cellIndex === 1 && showPicture > 1) {
--showPicture;
document.getElementById("idSquareLightBoxMainImg").src = "static/images/image-product-" + showPicture + ".jpg";
}
if(cellIndex === 2 && showPicture <= 3) {
++showPicture;
document.getElementById("idSquareLightBoxMainImg").src = "static/images/image-product-" + showPicture + ".jpg";
}
if(cellIndex === 3 && showPicture > 1 ) {
--showPicture;
document.getElementById("idMainImg").src = "static/images/image-product-" + showPicture + ".jpg";
}
if(cellIndex === 4 && showPicture <= 3) {
++showPicture;
document.getElementById("idMainImg").src = "static/images/image-product-" + showPicture + ".jpg";
}
}I would like to learn how to use class in JavaScript, the OOP approach.
I want to use Canvas effectively.
One of the things that I struggle with is make functions more re-usable through the project, learn how to create re-usable function.
- Developer Mozilla - This helped me to understand how flexbox works and the grid system too. True source of Frontend information indeed.
- CSS Tricks - This is an amazing article which helped me finally understand css. I'd recommend it to anyone still learning frontend.
- w3schools - I think that every one heard and knows about w3schools! I find it very helpful when come to Semantic HTML5. stackoverflow Community - Here is whre the biggest tech community lives A B C
- Website - Levi Domingos
- Frontend Mentor - @Alex Ford
To my mentor Alex Ford, a great thank you for your help and patience above all for your guidance. Because of you I started buying I.T books again, something that gave up many many years ago.
I bought two books, a Frontend book by Paul McFedriess and JavaScript by
1 - There is no way of clossing the cart or basket (not on assigment)
2 - The mobile menu may colide with the cart if the cart is opened
3 - The checkout buttom does not work either (not on assigment)
4 - I tried to use Google font but would not allow me to do so, getting warning all the time...
5 - I only used the cart, avatar and pictures but everything else I tried to create it myself
6 - The backgroung image would not work or display at all therefore chose to use a background color
7 - When I tested on Google Developer Tool different screen sizes did work fine but on real devices - samsung with height 600 the lightbox did not work as expected.
8 - There is quiet few warning on HTML and Javascript. On HTML has to do with background color. which is not a error but advice. I did not address the issue so not to compromise on appereance of the page. Regarding JavaScript the issue has to do with ESLint sugestion.
9 - I still learing frontend indeed...
-
HTML and CSS Validation
-
I used the W3C HTML Validator tool to validate my HTML code.
-
I used the W3C CSS Validator tool to validate my CSS code.
The hosting platform used for my project is GitHub Pages. To deploy my project to GitHub pages, I implemented the following steps:
Downlaod gitHub Desktop and Visual Studio Code on my Laptop.
Lunched or started Git Desktop.
Connetcted my Visual Studio Code into my Github online and from that moment on I could syncronise both.
Created a new repository in GitHub called 'E-Commerce'.
Imported the the new repository into V.S. on desktop.
Any changes made on my project loaded on my Laptop I would commit or push to my Github online.