Tri 2: Tech Talk 9.1 Google Search

Google Search Guide

• Authors Billy, Dillon, Mr M

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

Explanation of Code

1. Add input to capture search term
2. Add id="search" for JavaScript event

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

Step 2 JavaScript

Add JavaScript to NavBar script

Explanation of Code

1. Add a function that executes when button pressed in Search, only do search when 'Enter' is pressed
2. Setup a query by concatenating variables to support Google filtering
3. This implementation opens a new browser tab that displays the results

Full code

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);