Skip to content

Latest commit

 

History

History
126 lines (101 loc) · 4 KB

Week 03 - DOM Manipulation Assignment.md

File metadata and controls

126 lines (101 loc) · 4 KB

Week 03 - 3.1 | DOM (Simple)

Assignment #1 - When the user clicks on the Add todo button, a new TODO should be added.

images

Assignment #2 - Fetching the first TODO (Assignment)

images

const firstTodo = document.querySelector("h4");
console.log(firstTodo.innerHTML);

Assignment #3 - Fetching the second TODO (Assignment)

images

const secondTodo = document.querySelectorAll("h4")[1];
console.log(secondTodo.innerHTML);

Assignment #4 - Update the first todo’s contents

images

const firstTodo = document.querySelector("h4");
firstTodo.innerHTML = "Dont' take class";

Assignment #5 - Add a delete button right next to the todo that deletes that todo

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1>Todo list</h1>
  <div>
    <div id="todo-1">
      <h4>1. Take class</h4>
      <button onclick="deleteTodo(1)">delete</button>
    </div>
    <div id="todo-2">
      <h4>2. Go out to eat</h4>
      <button onclick="deleteTodo(2)">delete</button>
    </div>
  </div>
  <div>
    <input type="text"></input>
    <button>Add Todo</button>
  </div>
</body>

<script>
  function deleteTodo(index) {
    const element = document.getElementById("todo-" + index);
    element.parentNode.removeChild(element);
  }
</script>

</html>

Assignment #6 - Write a function to add a TODO text to the list of todos

Steps -

  1. Get the current text inside the input element
  2. Create a new div element
  3. Add the text from step 1 to the div element
  4. Append the div to the todos list
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1>Todo list</h1>
  <div id="todos">
    <div id="todo-1">
      <h4>1. Take class</h4>
      <button onclick="deleteTodo(1)">delete</button>
    </div>
    <div id="todo-2">
      <h4>2. Go out to eat</h4>
      <button onclick="deleteTodo(2)">delete</button>
    </div>
  </div>
  <div>
    <input id="inp" type="text"></input>
    <button onclick="addTodo()">Add Todo</button>
  </div>
</body>

<script>
  function addTodo() {
    const inputEl = document.getElementById("inp");
    const textNode = document.createElement("div");
    textNode.innerHTML = inputEl.value;
    const parentEl = document.getElementById("todos");
    parentEl.appendChild(textNode);

  }
</script>
</html>

images

Assignment #7 - Create a Todo List App with Add, Update & Delete Functionality