I have been making a basic todo list with HTML, CSS and JS.
My problem is that in my todolist the items are created when you press ENTER or the button that says "Click Me".
These items, when created, would be placed inside a "ul" that is inside a div whose background is light blue. I want this div to be like a defined space and that within this div there if the items are created.
What happens is that this div is not as defined and it creates its space for each item that is created.
Basically, what should appear is a blue space on the page and put the items in there, but what it does is that for each item I put there it does put this blue space.
If my problem has not been understood, please excuse me and I will leave the code here for you to see anything.
"use strict"
//date function
const dateElement= document.getElementById("date");
const options= {
weekday:"long",
month:"short",
day:"numeric"
}
const today= new Date();
dateElement.innerHTML= today.toLocaleDateString("en-US",options);
// function add to do
const list= document.getElementById("list");
const input= document.getElementById("input");
const normalButton= document.getElementById("normal");
const finishedTask= document.getElementById("done");
const unfinishedTask= document.getElementById("not-done");
let toDo=[];
let buttonToDo=[];
let editValue=[];
let valueItem= [];
let id;
let idButton;
let editId;
function addToDo(){
//input part
const itemValue= input.value;
if(itemValue===""){
var alerta= alert("Por Favor escribe algo en tu lista");
return;
}
valueItem.push(itemValue);
console.log(valueItem);
//creating elements
const itemNew= document.createElement("li");
const deleteButton= document.createElement("button");
const para = document.createElement("p");
const editButton= document.createElement("button");
const checkButton= document.createElement("input");
//creating text
const text= document.createTextNode(itemValue);
para.appendChild(text);
//check-buttton
checkButton.classList.add("check");
checkButton.setAttribute("type","checkbox");
checkButton.value= "not-checked"
//item
itemNew.classList.add("item");
itemNew.appendChild(checkButton);
itemNew.appendChild(para);
list.appendChild(itemNew);
//edit-button
editButton.classList.add("edit");
editButton.value="EDIT";
let editName= document.createTextNode("EDIT");
editButton.appendChild(editName);
itemNew.appendChild(editButton);
//delete-button
deleteButton.classList.add("delete");
deleteButton.value="REMOVE";
let deleteName= document.createTextNode("REMOVE");
deleteButton.appendChild(deleteName);
itemNew.appendChild(deleteButton);
//id
toDo.push(itemNew);
let id= toDo.indexOf(itemNew);
console.log(id);
//id delete-button
buttonToDo.push(deleteButton);
let idButton= buttonToDo.indexOf(deleteButton);
//id edit-button
editValue.push(editButton);
let editId= editValue.indexOf(editButton);
//checkbox button
checkButton.addEventListener("click",()=>{
if (checkButton.value==="not-checked") {
checkButton.setAttribute("value","checked");
checkButton.setAttribute("style","background:#22F700; color: cornsilk ")
para.setAttribute("style","color:#ACACAC; text-decoration:line-through");
console.log(checkButton);
} else {
checkButton.setAttribute("value","not-checked");
checkButton.setAttribute("style","background:none; color: none ")
para.setAttribute("style","color:none; text-decoration:none");
console.log(checkButton);
}
});
//edit button
editButton.addEventListener("click",()=>{
if(editId===id){
let editText= prompt("Inserte aqui el texto a cambiar ...");
para.innerHTML=editText;
}
}
);
//delete button
deleteButton.addEventListener("click",()=>{
if(idButton===id){
list.removeChild(itemNew);
valueItem.splice(id,1);
console.log(valueItem);
}
}
);
//normal button
normalButton.addEventListener("click",()=>{
itemNew.setAttribute("style","display:block, list-style: circle");
});
//finished-task button
finishedTask.addEventListener("click",()=>{
if (checkButton.value==="checked") {
itemNew.setAttribute("style","display:block ,list-style: circle");
} else {
itemNew.setAttribute("style","display:none");
}
});
//unfinished-task button
unfinishedTask.addEventListener("click",()=>{
if (checkButton.value==="not-checked") {
itemNew.setAttribute("style","display:block, list-style: circle");
} else {
itemNew.setAttribute("style","display:none");
}
});
}
document.addEventListener("keyup",(event)=>{ if(event.keyCode===13){addToDo()}});
.container{
width: 1000px;
height: 650px;
font-family: 'Roboto Slab', serif;
overflow: hidden;
}
.header{
width: 1000px;
height: 200px;
background-image: linear-gradient(150deg,#FF014E,#FD0278,#F700F3 );
box-sizing: border-box;
padding: 5px 10px;
color: cornsilk;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.title{
text-align: left;
font-size: 60px;
margin-top: 0px;
margin-bottom: 0;
}
.ferre{
margin-top: 0;
margin-bottom: 30px;
font-family: 'Roboto Slab', serif;
font-size: 20px;
font-weight: 500;
}
#date{
font-size: 40px;
float: left;
}
.functionalities{
float: right;
padding: 25px 5px 5px 5px;
}
#normal{
background: none;
border: none;
color: cornsilk;
font-family: 'Roboto Slab', serif;
padding: 1px 30px;
}
#done{
background: none;
border: none;
color: cornsilk;
font-family: 'Roboto Slab', serif;
padding: 1px 30px;
}
#not-done{
background: none;
border: none;
color: cornsilk;
font-family: 'Roboto Slab', serif;
padding: 1px 30px;
}
.content{
width: 1000px;
height: 350;
background: lightblue;
}
<!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">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300&display=swap" rel="stylesheet">
<title>To Do List</title>
</head>
<body>
<div class="container">
<div class="header">
<h1 class="title">To Do List App</h1>
<h2 class="ferre">By Fxrree</h2>
<!--<div class="clear">
<i class="refresh" aria-hidden="true"></i>
</div>-->
<div id="date">
</div>
<div class="functionalities">
<button id="normal">NORMAL</button>
<button id="done">DONE</button>
<button id="not-done">NOT-DONE</button>
</div>
</div>
<div class="content">
<ul id="list">
</ul>
</div>
<div class="add-item">
<input type="text" id="input" placeholder="Add Something to Do">
<button type="submit" id="button" onclick="addToDo()">Click Me</button>
</div>
</div>
<script src="app.js/app.js"></script>
</body>
</html>
You need to define the content class for the px, you only have 350 and the css does not understand it that way, also put a
overflow-y: scroll;
so that the size does not change and if items are added they can scroll if they occupy more than that width, I hope you have understood it well and it works for you my answer, greetings.