gpt4 book ai didi

javascript - 带有列表项计算javascript的待办事项列表

转载 作者:行者123 更新时间:2023-11-28 00:49:35 25 4
gpt4 key购买 nike

所以,我必须制作一个纯粹由 html、css 和 javascript 组成的待办事项列表,问题是,我在学校几乎没有学过任何 javascript,即便如此,我也没有接触过前端-结束一年多所以我在这里很困惑..

我的想法是应该有一个输入字段,我可以在其中将列表项添加到我的待办事项列表中,一旦它们完成,我点击它们,它们就会被转移到“已完成”部分,同时也会计算已完成和未完成的列表项的百分比。

我不希望任何人花时间写出代码(虽然我会,显然,欣赏它),但至少如果我对我应该研究的 javascript 的哪些部分有一些方向,它会照原样提供很大帮助..

     <html>
<head>
<title>Site</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta charset="UTF-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">

<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form>
<div id="myDIV" class="header">
<h2>To-Do</h2>
<input type="text" id='uzd' placeholder="Užduotis">
<input type="button" id='todoadd' >
</div>
</form>
<ul id='uzduotys'>

</ul>
<script src="script.js"></script>
</div>
</body>
</html>

//////javascript

document.getElementById("todoadd").onclick = function() {

var node = document.createElement("Li");
node.setAttribute("id","li");
var text = document.getElementById("uzd").value;
var textnode =document.createTextNode(text);
node.appendChild(textnode);
document.getElementById("uzduotys").appendChild(node);
}

/////////CSS

body{ background-color: lightgrey; } .container{
margin: 100px 300px;

}
h2{
margin-left: 75px;
font-size: 36px;
color:cornflowerblue;
}
input{
line-height: 30px;
font-size: 20px;
border-radius: 7px;
margin-left: 30px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 25px;
transition: 0.2s;

/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

ul{
margin:20px;
border-radius:15px ;
}
li{
background-color: white;
line-height: 30px;
border-radius:7px;
margin:10px;
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}

最佳答案

如果你还是一名学生,我希望你能接受这个并学习更多的 JS。作为一名从 CS 开始的学生,我无法开始找出该做什么。我建议认识现有的许多 js 工具并增长您的知识。尝试代码学院以获得基本的入门帮助。

<!-- Super basic example with no styling and no counter -->
<html>
<body>
<label>New Item</label>
<input type="text" id="input">
<button id="add">Add New To Do Item</button>
<h1>To Do</h1>
<ul id="toDoList">
</ul>
<h1>Completed</h1>
<ul id="completedList">
</ul>
<script>
//calls when the page loads
(function() {
document.getElementById("add").addEventListener("click", function(){
var newLi = document.createElement("li");
var newDiv = document.createElement("Div");
newDiv.innerText = document.getElementById("input").value;

var newBtn = document.createElement("button");
newBtn.innerText = "Done"
newBtn.addEventListener("click", function(e){
e = e.target || e.srcElement;

//for some reason appending e.parentElement would not work so I had to create a brand new element
var newLi2 = document.createElement("li");
newLi2.innerText = e.parentElement.children[0].innerText;
document.getElementById("completedList").appendChild(newLi2);
e.parentElement.remove();
})
newLi.appendChild(newDiv);
newLi.appendChild(newBtn);
document.getElementById("toDoList").appendChild(newLi);
document.getElementById("input").value = "";
})
})();
</script>
</body>
</html>

关于javascript - 带有列表项计算javascript的待办事项列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53326146/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com