He estado haciendo un todo list básico con HTML, CSS y JS.
Mi problema es que en mi todolist se van creando los items cuando apretas ENTER o el botón que dice "Click Me".
Estos ítems, al crearse, se pondrían dentro de un "ul" que se encuentra dentro de un div cuyo fondo es de color celeste. Yo quiero que este div sea como un espacio definido y que dentro de este div ahi si se vayan creando los ítems.
Lo que sucede es que este div no esa como definido y va creando su espacio por cada ítem que se crea.
Básicamente lo que tendría que aparecer es un espacio celeste en la pagina y ahi adentro que ponga los items, pero lo que hace es que por cada ítem que pongo ahi si pone este espacio celeste.
Si no se ha entendido mi problema sepan disculparme y cualquier cosa aqui dejo el codigo para que lo vean.
"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>