search

rbi-learning / Today-I-Learned

1 stars 0 forks source link

Today I learned 8/4 #58

Open amatheus000 opened 4 years ago

amatheus000 commented 4 years ago

Morning Exercise

We started today's course with a reminder of some CSS and HTML integration concepts using JS. Some important things to highlight:

  1. We first need to select the location in the HTML page where the element will be introduced using the following formula:

const main = document.querySelector('main');

  1. Then we need to create a render function using that takes all of the elements in the object that we want to insert into the DOM. We use the following formula:

const renderCategory = category => ` section> img src="${category.image}" alt="${category.name}" class="food"/> h2>${category.name} h3>See more /section>

  1. We use map and join function to convert the array into a script:

const eachCategoryHTML = categories.map(renderCategory); const allCategoriesHTML = eachCategoryHTML.join('');

  1. We define the location in which the elements will be placed in the HTML.

main.innerHTML = allCategoriesHTML

JSON

We introduced SON files. The main function we used it today was to fetch data somewhere across the Internet and then create a DOM using that data.

In order to do this we used the following formulas:

const fetchProfileData = async () => { const response = await fetch("https://api.github.com/users/saraashleyho") const profileData = await response.json() //const with data...// }

All of the const defined inside of the fetch function will be then used to render this into scripts using the same format as we did for HTML and CSS unctions introduced into the DOM using JS.

  1. Defining a const rendering funciton --> 2. Use map and join to convert the array into a string --> 3. Define the location of the elements that will be placed in the HTML.