Quick Intro to PWA-II

A quick recap, from our previous tutorial. 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:

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 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, Pexels 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

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.

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.

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!!!!