script.js

const chanels = [{
    image : 'thumbnails/thumbnail-1.webp',
    duration : '14:20',
    channelPicture : 'thumbnails/channel-1.jpeg',
    para1 : 'Talking Tech and AI with Google CEO Sundar Pichai!',
    para2 : 'Marques Brownlee',
    para3 : '3.4M views · 6 months ago'
}, {
    image : 'thumbnails/thumbnail-2.webp',
    duration : '8:22',
    channelPicture : 'thumbnails/channel-2.jpeg',
    para1 : 'Try Not To Laugh Challenge #9',
    para2 : 'Markiplier',
    para3 : '19M views · 4 years ago'
}, {
    image : 'thumbnails/thumbnail-3.webp',
    duration : '9:33',
    channelPicture : 'thumbnails/channel-3.jpeg',
    para1 : 'Crazy Tik Toks Taken Moments Before DISASTER',
    para2 : 'SSSniperWolf',
    para3 : '12M views · 1 year ago'
}, {
    image : 'thumbnails/thumbnail-4.webp',
    duration : '22:09',
    channelPicture : 'thumbnails/channel-4.jpeg',
    para1 : 'The Simplest Math Problem No One Can Solve - Collatz...',
    para2 : 'Veritasium',
    para3 : '18M views · 4 months ago'
}, {
    image : 'thumbnails/thumbnail-5.webp',
    duration : '11:17',
    channelPicture : 'thumbnails/channel-5.jpeg',
    para1 : 'Kadane\'s Algorithm to Maximum Sum Subarray',
    para2 : 'CS Dojo',
    para3 : '519K views · 5 years ago'
}, {
    image : 'thumbnails/thumbnail-6.webp',
    duration : '19:59',
    channelPicture : 'thumbnails/channel-6.jpeg',
    para1 : 'Anything You Can Fit In The Circle I’ll Pay For',
    para2 : 'MrBeast',
    para3 : '141M views · 1 year ago'
}, {
    image : 'thumbnails/thumbnail-7.webp',
    duration : '10:13',
    channelPicture : 'thumbnails/channel-7.jpeg',
    para1 : 'Why Planes Don\'t Fly Over Tibet',
    para2 : 'RealLifeLore',
    para3 : '6.6M views · 1 year ago'
}, {
    image : 'thumbnails/thumbnail-8.webp',
    duration : '7:12',
    channelPicture : 'thumbnails/channel-8.jpeg',
    para1 : 'Inside The World\'s Biggest Passenger Plane',
    para2 : 'Tech Vision',
    para3 : '3.7M views · 10 months ago'
}, {
    image : 'thumbnails/thumbnail-9.webp',
    duration : '13:17',
    channelPicture : 'thumbnails/channel-9.jpeg',
    para1 : 'The SECRET to Super Human STRENGTH',
    para2 : 'ThenX',
    para3 : '20M views · 3 years ago'
}, {
    image : 'thumbnails/thumbnail-10.webp',
    duration : '7:54',
    channelPicture : 'thumbnails/channel-10.jpeg',
    para1 : 'How The World\'s Largest Cruise Ship Makes 30,000...',
    para2 : 'Business Insider',
    para3 : '14M views · 1 year ago'
}, {
    image : 'thumbnails/thumbnail-11.webp',
    duration : '4:10',
    channelPicture : 'thumbnails/channel-11.jpeg',
    para1 : 'Dubai\'s Crazy Underwater Train and Other Things #Onl',
    para2 : 'Destination Tips',
    para3 : '3M views · 1 year ago'
}, {
    image : 'thumbnails/thumbnail-12.webp',
    duration : '4:15',
    channelPicture : 'thumbnails/channel-12.jpeg',
    para1 : 'What would happen if you didn’t drink water? - Mia',
    para2 : 'TED-Ed',
    para3 : '12M views · 5 years ago'
}];

let channelsHTMl = '';

chanels.forEach((channel) => {
    channelsHTMl += `
        <div class="first-image"> 
            <div class="first-thumbnail">
                <div><a href="https://www.youtube.com/" target="_blank"><img class="thumbnail" src="${channel.image}"></a></div>
                <div class="duration"> ${channel.duration} </div>
            </div>
            <div>  
                <div class="channel-picture">
                    <img class="channel-image" src="${channel.channelPicture}">
                </div>
                <div class="video-info">
                    <p class="para1"><b>${channel.para1}</b></p>
                    <p class="para2">${channel.para2}</p>
                    <p class="para3">${channel.para3}</p></div>
                </div>
        </div>
    `;
});

document.querySelector('.js-grid-for-all').innerHTML = channelsHTMl;