Here is my task: 

Every time you update a task (check it,
uncheck it or add it) the output element should be updated with the number of completed
tasks and the number of tasks. E.g. if you have 7 tasks and 3 are completed, it should read
'3/7 completed'.

On part 3 of the Js code, i made an array that contained all the task elements in the HTML list created by the user input. On part 5 at the bottom, i made function called taskAmount where i attempted to use some JavaScript functions to find the number of checked boxes and the number of elements in the to-do-list. I then tried to return those values and print them out to the console to check if it worked. In the end i want to try to create an output similar to the one shown in the example, but i think i can do that by myself once i get the values i want first.

I don't get an error, but my function doesn't seem to work. My guess is that i made a mistake in the past couple of lines in the taskAmount function.

My attempt: 

```js
tasks = [];

function addTask() {

  var li = document.createElement("li");

  // Adding checkbox
  var cbox = document.createElement('INPUT');
  cbox.setAttribute('type', 'checkbox');
  li.appendChild(cbox);
  cbox.setAttribute('id', 'box');

  // Adding thing to do
  var inputValue = document.getElementById("newTask").value;
  var task = document.createTextNode(inputValue);
  li.appendChild(task);

  if (inputValue === '') {
    alert("You must write something!");
  } else {
    var ullist = document.getElementById("list");
    ullist.insertBefore(li, ullist.childNodes[0]);
  }

  // Part 3
  tasks.push(newTask.value);

  document.getElementById("newTask").value = '';
}

// Prevent Default
document.getElementById("submit").addEventListener("click", function() {
  event.preventDefault()
});

// Part 4
function ifChecked() {
  var list1 = document.querySelector('ul');
  list1.addEventListener('click', function(ev) {
    if (ev.target.tagName === 'INPUT') {
      ev.target.parentElement.classList.toggle('checked');
    }
  }, false);
}
ifChecked();

// Part 5
function taskAmount() {
  var totalTasks;
  var checkedTasks;

  document.getElementById("submit").addEventListener('click', function() {
    var totalTasks = tasks.length;
    var checkedTasks = document.querySelectorAll('input[type="checkbox"]:checked').length;

    return (totalTasks);
    return (checkedTasks);
  })
  console.log(totalTasks);
  console.log(checkedTasks);
}
taskAmount();
```

```css
body {
  width: 600px;
  margin: auto;
  background: #ffe699;
  font-family: garamond;
  font-size: 25px;
}

ul {
  list-style-type: none;
  padding: 0;
  border: 2px solid black;
}

ul li {
  padding-top: 15px;
  padding-bottom: 15px;
  font-weight: bold;
  transition: 0.3s;
}

fieldset {
  background: skyblue;
  border: 2px solid black;
}

ul li:nth-child(odd) {
  background-color: skyblue;
}

ul li:nth-child(even) {
  background-color: white;
}

ul li:hover {
  background-color: #55D;
}

#box {
  margin: 0px 20px 0px;
}

.checked {
  text-decoration: line-through;
}
```

```html
HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title> To do list </title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <h1> To do list </h1>

  <form class="" action="todo.html" method="post">
    <fieldset>
      <label> Add a task in the input field below </label> <br><br>
      <input id="newTask" type="text" placeholder="Type a task here" autofocus> <br><br>
      <input id="submit" onclick="addTask()" type="submit" value="Add task"><br><br>
      <output name="result"> </output>
    </fieldset>
  </form>

  <h2>List of things to do</h2>

  <ul id="list">
  </ul>

  <script src="todo.js">
  </script>
</body>

</html>
```