Jan

Learning JavaScript - Part 2

09.08.2021

Discussion of Previous Exercise

In Exercise 1 we expanded on the generation of HTML and this time we did it based on test data. In the hints I told you to read the MDN JavaScript array page in the hopes that you would stumble upon the Array.prototype.forEach function to help you append each to-do item to the parent ul element.

Below I will show you an example solution:


function todoElement(title, items) {
    let parent = document.createElement('div')
    parent.appendChild(todoTitleElement(title))
    parent.appendChild(todoItemList(items))
    return parent
}

function todoItemList(items) {
    let parent = document.createElement('ul')
    items.forEach(item => {
        parent.appendChild(todoItemListElement(item))
    })
    return parent
}

function todoItemListElement(item) {
    let elem = document.createElement('li')
    elem.innerText = item
    return elem
}

function todoTitleElement(title) {
    let titleElem = document.createElement('h1')
    titleElem.innerText = title
    return titleElem
}

As you can see, the function names help you identify what each function returns. They are by no means perfect and code style is always a subjective matter. But always try to put yourself in the shoes of the next person who has to read and maintain you code. If for instance later you want to add a class to all li tags, finding a function that does only that, makes it easier to ensure that you don't break too much when modifying the code.

Introduction to Exercise 2

To expand and broaden our understanding of functions, we will expand on the previous exercise. Instead of receiving two different arguments, this time you will receive an object containing the various required values identified by keys. This pattern is very common in web development. Often you will map objects you receive from the backend (in the form of JSON) to the required values. Maybe to generate an HTML element or to identify if any of the to-dos are overdue.

Exercise 2

This exercise is a bit more free spirited. You are free to choose whatever output form you desire. The important part is that after your code has been executed the information should be displayed on the page.

You are required to add at least one class to the element and style it to make clear when an item ends and when it begins. Feel free to add a CSS sheet to the index.html.

Below you will find the init function for this exercise.

function init() {
    let todoList = {
        title: 'To Do',
        items: [
            {
                title: 'Do JS Exercise 2',
                description: `
                  - Read the description
                  - Copy and paste the init function to my code
                  - Create a function that generates a beautiful to-do list
                `
                },
                {
                title: 'Go shopping',
                description: `
                  I need to buy: 
                  - eggs
                  - milk
                  - toasts
                  - chocolate
                `
            },
        ]
    }
    
    let todo = createTodoListElement(todoList)

    let mainContent = document.getElementById('content')
    mainContent.appendChild(todo)
}

Hint: the single backtick ` allows you to write multi line strings.

Note that the to-do list has a title and that individual items also have each a title on their own as well as a description. The element should look a bit like one column in Trello.

Hints

Refresh your knowledge of objects if you are stuck. As always, MDN provides a concise introduction to what you need to know to get started.

Make sure you understand, which key of the object belongs to which value, what the intentions are and how each value applies to the final result.

Last but not least: writing everything in one function is becoming more and more complex. Think about how you can split the generation of your result into multiple functions. If you are looking for inspiration you can check out my example code for exercise 1 above.

Epilogue

Another thing that you might want to learn are the basics of git. Git allows you to keep track of the changes you make to your code as well as collaborate with others. On top of that, there are many providers who allow you to upload your repository (basically your folder of code), to share it with the world or directly upload it to your web page from there. Others have created better articles and even interactive tutorials about it than I ever could. Some examples include: