I was making a to-do list and I couldn't figure out how can I limit the number of creating li. I want to stop it from creating li when it reaches 4 li by not showing it on ul and stop submitting it. This is the one I wrote. If anyone can give me advice or ideas on how to solve this one. Thank you.
const form = document.querySelector('form')
const input = document.querySelector('input')
const memo = document.querySelector('ul')
form.addEventListener('submit', function(e) {
const line = document.ul.child
if (line > 5) {
e.preventDefault()
ToDo()
input.value = ""
}
})
function ToDo() {
if (input.value == '') {
alert('please write')
} else {
const value = input.value
const newList = document.createElement('li')
newList.textContent = value
memo.append(newList)
const deleteBtn = document.createElement('button')
newList.append(' ', ' ', deleteBtn)
deleteBtn.textContent = "DELETE"
console.log(newList)
}
}
memo.addEventListener('click', function(e) {
if (e.target.nodeName === 'BUTTON') {
e.target.closest('LI').remove();
}
})
whole code: here
This lineconst line = document.ul.child would give an error, as it is not valid way to query things from the DOM. Also e.preventDefault() shouldn't be in the if block even if it were correct. This would work:
const form = document.querySelector("form");
const input = document.querySelector("input");
const memo = document.querySelector("ul");
form.addEventListener("submit", function (e) {
e.preventDefault();
const liNumber = document.querySelectorAll("ul li").length;
if (liNumber < 4) {
ToDo();
input.value = "";
} else {
alert("Maximum number reached");
}
});
function ToDo() {
if (input.value == "") {
alert("please write");
} else {
const value = input.value;
const newList = document.createElement("li");
newList.textContent = value;
memo.append(newList);
const deleteBtn = document.createElement("button");
newList.append(" ", " ", deleteBtn);
deleteBtn.textContent = "DELETE";
}
}
memo.addEventListener("click", function (e) {
if (e.target.nodeName === "BUTTON") {
e.target.closest("LI").remove();
}
});body {
background-image: linear-gradient(
83.2deg,
rgba(150, 93, 233, 1) 10.8%,
rgba(99, 88, 238, 1) 94.3%
);
}
h1 {
text-align: center;
font-size: 50px;
font-weight: 500;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
color: #fbfbf2;
}
.option {
margin-top: 4rem;
display: flex;
justify-content: center;
align-content: center;
flex-direction: row-reverse;
}
#input {
width: 400px;
height: 60px;
border-radius: 10px;
box-shadow: none;
font-size: 20px;
}
#submit {
margin-right: 5px;
padding: 10px 10px;
border-radius: 10px;
background-color: #5a189a;
color: #fbfbf2;
}
#input,
#submit {
padding: 10px 10px;
border: none;
}
.lists {
background-color: #efd9ce;
height: 400px;
border-radius: 15px;
}
.memo {
padding: 15px;
font-size: 30px;
}
ul li {
margin: 20px;
}
button {
background-color: #5a189a;
border-radius: 15px;
color: #fbfbf2;
font-size: 20px;
}<form>
<h1>TO DO LIST</h1>
<div class="option">
<input type="text" id="input" placeholder="enter a task" />
<button type="submit" id="submit">SUBMIT</button>
</div>
</form>
<div class="lists">
<ul class="memo"></ul>
</div>