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

• Install lite-server:

  • For more details

  lite-server npm

   npm install -g lite-server

• 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 Checklist

---

• 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

VueJS

Things you will have to lookup in the VueJS documentation:

In VueJS guide Read on this topics:

Introduction to VueJS Introduction — Vue.js

• Form Input Bindings Form Input Bindings — Vue.js
• Directives(v-model, @submit or v-on:submit, v-if, v-for, v-bind, v-bind:key or :key, v-bind:src or :src) Template Syntax — Vue.js
• Template Syntax(interpolations) Template Syntax — Vue.js

VueJS Documentation

VueJS Checklist

• Install VueJS

  npm i -g @vue/cli

  • Install Vue boilerplate

  vue create <vue project name>

• Serve the Vue Project

  yarn serve

• Remove un-needed things delete /components/HelloWorld.vue and clean up (App.vue)
  • Install the VSCode extension "Vetur"
• Add Skeleton CDN link in /public/index.html

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

• Add search form to page.
• Update state when iput changes
• Make API Request with search term when form is submitted
• Show loading image
• Append Results to the page
• Hidde loading image