Discussion of previous exercise

In the previous exercise, your task was to put the message "Hello World" in a h1 tag. As always in programming there are many ways to achieve this. From the top of my head I can think of the following two:

function init() {
    let element = document.getElementById('content')
    element.innerHTML = '<h1>Hello World</h1>'
}

window.addEventListener('load', init)

Instead of setting the innerText of the element, we set the innerHTML. If we were to set the innerText instead of the innerHTML, all special characters like "<" would be escaped.

The other way to do this would be to first create a new element and append it to the element.

function init() {
    let element = document.getElementById('content')
    let h1 = document.createElement('h1')
    h1.innerText = 'Hello World'
    element.appendChild(h1)
}
window.addEventListener('load', init)

This way can be safer if you are working with arbitrary text. Imagine, the message would be "y<x". If you just blindly set the inner HTML like the following, you will notice that suddenly the x and the < sign will disappear. This is because the <x is interpreted as the opening of an HTML tag.

//...
    element.innerHTML = '<h1>y<x</h1>'
// ...

Introduction to Exercise 1

Today we will deepen our knowledge of functions. Functions are first and foremost a tool to organize your code. They allow you to split it into small logical units. Generally one recommendation is to write small functions that do one thing well and have a descriptive name. Later this ensures that you can read your code like a novel.

Over the course of the following few exercises you will write various functions and later reuse them. You will also have to extract code to new functions. I personally do this often during software development, when I realize that I'm repeating myself. After a while you will get a feeling for it, when it is appropriate. Just keep at it and go with your intuition. And when you are wrong you can always try again. Don't be scared of deleting your code and writing it again. Software developers even have a word for it: refactoring; and it's an important part of a healthy long term development process.

Exercise 1

Now to finally get started with writing code, you task for today is to create a function called todoElement(title, items). The argument "title" is a string and "items" is an array of strings.

This function should return an element containing the following tags:

<h1> Title </h1>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>...</li>
</ul>

To test your code paste the following code in your init function:

function init() {
    let mainContent = document.getElementById('content')
    let todo1 = todoElement('Todo Today', [
        'Eat cereals',
        'do js exercise',
        'sleep tight'
    ])
    let todo2 = todoElement('Todo Tomorrow', [
        'Eat pancakes',
        'do yoga',
        'sleep even tighter'
    ])
    mainContent.appendChild(todo1)
    mainContent.appendChild(todo2)
}

After that, your page should look like this:

Preview

Hints

The MDN Web Docs has information on all big web technologies. One page you might want to check out is the documentation for JavaScript arrays. Reading through that page would also help you with learning to read and understand code.

Apart from that I would like you to try and split the code that you were writing into more than one function. Using more functions with one particular task each, will make your code much more readable. Especially when you give your functions a meaningful name.

Bonus Task

You can also style your elements to make them less ugly. Try experimenting with adding classes to your generated elements.

Epilogue

Apart from the things we just covered you might want to learn about how the command line works. This is a daunting task and differs from system to system. The command line interface is a different way to interact with your computer. Normally when you open a folder on your computer you do this by clicking on your files icon and then navigate through the structure by clicking on the various folders. With the command line you basically type the commands you want to execute and then hit enter. Some programs only exist for the command line or are easier to use that way. On top of that it allows you to work on servers that have no window system installed.