I am making a todolist with HTML, CSS and JS. What happens is that in each item that I write to a certain extent the EDIT , REMOVE buttons and all the text below the line are moved. I have tried everything, including one, div
but what happens is that since it is a block element, the text goes down and I don't know what to do.
"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>
The problem is that you are assigning a fixed height to each list item in your
CSS
,height: 25px;
Just here:
I commented out the line and tried a lorem ipsum paragraph , now the height adjusts to the text you enter.