aryan9042
3 years ago
committed by
GitHub
parent
120204995f
commit
411e643ea6
@ -0,0 +1,113 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove margins and padding from the list */
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the list items */
|
||||||
|
ul li {
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
padding: 12px 8px 12px 40px;
|
||||||
|
background: #eee;
|
||||||
|
font-size: 18px;
|
||||||
|
transition: 0.2s;
|
||||||
|
|
||||||
|
/* make the list items unselectable */
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set all odd list items to a different color (zebra-stripes) */
|
||||||
|
ul li:nth-child(odd) {
|
||||||
|
background: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Darker background-color on hover */
|
||||||
|
ul li:hover {
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* When clicked on, add a background color and strike out text */
|
||||||
|
ul li.checked {
|
||||||
|
background: #888;
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add a "checked" mark when clicked on */
|
||||||
|
ul li.checked::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
border-color: #fff;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0 2px 2px 0;
|
||||||
|
top: 10px;
|
||||||
|
left: 16px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
height: 15px;
|
||||||
|
width: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the close button */
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
padding: 12px 16px 12px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close:hover {
|
||||||
|
background-color: #f44336;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the header */
|
||||||
|
.header {
|
||||||
|
background-color: #f44336;
|
||||||
|
padding: 30px 40px;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Clear floats after the header */
|
||||||
|
.header:after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the input */
|
||||||
|
input {
|
||||||
|
margin: 0;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
width: 75%;
|
||||||
|
padding: 10px;
|
||||||
|
float: left;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the "Add" button */
|
||||||
|
.addBtn {
|
||||||
|
padding: 10px;
|
||||||
|
width: 25%;
|
||||||
|
background: #d9d9d9;
|
||||||
|
color: #555;
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.3s;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.addBtn:hover {
|
||||||
|
background-color: #bbb;
|
||||||
|
}
|
||||||
@ -1,23 +1,82 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Web Dev for Beginners</title>
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="description" content="Description">
|
<link rel="stylesheet" href="index.css">
|
||||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
<title>To-do-list</title>
|
||||||
<link rel="icon" type="image/png" href="images/favicon.png">
|
<script>
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"></head>
|
var myNodelist = document.getElementsByTagName("LI");
|
||||||
<body>
|
var i;
|
||||||
<div id="app"></div>
|
for (i = 0; i < myNodelist.length; i++) {
|
||||||
<script>
|
var span = document.createElement("SPAN");
|
||||||
window.$docsify = {
|
var txt = document.createTextNode("\u00D7");
|
||||||
name: 'Web Development for Beginners: A Curriculum',
|
span.className = "close";
|
||||||
repo: 'https://github.com/microsoft/Web-Dev-For-Beginners',
|
span.appendChild(txt);
|
||||||
relativePath: true,
|
myNodelist[i].appendChild(span);
|
||||||
auto2top: false,
|
}
|
||||||
|
|
||||||
|
// Click on a close button to hide the current list item
|
||||||
|
var close = document.getElementsByClassName("close");
|
||||||
|
var i;
|
||||||
|
for (i = 0; i < close.length; i++) {
|
||||||
|
close[i].onclick = function() {
|
||||||
|
var div = this.parentElement;
|
||||||
|
div.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add a "checked" symbol when clicking on a list item
|
||||||
|
var list = document.querySelector('ul');
|
||||||
|
list.addEventListener('click', function(ev) {
|
||||||
|
if (ev.target.tagName === 'LI') {
|
||||||
|
ev.target.classList.toggle('checked');
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
// Create a new list item when clicking on the "Add" button
|
||||||
|
function newElement() {
|
||||||
|
var li = document.createElement("li");
|
||||||
|
var inputValue = document.getElementById("myInput").value;
|
||||||
|
var t = document.createTextNode(inputValue);
|
||||||
|
li.appendChild(t);
|
||||||
|
if (inputValue === '') {
|
||||||
|
alert("You must write something!");
|
||||||
|
} else {
|
||||||
|
document.getElementById("myUL").appendChild(li);
|
||||||
|
}
|
||||||
|
document.getElementById("myInput").value = "";
|
||||||
|
|
||||||
|
var span = document.createElement("SPAN");
|
||||||
|
var txt = document.createTextNode("\u00D7");
|
||||||
|
span.className = "close";
|
||||||
|
span.appendChild(txt);
|
||||||
|
li.appendChild(span);
|
||||||
|
|
||||||
|
for (i = 0; i < close.length; i++) {
|
||||||
|
close[i].onclick = function() {
|
||||||
|
var div = this.parentElement;
|
||||||
|
div.style.display = "none";
|
||||||
}
|
}
|
||||||
</script>
|
}
|
||||||
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="myDIV" class="header">
|
||||||
|
<h2>My To Do List</h2>
|
||||||
|
<input type="text" id="myInput" placeholder="Title...">
|
||||||
|
<span onclick="newElement()" class="addBtn">Add</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul id="myUL">
|
||||||
|
<li>Hit the gym</li>
|
||||||
|
<li class="checked">Pay bills</li>
|
||||||
|
<li>Meet George</li>
|
||||||
|
<li>Buy eggs</li>
|
||||||
|
<li>Read a book</li>
|
||||||
|
<li>Organize office</li>
|
||||||
|
</ul>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in new issue