/Wikipedia

Design of wikipedia search engine using wikipedia APi

Primary LanguageCSS

HTML Structure

  • section.wiki
    • div.container
      • img
      • h3(text)
      • form.form
        • input.form-input type='text'
        • button.submit-btn (search) type='submit'
    • div.results
      • div.articles
        • a
          • h4
          • p (lorem20)

API DOCS

Initial Setup

  • select form, input, results
  • listen for submit events
  • if empty value, display error
  • create fetchPages()
  • pass valid input value into the fetchPages()

Fetch Pages

  • display loading while fetching
  • construct dynamic url
  • display if error
  • display error no items
  • create renderResults()
  • pass valid results into renderResults()

Render Results

  • iterate over the list
  • pull out title, snippet, pageid
  • setup a card
  • set results with div.articles and list inside