0

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>

1 respuesta 1

2

la clase content te falto definirle los px solo tienes 350 y asi no lo entiende el css, ademas colocale un overflow-y: scroll; para que el tamaño no cambie y si se agregan items puedan scrollear si ocupan mas de ese ancho, espero te halla entendido bien y te funcione mi respuesta, saludos.

"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: 350px;
    background: lightblue;
    overflow-y: scroll;
}
<!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>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.