Hello Reader!, This is an HTML code for a basic Google search engine simulation. The head section has meta data (char. set, comp. tag, viewport) and title (“Google Search Engine”). It also has two stylesheet links, one local (./style.css) and one from Font Awesome (icon library).
The body section of the code is where the actual search engine is created. It starts with a container div called searchContainer which holds the Google logo, the search input, and the search button. Within the searchContainer div, there are two more divs – one for the Google logo and one for the search input and button. The search input and button are placed in a separate div with the class “inputBx.” This section also includes two icons – one for a microphone and one for Google Lens.
The code then includes a script that allows the search input to interact with the search button and clear icon. The script starts by selecting the search input, search button, and clear icon by their respective IDs. It then uses an event listener to detect when the user inputs text into the search input. If there is text in the input, the clear icon will have a class of “active” added to it. If the clear icon is click and there is text in the input, the text will be clear and the class “active” will be remove. Finally, when the search button is click, the script opens a new window with the Google search results for the search query entered in the input.
Overall, this code creates a simple, functional Google search engine simulation with a clean, modern look.
Video Tutorial of Google Search Engine
To see a live demonstration of the Google Search Engine, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
Google Search Engine
HTML:
Create a new file with the name “index.html” and add the provided code to it. Ensure the file has a “.html” extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Search Engine</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="searchContainer">
<div class="imgBx">
<img src="./google.png" alt="google">
</div>
<div class="inputBx">
<div class="input">
<img src="./search.png" alt="search"/>
<input type="text" id="searchInput"/>
<i class="fa-solid fa-xmark"></i>
</div>
<div class="icon">
<img src="./mic.png" alt="mic"/>
<img src="./googleLens.png" alt="googleLens">
</div>
</div>
<button id="searchButton">Google Search</button>
</div>
</body>
</html>
The body section of the HTML document contains the core content of the page. In this case, it contains the Google Search Engine simulation.
The first element in the body section is a div with a class of “searchContainer.” This is the main container that holds all the elements that make up the Google Search Engine simulation.
Within the searchContainer div, there are two more divs with classes of “imgBx” and “inputBx.” The “imgBx” div contains an image of the Google logo, and the “inputBx” div contains the search bar and icons.
The search bar consists of another div with a class of “input.” This div contains the search icon, an input field for entering search queries, and a cross icon to clear the input field. The “icon” div contains two images, a microphone icon, and a Google Lens icon.
Finally, there is a button with an id of “searchButton” that reads “Google Search.” This is the button that triggers the search query when clicked.
All these elements work together to create a basic simulation of the Google Search Engine. With the combination of HTML, CSS, and images, we can create a functional and visually appealing search engine simulation.
CSS:
Create a new CSS file name “style.css” and copy the provide code into it. Ensure that the file has a “.css” extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #fff;
overflow: hidden;
}
.searchContainer{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px;
}
.searchContainer .imgBx{
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.searchContainer .imgBx img{
cursor: pointer;
}
.searchContainer .inputBx{
position: relative;
width: 550px;
max-width: 585px;
height: 45px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 3;
background: #fff;
border: 1px solid #dfe1e5;
box-shadow: none;
border-radius: 25px;
padding: 0 20px;
}
.searchContainer .inputBx:hover,
.searchContainer .inputBx:focus-within{
background: #fff;
box-shadow: 0 1px 6px rgb(32 33 36 / 28%);
border-color: rgba(223, 225, 229, 0);
}
.searchContainer .inputBx .input{
position: relative;
width: calc(450px - 40px);
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 15px;
}
.searchContainer .inputBx .input img{
cursor: pointer;
}
.searchContainer .inputBx .input #searchInput{
width: 100%;
color: rgba(0, 0, 0, .87);
background: transparent;
border: none;
margin: 0;
padding: 0;
word-wrap: break-word;
outline: none;
font-size: 16px;
}
.searchContainer .inputBx .input i{
position: absolute;
right: 0;
font-size: 18px;
color: #70757a;
display: none;
}
.searchContainer .inputBx .input i.active{
display: block;
}
.searchContainer .inputBx .icon{
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.searchContainer .inputBx .icon img{
cursor: pointer;
}
.searchContainer #searchButton{
background: #f8f9fa;
color: #3c4043;
border: 1px solid #f8f9fa;
border-radius: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
}
.searchContainer #searchButton:hover{
box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
background: #f8f9fa;
border: 1px solid #dadce0;
color: #202124;
}
This CSS code imports a font from Google Fonts (@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');) and sets default styles for all elements (*) such as setting the margin and padding to 0, setting the box-sizing to border-box, and setting the font-family to Poppins.
The body element is given styles to display as a flex container, to be center both horizontally and vertically, with a minimum height of the viewport height and a white background. The overflow is use to hidden.
The styles for the .searchContainer class set its position to relative, display as a flex container, and center its child elements both horizontally and vertically. The child elements of .searchContainer include .imgBx and .inputBx, both of which have styles to position them relatively, display as flex containers, and center their child elements.
The styles for the .inputBx class include setting a width, height, background color, border, box-shadow, border-radius, and padding. When the .inputBx is hovered over or in focus, it changes its background color and adds a box-shadow. The child element .input of .inputBx is also set to display as a flex container and the child element #searchInput is given styles such as a width, color, background, border, font-size, and outline. The child element .icon of .inputBx is set to display as a flex container.
The #searchButton id is given styles such as background color, color, border, border-radius, font-family, font-size, padding, and cursor styles. When hovered over, the button changes its background color and adds a box-shadow.
JavaScript:
In between the <body></body> tags, you can include JavaScript code by enclosing it within <script> tags.
const searchInput = document.querySelector('#searchInput');
const searchButton = document.querySelector('#searchButton');
const clear = document.querySelector('.fa-xmark');
searchInput.addEventListener('input', function() {
if(searchInput.value.length > 0){
clear.classList.add('active');
} else {
clear.classList.remove('active');
}
});
clear.addEventListener('click', function(){
if(searchInput.value.length > 0){
searchInput.value = "";
clear.classList.remove('active');
}
});
searchButton.addEventListener('click', function(){
if(searchInput.value.length > 0){
const searchQuery = searchInput.value;
window.open(`https://www.google.com/search?q=${searchQuery}`, "_blank");
} else {
window.click();
}
});
This code listens to the events in a search form with input and buttons. The input has an id of “searchInput”, the search button has an id of “searchButton”, and the clear button has a class of “fa-xmark”.
when the input changes, the code adds or removes the class ‘active’ to the clear button depending on if there’s any text in the input.
If you clicked on clear button, the code sets the input value to an empty string and removes the ‘active’ class if the input is not empty.
When you click on the search button, the code opens a new tab with a Google search of the input value if the input is not empty. If the input is empty, it triggers the click event on the window.
Summary:
This code creates a simple Google search engine replica using HTML, CSS, and JavaScript. It includes a search bar with a text input, a microphone icon, and a Google Lens icon. The code includes a clear button that appears when the user starts typing in the search bar. The clear button is able to clear the text in the search bar. When the user clicks on the search button, the input is pass to Google as a search query and opens the results in a new tab. The code also includes CSS styles for the layout and design of the page. The fonts used on the page is Poppins from Google Fonts.
