Consuming API's(Part 2)

Lets move from logging out data on the console to displaying it on the web.

In the index.html file I'll create a div with an Id of root and h1 element.

<div id="root">
    <h1 class="heading">Habits</h1>  
 </div>

I'll access this element from my index.js using getElementById() and save it to a variable.

const container = document.getElementById('root');

I'll be using iconify icons so I'll add a script tag to the head section of my html file. I tried using font awesome icons for this but i kept getting a type mismatch error on the console. (I'd really appreciate help on how to go about it)

<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>

Moving on to the index.js file i already have axios fetching data. Axois returns a promise hence I'll chain a then () method which basically says "hey, after you're done retrieving the data proceed with the following operations." If data retrieval fails I'll need to catch that error, Hence I'll chain a .catch () method and pass in an arrow function that logs out an the error.

const response = await axios({
 url: 
  'http://localhost:4000/habittracker/habits',
 method: 'get'
})
.then()
.catch(err => {
  console.log(err)
})

Inside .then() I'll pass in an arrow function with reponse as a parameter. My function body will include a variable declaration that holds response.data. Using forEach() method I'll loop through the data properties.

.then(response => {
  let data = response.data;

  data.forEach(habit => {
    //code
  })
})

In the forEach( ) method I'll pass an arrow function with habit as a parameter. Then create and append the following html elements.

• Div with class card.

const card = document.createElement('div')
card.setAttribute('class', 'card')
container.appendChild(card)

The above simply states, create a div with class of card and add it as a child of the root element (container).

• Div with class content. This will be a child element of card. It will also 'bear' two child elements; an input and a paragraph.

const content = document.createElement('div')
content.setAttribute('class', 'content')
card.appendChild(content)

const input = document.createElement('input')
input.setAttribute('type', 'checkbox')   
content.appendChild(input)

const p = document.createElement('p')
p.setAttribute('class', 'habit-title')
p.textContent = habit.title
content.appendChild(p)

Habit.title allows me to access the title property from the fetched data.

• Div with class edit (for lack of a better name)😅 which will be a child element of card and have two child elements.

const edit = document.createElement('div')
edit.setAttribute('class', 'edit')
card.appendChild(edit)

edit.insertAdjacentHTML('beforeend', '<p class="iconify" data-icon="clarity:edit-solid" data-inline="false" style="color: purple;"></p>');
edit.insertAdjacentHTML('beforeend', '<p class="iconify" data-icon="carbon:delete" data-inline="false" style="color: purple;"></p>');

insertAdjacentHTML() is used to add the specified string as a html element. It takes two parameters the position and the html string. In this case I'm inserting the html as the last child in the element.

Lastly we'll add a style.css file. You can find the css here.

The output with mongodb and the server running:

✍Day 14