I am currently creating a To Do list program using HTML, CSS, and JS. One of my current issues with my program is that the item added to the list partially blocks the add button inside of my program when you choose to run it. And another issue is that the clear button isn't function properly when you enter clear to remove all of the added items. So I am wondering how to resolve these issues where the added items are partially blocking the add and clear button. And how to get the clear button to function properly to clear the list of added items inside of the to do list.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
min-width: 250px;
}
#todo{
float:left;
width:50%;
}
#done{
float:right;
width:50%;
}
/* Include the padding and border in an element's total width and height */
//* {
// box-sizing: border-box;
//}
/* Remove margins and padding from the list */
ul {
margin: 0;
padding: 0;
}
/* Style the list items */
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
list-style-type: none;
background: #eee;
font-size: 18px;
transition: 0.2s;
/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
background: #f9f9f9;
}
/* Darker background-color on hover */
ul li:hover {
background: #ddd;
}
/* When clicked on, add a background color and strike out text */
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
/* Add a "checked" mark when clicked on */
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
/* Style the close button */
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.close:hover {
background-color: #f44336;
color: white;
}
/* Style the header */
.header {
background-color: #f44336;
padding: 30px 40px;
color: white;
text-align: center;
}
/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
}
/* Style the input */
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
.Clear {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
.Clear:hover {
background-color: #bbb;
}
.addBtn:hover {
background-color: #bbb;
}
h1 {
font-size: 30px;
border: 1px solid black;
margin: auto;
padding: 30px;
text-align: center;
}
h2 {
font-size: 30px;
border: 1px solid black;
margin: auto;
padding: 30px;
text-align: center;
}
</style>
</head>
<body>
<form id="todo" style="float:left">
<h1 id="todo" style="font-family:Helvetica; color:#006600"><b>To Do</b>
<input type="text" id="myInput" placeholder="Add Item">
<span onclick="newElement()" class="addBtn">Add</span>
<input type="button" onclick="newFunction()" value="Clear">
<ul id="myUL">
</ul>
</h1>
</form>
<form id="done" style="float:right">
<h2 id="done" style="font-family:Helvetica; color:#006600"><b>Done</b></h2>
</form>
<script>
// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i ) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i ) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
// Create a new list item when clicking on the "Add" button
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("myInput").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i ) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
function newFunction() {
document.getElementById("todo").reset();
}
</script>
</body>
</html>
CodePudding user response：
It is the position: absolute in the css.
When you use this property, elements will "float" through page.
You should remove all properties with absolute.
There is no need to use them in your page.
I also recommend these two articles about position and flexbox: