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

Creating The Search Bar

• <form> - Form element is for the user input
• <input> - We will set the input type to search
• <button> - button will submit the form and start the search

<form id="form"> 
  <input type="search" id="query" name="q" placeholder="Search...">
  <button>Search</button>
</form>

Step 2 Java Script: Creating Java Script Function And Executing The Function

Setting JS variables

• const f and const q are being set as variables to form and search input box (query).
• const google and const site creating the google and site variables to the google search engine and your specific website.

Full code

const f = document.getElementById('form');
const q = document.getElementById('query');
const google = 'https://www.google.com/search?q=site%3A+';
const site = 'https://nighthawkcodingsociety.com';

Search Function

• const url = google + site + '+' + q.value; - Combines variables that were set with the query value in the search
• const win = window.open(url, '_blank');- opens a new tab to search
• f.addEventListener('submit', submitted);- executes function when button is pressed

Full code

function submitted(event) {
  event.preventDefault();
  const url = google + site + '+' + q.value;
  const win = window.open(url, '_blank');
  win.focus();
}

f.addEventListener('submit', submitted);