Styling our title

Our current code is

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
        <title>title</title>
    </head>
    <body>
        <div class="container">
            <div id="posts"></div>
        </div>

        <script>
            function addParagraph(text, div) {
                var para = document.createElement("p");
                para.innerText = text
                div.appendChild(para)
            }

            function addTitle(text, div) {
                var title = document.createElement("h1");
                title.innerText = text
                div.appendChild(title)
            }

            var posts = document.getElementById("posts")
            var blog_posts = [
                ["Lorem Ipsum", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."]
            ]
            for (var i = 0; i < blog_posts.length; i++) {
                addTitle(blog_posts[i][0], posts)
                addParagraph(blog_posts[i][1], posts)
            }
        </script>
    </body>
</html>

And this works just fine! But let's make our title better looking, like we used to have it! So jump into your addTitle function.

            function addTitle(text, div) {
                var title = document.createElement("h1");
                title.innerText = text
                div.appendChild(title)
            }

In here, we want to change our variable title. How do we do this? This, just like the innerText is not completely intuitive but it's not that hard to understand either. The way it works in JavaScript is that we select the list of classes for the element, and then we add a new class to it.

In code that is

title.classList.add("title")

So when we add that to our function we will get

            function addTitle(text, div) {
                var title = document.createElement("h1");
                title.innerText = text
                title.classList.add("title")
                div.appendChild(title)
            }

NOTE: We need to add this before we append the element, and after it is created, but we could do it before we change the innerText.

DONE!

We are done! We have created this awesome-looking blog! But the question you might have is, why did we go through all of that trouble of using JavaScript when it worked just fine just editing the HTML-elements themselves.

In the next session we will find out why.

Here's the completed code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
        <title>title</title>
    </head>
    <body>
        <div class="container">
            <div id="posts"></div>
        </div>

        <script>
            function addParagraph(text, div) {
                var para = document.createElement("p");
                para.innerText = text
                div.appendChild(para)
            }

            function addTitle(text, div) {
                var title = document.createElement("h1");
                title.innerText = text
                title
                    .classList
                    .add("title")
                div.appendChild(title)
            }

            var posts = document.getElementById("posts")
            var blog_posts = [
                ["Lorem Ipsum", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."]
            ]
            for (var i = 0; i < blog_posts.length; i++) {
                addTitle(blog_posts[i][0], posts)
                addParagraph(blog_posts[i][1], posts)
            }
        </script>
    </body>
</html>