Question

所以，我要做一个完全由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;
}

Answer 1

如果您还是一个学生，我希望您能学到这个并学到更多的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

1 个答案: