CS50 Web Programming With Python and JavaScript Project 0 Demonstration

This video demonstrates my submission for Project 0 for CS50 Web Programming with Python and JavaScript.

Timestamps
PAGES 00:13
AESTHETICS 00:13 to end
QUERY TEXT 00:22
LUCKY 00:32
QUERY IMAGES 00:41
QUERY ADVANCED 00:55
APPEARANCE 00:55 to end (Responsiveness from 2:15)

PAGES:

For this site, all files have been created in the same directory. There is an index.html file representing the entry point into the site along with three other pages; Google Search, Google Image Search and Google Advanced Search. If the index page is selected then the user is automatically redirected to the basic search page.

The search page has two links in the upper-right of the page to go to the image search and advanced search. On the other two pages there
is a link in the upper-right to return to the search page.

AESTHETICS:

As can be seen, the pages have been designed to match Google's own aesthetic quite closely. The pages render slightly differently between
Firefox and Chrome browsers and also on different monitors. The project pages were created to conform to the appearance of Google's pages
on Firefox running on an older Samsung 19" monitor.

QUERY TEXT:

On the search page, the user can type in a query and click Google Search to be taken to the search results. Note that the search bar is
centered with rounded corners. The search options are also centered and located beneath the search bar.

LUCKY:

A button has been added to the main search page to demonstrate Google's "I'm Feeling Lucky" functionality. If this button is used the
user may receive a redirect warning. However the correct lucky link is available. I note that this behaviour has also been observed on
Google's own site.

QUERY IMAGES:

On the image search page, the user can type in a query, click a search button and be taken to the Google image search results for that page.

QUERY ADVANCED:

On the advanced search page the user can provide input for four fields taken from Google's own advanced search options. The examples provided on Google's own pages can be used to demonstrate this functionality.

APPEARANCE:

Like Google's own Advanced Search page, the four options are stacked vertically and all of the text fields are left aligned. Consistent with Google's own CSS, the Advanced Search button is blue with white text and exhibits
similar behaviour on hover. The button fulfils its intended function, taking users to search results for the given query. Also note the similar responsive behaviour when a smaller browser window is used.