Taskmanager

by Vince Aggrippino

HTML

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Taskmanager 1.0</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="main.css">
</head>

<body>

  <nav class="navbar navbar-expand-lg sticky-top bg-dark bg-light">
    <a class="navbar-brand " href="#">Taskmanager 1.0</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#changelog">Changelog</a>
        </li>

      </ul>

    </div>
  </nav>

  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <p class="lead">Enter your task and finish them whenever you want.</p>

      <form onsubmit="return false;">
        <div class="form-group">
          <label for="exampleFormControlInput1">What do you want to do?</label>
          <input type="text" class="form-control" id="createTaskInput" placeholder="Buy milk..">
          <button type="submit" id="submitTask" class="btn btn-primary btn-lg">Create task</button>



        </div>

      </form>

    </div>


  </div>

  <div class="list-group container mb-3">

    <h2 class="container "> Things to do</h2>

    <ul id="items" class="taskList">
      <li...

CSS

*,
::after,
::before {
  box-sizing: border-box;
}



.bg-dark a {
  color: white;
}

.list-group {
  padding-bottom: 10%;

}

.list-group li {
  display: flex;
  margin-left: -25px;


}

.taskList li {
  cursor: move;
}

a.list-group-item.list-group-item-action {
  margin-bottom: 4px;
}

#createTaskInput {
  margin-bottom: 20px;
}

JavaScript

console.clear()
let createTaskInputField = document.getElementById("createTaskInput")
let submitTask = document.getElementById("submitTask")
let tasklistItems = document.getElementById("items")




// Create task
submitTask.addEventListener('click', function (event) {

  let newTask = createTaskInputField.value;

  const newItem = document.createElement(`li`)
  newItem.classList.add(`list-group-item`, `list-group-item-action`, `d-flex`, `align-items-center`, `justify-content-between`)
  
  const newItemText = document.createElement(`span`)
  newItemText.classList.add(`item-text`)
  newItemText.appendChild(document.createTextNode(newTask))
  
  const newItemDiv = document.createElement(`div`)
  
  const newItemEdit = document.createElement(`button`)
  newItemEdit.classList.add(`btn`, `btn-secondary`, `btn-sm`, `justify-content-between`, `edit-btn`)
  newItemEdit.setAttribute(`type`, `button`)
  newItemEdit.appendChild(document.createTextNode(`Edit task`))
  
  const newItemDelete = document.createElement(`button`)
  newItemDelete.classList.add(`btn`, `btn-outline-danger`, `btn-sm`, `justify-content-between`, `delete-btn`)
  newItemDelete.setAttribute(`type`, `button`)
  newItemDelete.appendChild(document.createTextNode(`Delete task`))
  
  newItemDiv.appendChild(newItemEdit)
  newItemDiv.appendChild(newItemDelete)
  
  newItem.appendChild(newItemText)
  
  newItem.appendChild(newItemDiv)
  
  const itemsList = document.getElementById(`items`)
  const firstItem = itemsList.querySelector(`li`)
  itemsList.insertBefore(newItem, firstItem)
  
  createTaskInputField.value = ""
  createTaskInputField.focus()
})

// edit task
document.querySelector("#items").addEventListener("click", function (e) {
  if (e.target.classList.contains("edit-btn")) {
    //alert("edit clicked?")
    editTask(e)
  }
})

function editTask(e) {
  let updatedTask = e.target.parentElement.parentElement.querySelector(".item-text").innerText
  if (taskUpdate = prompt("How do you want to change...