[英]To-do list with list item calculation javascript
So, I've got to make a to-do list purely made from html,css and javascript,problem is, I've barely been taught any javascript at my school and even then,I haven't touched front-end in over a year So I'm quite stumbed here .. 所以,我要做一个完全由html,css和javascript制成的待办事项清单,问题是,我在学校几乎没有学过任何javascript,即使那样,我也没有碰过前端一年所以我在这里很绊脚..
The idea is that there should be an input field where I can add list items to my to-do list and once they're completed,I click on them and they get transfered to a "completed " section while also counting the percentage of how many list items are completed and not completed. 这个想法是,应该有一个输入字段,我可以在其中将列表项添加到待办事项列表中,完成后,我单击它们,然后将它们转移到“已完成”部分,同时还要计算许多列表项已完成但尚未完成。
I don't expect anyone to take the time to write out the code(though I would,obviously,appreciate it ),but atleast if I got some direction as to what parts of javascript I should look into,it'd be a great help as is.. 我不希望有人花时间写代码(尽管我会很欣赏),但是如果我对我应该研究的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 //////的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 ///////// 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;
}
If you are a student still I hope you take this and learn some more JS. 如果您还是一个学生,我希望您能学到这个并学到更多JS。 Me as a student starting in CS I was not able to begin to find out what to do.
作为一名从CS开始的学生,我无法开始做些什么。 I suggest recognizing the many js tools that there are and growing your knowledge.
我建议您认识其中存在的许多js工具并增加您的知识。 Try code academy for basic starting help.
请尝试代码学院以获取基本的入门帮助。
<!-- 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.