First, demo background:
1. Be familiar with native js
2. Usually I don't know what I want to do after I finish learning js.
3. Writing by oneself can be regarded as one's own work.
4. Contribute a material for the majority of people who want to practice native js
Second, realize the function:
1. New/Delete Task Function
2. Setting/Canceling Star Task Function
3. Setting/Canceling Task Completion Function
4. Automatic deletion of expired tasks (in this case, the deadline is set to 2 days)
5. Disable Operational Functions after Task Timeout
Third, logical realization:
A new task is abstracted into an object, which has its own creation time, content, end event, whether it is a star task, and so on. The object is then stored in a local Storage string, and each time data is requested, it is extracted from the local Storage. Finally, If..else judgment and rendering Dom are made with various data. (Many string and array methods are used to increase your proficiency in these methods.)
Fourth, demo effect demonstration:
Tasks completed:
Star Task:
Fifth, code display:
html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>LocalNotepad</title> <link rel="stylesheet" type="text/css" href="font-awesome-4.5.0/css/font-awesome.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div id="m-hidden"></div> <div id="pub-box"> <textarea class="content" placeholder="Add new tasks for you"></textarea> <div class="but-box"> <div class="time-box"> <p class="static">Task start time:</p> <p class="time-begin"> <input type="text" class="t-b-year" placeholder=""><time>year</time> <input type="text" class="t-b-mon" placeholder=""><time>month</time> <input type="text" class="t-b-day" placeholder=""><time>day</time> </p> <p class="static">At the end of business:</p> <p class="time-end"> <input type="text" class="t-b-year"><time>year</time> <input type="text" class="t-b-mon"><time>month</time> <input type="text" class="t-b-day"><time>day</time> </p> </div> <div class="btn"> <button class="reset">Reset</button> <button class="add">Add to</button> </div> </div> </div> <div id="content"> </div> <script type="text/javascript" src="js/Tool.js"></script> <script type="text/javascript" src="js/script.js"></script> </body> </html>
css:
* { margin: 0; padding: 0; font-family: "Microsoft YaHei" } html,body { height: 100%; } body { background: #fafc2a; background: url('../images/1.jpg') no-repeat 0 -50px; background-size: 100%; background-attachment: fixed; } a {text-decotation: none;} strong {font-weight: normal;} i,b {font-style: none;} /*Style Start*/ #m-hidden { height: 1px; background: transparent; } #pub-box { width: 1000px; height: 220px; background: rgba(0, 0, 0, 0.5); box-sizing: border-box; margin: 0 auto; padding: 20px; margin-top: -140px; transition: .6s; } #pub-box:hover { margin-top: -1px; transition: .6s; } #pub-box .content { width: 100%; height: 120px; background: rgba(246, 248, 41, 0.5); resize: none; outline: none; border: none; box-sizing: border-box; padding: 10px; } #pub-box .but-box:after { content:''; display: block; width: 0; height: 0; clear: both; } #pub-box .but-box .time-box{ float: left; } #pub-box .but-box .time-box:after { content:''; display: block; width: 0; height: 0; clear: both; } #pub-box .but-box .time-box p { float: left; margin-top: 25px; color: #fafc2a; } #pub-box .but-box .time-box .time-begin{} #pub-box .but-box .time-box .time-end{} #pub-box .but-box .time-box .time-begin, #pub-box .but-box .time-box .time-end { margin-right: 30px; } #pub-box .but-box .time-box .time-begin input, #pub-box .but-box .time-box .time-end input, #pub-box .but-box .time-box .time-begin time, #pub-box .but-box .time-box .time-end time { float: left; margin: 0 3px; } #pub-box .but-box .time-box .time-begin input, #pub-box .but-box .time-box .time-end input { display: block; width: 40px; height: 22px; text-align: center; outline: none; background: rgba(246, 248, 41, 0.3); border: none; color: #000; } #pub-box .but-box .btn { float: right; } #pub-box .but-box button { display: block; float: right; width: 70px; height: 30px; outline: none; border: none; margin-top: 20px; margin-left: 20px; letter-spacing: 2px; background: #fafc2a; color: #000; } #pub-box .but-box button:hover { background: #f8fa5b; color: #555; } #content { width: 1000px; height: auto; margin: 50px auto 0 auto; } #content .c-b{ position: relative; width: 100%; background: rgba(0, 0, 0, 0.5); margin-bottom: 20px; box-sizing: border-box; padding: 20px; color: #fafc2a; } #content .red-star { position: absolute; width: 20px; height: 20px; top: 0px; left: 0px; text-align: center; line-height: 23px; } #content .fa-star { color: #fafc2a; } #content .ms-cont-b { width: 100%; } #content .ms-cont-b:after { content:''; display: block; width: 0; height: 0; clear: both; } #content .ms-cont-b .ms-cont { float: left; max-width: 700px; word-break: break-all; font-size: 18px; letter-spacing: 1px; } #content .ms-icon { float: right; width: 80px; height: 80px; text-align: center; font-size: 80px; line-height: 80px; /*color: #d71d2e;*/ color: #fafc2a; } #content .ms-b { width: 100%; margin-top: 20px; } #content .ms-b:after { content:''; display: block; width: 0; height: 0; clear: both; } #content .ms-b .ms-time { width: 600px; float: left; margin-top: 25px; } #content .ms-b .ms-time:after{ content:''; display: block; width: 0; height: 0; clear: both; } #content .ms-b .ms-btn { float: right; // display: none; } #content .ms-b .ms-time .create-t { float: left; } #content .ms-b .ms-time .set-t{ float:left; margin-left: 50px; } #content .ms-b .ms-btn button{ display: block; float: right; width: 70px; height: 30px; outline: none; border: none; margin-top: 20px; margin-left: 20px; letter-spacing: 2px; } #content .ms-b .ms-btn button.star { width: 120px; background: #fafc2a; color: #000; } #content .ms-b .ms-btn button.del { background: #fafc2a; color: #000; } #content .ms-b .ms-btn button.finished { width: 100px; background: #fafc2a; color: #000; } #content .ms-b .ms-btn button.del:hover { background: #f0f204; } #content .ms-b .ms-btn button.star:hover { background: #f0f204; } #content .ms-b .ms-btn button.finished:hover { background: #f0f204; }
js:
(function() { var textContent = document.querySelector('#pub-box .content'), beginTimes = document.querySelectorAll('#pub-box .time-begin input'), endTimes = document.querySelectorAll('#pub-box .time-end input'), reset = document.querySelector('#pub-box .btn .reset'), add = document.querySelector('#pub-box .btn .add'), content = document.querySelector('#content'), temp = localStorage.getItem('D'), id, data, lcdata; if (!temp) { data = []; } else { data = JSON.parse(temp); } /*Insert Tasks*/ function createAriticle(id, text, createTime, msTime) { var str = '<article class="c-b" data-id="' + id + '">' + '<div class="red-star"></div>' + '<div class="ms-cont-b">' + '<div class="ms-cont">' + text + '</div>' + '<div class="ms-icon"></div>' + '</div>' + '<div class="ms-b">' + '<div class="ms-time">' + '<p class="create-t">Created in:<span>' + createTime + '</span></p>' + '<p class="set-t">' + msTime +'</p>' + '</div>' + '<div class="ms-btn">' + '<button class="del" onclick="deletArticle(this)">delete</button>' + '<button class="star" onclick="addRedStar(this)">Star Task</button>' + '<button class="finished" onclick="isFinish(this)">Confirmation of completion</button>' + '</div>' + '</div>' + '</article>' content.innerHTML = str + content.innerHTML; } /*Delete tasks*/ function deletArticle(self) { var id = self.parentNode.parentNode.parentNode.getAttribute('data-id'); var parent = self.parentNode.parentNode.parentNode.parentNode; var arts = document.querySelectorAll('.c-b'); var s; for (var i = 0; i < arts.length; i++) { if (arts[i].getAttribute('data-id') == id) { parent.removeChild(arts[i]); for (var j = 0; j < data.length; j++) { if (data[j].id == id) { data.splice(j,1); } } } } s = JSON.stringify(data); localStorage.setItem('D', s); } window.deletArticle = deletArticle; /*Adding Star Tasks*/ function addRedStar(self) { var id = self.parentNode.parentNode.parentNode.getAttribute('data-id'); var str; for (var i = 0; i < data.length; i++) { if (data[i].id == id) { if (!data[i].star) { self.parentNode.parentNode.parentNode.children[0].className = 'red-star fa fa-star'; self.innerHTML = "Cancel Star Task"; data[i].star = true; } else { self.parentNode.parentNode.parentNode.children[0].className = 'red-star'; self.innerHTML = "Star Task"; data[i].star = false; } } } str = JSON.stringify(data); localStorage.setItem('D', str); } window.addRedStar = addRedStar; /*Confirm Task Completion Operation*/ function isFinish(self) { var id = self.parentNode.parentNode.parentNode.getAttribute('data-id'); var str; for (var i = 0; i < data.length; i++) { if (data[i].id == id) { if (data[i].finished == 0) { self.parentNode.parentNode.previousSibling.children[1].className = 'ms-icon fa fa-check'; self.innerHTML = "Cancel Completion"; data[i].finished = 1; } else if (data[i].finished == 1) { self.parentNode.parentNode.previousSibling.children[1].className = 'ms-icon'; self.innerHTML = "Confirmation of completion"; data[i].finished = 0; } else { return; } } } str = JSON.stringify(data); localStorage.setItem('D', str); } window.isFinish = isFinish; /*When the page is loaded, the default task start time is loaded to the page*/ function addDefaultTime() { var date = new Date(); beginTimes[0].placeholder = date.getFullYear(); beginTimes[1].placeholder = date.getMonth() + 1; beginTimes[2].placeholder = date.getDate(); } addDefaultTime(); /*Loading tasks*/ function loadThing() { var arr, length, sets, finishs, arts, stars, now = new Date().getTime(), d = localStorage.getItem('D'); if (!d) { console.log(d); return; } arr = JSON.parse(d); length = arr.length; for (var m = 0; m < length; m++) { if ((now - arr[m].id) > 259200000) { arr.splice(m, 1); } } if (!arr.length) { return; } for (var i = 0; i < length; i++) { createAriticle(arr[i].id, arr[i].text, arr[i].createTime, arr[i].msTime); } arts = document.querySelectorAll('.c-b'); finishs = document.querySelectorAll('.finished'); for (var i = 0; i < length; i++) { if (arr[i].star) { for (var j = 0; j < arts.length; j++) { if (arts[j].getAttribute('data-id') == arr[i].id) { arts[j].children[0].className = 'red-star fa fa-star'; arts[j].getElementsByClassName('star')[0].innerHTML = 'Cancel Star Task'; } } } if ((arr[i].em - arr[i].bm) < 0) { arr[i].finished = 2; } if (arr[i].finished == 0) { for (var k = 0; k < arts.length; k++) { if (arts[k].getAttribute('data-id') == arr[i].id) { arts[k].getElementsByClassName('ms-icon')[0].className = 'ms-icon'; arts[k].getElementsByClassName('finished')[0].innerHTML = 'Confirmation of completion'; } } } else if (arr[i].finished == 1) { for (var t = 0; t < arts.length; t++) { if (arts[t].getAttribute('data-id') == arr[i].id) { arts[t].getElementsByClassName('ms-icon')[0].className = 'ms-icon fa fa-check'; arts[t].getElementsByClassName('finished')[0].innerHTML = 'Cancel Completion'; } } } else if (arr[i].finished == 2) { for (var n = 0; n < arts.length; n++) { if (arts[n].getAttribute('data-id') == arr[i].id) { arts[n].getElementsByClassName('ms-icon')[0].className = 'ms-icon fa fa-close'; arts[n].getElementsByClassName('finished')[0].style.display = 'none'; arts[n].getElementsByClassName('star')[0].style.display = 'none'; } } } } } loadThing(); /*Reset*/ function resetContent() { var length = endTimes.length; textContent.value = ""; for (var i = 0; i < length; i++) { beginTimes[i].value = ""; endTimes[i].value = ""; } } reset.addEventListener('click', function(ev){ var ev = ev || event; ev.stopPropagation(); resetContent(); }, false); /*Adding tasks*/ add.addEventListener('click', function(ev){ var ev = ev || event; ev.stopPropagation(); var date = new Date(); var createTime, beginTime, contText, endTime, defY, defM, defD, msTime, em, bm, c, id = new Date().getTime(); if (textContent.value == "") { alert('Input cannot be empty'); return; } if (endTimes[0].value == "" || endTimes[1].value == "" || endTimes[2].value == "") { alert('End time should not be left blank'); return; } if (beginTimes[0].value == "") { defY = beginTimes[0].placeholder; } else { defY = beginTimes[0].value; } if (beginTimes[1].value == "") { defM = beginTimes[1].placeholder; } else { defM = beginTimes[1].value; } if (beginTimes[2].value == "") { defD = beginTimes[2].placeholder; } else { defD = beginTimes[2].value; } c = id - new Date(date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()).getTime(); createTime = date.getFullYear() + 'year' + (date.getMonth() + 1) + 'month' + date.getDate() + 'day'; endTime = { year: endTimes[0].value, month: endTimes[1].value, day: endTimes[2].value } em = new Date(endTime.year + '/' + endTime.month + '/' + endTime.day).getTime() + c; beginTime = { year: defY, month: defM, day: defD } bm = new Date(beginTime.year + '/' + beginTime.month + '/' + beginTime.day).getTime() + c; msTime = 'Task validity period:' + beginTime.year + 'year' + beginTime.month + 'month' + beginTime.day + 'Solstice ' + endTime.year + 'year' + endTime.month + 'month' + endTime.day + 'day'; /*Overall data for an article*/ var contText = { text: textContent.value, createTime: createTime, beginTime: beginTime, endTime: endTime, star: false, finished: 0, msTime: msTime, id: id, bm: bm, em: em } data.push(contText); lcdata = JSON.stringify(data); localStorage.setItem('D', lcdata); createAriticle(contText.id, contText.text, contText.createTime, contText.msTime); resetContent(); }, false); })()
Sixth, shortcomings:
1. The illegal dates are not filtered out when the date is entered. It is better to use a calendar component to select the date to ensure the accuracy of the date. Otherwise, the completion time of the task will be wrong, resulting in page rendering errors. (Components are under development and will be shared later)
2. Lack of bullet window hints, there are many operations here, can develop a bullet window components, easy to use. The experience is better. (Components are under development and will be shared later)
3. It is a flaw that the created task cannot change the content of the task.
At the end of demo sharing, I would like to ask you to point out some mistakes or misunderstandings.