This is a simple blog search application that allows users to search for blogs by title, tags, and clubs. The application is built using HTML, CSS, and JavaScript.
The code for the blog search application is divided into three files:
index.html
: This file contains the HTML code for the application.script.js
: This file contains the JavaScript code for the application.styles.css
: This file contains the CSS code for the application.
The index.html
file contains the basic HTML structure of the application. It includes the HTML code for the header, navigation bar, and main content area. The script.js
file contains the JavaScript code for the application. It includes the code for filtering and displaying the blogs. The styles.css
file contains the CSS code for the application. It includes the styles for the header, navigation bar, and main content area.
The following is a step-by-step explanation of the code in the script.js
file:
- The
blogs
variable is defined. This variable contains the sample data for the blogs. - The
displayBlogs()
function is defined. This function filters and displays the blogs. - The
searchInput
variable is defined. This variable contains the value of the search input field. - The
tagFilter
variable is defined. This variable contains the value of the tag filter input field. - The
clubFilter
variable is defined. This variable contains the value of the club filter input field. - The
filteredBlogs
variable is defined. This variable contains the filtered blogs. - The
blogResults
variable is defined. This variable contains the HTML element for the blog results. - The
innerHTML
property of theblogResults
variable is set to an empty string. This removes any existing blog results. - If the
filteredBlogs
array is empty