Build an Image Search App:

Links for Accounts, Installations and References:

ACCOUNTS AND INSTALLATIONS

Please make sure you have these accounts created and verified, plus all the installations.

• Create an account on github:

  Create GitHub Account

  • And FORK this repo:

    vanilla

    • Install GIT: GIT download

• We will be using the unsplash API , create a developper account:

  Create unsplash for developers account https://zeit.co/now

• Create an account a NOW account:

  Create NOW Account

  • Install NOW CLI tool:

    NOW DESKTOP and CLI for W10 users: command for the terminal with NPM (Windows and UNIX users)

   npm install -g now

• Install the appropriate NodeJs (32 or 64bit):

  Download NodeJS

• Install the appropriate Ubuntu 18.04 LTS from Microsoft Store for Microsoft Windows users:

  Download

REFERENCES:

I will recommend you spent 5 mins on these concepts don't sweat it too, it is just for your awareness now.

• This is a simple css framework we will be using called Skeleton:

  For reference Skeleton CSS Framework

• We will be using some concepts (Promises etc...) and some JavaScrript you might not know yet (fetch(), then()) so check this out

  Reference on Promises in JS Reference of the then() in JS Reference of the fetch() in JS

Link to the finished app:

Image Search APP (VANILLAJS)

---

Visual Idea of the App:

---

Vanilla JS

the application will contact the unsplash Image Search API.

Image search API like Unsplash

https://api.unsplash.com/search/photos/

You will need an access key from unsplash.com. After signing up as a developper, create an application here:unsplash application link

All apps will use the skeleton CSS framework You can use the CDN link down here or just keep a minified version offline:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">

Use this style for the body:

body {
  width: 80%;
  margin: 2em auto 0 auto;
}

This app demonstrates:

• User Input
• DOM Events
• API Requests
• Conditional Rendering
• Rendering Lists of Data

Vanilla JS

---

• Add search form to page
• Make API Request with search term when form is submitted
• Show loading image
• Append Results to the page
• Hide loading image