[英]To-do list with list item calculation javascript
所以,我要做一個完全由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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.