0
150
ViewsGet date in css store in js in a js created element
I am learning Javascript and I try to build a to do app. I input the task and the date. I want to have a list with each task and its assigned date. Can this be done with only HTML/Javascript, picking the date with a HTML?
Here is the code:
<div class="task">
<form>
<input type="text" class="in-text" />
<input type="date" class="in-date" />
</form>
</div>
<div class="todo-container">
<ul class="todo-list"></ul>
</div>
const todoInput = document.querySelector(".in-text");
const todoDate = document.querySelector(".in-date");
document.addEventListener("keyup", addTodo);
function addTodo(e) {
e.preventDefault;
const newTodoDiv = document.createElement("div");
const newTodoElement = document.createElement("li");
newTodoElement.innerText = todoInput.value;
newTodoDiv.appendChild(newTodoElement);
//HERE IS SOME OF WHAT I THOUGHT IT WOULD BE DONE LIKE
const newTodoDate = document.createElement("date");//i know date can`t be used like this
newTodoDiv.appendChild(newTodoDate);
}
·
Juan Pablo Isaza
1 answers
Answer question0
Assuming the code structure from your drawing. You might need to wrap your date inside a non-breaking element like span to show your date.
On the change event of the date picker, you can update those spans. Here's a small demo of it.
const datePicker = document.getElementById("date-selector");
const dateSections = document.getElementsByClassName("date");
// adding a listener to the date picker on its onchange event.
datePicker.addEventListener("change", (e) => {
const d = new Date(e.target.value);
const date = d.getDate();
const month = d.getMonth() + 1;
const year = d.getFullYear();
// this is an interpolated string, you can format it in any way you like
const formattedString = `${date}/${month}/${year}`;
// update all "date" sections
for (let section of dateSections) {
section.innerHTML = formattedString;
}
});<input id="date-selector" type="date" />
<ul>
<li> Task1 <span class="date">10/01/22</span> </li>
<li> Task1 <span class="date">10/01/22</span> </li>
<li> Task1 <span class="date">10/01/22</span> </li>
</ul>
·
Juan Pablo Isaza
Report
Answer question