learning-journal/index.js at main · ToranMarriott/learning-journal · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import posts from "./posts.js"

const heroSection = document.getElementById('hero-section')
const feedGrid = document.getElementById('feed-grid')


function createHeroHtml(){
    let heroHtml = ``
    posts.forEach(function(post){
        if (post.hero === true) {
            let postTagsList = ``
            post.tags.forEach(function(tag){
                postTagsList += `<li class="indiv-tag">${tag}</li>`
            })
            heroHtml += `
                <div class="hero-block" style="--hero-image: url('${post.image}')">
                    <div class="hero-content">
                        <h2 class="hero-title">${post.title}</h2>
                        <p class="hero-excerpt">${post.excerpt}</p>
                        <ul class="tags">${postTagsList}</ul>
                    </div>
                </div>`
        }
    })
    if (heroHtml === ``) {
        let postTagsList = ``
        posts[0].tags.forEach(function(tag){
            postTagsList += `<li class="indiv-tag">${tag}</li>`
        })
        heroHtml = `
            <div class="hero-block" style="--hero-image: url('${posts[0].image}')">
                <div class="hero-content">
                    <h2 class="hero-title">${posts[0].title}</h2>
                    <p class="hero-excerpt">${posts[0].excerpt}</p>
                    <ul class="tags">${postTagsList}</ul>
                </div>
            </div>`
    }
    return heroHtml
}

function renderHeroPost(){
    heroSection.innerHTML = createHeroHtml()
}

function createFeedGridHtml(){
    const gridPosts = posts.filter(post => post.hero === false)
    const gridHtml = gridPosts.map(function(post){
        let postTagsList = ``
        post.tags.forEach(function(tag){
            postTagsList += `<li class="indiv-tag">${tag}</li>`
        })
        return `
            <div class="post-card">
                <img class="post-img" src="${post.image}"></img>
                <div class="post-content">
                    <p class="post-date">${new Date(post.date).toLocaleDateString("en-GB", {
                        day: "numeric",
                        month: "short",
                        year: "numeric"
                    })}</p>
                    <h3>${post.title}</h3>
                    <p>${post.excerpt}</p>
                    <ul class="tags">${postTagsList}</ul>
                </div>
            </div>`
        }
    ).join('')
    return gridHtml
}

function renderFeedGrid(){
    feedGrid.innerHTML = createFeedGridHtml()
}

renderHeroPost()
renderFeedGrid()