SUGGESTIONS FOR THE SEARCH BAR
The search bar is a significant tool for websites or search engines. Generally, we use a search bar to navigate to our destination page. Have you ever wondered how, when you enter your keywords in the search bar, lots of suggestions magically appear below it? And when you type the destination keyword, it takes you to your intended webpage.
Basically, each predetermined keyword has its own webpage created by a coder (using HTML, CSS, and JavaScript). However, websites and search engines often save the user's search history and create additional web pages based on it.
LOGIC:
It’s difficult to create a search engine and individual webpages for every keyword, so our code only redirects users to famous websites or webpages and suggests them accordingly.
STRUCTURE:
HTML:
First, create an <input> section and name it search-bar. Then, provide a suggestion list of all famous websites you know, e.g., Instagram, LinkedIn, Facebook, Pinterest, Telegram, etc. The structure would be: <datalist><option value="[web-name]"></option></datalist>.Next, create a button to search for the intended webpage. For additional functionality, add a toggle button to switch between dark mode and light mode.
CSS:
Set the background color to rgb(84, 84, 151). The search bar's height and width should be 30px and 300px, respectively. Set the button's padding to 10px 20px.
JAVASCRIPT:
First, select the button by its ID and then create a function named validateSelection(). In this function, include some redirects like YouTube, Google, etc., and map application names to their respective addresses, e.g., "google": "https://www.google.com/". Use the toLowerCase() function to convert all characters to lowercase.
If the user inputs valid data, the script will match it against the predefined addresses in the JavaScript and open the corresponding webpage. If the user inputs invalid data, an alert message will pop up saying, "Invalid data."
Additionally, create a toggle button to switch between dark mode and light mode.
Code:
GitHub link:https://github.com/Tanaygit646/suggestions-from-searchbar