Quick Intro to PWA-II
Tags: webdev, pwa, tutorial
Published: 2020-04-16 15:10:16

A quick recap, from our previous [tutorial](https://dev.to/maverick_10/quick-intro-to-pwa-i-4ghl). We have created a responsive web app that contains a grid container and a flexbox navbar. By now your file structure should replicate something similar to this:

![File_Structure_VsCode](https://dev-to-uploads.s3.amazonaws.com/i/85yttayhse6311hnxvpi.PNG)

In this tutorial, we will be looking to add images and use javascript to fetch those on the front end. So without further ado let's get our hands dirty.

## 1. Images: 
I've used these [images](https://github.com/suhpin95/Basic-PWA/tree/master/images) for the creation of the app. The intention here is to make a PWA, so our prime focus should be on the creation of the app rather than it's styling. There's flexibility in choosing the images as per the requirements, but then you might have to change the styling that would be suitable for the resolution of the images. Many websites provide royalty-free images and [Unsplash](https://unsplash.com/), [Pexels](https://www.pexels.com/) are just a few to name.

## 2. JavaScript:
Now we will be using the images from the above step in javascript and fetch it in the front end. So let's create a folder and name it **_js_** and inside the js folder create a file and name it `app.js`.

`app.js`
``` javascript
const container = document.querySelector(".container")
const musicalInstruments = [
  { name: "Rudra Venna", image: "images/venna.jpeg"},
  { name: "Violin", image: "images/violin.jpg"},
  { name: "Tabla", image: "images/tabla.jpg"},
  { name: "Mandolin", image: "images/mandolin.jpg"},
  { name: "Piano", image: "images/piano.jpg"},
  { name: "Guitar", image: "images/Electric-Guitar.png"},
]
const showInstruments = () => {
  let output = "" ;
  musicalInstruments.forEach(
    ({ name, image }) =>
      (output += `
              <div class="card">
                <img class="card-avatar" src=${image} />
                <h2 class="card-title">${name}</h2>
                <a class="card-link" href="#">Listen</a>
              </div>
              `)
  )
  container.innerHTML = output
}
document.addEventListener("DOMContentLoaded", showInstruments);
```
Here we have created a `musicalInstruments` object that contains the properties of **name** and **image**. The `showInstruments` arrow function has been created to loop through `musicalInstruments` object which will concatenate `output`. In the mean while we have accessed the container(div) element and gave reference of `output` to render our DOM.

![Um...What?](https://media.giphy.com/media/13yUJuYdyGQxqM/giphy.gif)

Well, let me put it down in simple words. We have got the elements in front-end by looping the data present in `musicalInstruments` with the help of `showInstruments` function and returned the value in `output`. I hope this makes sense now. Now let's move on to styling our front end.

## Styling
Now we will be changing the ` app.css`  file to adjust the images on the screen as a **_card_**(Simply put cards are rectangular components that act as an entry point containing text & image to provide detailed information). Also, we have imported Roboto font just to make our typography look clean & simple.

_CSS_:
`app.css`
```
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');	
body {
  background-image: url("../images/backGroundImage.jpg");  
  background-position: left;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
}
.card{
    display : flex;
    align-items : center;
    flex-direction : column;
    width : 15rem auto;
    height : 15rem;
    background : #fff;
    box-shadow : 0 10px 20px rgba(0, 0, 0, 0.25), 0 6px 6px rgba(0, 0, 0, 0.20);
    border-radius : 10px;
    margin : auto;
    overflow : hidden;
}
.card-avatar{
    width : 100%;
    height : 10rem;
    object-fit : cover ;
}
.card-title{  
    font-weight : 700;
    text-transform : capitalize;
    font-size : 1.1rem;
    margin-top : 0.5rem
}
.card-link{
    text-decoration : none;
    background : #878f99;
    color : #fff;
    padding : 0.35rem 1rem;
    border-radius: 20px;
}
```
Here we have created a card of flexbox layout in which the alignment of the content will be in the center of the card with respect to cross-axis(Perpendicular to main-axis which in this case is Vertical axis as flex-direction is coloumn). Box shadow has been set across the frame to make the card more attractive. Now you should get output along this line.

 ![OutputForTutorial2](https://dev-to-uploads.s3.amazonaws.com/i/ftbjvpxetu0185d1g6ce.PNG)

Now we are good to go with our third tutorial where we will add `manifest.json` and write `serviceWorker` code which would complete our PWA app. So stay tuned.

Thanks for reading!!!!