Tri 2: Tech Talk Week 8: Google Search

Adding Search to your Deployed Project

Authors William Cherres, John Mortensen

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.

Resources:

• Using Google Search Engines
• Navigation Bar JavaScript
• Navigation Bar HTML

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