Каждый раз, когда я добавляю элементы, добавляемые элементы начинают выходить за пределы формы. Я не беспокоюсь о добавлении элемента для удаления. Я просто хочу сосредоточиться на добавлении элементов в мое приложение todoList. todoList
.container{
background:#00ffff;enter code here
min-height:100vh;`enter code here`
min-width:100vh;
display:flex;
justify-content: center;
align-items: center;
}
.smaller_box{
width:800px;
height:400px;
background:#0000ff;`enter code here`
border:4px solid #000000;
margin-bottom:500px;
border-radius:10px;
}
h1{
display:flex;
justify-content: center;
margin-top:60px;
color:white;
font-size:4rem;
text-shadow: .1em .1em .2em rgba(0, 0, 0, 0.6);
}
.inputgroup{
display:flex;
justify-content: center;
margin-top:20px;
}
button{
background:red;
color:white;
padding:1px;
font-size:28px;
height:55px;
cursor:pointer;
font-weight:bold;
line-height: 55px; /* <-- this was it ! */
vertical-align: middle;
}
.result{
color:white;
font-size:2rem;
line-height: 3rem;
}
</style>
</head>
<body>
<div class="container">
<div class="smaller_box">
<form action="" class="formclass">
<h1 >Todo List</h1>
<div class="inputgroup">
<input type="text" style="width:75%; height:55px" />
<button>Add task</button>
</div>
<div class="result">
</div>
</form>
</div>
</div>
<script src="script.js">
const button=document.querySelector('button');
const input=document.querySelector('input');
const result=document.querySelector('.result');
button.addEventListener('click',function(e){
e.preventDefault();
let text=document.createTextNode(input.value);
result.appendChild(text);
let linebreak=document.createElement('br');
result.appendChild(linebreak);
})
</script>
</body>
</html>
Так что вы предлагаете мне сделать? Я перепробовал все