I will explain to you the things in a short and crispy manner. What I have done is, used some public API of authors to show the result with JS on my webpage.
Then, I have given some searching options, types of filters as you must have seen on e-commerce sites. The codepen link is mentioned below:-
https://codepen.io/sona45/pen/eYpaJNp
The end results will look like: -
There are numerous steps:-
In this blog, I will just tell about fetching and displaying data, other js functionality in other blogs.
- Creating an HTML file in which u will create the left filter section, search bar, and that main UL or any block element. In that element you will append your child elements after fetching the data. So, Its a type of list so, I had used UL, LI structure….
<html><head><link rel="stylesheet" type="text/css" href="style.css"></head><body><section><h1>List of Authors</h1><div class="search-wrap"><input type="search" placeholder="Enter email to search" / id="search-box"><button type="submit" onclick="showResults()">Search</button></div><div class="authors-wrap"><ul class="filters"><li><span>Select Gender: </span><select id="select"><option id="male" value="male">male</option><option id="female" value="female">female</option><option id="all" value="all">all</option></select></li><li><span>What is Your Favorite country?</span><fieldset><div><input type="checkbox" name="acs" value="Germany" id="ger"><label for="ger">Germany</label></input></div><div><input type="checkbox" name="acs" value="Turkey" id="tur"><label for="tur">Turkey</label></input></div><div><input type="checkbox" name="acs" value="Australia" id="aus"><label for="aus">Australia</label></input></div></fieldset></li><li><button type="submit" onclick="filter()"> Apply Filters </button></li></ul><ul id="authors" class="authors-list"></ul></div></section><script src="script.js"></script></body></html>
2. Now after u have made the HTML file. Its time to make CSS file i.e. style.css to give styling to the elements…
h1 {text-align: center;margin-top: 40px;padding: 20px 0;}ul {padding: 0;}body {margin: 0;}ul,li {list-style-type: none;}address {min-height: 40px;margin-bottom: 20px;line-height: 1.4;}a {display: inline-block;margin-bottom: 20px;color: #1976d2;}.btn-class {background: #1976d2;color: #fff;padding: 7px;width: 100%;font-size: 13px;border-radius: 4px;text-decoration: none;font-weight: 700;border: 0;max-width: 100px;margin-bottom: 0;border: 1px solid #1976d2;}.added {color: #1976d2;background-color: #fff;max-width: 200px;pointer-events: none;}.authors-list {display: flex;flex-flow: row wrap;align-items: center;width: calc(100% - 250px);padding: 0;margin-left: 30px;}.authors-list li {border: 1px solid #f1f1f1;background-color: #fff;padding: 1rem;border-radius: 3%;border: 1px solid #ccc;margin: .5rem;width: 20%;min-width: 150px;min-height: 200px;text-align: center;}.authors-list figure {min-height: 72px;}.authors-list img {border-radius: 50%;}.authors-list li span,.authors-list li strong {display: block;margin-bottom: 20px;}.authors-wrap {display: flex;justify-content: space-between;margin: 20px 30px;}.filters {width: 220px;padding: 40px 20px;border-radius: 4px;background: #f4f6f7;}.filters li {margin-bottom: 20px;}.filters span {margin-bottom: 10px;font-size: 15px;font-weight: 700;display: block;}select {width: 100%;height: 32px;background: #fff;text-transform: capitalize;font-size: 13px;}fieldset {padding: 0;border: 0;}fieldset label {margin-left: 10px;}button {background: #1976d2;color: #fff;padding: 10px;width: 100%;font-size: 15px;border-radius: 4px;font-weight: 700;border: 0;}.search-wrap {display: flex;justify-content: flex-end;margin: 0 50px;}.search-wrap button {max-width: 100px;}.search-wrap input {font-size: 15px;border-radius: 4px;border: 1px solid #ccc;padding: 10px;margin-right: 21px;width: 300px;}
3. Make the web page Functional with Javascript.
API used by me https://randomuser.me/api/?results=10. This API will give 10 random results on window load every time. So, I will store the result locally so that I can use on other operations like search and filters and I don’t have to fetch again and again. Here, In this blog I will just fetch and show the results. Searching and filters in other blogs…..
const ul = document.getElementById('authors');function createNode(element){return document.createElement(element);}
/*--for appending elements to ul>li to span, figure etc.--*/function append (parent, el){return parent.appendChild(el);}
/*------on window load api fetching-----*/window.onload=fetchData('https://randomuser.me/api/?results=10');var datum = []; /*---array to store api data locally----*/function fetchData(url){var data='';fetch(url).then((resp)=> resp.json()).then(function(data){data= displayData(data.results);return data;}).catch (function(error){return data;});}/*------function to display data on webpage-----*/function displayData(authors){return authors.map(function(author,index){/*-api data is pushed in my local array datum-*/datum.push(author);/*----Nodes are created with JS dynamically ---*/let li = createNode('li'),figure = createNode('figure')img = createNode('img'),strong= createNode ('strong'),span= createNode('span');address= createNode('address');a= createNode('a');addBtn= createNode('a');img.src= author.picture.medium;/*-after nodes are created data and attributes are set-*/strong.innerHTML =`${author.name.first} ${author.name.last}`;span.innerHTML = `${author.dob.age} ${author.gender}`;a.innerHTML = `${author.email}`;a.setAttribute("href", `${author.email}`);addBtn.innerHTML = "Add";addBtn.setAttribute("class", "btn-class");addBtn.setAttribute("href", "javascript:void(0)");addBtn.onclick= () => addToFav(index, event);address.innerHTML = `${author.location.city}, ${author.location.state} , ${author.location.country}, ${author.location.postcode} `;/*-append function is called to append the elements to its parent element-*/
append (figure, img);append (li, figure);append (li, strong);append (li, span);append (li, a);append (li, address);append (li, addBtn);append (ul, li);})}
Thanks, for reading the blog. I hope u understand the concept well.
