¿Alguien sabe Комо solucionar esta пустословят de ми todolist?

Эй estoy haciendo ООН todolist подставляют HTML, CSS y JS. Lo que sucede es que en cada ítem que escribo имеет к cierto punto se меня коррин Лос РЕДАКТИРОВАНИЕ botones, REMOVE y todo el texto debajo de la línea. Он intentado de todo incluso de un div pero lo que sucede es que como es un elemento de bloque el texto se va para abajo y никакой se que hacer.

"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("scan");
    const editButton= document.createElement("button");
    const checkButton= document.createElement("input");
    
    //creating text
    para.classList.add("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");
    });

    
    //finished-task button
    finishedTask.addEventListener("click",()=>{
        if (checkButton.value==="checked") {
            itemNew.setAttribute("style","display:block");
            
        } else {
            itemNew.setAttribute("style","display:none");
        }
    });

    //unfinished-task button
    unfinishedTask.addEventListener("click",()=>{
        if (checkButton.value==="not-checked") {
            itemNew.setAttribute("style","display:block");
            
        } else {
            itemNew.setAttribute("style","display:none");
        }
    });

}

document.addEventListener("keyup",(event)=>{ if(event.keyCode===13){addToDo()}});
body{
    background-color: #E1E1E1;
}

.container{
    width: 1000px;
    height: 650px;
    font-family: 'Roboto Slab', serif;
    overflow: hidden;
}

.header{
    width: 998px;
    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;
    overflow: hidden;

}

.functionalities{
    float: right;
    overflow: hidden;
    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: 998px;
    height: 350px;
    border-radius: 2px;
    overflow-y: auto;
    background-color: #FFF;
}

#list{
    list-style: none;
    padding-left: 20 ;
}

.item{
    width: 900px;
    height: 25px;
    padding-top: 10px;
    border-bottom: 1px solid #ACACAC;
}

.text{
    word-break: break-all;
    padding-left: 30px;
    padding-right: 10px;
    font-family: 'Roboto Slab', serif;  
}


.edit{
    margin-left: 10px;
    margin-right: 5px;
    background: none;
    color: #2AE500;
    float: right;
    border-radius: 10px;


}

.delete{
    margin-left: 5px;
    margin-right: 10px;
    background: none;
    color: #E10000;
    float: right;
    border-radius: 10px;
}

.add-item{
    width: 998px;
    height: 50px;
    border-top: 1px solid #ACACAC;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background-color: #FFF;
}

#input{
    width: 900px;
    height: 25px;
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 0px;
    border-radius: 10px;
}

#button{
    background-image: linear-gradient(150deg,#FF014E,#FD0278,#F700F3 );
    color: #FFF;
    border-radius: 10px;

}
<!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>
0
задан 21.12.2019, 00:03
1 ответ

Проблема состоит в том, что ты распределяешь ему установленную высоту в каждый Г-tem списка в тебе CSS, height: 25px;

Я Участвую в рыцарском турнире aquГ-:

.item{
    width: 900px;
    height: 25px;
    padding-top: 10px;
    border-bottom: 1px solid #ACACAC;
}

ComentГ© она lГ-nea и probГ© с одним pГЎrrafo lorem ipsum , сейчас высота приспосабливается к тексту, который ты вводишь.

"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("scan");
    const editButton= document.createElement("button");
    const checkButton= document.createElement("input");
    
    //creating text
    para.classList.add("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");
    });

    
    //finished-task button
    finishedTask.addEventListener("click",()=>{
        if (checkButton.value==="checked") {
            itemNew.setAttribute("style","display:block");
            
        } else {
            itemNew.setAttribute("style","display:none");
        }
    });

    //unfinished-task button
    unfinishedTask.addEventListener("click",()=>{
        if (checkButton.value==="not-checked") {
            itemNew.setAttribute("style","display:block");
            
        } else {
            itemNew.setAttribute("style","display:none");
        }
    });

}

document.addEventListener("keyup",(event)=>{ if(event.keyCode===13){addToDo()}});
body{
    background-color: #E1E1E1;
}

.container{
    width: 1000px;
    height: 650px;
    font-family: 'Roboto Slab', serif;
    overflow: hidden;
}

.header{
    width: 998px;
    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;
    overflow: hidden;

}

.functionalities{
    float: right;
    overflow: hidden;
    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: 998px;
    height: 350px;
    border-radius: 2px;
    overflow-y: auto;
    background-color: #FFF;
}

#list{
    list-style: none;
    padding-left: 20 ;
}

.item{
    width: 900px;
    //height: 25px;
    padding-top: 10px;
    border-bottom: 1px solid #ACACAC;
}

.text{
    word-break: break-all;
    padding-left: 30px;
    padding-right: 10px;
    font-family: 'Roboto Slab', serif;  
}


.edit{
    margin-left: 10px;
    margin-right: 5px;
    background: none;
    color: #2AE500;
    float: right;
    border-radius: 10px;


}

.delete{
    margin-left: 5px;
    margin-right: 10px;
    background: none;
    color: #E10000;
    float: right;
    border-radius: 10px;
}

.add-item{
    width: 998px;
    height: 50px;
    border-top: 1px solid #ACACAC;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background-color: #FFF;
}

#input{
    width: 900px;
    height: 25px;
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 0px;
    border-radius: 10px;
}

#button{
    background-image: linear-gradient(150deg,#FF014E,#FD0278,#F700F3 );
    color: #FFF;
    border-radius: 10px;

}
<!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>
0
ответ дан 21.12.2019, 12:13