How To Create List And Grid View Using JavaScript

<div id="container">
<center><h1>
How To Create List And Grid View Using JavaScript - ITSolutionsGuides
</h1><br>
    <div class="buttons">
        <button class="grid">Grid View</button>
        <button class="list">List View</button>
        </div></center>
    
    <ul class="list">
        <li style="background:lightgray">Item 1</li>
        <li>Item 2</li>
        <li style="background:lightgray">Item 3</li>
        <li >Item 4</li>
        <li style="background:lightgray">Item 5</li>
        <li>Item 6</li>
        
    </ul>
</div>

h1 {font-size:22px; margin-top:20px;}

.grid, .list {padding:15px;}

#container ul { list-style: none; }

#container .buttons { margin-bottom: 20px; }

#container .list li { width: 100%; border-bottom: 1px; margin-top:5px; margin-bottom: 5px; padding: 5px; }

#container .grid li { float: left; width: 20%; height: 50px; border: 1px solid #CCC; padding: 20px; }

$('button').on('click',function(e) {
    if ($(this).hasClass('grid')) {
        $('#container ul').removeClass('list').addClass('grid');
    }
    else if($(this).hasClass('list')) {
        $('#container ul').removeClass('grid').addClass('list');
    }
});