DEV Community

Cover image for Javascript grid to list view
isurojit
isurojit

Posted on

Javascript grid to list view

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>&nbsp;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;`;
}
Enter fullscreen mode Exit fullscreen mode

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&amp;hei=1058&amp;fmt=jpeg&amp;qlt=80&amp;op_usm=0.5,0.5&amp;.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&nbsp;&nbsp;</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>
Enter fullscreen mode Exit fullscreen mode

CSS code

button:hover, button:focus{
    outline: none;
}
button:hover{
    background-color: rgba(233, 114, 114, 0.856);
}
Enter fullscreen mode Exit fullscreen mode

Any suggestions will be helpful.

Discussion (0)