Name: Use forEach to build the html
Uploaded: 2022-07-05T09:04:36.023Z
Duration: 1 min 42 s
Description: Use forEach to build the html

scrimba

Watch in fullscreen

Use forEach to build the html

by Tom Chant

The Frontend Developer Career Path

About

Comments

Notes

Render the tweets to the feed3:58

Use forEach to build the html

by Tom Chant

The Frontend Developer Career Path

Expand for more info

Render the tweets to the feed3:58

index.js

run

preview

console

import { tweetsData } from './data.js'
const tweetInput = document.getElementById('tweet-input')
const tweetBtn = document.getElementById('tweet-btn')

tweetBtn.addEventListener('click', function(){
    console.log(tweetInput.value)
})

function getFeedHtml(){
    
/*
Challenge:
1. Replace the for of with a forEach.
*/
      
    let feedHtml = ``
    for (let tweet of tweetsData){
        feedHtml += `
<div class="tweet">
    <div class="tweet-inner">
        <img src="${tweet.profilePic}" class="profile-pic">
        <div>
            <p class="handle">${tweet.handle}</p>
            <p class="tweet-text">${tweet.tweetText}</p>
            <div class="tweet-details">
                <span class="tweet-detail">
                    ${tweet.replies.length}
                </span>
                <span class="tweet-detail">
                    ${tweet.likes}
                </span>
                <span class="tweet-detail">
                    ${tweet.retweets}
                </span>
            </div>   
        </div>            
    </div>
</div>
`
   }
   return feedHtml 
}

console.log(getFeedHtml())

function getFeedHtml(){

Challenge:

1. Replace the for of with a forEach.

let feedHtml = ``

for (let tweet of tweetsData){

feedHtml += `

<div>

<p class="handle">${tweet.handle}</p>

<p class="tweet-text">${tweet.tweetText}</p>

${tweet.replies.length}

</span>

${tweet.likes}

</span>

${tweet.retweets}

</span>

</div>

}

return feedHtml

}

console.log(getFeedHtml())

import { tweetsData } from './data.js'

const tweetInput = document.getElementById('tweet-input')

const tweetBtn = document.getElementById('tweet-btn')

tweetBtn.addEventListener('click', function(){

console.log(tweetInput.value)

})

›

" <div class="tweet"> <div class="tweet-inner"> <img src="images/troll.jpg" class="profile-pic"> <div> <p class="handle">@TrollBot66756542 💎</p> <p class="tweet-text">Buy Bitcoin, ETH Make 💰💰💰 low low prices. Guaranteed return on investment. HMU DMs open!!</p> <div class="tweet-details"> <span class="tweet-detail"> 0 </span> <span class="tweet-detail"> 27 </span> <span class="tweet-detail"> 10 </span> </div> </div> </div> </div> <div class="tweet"> <div class="tweet-inner"> <img src="images/musk.png" class="profile-pic"> <div> <p class="handle">@Elon ✅</p> <p class="tweet-text">I need volunteers for a one-way mission to Mars 🪐. No experience necessary🚀</p> <div class="tweet-details"> <span class="tweet-detail"> 2 </span> <span class="tweet-detail"> 6500 </span> <span class="tweet-detail"> 234 </span> </div> </div> </div> </div> <div class="tweet"> <div class="tweet-inner"> <img src="images/flower.png" class="profile-pic"> <div> <p class="handle">@NoobCoder12</p> <p class="tweet-text">Are you a coder if you only know HTML?</p> <div class="tweet-details"> <span class="tweet-detail"> 2 </span> <span class="tweet-detail"> 10 </span> <span class="tweet-detail"> 3 </span> </div> </div> </div> </div> "

-1:41