Created a small project where we can toggle between grid view to list view. used #HTML & #javascript only. #CSS3 is being used in javascript. No #framework used.
JS code
//Assigning UI
const productRow = document.querySelector(".row");
const images = document.querySelectorAll(".image");
const productTemplate = document.querySelectorAll('.product');
const unorderedList = document.querySelectorAll('ul');
const productItems = document.querySelectorAll('.product-item');
const buyBtn = document.querySelectorAll('.buy');
const productHeading = document.querySelectorAll('h3');
const listView = document.querySelector('#list-view');
const gridView = document.querySelector('#grid-view');
const btnSection = document.querySelector('.buttons');
const footerSection = document.querySelector('footer');
//Css variables
const borderShadow = '-webkit-box-shadow: -1px 0px 20px -1px rgba(0,0,0,0.75);-moz-box-shadow: -1px 0px 20px -1px rgba(0,0,0,0.75);box-shadow: -1px 0px 20px -1px rgba(0,0,0,0.75);';
const mainBtn = `width:10%;height:10%;padding:2%;border:none;${borderShadow};border-radius:15px;cursor: pointer;margin-left:15px;`;
//Listen For Events
btnSection.addEventListener('click',function(e){
let targetElement = e.target;
if(targetElement.id === 'list-view' || targetElement.id === 'list-icon'){
listViewOperation();
}else if(targetElement.id === 'grid-view' || targetElement.id === 'grid-icon'){
gridStyleView();
}else{
e.preventDefault();
}
});
//By default grid style
gridStyleView();
//universal
document.body.style.cssText ="font-family: 'Ubuntu', sans-serif;";
//remove buttes
iteration(unorderedList, "list-style-type: none;position:relative;right:15px");
// //Resizing buttons
listView.style.cssText = mainBtn;
gridView.style.cssText = mainBtn;
//Iteration function
function iteration(itarator,cssElements){
itarator.forEach(function(variable){
variable.style.cssText = cssElements;
});
}
//For Fun (given a footer)
const footer = document.createElement('p');
footer.innerHTML = '<h4>Create by <a href="https://www.linkedin.com/in/surojit-manna" target="_blank">isuro</a> With <i class="fas fa-heart"></i></h4>';
footerSection.appendChild(footer);
footerSection.style.cssText = 'text-align:center';
function listViewOperation(){
//list Test
//Productlist view flex
iteration(productTemplate, `display:flex;border:1px solid transparent;${borderShadow};margin:2% 1%;;border-radius:15px;justify-content:space-evenly;transition: all 0.3s ease`);
//Making product row column wise
productRow.style.cssText = "display:flex;flex-direction:column;transition: all 2s ease";
//Images
iteration(images, "width:10%;");
//Buybutton
iteration(buyBtn, "width:15%;height:10%;transform:translateY(30%);transition: all 0.3s ease");
//Heading
iteration(productHeading, "transform:translateY(30%);transition: all 0.3s ease");
//UI interaction with button when active
listView.style.cssText = `width:10%;height:10%;padding:2%;border:none;${borderShadow};border-radius:15px;cursor: pointer;margin-left:15px;background-color:green;`
gridView.style.cssText = `width:10%;height:10%;padding:2%;border:none;${borderShadow};border-radius:15px;cursor: pointer;margin-left:15px;`;
}
//gridview function
function gridStyleView(){
//grid view
productRow.style.cssText = "display:flex;transition: all 0.3s ease";
//For Images
iteration(images,"width:50%;transition: all 0.3s ease");
//For Product Template
iteration(productTemplate,`text-align:center;border:1px solid transparent;${borderShadow};margin:2% 1%;;border-radius:15px;justify-content:space-evenly;padding:1%;transition: all 0.3s ease`);
//For buy now button
iteration(buyBtn,"width:60%;height:23%;transform:translateY(-10%);transition: all 0.3s ease");
//UI interaction with button when active
gridView.style.cssText = `width:10%;height:10%;padding:2%;border:none;${borderShadow};border-radius:15px;cursor: pointer;margin-left:15px;background-color:green;`
listView.style.cssText = `width:10%;height:10%;padding:2%;border:none;${borderShadow};border-radius:15px;cursor: pointer;margin-left:15px;`;
}
HTML Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid To List</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<Header style="text-align: center;">
<H1>Grid To List View</H1>
<p><em><u>For Desktop only</u></em></p>
</Header>
</div>
<div class="container">
<div class="buttons">
<button type="submit" value="list" id="list-view"><i class="fas fa-list" id="list-icon"></i></button>
<button type="submit" value="grid" id="grid-view"><i class="fas fa-th-large" id="grid-icon"></i></button>
</div>
<div class="row">
<div class="product">
<img class="image product-item" src="https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/iphone11-select-2019-family_GEO_EMEA?wid=882&hei=1058&fmt=jpeg&qlt=80&op_usm=0.5,0.5&.v=1567022219953" alt="Iphone11">
<h3>Apple Iphone11</h3>
<ul><b>SPECIFICATION</b>
<li>Price - $849</li>
<li>6 Gigabyte Ram</li>
<li>256 GB Storage</li>
<li>Bionic A13 Chip</li>
<li>Wide Lense Camera</li>
<li>Exchange For Your Kidney</li>
</ul>
<img class="buy" src="https://q3p9g6n2.rocketcdn.me/wp-content/ml-loads/2015/08/image091.png" alt="buynow">
</div>
<div class="product">
<img class="image" src="./img/galaxy-note-20.png" alt="Galaxy Note 20">
<h3>Galaxy Note 20 </h3>
<ul><b>SPECIFICATION</b>
<li>Price -$999</li>
<li>8 Gigabyte Ram</li>
<li>256 GB Storage</li>
<li>Exynos 990 Processor</li>
<li>64+12+12MP Triple Camera</li>
<li>Exchange For Your Kidney</li>
</ul>
<img class="buy" src="https://q3p9g6n2.rocketcdn.me/wp-content/ml-loads/2015/08/image091.png" alt="buynow">
</div>
<div class="product">
<img class="image" src="./img/pixel-5.png" alt="Google Pixel 5">
<h3>Google Pixel 5 5G</h3>
<ul><b>SPECIFICATION</b>
<li>Price -$699 </li>
<li>8 Gigabyte Ram</li>
<li>128 GB Storage</li>
<li>Snapdragon 765G</li>
<li>Wide Lense Triple Camera</li>
<li>Exchange For Your Old Phone</li>
</ul>
<img class="buy" src="https://q3p9g6n2.rocketcdn.me/wp-content/ml-loads/2015/08/image091.png" alt="buynow">
</div>
<div class="product">
<img class="image" src="./img/oneplus-8t.png" alt="one plus 8t">
<h3>OnePlus 8T 5G</h3>
<ul><b>SPECIFICATION</b>
<li>Price -$549</li>
<li>12 Gb Ram</li>
<li>256 GB Storage</li>
<li>Bionic A13 Chip</li>
<li>48+16+5+2 Quad Camera</li>
<li>Exchange For Your Dignity</li>
</ul>
<img class="buy" src="https://q3p9g6n2.rocketcdn.me/wp-content/ml-loads/2015/08/image091.png" alt="buynow">
</div>
</div>
</div>
<footer>
</footer>
<script src="app.js"></script>
</body>
</html>
CSS code
button:hover, button:focus{
outline: none;
}
button:hover{
background-color: rgba(233, 114, 114, 0.856);
}
Any suggestions will be helpful.
Top comments (0)