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>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Web Dev for Beginners</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="description" content="Description">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<link rel="icon" type="image/png" href="images/favicon.png">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"></head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: 'Web Development for Beginners: A Curriculum',
|
||||
repo: 'https://github.com/microsoft/Web-Dev-For-Beginners',
|
||||
relativePath: true,
|
||||
auto2top: false,
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<title>To-do-list</title>
|
||||
<script>
|
||||
var myNodelist = document.getElementsByTagName("LI");
|
||||
var i;
|
||||
for (i = 0; i < myNodelist.length; i++) {
|
||||
var span = document.createElement("SPAN");
|
||||
var txt = document.createTextNode("\u00D7");
|
||||
span.className = "close";
|
||||
span.appendChild(txt);
|
||||
myNodelist[i].appendChild(span);
|
||||
}
|
||||
|
||||
// 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>
|
||||
</html>
|
||||
</html>
|
||||
Loading…
Reference in new issue