Tri 2: Tech Talk 9.1 Google Search

Google Search Guide

• Authors Billy, Sarah
• Image location:

Purpose:

• This wiki page will contain step-by-step directions that will enable the reader to create a search function that uses the google search engine to look up their deployed project online.

---

Using Google Search

Creating the Search Engine

1. Go to the Google Control Panel
2. Click "Add" Under "Edit Search Engines"
3. Add your deployed website to the "sites to search" section - This is your deployed site, and any other sites you'd like to search
4. Create a name for the search engine
5. Click "Create"

Embedding the search engine

1. Go to the Google Control Panel
2. Click on your desired search engine
3. Under basics, Click "get code"
4. This code can be embedded into your site and it will now use Google Search!

Step 1 HTML

Add HTML the NavBar

<div class="px-3">
 <input id="search" type="search" placeholder="Search" aria-label="Search">
</div>
'''

</details>


# Step 2 Java Script: Creating Java Script Function to Support Search Query
<details>
<summary> Add JavaScript to NavBar script </summary>

Overview
1. Add a function that executes when button pressed in Search, event listner
1. In the function variables that are query value in the search
1. Open new table and display variables 

Full code
```javascript
const search = document.getElementById('search');
const google = 'https://www.google.com/search?q=site%3A+';
const site = 'https://nighthawkcodingsociety.com';

function submitted(event) {
  if (event.key === 'Enter') {
     event.preventDefault();
     const url = google
                 + site
                 + '+'
                 + search.value;
                 const win = window.open(url, '_blank');
                 win.focus();
  }
}
search.addEventListener('keypress', submitted);