Gclone Client

Installation & Usage

Installation

• npm install to install dependencies

Usage

• npm run dev to run
• npm test to run the tests

Changelog

index.html

• added form with search bar and 2 buttons

index.js

• refactored to reduce uneeded code by creating the target elements and listeners for them
• added the event listener and handler for button search
• added the event listener and handler for feeling lucky
• fixed the query formating that send request to the server
• refactored event handlers to include smaller reusable functions
• function to get the result data
• function to create the result list
• function to create the formated one result sample and append it to the view
• cleanup of the file

data.js

• static file

Bugs

• client sends incorrectly formatted keyword as aquery to the server
• content from old search needs to be destoryed on new search
• long load times - confusing - should tell user that query is running !
• does not identify listeners
• does not remove previous search results so new search results are not displayed

layout bugs

• flex layout causes content to shift off left of screen on window resize
• flex flow causes unpleasant break up of content when search alligned to top of screen

TODO

Functionality

• upon search button pressing send request to the server with search keyword
• feeling lucky button:
  • pass the keyword
  • then generate random index for the search result
  • select and redirect to the result with randomIndex

Design

• search area that hides
  • add logo
  • x in search bar to clear content on click
• style the buttons
• format the output of the query
• responsive design!
• some issues with content width being more uniform
• footer
• add search info text between search bar and results like google has

Other

• Create review branch
• README file
• Boiler plate of the project
• Create the static data to develop the client side without consuming API requests
• Hook the event handlers to send query to the server instead of static data
• use function from server or add the logic to return only 10 results

Other

• Create review branch
• README file
• Boiler plate of the project
• Create the static data to develop the client side without consuming API requests
• Hook the event handlers to send query to the server instead of static data
• use function from server or add the logic to return only 10 results