I am making a simple ToDo app that when you write in the input form and submit it, it posts it neatly in a flex-box design below.
After it adds Your writing to the ToDo list at the bottom, JavaScript clears the input selection box.
My problem is that all the created ToDo list items are the SAME! They have the same class name and structure. I do not know how to handle all the buttons that are created so that when you click on the <button class='delete-btn'>x</button> it deletes only that button.
I have put all the writing templates created into a simple array called arrayOfText.
I was hoping I could delete the specific <div class='todo-div'>...</div> that the button was clicked from and then rewrite the whole .innerHTML of the ToDo list section.
This basically updates it and removes the div from the ToDo list that the button was clicked from, but I cannot seem to get it to work.
If you need more information, please message me.
"use strict";
const outputSection = document.querySelector("#output-section");
outputSection.innerHTML = "";
const writingArea = document.querySelector("#writing-area");
const publishBtn = document.querySelector(".default-btn");
const deleteBtns = document.getElementsByClassName("delete-btn");
const allToDoDivs = document.getElementsByClassName("todo-div");
const arrayOfText = [];
const cutAndPrintFunc = function (e) {
e.preventDefault();
//take writing in and print it to the current agenda
// clear the writing area
if (writingArea.value != "") {
const date = new Date();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDay()).padStart(2, "0");
const year = date.getFullYear();
const hour = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
const AMorPM = date.getHours() > 12 ? "PM" : "AM";
const minute = String(date.getMinutes()).padStart(2, "0");
const template = `
<div class="todo-div">
<h1 class="text-content">${writingArea.value}</h1>
<button class="delete-btn">x</button>
<p class="date-p">${month}/${day}/${year} --- requested @ ${hour}:${minute} ${AMorPM} </p>
</div>`;
arrayOfText.push(template);
outputSection.insertAdjacentHTML("beforeend", template);
writingArea.value = "";
Array.from(allToDoDivs).forEach((el, ind) => {
if (ind % 2 === 0) {
el.style.backgroundColor = "#3ce815";
el.lastElementChild.style.color = "black";
}
//-----this does not work
// Array.from(allToDoDivs)[
// allToDoDivs.length - 1
// ].children[1].addEventListener("click", () => {
// console.log(this);
// // arrayOfText.pop(this);
// // outputSection.innerHTML = arrayOfText.join("");
// });
});
}
};
//publish text by hitting enter or pressing the plus sign in textbox
publishBtn.addEventListener("click", cutAndPrintFunc);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Comfortaa&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/style.css" type="text/css" />
<title>Griffin's ToDo List</title>
</head>
<body>
<header>
<h1>
Welcome to <em style="text-decoration: underline">Griffin's</em> To-Do
List
</h1>
<div id="mini-flex-div">
<div class="ball" id="blue"> </div>
<div class="ball" id="orange"> </div>
<div class="ball" id="purple"> </div>
<p>What needs to be done today...</p>
<div class="ball" id="purple"> </div>
<div class="ball" id="orange"> </div>
<div class="ball" id="blue"> </div>
</div>
</header>
<main>
<div id="writer-div">
<form>
<input
id="writing-area"
type="text"
rows="1"
placeholder="Lets get this out of the way..."
maxlength="50"
spellcheck="true"
autofocus
></input>
<button class='default-btn'>+</button>
</form>
</div>
</main>
<div id="bottom-header">
<h1 id="output-h1">The current agenda...<hr id="splitter"></h1>
</div>
<section id="output-section">
<div class="todo-div">
<h1 class="text-content">Mow the lawn</h1>
<button class="delete-btn">x</button>
<p class="date-p">mm/dd/yyyy</p>
</div>
<div class="todo-div">
<h1 class="text-content">Mow the lawn</h1>
<button class="delete-btn">x</button>
<p class="date-p">mm/dd/yyyy</p>
</div>
</section>
<script src="/toDo.js"></script>
</body>
</html>
