向下滚动页面并添加新内容时背景图像不覆盖
Background image doesn't cover when scrolling down page and new content is added
我正在创建一个简单的待办事项列表，允许用户添加和删除项目。一切都按照我想要的方式工作......除了......当用户添加足够的项目导致页面开始滚动时，我在两个主要列上的背景图像不再出现。我虽然 background-image repeat 会起作用，但它不起作用。
HTML ------------------------------ --------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/0d2a2061f5.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./static/css/normalize.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./static/css/todo.css">
<script defer src= "./static/JS/toDo.js"> </script>
<title>To Do List</title>
</head>
<body>
</div>
<div class="container0">
<div class="row">
<div class="title col-12">
<h1>To Do List</h1>
</div>
<div class="title col-12">
<div class="input-group">
<span>
<div class="submit" id="submitbutton">
<input id="userinput" type="text" placeholder="Enter new task here" maxlength="40">
<button id="enter">Add</button>
</div>
</span>
</span>
</div>
</div>
</div>
</div>
<div class="container1">
<div class="row">
<div class="col pic1">
<div class="usertextbox">
<div class="usertext">
<h2>Active</h2>
<ul id="activeTaskList">
</ul>
</div>
</div>
</div>
<div class="col pic2">
<div class="usertextbox">
<div class="usertext">
<h2>
Completed
</h2>
<ul id="completedTaskList">
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS ---------------------------------- ------------------------------------------
// assigning variable to the add task button
var addTask = document.getElementById("enter");
//assigning variable to input user enters in the add new task input section
var input = document.getElementById("userinput");
// returns the element that matches the CSS selector of 'ul' (vs the ID for getElementbyID)
var ul = document.querySelector("ul");
// created variable to assign to ul where I will append completed tasks
var completedTasks = document.getElementById("completedTaskList");
// simple function that calculates length of user input(really just making sure it's > 0)
function inputLength () {
return input.value.length;
}
// function to create new task list item and corresponding delete button
function newTaskList() {
// var myList = document.getElementsByTagName("li");
// assigning variable to the li item we are creating when function is ran
var li = document.createElement("li");
var completedLi = document.createElement("li");
//appending the user's input value to the li element we just created
li.appendChild(document.createTextNode(input.value));
//now appending that li with the user input to the ul(we assigned ul variable to the ul in document using queryselector)
ul.appendChild(li);
// clearing input value of user when function is ran
var completed = input.value;
input.value = "";
// assigning the creation of delete button to the deleteButton variable
var deleteButton = document.createElement("button");
// styling that delete button
deleteButton.style.border = 'none'
deleteButton.style.transition = "all .3s ease-in-out";
deleteButton.style.backgroundColor = '#ffffff'
deleteButton.style.margin = '20px'
//adding event listeners to grow and remove grow when item is hovered with mouse
deleteButton.addEventListener('mouseenter', function(){
deleteButton.classList.add('grow')
})
deleteButton.addEventListener('mouseleave', function(){
deleteButton.classList.remove('grow')
})
//assigning text to delete button with createTextNode
deleteButton.appendChild(document.createTextNode("️"))
// appending the delete button to each li that is created
li.appendChild(deleteButton);
// creating function that gives us access to parent element of delete button (which is li)
// and deletes it when we click delete
deleteButton.onclick = function() {
completedLi.style.textDecoration = 'line-through'
completedTasks.appendChild(completedLi);
completedLi.appendChild(document.createTextNode(completed));
this.parentElement.style.display = "none";
}
}
//creating function that indicates to run addTaskList only if length of input from user is >0(they actually wrote something)
function addTaskList() {
if (inputLength() > 0) {
newTaskList();
}
}
// create event listener to have addTaskList function run if user clicks on add task button (variable we already created assinged to id of add button)
addTask.addEventListener("click", addTaskList);
CSS ------------------------------ ------------------------------------------
* {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
/* Main title and text box/button ------------------------ */
.container0{
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(189, 174, 172);
}
.title {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
h1 {
position: relative;
bottom: -15px;
transition: all .7s ease-in-out;
}
h1:hover {
transform: scale(1.3);
}
#enter {
border-radius: 50%;
height: 50px;
width: 70px;
font-size: 1.2rem;
font-weight: bolder;
background-color: rgb(173, 207, 238);
border: 3px solid rgb(99, 94, 93);
border-style: solid;
padding: 4px;
margin: 5px;
}
.input-group {
height: 5vh;
display: flex;
justify-content: center;
align-items: center;
max-width: 400px;
margin-bottom: 50px;
position:relative;
left: 25px;
}
input {
height: 35px;
width: 250px;
}
#enter:hover {
background-color: rgb(15, 15, 238);
color: white;
border-color: white;
}
/* Main body columns and inner divs ------------------------ */
.container1{
margin: 5px;
display: flex;
flex-direction: column;
}
.pic1 {
background-image: url("../images/todo.jpg");
background-size: 100% 100%;
background-repeat: repeat;
height: 100vh;
font-weight: bolder;
padding: 0px;
margin-right: 2.5px;
margin-left: 10px;
}
.pic2 {
background-image: url("../images/done.jpg");
background-size: 100% 100%;
height: 100vh;
font-weight: bolder;
padding: 0px;
margin-left: 2.5px;
margin-right: 10px;
}
.usertextbox {
display: flex;
justify-content: center;
background-color: #ffffff;
width: 100%;
opacity: 0.8;
height: 100vh;
}
.usertext {
width: 500px;
margin: 5%;
font-weight: bold;
color: #000000;
}
/* Titles and lists in active and completed columns ------------------------ */
h2 {
position: relative;
right: -175px;
bottom: 15px;
width: fit-content;
padding: 15px;
background-color:rgb(173, 207, 238);
border-radius: 50%;
border-color: rgb(99, 94, 93);
border-style: solid;
border-width: 3.5px;
}
h2:hover {
background-color: rgb(15, 15, 238);
color: white;
}
li {
font-size: 1.1rem;
padding: 2px;
position:relative;
left: -30px;
height: 50px;
}
.completedLi {
font-size: 3.1rem;
padding: 2px;
position:relative;
left: -30px;
height: 60px;
}
.grow {
transform: scale(1.2);
}
我认为您想要实现的是视差滚动。将此 CSS 添加到您的图像中应该就足够了：
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
有关详细信息，请查看此处：W3Schools
我将 CSS 添加到您的代码段中，但我不确定它是否有效，因为图像是相对路径并且在 Whosebug 的服务器上不存在。
// assigning variable to the add task button
var addTask = document.getElementById("enter");
//assigning variable to input user enters in the add new task input section
var input = document.getElementById("userinput");
// returns the element that matches the CSS selector of 'ul' (vs the ID for getElementbyID)
var ul = document.querySelector("ul");
// created variable to assign to ul where I will append completed tasks
var completedTasks = document.getElementById("completedTaskList");
// simple function that calculates length of user input(really just making sure it's > 0)
function inputLength () {
return input.value.length;
}
// function to create new task list item and corresponding delete button
function newTaskList() {
// var myList = document.getElementsByTagName("li");
// assigning variable to the li item we are creating when function is ran
var li = document.createElement("li");
var completedLi = document.createElement("li");
//appending the user's input value to the li element we just created
li.appendChild(document.createTextNode(input.value));
//now appending that li with the user input to the ul(we assigned ul variable to the ul in document using queryselector)
ul.appendChild(li);
// clearing input value of user when function is ran
var completed = input.value;
input.value = "";
// assigning the creation of delete button to the deleteButton variable
var deleteButton = document.createElement("button");
// styling that delete button
deleteButton.style.border = 'none'
deleteButton.style.transition = "all .3s ease-in-out";
deleteButton.style.backgroundColor = '#ffffff'
deleteButton.style.margin = '20px'
//adding event listeners to grow and remove grow when item is hovered with mouse
deleteButton.addEventListener('mouseenter', function(){
deleteButton.classList.add('grow')
})
deleteButton.addEventListener('mouseleave', function(){
deleteButton.classList.remove('grow')
})
//assigning text to delete button with createTextNode
deleteButton.appendChild(document.createTextNode("️"))
// appending the delete button to each li that is created
li.appendChild(deleteButton);
// creating function that gives us access to parent element of delete button (which is li)
// and deletes it when we click delete
deleteButton.onclick = function() {
completedLi.style.textDecoration = 'line-through'
completedTasks.appendChild(completedLi);
completedLi.appendChild(document.createTextNode(completed));
this.parentElement.style.display = "none";
}
}
//creating function that indicates to run addTaskList only if length of input from user is >0(they actually wrote something)
function addTaskList() {
if (inputLength() > 0) {
newTaskList();
}
}
// create event listener to have addTaskList function run if user clicks on add task button (variable we already created assinged to id of add button)
addTask.addEventListener("click", addTaskList);
* {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
/* Main title and text box/button ------------------------ */
.container0{
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(189, 174, 172);
height: 100%;
}
.title {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
h1 {
position: relative;
bottom: -15px;
transition: all .7s ease-in-out;
}
h1:hover {
transform: scale(1.3);
}
#enter {
border-radius: 50%;
height: 50px;
width: 70px;
font-size: 1.2rem;
font-weight: bolder;
background-color: rgb(173, 207, 238);
border: 3px solid rgb(99, 94, 93);
border-style: solid;
padding: 4px;
margin: 5px;
}
.input-group {
height: 5vh;
display: flex;
justify-content: center;
align-items: center;
max-width: 400px;
margin-bottom: 50px;
position:relative;
left: 25px;
}
input {
height: 35px;
width: 250px;
}
#enter:hover {
background-color: rgb(15, 15, 238);
color: white;
border-color: white;
}
/* Main body columns and inner divs ------------------------ */
.container1{
margin: 5px;
display: flex;
flex-direction: column;
height: 100%;
}
.pic1 {
background-image: url(https://images.unsplash.com/photo-1594482627762-6e876ce1ead4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);
background-size: 100% 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
height: 100%;
font-weight: bolder;
padding: 0px;
margin-right: 2.5px;
margin-left: 10px;
min-height: 100vw;
}
.pic2 {
background-image: url(https://images.unsplash.com/photo-1594482627762-6e876ce1ead4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);
background-size: 100% 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
height: 100%;
font-weight: bolder;
padding: 0px;
margin-left: 2.5px;
margin-right: 10px;
min-height: 100vw;
}
.usertextbox {
display: flex;
justify-content: center;
background-color: #ffffff;
width: 100%;
opacity: 0.8;
height: 100%;
}
.usertext {
width: 500px;
margin: 5%;
font-weight: bold;
color: #000000;
height: 100%
}
/* Titles and lists in active and completed columns ------------------------ */
h2 {
position: relative;
right: -175px;
bottom: 15px;
width: fit-content;
padding: 15px;
background-color:rgb(173, 207, 238);
border-radius: 50%;
border-color: rgb(99, 94, 93);
border-style: solid;
border-width: 3.5px;
}
h2:hover {
background-color: rgb(15, 15, 238);
color: white;
}
li {
font-size: 1.1rem;
padding: 2px;
position:relative;
left: -30px;
height: 50px;
}
.completedLi {
font-size: 3.1rem;
padding: 2px;
position:relative;
left: -30px;
height: 60px;
}
.grow {
transform: scale(1.2);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/0d2a2061f5.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./static/css/normalize.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./static/css/todo.css">
<script defer src= "./static/JS/toDo.js"> </script>
<title>To Do List</title>
</head>
<body>
</div>
<div class="container0">
<div class="row">
<div class="title col-12">
<h1>To Do List</h1>
</div>
<div class="title col-12">
<div class="input-group">
<span>
<div class="submit" id="submitbutton">
<input id="userinput" type="text" placeholder="Enter new task here" maxlength="40">
<button id="enter">Add</button>
</div>
</span>
</span>
</div>
</div>
</div>
</div>
<div class="container1">
<div class="row">
<div class="col pic1">
<div class="usertextbox">
<div class="usertext">
<h2>Active</h2>
<ul id="activeTaskList">
</ul>
</div>
</div>
</div>
<div class="col pic2">
<div class="usertextbox">
<div class="usertext">
<h2>
Completed
</h2>
<ul id="completedTaskList">
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
希望我能帮到你 ;)
我正在创建一个简单的待办事项列表，允许用户添加和删除项目。一切都按照我想要的方式工作......除了......当用户添加足够的项目导致页面开始滚动时，我在两个主要列上的背景图像不再出现。我虽然 background-image repeat 会起作用，但它不起作用。
HTML ------------------------------ --------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/0d2a2061f5.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./static/css/normalize.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./static/css/todo.css">
<script defer src= "./static/JS/toDo.js"> </script>
<title>To Do List</title>
</head>
<body>
</div>
<div class="container0">
<div class="row">
<div class="title col-12">
<h1>To Do List</h1>
</div>
<div class="title col-12">
<div class="input-group">
<span>
<div class="submit" id="submitbutton">
<input id="userinput" type="text" placeholder="Enter new task here" maxlength="40">
<button id="enter">Add</button>
</div>
</span>
</span>
</div>
</div>
</div>
</div>
<div class="container1">
<div class="row">
<div class="col pic1">
<div class="usertextbox">
<div class="usertext">
<h2>Active</h2>
<ul id="activeTaskList">
</ul>
</div>
</div>
</div>
<div class="col pic2">
<div class="usertextbox">
<div class="usertext">
<h2>
Completed
</h2>
<ul id="completedTaskList">
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS ---------------------------------- ------------------------------------------
// assigning variable to the add task button
var addTask = document.getElementById("enter");
//assigning variable to input user enters in the add new task input section
var input = document.getElementById("userinput");
// returns the element that matches the CSS selector of 'ul' (vs the ID for getElementbyID)
var ul = document.querySelector("ul");
// created variable to assign to ul where I will append completed tasks
var completedTasks = document.getElementById("completedTaskList");
// simple function that calculates length of user input(really just making sure it's > 0)
function inputLength () {
return input.value.length;
}
// function to create new task list item and corresponding delete button
function newTaskList() {
// var myList = document.getElementsByTagName("li");
// assigning variable to the li item we are creating when function is ran
var li = document.createElement("li");
var completedLi = document.createElement("li");
//appending the user's input value to the li element we just created
li.appendChild(document.createTextNode(input.value));
//now appending that li with the user input to the ul(we assigned ul variable to the ul in document using queryselector)
ul.appendChild(li);
// clearing input value of user when function is ran
var completed = input.value;
input.value = "";
// assigning the creation of delete button to the deleteButton variable
var deleteButton = document.createElement("button");
// styling that delete button
deleteButton.style.border = 'none'
deleteButton.style.transition = "all .3s ease-in-out";
deleteButton.style.backgroundColor = '#ffffff'
deleteButton.style.margin = '20px'
//adding event listeners to grow and remove grow when item is hovered with mouse
deleteButton.addEventListener('mouseenter', function(){
deleteButton.classList.add('grow')
})
deleteButton.addEventListener('mouseleave', function(){
deleteButton.classList.remove('grow')
})
//assigning text to delete button with createTextNode
deleteButton.appendChild(document.createTextNode("️"))
// appending the delete button to each li that is created
li.appendChild(deleteButton);
// creating function that gives us access to parent element of delete button (which is li)
// and deletes it when we click delete
deleteButton.onclick = function() {
completedLi.style.textDecoration = 'line-through'
completedTasks.appendChild(completedLi);
completedLi.appendChild(document.createTextNode(completed));
this.parentElement.style.display = "none";
}
}
//creating function that indicates to run addTaskList only if length of input from user is >0(they actually wrote something)
function addTaskList() {
if (inputLength() > 0) {
newTaskList();
}
}
// create event listener to have addTaskList function run if user clicks on add task button (variable we already created assinged to id of add button)
addTask.addEventListener("click", addTaskList);
CSS ------------------------------ ------------------------------------------
* {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
/* Main title and text box/button ------------------------ */
.container0{
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(189, 174, 172);
}
.title {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
h1 {
position: relative;
bottom: -15px;
transition: all .7s ease-in-out;
}
h1:hover {
transform: scale(1.3);
}
#enter {
border-radius: 50%;
height: 50px;
width: 70px;
font-size: 1.2rem;
font-weight: bolder;
background-color: rgb(173, 207, 238);
border: 3px solid rgb(99, 94, 93);
border-style: solid;
padding: 4px;
margin: 5px;
}
.input-group {
height: 5vh;
display: flex;
justify-content: center;
align-items: center;
max-width: 400px;
margin-bottom: 50px;
position:relative;
left: 25px;
}
input {
height: 35px;
width: 250px;
}
#enter:hover {
background-color: rgb(15, 15, 238);
color: white;
border-color: white;
}
/* Main body columns and inner divs ------------------------ */
.container1{
margin: 5px;
display: flex;
flex-direction: column;
}
.pic1 {
background-image: url("../images/todo.jpg");
background-size: 100% 100%;
background-repeat: repeat;
height: 100vh;
font-weight: bolder;
padding: 0px;
margin-right: 2.5px;
margin-left: 10px;
}
.pic2 {
background-image: url("../images/done.jpg");
background-size: 100% 100%;
height: 100vh;
font-weight: bolder;
padding: 0px;
margin-left: 2.5px;
margin-right: 10px;
}
.usertextbox {
display: flex;
justify-content: center;
background-color: #ffffff;
width: 100%;
opacity: 0.8;
height: 100vh;
}
.usertext {
width: 500px;
margin: 5%;
font-weight: bold;
color: #000000;
}
/* Titles and lists in active and completed columns ------------------------ */
h2 {
position: relative;
right: -175px;
bottom: 15px;
width: fit-content;
padding: 15px;
background-color:rgb(173, 207, 238);
border-radius: 50%;
border-color: rgb(99, 94, 93);
border-style: solid;
border-width: 3.5px;
}
h2:hover {
background-color: rgb(15, 15, 238);
color: white;
}
li {
font-size: 1.1rem;
padding: 2px;
position:relative;
left: -30px;
height: 50px;
}
.completedLi {
font-size: 3.1rem;
padding: 2px;
position:relative;
left: -30px;
height: 60px;
}
.grow {
transform: scale(1.2);
}
我认为您想要实现的是视差滚动。将此 CSS 添加到您的图像中应该就足够了：
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
有关详细信息，请查看此处：W3Schools
我将 CSS 添加到您的代码段中，但我不确定它是否有效，因为图像是相对路径并且在 Whosebug 的服务器上不存在。
// assigning variable to the add task button
var addTask = document.getElementById("enter");
//assigning variable to input user enters in the add new task input section
var input = document.getElementById("userinput");
// returns the element that matches the CSS selector of 'ul' (vs the ID for getElementbyID)
var ul = document.querySelector("ul");
// created variable to assign to ul where I will append completed tasks
var completedTasks = document.getElementById("completedTaskList");
// simple function that calculates length of user input(really just making sure it's > 0)
function inputLength () {
return input.value.length;
}
// function to create new task list item and corresponding delete button
function newTaskList() {
// var myList = document.getElementsByTagName("li");
// assigning variable to the li item we are creating when function is ran
var li = document.createElement("li");
var completedLi = document.createElement("li");
//appending the user's input value to the li element we just created
li.appendChild(document.createTextNode(input.value));
//now appending that li with the user input to the ul(we assigned ul variable to the ul in document using queryselector)
ul.appendChild(li);
// clearing input value of user when function is ran
var completed = input.value;
input.value = "";
// assigning the creation of delete button to the deleteButton variable
var deleteButton = document.createElement("button");
// styling that delete button
deleteButton.style.border = 'none'
deleteButton.style.transition = "all .3s ease-in-out";
deleteButton.style.backgroundColor = '#ffffff'
deleteButton.style.margin = '20px'
//adding event listeners to grow and remove grow when item is hovered with mouse
deleteButton.addEventListener('mouseenter', function(){
deleteButton.classList.add('grow')
})
deleteButton.addEventListener('mouseleave', function(){
deleteButton.classList.remove('grow')
})
//assigning text to delete button with createTextNode
deleteButton.appendChild(document.createTextNode("️"))
// appending the delete button to each li that is created
li.appendChild(deleteButton);
// creating function that gives us access to parent element of delete button (which is li)
// and deletes it when we click delete
deleteButton.onclick = function() {
completedLi.style.textDecoration = 'line-through'
completedTasks.appendChild(completedLi);
completedLi.appendChild(document.createTextNode(completed));
this.parentElement.style.display = "none";
}
}
//creating function that indicates to run addTaskList only if length of input from user is >0(they actually wrote something)
function addTaskList() {
if (inputLength() > 0) {
newTaskList();
}
}
// create event listener to have addTaskList function run if user clicks on add task button (variable we already created assinged to id of add button)
addTask.addEventListener("click", addTaskList);
* {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
/* Main title and text box/button ------------------------ */
.container0{
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(189, 174, 172);
height: 100%;
}
.title {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
h1 {
position: relative;
bottom: -15px;
transition: all .7s ease-in-out;
}
h1:hover {
transform: scale(1.3);
}
#enter {
border-radius: 50%;
height: 50px;
width: 70px;
font-size: 1.2rem;
font-weight: bolder;
background-color: rgb(173, 207, 238);
border: 3px solid rgb(99, 94, 93);
border-style: solid;
padding: 4px;
margin: 5px;
}
.input-group {
height: 5vh;
display: flex;
justify-content: center;
align-items: center;
max-width: 400px;
margin-bottom: 50px;
position:relative;
left: 25px;
}
input {
height: 35px;
width: 250px;
}
#enter:hover {
background-color: rgb(15, 15, 238);
color: white;
border-color: white;
}
/* Main body columns and inner divs ------------------------ */
.container1{
margin: 5px;
display: flex;
flex-direction: column;
height: 100%;
}
.pic1 {
background-image: url(https://images.unsplash.com/photo-1594482627762-6e876ce1ead4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);
background-size: 100% 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
height: 100%;
font-weight: bolder;
padding: 0px;
margin-right: 2.5px;
margin-left: 10px;
min-height: 100vw;
}
.pic2 {
background-image: url(https://images.unsplash.com/photo-1594482627762-6e876ce1ead4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);
background-size: 100% 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
height: 100%;
font-weight: bolder;
padding: 0px;
margin-left: 2.5px;
margin-right: 10px;
min-height: 100vw;
}
.usertextbox {
display: flex;
justify-content: center;
background-color: #ffffff;
width: 100%;
opacity: 0.8;
height: 100%;
}
.usertext {
width: 500px;
margin: 5%;
font-weight: bold;
color: #000000;
height: 100%
}
/* Titles and lists in active and completed columns ------------------------ */
h2 {
position: relative;
right: -175px;
bottom: 15px;
width: fit-content;
padding: 15px;
background-color:rgb(173, 207, 238);
border-radius: 50%;
border-color: rgb(99, 94, 93);
border-style: solid;
border-width: 3.5px;
}
h2:hover {
background-color: rgb(15, 15, 238);
color: white;
}
li {
font-size: 1.1rem;
padding: 2px;
position:relative;
left: -30px;
height: 50px;
}
.completedLi {
font-size: 3.1rem;
padding: 2px;
position:relative;
left: -30px;
height: 60px;
}
.grow {
transform: scale(1.2);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/0d2a2061f5.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./static/css/normalize.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./static/css/todo.css">
<script defer src= "./static/JS/toDo.js"> </script>
<title>To Do List</title>
</head>
<body>
</div>
<div class="container0">
<div class="row">
<div class="title col-12">
<h1>To Do List</h1>
</div>
<div class="title col-12">
<div class="input-group">
<span>
<div class="submit" id="submitbutton">
<input id="userinput" type="text" placeholder="Enter new task here" maxlength="40">
<button id="enter">Add</button>
</div>
</span>
</span>
</div>
</div>
</div>
</div>
<div class="container1">
<div class="row">
<div class="col pic1">
<div class="usertextbox">
<div class="usertext">
<h2>Active</h2>
<ul id="activeTaskList">
</ul>
</div>
</div>
</div>
<div class="col pic2">
<div class="usertextbox">
<div class="usertext">
<h2>
Completed
</h2>
<ul id="completedTaskList">
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
希望我能帮到你 ;)