Consuming API's(Part 2)
Tags: 100daysofcode, javascript
Published: 2020-07-30 20:40:46

Lets move from [logging out](https://dev.to/mtee/consuming-api-s-1e86) 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.

```html
<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.

```javascript 
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)_

```javascript
<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](https://dev.to/mtee/consuming-api-s-1e86). 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.

```javascript
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.

```javascript
.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.
```javascript
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.
```javascript
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.
```javascript
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](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML) 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](https://github.com/M-Tee/habitTracker-API).

The output with mongodb and the server running:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b0oyaskz68zjwxnou8k3.png)




_✍Day 14_