paf-frontend-exercise1's Introduction

Paf frontend exercise

Translate the provided designs (for small & large viewports) into a working solution with HTML, CSS and JavaScript.

Requirements

Use HTML5 to produce a semantic information structure.
Use JavaScript (client-side) to fetch JSON-data from the following url: /api/games/lists.json.
Use JavaScript (client-side) to generate the HTML based on the fetched JSON-data.
Add a search field.
- Should filter the items rendered from the JSON-data.
- Display previous search history.
Use Webcomponents where it's appropriate.
Use CSS to produce the layout with a mobile first approach (minimum requirement to support is screen resolutions from 320px up to 1920px).

You are allowed to make minor adjustments to the layout if needed.

Getting started

Author your solution in the following files:

index.html          # The place to author your HTML.
src/styles.css      # The place to author your CSS.
src/scripts.js      # The place to author your JavaScript.

To be able to fetch the JSON-data from the url /api/games/lists.json you should use one of the following development setups:

Localhost
Codesandbox

Localhost

This setup provides a development server to be used in your machine. Prerequisites are git and node.js (v10 or higher).

Clone repository & install setup:

git clone https://github.com/AndreasLindbergPAF/paf-frontend-exercise.git && cd paf-frontend-exercise

Install dependencies:
```
npm install
```
Start server:
```
npm start
```
When done, package your solution with the following command:
```
npm pack
```
And then send us your paf-frontend-exercise-1.0.0.tgz.

Codesandbox

This is the web based setup that only requires a modern browser to get you started.

Open a new Codesandbox.
Prefix urls with ../dist.
- For example /api/games/lists.json should be ../dist/api/games/lists.json in codesandbox to function properly.
When done, send us your Codesandbox-link.