stronger to-do-list with more functions#1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KKKinlibrary wants to merge 17 commits into
base:master
Choose a base branch
from
Open

stronger to-do-list with more functions #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
8198b8a
editable to do list
KKKinlibrary Dec 21, 2019
2e15b0a
Update README.md
KKKinlibrary Dec 21, 2019
8d98c89
Add files via upload
KKKinlibrary Dec 21, 2019
7f69980
Add files via upload
KKKinlibrary Dec 21, 2019
38c8005
Set theme jekyll-theme-time-machine
KKKinlibrary Dec 21, 2019
58a1f84
Rename index.html to ind22ex.html
KKKinlibrary Dec 21, 2019
66f948a
Delete ind22ex.html
KKKinlibrary Dec 21, 2019
834e761
Rename homepage.html to index.html
KKKinlibrary Dec 21, 2019
145f1f7
Update index.html
KKKinlibrary Dec 21, 2019
67bcdd7
Add files via upload
KKKinlibrary Dec 21, 2019
0bb24f9
Update style.css
KKKinlibrary Dec 21, 2019
da5f62a
12.24
KKKinlibrary Dec 24, 2019
e04ef74
added a small function
KKKinlibrary Dec 24, 2019
2990fa9
123
KKKinlibrary Dec 24, 2019
10bd26d
123
KKKinlibrary Dec 24, 2019
6138769
123
KKKinlibrary Dec 24, 2019
8c78450
fix bug
KKKinlibrary Mar 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 3 additions & 34 deletions README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,4 @@
# To-Do-List Using JavaScript
In this tutorial, a JavaScript beginner can be able to create a beautiful and functional to do list using JavaScript.
I will talk about the logic behind every line of code, before opening my text editor and start typing the code.
it's a step by step tutorial, you won't get lost at any stage of this tutorial.
### 2019.12
Based on the preview job, I have added two functions. The first one when double click the item you can edit the content of to-do-list and the changes will auto save when the content lose the focus. The second one is that you can see the lists sorted by their completion.

to follow the tutorial step by step, when we get to the second part (when we type the code), you'll need to download the starter template from here.

The tutorial video link : https://youtu.be/b8sUhU_eq3g

When you open the folder, you'll find all the files needed to get started, the CSS code, is already typed (see style.css file), as we're not going to talk about CSS in our tutorial. we're going just to talk about HTML and JavaScript.

the to-do list we're going to create has a beautiful UI, the user can add a to-do by filling the input and hit ENTER, after that he can rather check the to-do when it's done, or remove it using the delete button.

The user's to-do list is stored in the local storage, so when he refreshes the page, he can always find the list there.

There is the possibility for the user, to clear the list, by clicking the button clear, at the top right corner of our app.

The to do list app, shows the today's date to the user, for that we're using a method called toLocaleDateString, which you can read about here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

///// Here you can find some other tutorial, that you might like to see /////

Ping Pong Game Using JavaScript
https://youtu.be/nl0KXCa5pJk

Create a Multiple Choice Quiz Using JavaScript
https://youtu.be/49pYIMygIcU

Tetris Game Using JavaScript
https://youtu.be/HEsAr2Yt2do

Snake Game Using JavaScript
https://youtu.be/9TcU2C1AACw

Flappy Bird Game Using JavaScript
https://youtu.be/L07i4g-zhDA
You can see the result in https://kkkinlibrary.github.io/To-Do-List/
1 change: 1 addition & 0 deletions _config.yml
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
theme: jekyll-theme-time-machine
217 changes: 121 additions & 96 deletions css/style.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,197 @@
/* ------------ youtube.com/CodeExplained ------------ */
body{
padding: 0;
margin: 0;
background-color:rgba(0,0,0,0.1);
background-color:rgba(0,0,0,0.1);
font-family: 'Titillium Web', sans-serif;
}

/* ------------ container ------------ */
/* -----container----- */
.container{
padding:10px;
width:380px;
margin:0 auto;
padding:10px;
width:380px;
margin:0 auto;
}

/* ------------ header ------------ */
/* -----header----- */
.header{
width: 380px;
height:200px;
background-image: url('../img/bg2.jpg');
height:200px;
background-image: url('../img/bg1.jpg');
background-size: 100% 200%;
background-repeat: no-repeat;
border-radius: 15px 15px 0 0;
position: relative;
}

.clear{
width: 30px;
width: 30px;
height: 30px;
position: absolute;
right:20px;
top: 20px;
right: 20px;
}

.clear i{
font-size: 30px;
color: #FFF;
color: #fff;
}

.clear i:hover{
cursor: pointer;
text-shadow: 1px 3px 5px #000;
transform: rotate(45deg);
}

#date{
position: absolute;
bottom: 10px;
left: 10px;
color: #FFF;
font-size: 25px;
font-family: 'Titillium Web', sans-serif;
font-family: 'Titillium Web' sans-serif;
}

.display{
position: absolute;
height: 45px;
width: 380px;
top: 160px;
}

.display i.All{
position: absolute;
right: 60px;
font-size: 25px;
color: #fff;
bottom: 13px;
}
.display i.All:hover{
cursor: pointer;
}

/* ------------ content ------------ */
.display i.fulfill{
position: absolute;
right: 35px;
font-size: 25px;
color: #fff;
bottom: 13px;
}
.display i.fulfill:hover{
cursor: pointer;
}

.display i.unfinished{
position: absolute;
right: 10px;
font-size: 25px;
color: #fff;
bottom: 13px;
}
.display i.unfinished:hover{
cursor: pointer;
}
/* -----content----- */
.content{
width:380px;
width:380px;
height: 350px;
max-height:350px;
background-color: #FFF;
max-height: 350px;
background-color: #FFF;
border-radius: 0 0 0 0;
overflow: auto;
}
.content::-webkit-scrollbar {
display: none;
}

.content ul{
padding:0;
margin:0;
padding:0;
margin:0;
}

.fa-check-circle{
color: #6eb200;
}

.item{
width:380px;
font-size: 15px;
color: #000;
width: 380px;
height: 45px;
min-height: 45px;
position: relative;
border-bottom: 1px solid rgba(0,0,0,0.1);
border-bottom: 1px solid rgba(0,0,0, 0.1);
list-style: none;
position: relative;
padding: 0;
margin: 0;
}

.item i.co{
position: absolute;
font-size: 25px;
padding-left:5px;
left:15px;
top:10px;
padding-left:5px;
left:15px;
top:10px;
}

.item i.co:hover{
cursor: pointer;
}
.fa-check-circle{
color:#6eb200;
}
.item p.text{

.item input.text{
position: absolute;
padding:0;
margin:0;
padding:0;
margin:0;
font-size: 20px;
left:50px;
top:5px;
background-color: #FFF;
max-width:285px;
left: 50px;
top: 10px;
background-color: #fff;
width: 285px;
overflow: hidden;
border: none;
}
.lineThrough{
text-decoration: line-through;
color : #ccc;

.item input:disabled{
color: #000;
font-size: 20px;
}

.item i.de{
position: absolute;
font-size: 25px;
right:15px;
top:10px;
right:15px;
top:10px;
}

.item i.de:hover{
color:#af0000;
color: red;
cursor: pointer;
}
/* ------------ add item ------------ */

.lineThrough{
text-decoration: line-through;
color: #ccc !important;
}

::-webkit-scrollbar{
display: none;
}

/* ------ add item ------*/
.add-to-do{
position: relative;
width: 360px;
height:40px;
background-color: #FFF;
width: auto;
height:40px;
background-color: #fff;
padding: 10px;
border-top: 1px solid rgba(0,0,0,0.1);
border-top: 1px solid rgba(0,0,0,0.1);
}

.add-to-do i{
position: absolute;
font-size: 40px;
color: #4162f6;
}

.add-to-do i:hover{
cursor: pointer;
text-shadow: 1px 2px 3px blue;
}

.add-to-do input{
position: absolute;
left: 50px;
Expand All@@ -133,53 +200,11 @@ body{
background-color: transparent;
border: none;
font-size: 20px;
padding-left:10px;
padding-left:10px;
}
.add-to-do input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #4162f6;
font-family: 'Titillium Web', sans-serif;
font-size: 20px;
}
.add-to-do input::-moz-placeholder { /* Firefox 19+ */
color: #4162f6;
font-family: 'Titillium Web', sans-serif;
font-size: 20px;
}
.add-to-do input:-ms-input-placeholder { /* IE 10+ */
color: #4162f6;
font-family: 'Titillium Web', sans-serif;
font-size: 20px;
}
.add-to-do input:-moz-placeholder { /* Firefox 18- */

.add-to-do input::placeholder{
color: #4162f6;
font-family: 'Titillium Web', sans-serif;
font-size: 20px;
}




























45 changes: 44 additions & 1 deletion index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1 +1,44 @@
<!-- CODE EXPLAINED CHANNEL -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Too many lists to do</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</script>
</head>
<body>
<div class="container">
<div class="header">
<div class="clear">
<i class="fa fa-refresh"></i>
</div>
<div class="display">
<span id="date"></span>
<i class="fa fa-pencil-square-o All"></i>
<i class="fa fa-check-square-o fulfill"></i>
<i class="fa fa-square-o unfinished"></i>
</div>
</div>

<div class="content">
<ul id="list"><!--
<li class="item">
<i class="fa fa-circle-thin co"></i>
<p class="text">Drink Coffee</p>
<i class="fa fa-trash-o de"></i>
</li> -->
</ul>
</div>
<div class="add-to-do">
<i class="fa fa-plus-circle"></i>
<input type="text" id="input" placeholder="Add a to-do">
</div>
</div>
<script src="js/app.js"></script>

</body>
</html>
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
stronger to-do-list with more functions#1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

KKKinlibrary
wants to merge
17
commits into

base:master
Choose a base branch

from

 Open


stronger to-do-list with more functions
#1
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
8198b8a

editable to do list


KKKinlibrary Dec 21, 2019
2e15b0a

Update README.md


KKKinlibrary Dec 21, 2019
8d98c89

Add files via upload


KKKinlibrary Dec 21, 2019
7f69980

Add files via upload


KKKinlibrary Dec 21, 2019
38c8005

Set theme jekyll-theme-time-machine


KKKinlibrary Dec 21, 2019
58a1f84

Rename index.html to ind22ex.html


KKKinlibrary Dec 21, 2019
66f948a

Delete ind22ex.html


KKKinlibrary Dec 21, 2019
834e761

Rename homepage.html to index.html


KKKinlibrary Dec 21, 2019
145f1f7

Update index.html


KKKinlibrary Dec 21, 2019
67bcdd7

Add files via upload


KKKinlibrary Dec 21, 2019
0bb24f9

Update style.css


KKKinlibrary Dec 21, 2019
da5f62a

12.24


KKKinlibrary Dec 24, 2019
e04ef74

added a small function


KKKinlibrary Dec 24, 2019
2990fa9

123


KKKinlibrary Dec 24, 2019
10bd26d

123


KKKinlibrary Dec 24, 2019
6138769

123


KKKinlibrary Dec 24, 2019
8c78450

fix bug


KKKinlibrary Mar 29, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


37 changes: 3 additions & 34 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,35 +1,4 @@
# To-Do-List Using JavaScript
In this tutorial, a JavaScript beginner can be able to create a beautiful and functional to do list using JavaScript.
I will talk about the logic behind every line of code, before opening my text editor and start typing the code.
it's a step by step tutorial, you won't get lost at any stage of this tutorial.
### 2019.12
Based on the preview job, I have added two functions. The first one when double click the item you can edit the content of to-do-list and the changes will auto save when the content lose the focus. The second one is that you can see the lists sorted by their completion.

to follow the tutorial step by step, when we get to the second part (when we type the code), you'll need to download the starter template from here.

The tutorial video link : https://youtu.be/b8sUhU_eq3g

When you open the folder, you'll find all the files needed to get started, the CSS code, is already typed (see style.css file), as we're not going to talk about CSS in our tutorial. we're going just to talk about HTML and JavaScript.

the to-do list we're going to create has a beautiful UI, the user can add a to-do by filling the input and hit ENTER, after that he can rather check the to-do when it's done, or remove it using the delete button.

The user's to-do list is stored in the local storage, so when he refreshes the page, he can always find the list there.

There is the possibility for the user, to clear the list, by clicking the button clear, at the top right corner of our app.

The to do list app, shows the today's date to the user, for that we're using a method called toLocaleDateString, which you can read about here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

///// Here you can find some other tutorial, that you might like to see /////

Ping Pong Game Using JavaScript
https://youtu.be/nl0KXCa5pJk

Create a Multiple Choice Quiz Using JavaScript
https://youtu.be/49pYIMygIcU

Tetris Game Using JavaScript
https://youtu.be/HEsAr2Yt2do

Snake Game Using JavaScript
https://youtu.be/9TcU2C1AACw

Flappy Bird Game Using JavaScript
https://youtu.be/L07i4g-zhDA
You can see the result in https://kkkinlibrary.github.io/To-Do-List/

1 change: 1 addition & 0 deletions
_config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
theme: jekyll-theme-time-machine

217 changes: 121 additions & 96 deletions
css/style.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,130 +1,197 @@
/* ------------ youtube.com/CodeExplained ------------ */
body{
 padding: 0;
 margin: 0;
 background-color:rgba(0,0,0,0.1);
 background-color:rgba(0,0,0,0.1);
 font-family: 'Titillium Web', sans-serif;
}

/* ------------ container ------------ */
/* -----container----- */
.container{
 padding:10px;
 width:380px;
 margin:0 auto;
 padding:10px;
 width:380px;
 margin:0 auto;
}

/* ------------ header ------------ */
/* -----header----- */
.header{
 width: 380px;
 height:200px;
 background-image: url('../img/bg2.jpg');
 height:200px;
 background-image: url('../img/bg1.jpg');
 background-size: 100% 200%;
 background-repeat: no-repeat;
 border-radius: 15px 15px 0 0;
 position: relative;
}

.clear{
 width: 30px;
 width: 30px;
 height: 30px;
 position: absolute;
 right:20px;
 top: 20px;
 right: 20px;
}

.clear i{
 font-size: 30px;
 color: #FFF;
 color: #fff;
}

.clear i:hover{
 cursor: pointer;
 text-shadow: 1px 3px 5px #000;
 transform: rotate(45deg);
}

#date{
 position: absolute;
 bottom: 10px;
 left: 10px;
 color: #FFF;
 font-size: 25px;
 font-family: 'Titillium Web', sans-serif;
 font-family: 'Titillium Web' sans-serif;
}

.display{
 position: absolute;
 height: 45px;
 width: 380px;
 top: 160px;
}

.display i.All{
 position: absolute;
 right: 60px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.All:hover{
 cursor: pointer;
}

/* ------------ content ------------ */
.display i.fulfill{
 position: absolute;
 right: 35px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.fulfill:hover{
 cursor: pointer;
}

.display i.unfinished{
 position: absolute;
 right: 10px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.unfinished:hover{
 cursor: pointer;
}
/* -----content----- */
.content{
 width:380px;
 width:380px;
 height: 350px;
 max-height:350px;
 background-color: #FFF;
 max-height: 350px;
 background-color: #FFF; 
 border-radius: 0 0 0 0;
 overflow: auto;
}
.content::-webkit-scrollbar { 
 display: none; 
}

.content ul{
 padding:0;
 margin:0;
 padding:0;
 margin:0;
}

.fa-check-circle{
 color: #6eb200;
}

.item{
 width:380px;
 font-size: 15px;
 color: #000;
 width: 380px;
 height: 45px;
 min-height: 45px;
 position: relative;
 border-bottom: 1px solid rgba(0,0,0,0.1);
 border-bottom: 1px solid rgba(0,0,0, 0.1);
 list-style: none;
 position: relative;
 padding: 0;
 margin: 0;
}

.item i.co{
 position: absolute;
 font-size: 25px;
 padding-left:5px;
 left:15px;
 top:10px;
 padding-left:5px;
 left:15px;
 top:10px;
}

.item i.co:hover{
 cursor: pointer;
}
.fa-check-circle{
 color:#6eb200;
}
.item p.text{

.item input.text{
 position: absolute;
 padding:0;
 margin:0;
 padding:0;
 margin:0;
 font-size: 20px;
 left:50px;
 top:5px;
 background-color: #FFF;
 max-width:285px;
 left: 50px;
 top: 10px;
 background-color: #fff;
 width: 285px;
 overflow: hidden;
 border: none; 
}
.lineThrough{
 text-decoration: line-through;
 color : #ccc;

.item input:disabled{
 color: #000;
 font-size: 20px;
}

.item i.de{
 position: absolute;
 font-size: 25px;
 right:15px;
 top:10px;
 right:15px;
 top:10px;
}

.item i.de:hover{
 color:#af0000;
 color: red;
 cursor: pointer;
}
/* ------------ add item ------------ */

.lineThrough{
 text-decoration: line-through;
 color: #ccc !important;
}

::-webkit-scrollbar{
 display: none;
}

/* ------ add item ------*/
.add-to-do{
 position: relative;
 width: 360px;
 height:40px;
 background-color: #FFF;
 width: auto;
 height:40px;
 background-color: #fff;
 padding: 10px;
 border-top: 1px solid rgba(0,0,0,0.1);
 border-top: 1px solid rgba(0,0,0,0.1);
}

.add-to-do i{
 position: absolute;
 font-size: 40px;
 color: #4162f6;
}

.add-to-do i:hover{
 cursor: pointer;
 text-shadow: 1px 2px 3px blue;
}

.add-to-do input{
 position: absolute;
 left: 50px;
Expand All@@ -133,53 +200,11 @@ body{
 background-color: transparent;
 border: none;
 font-size: 20px;
 padding-left:10px;
 padding-left:10px;
}
.add-to-do input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input::-moz-placeholder { /* Firefox 19+ */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input:-ms-input-placeholder { /* IE 10+ */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input:-moz-placeholder { /* Firefox 18- */

.add-to-do input::placeholder{
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}





























45 changes: 44 additions & 1 deletion
index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1 +1,44 @@
<!-- CODE EXPLAINED CHANNEL -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Too many lists to do</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web">
 <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
 <link rel="stylesheet" href="css/style.css">
 </script>
</head>
<body>
 <div class="container">
 <div class="header">
 <div class="clear"> 
 <i class="fa fa-refresh"></i>
 </div>
 <div class="display"> 
 <span id="date"></span>
 <i class="fa fa-pencil-square-o All"></i>
 <i class="fa fa-check-square-o fulfill"></i>
 <i class="fa fa-square-o unfinished"></i>
 </div>
 </div>

 <div class="content">
 <ul id="list"><!-- 
 <li class="item">
 <i class="fa fa-circle-thin co"></i>
 <p class="text">Drink Coffee</p>
 <i class="fa fa-trash-o de"></i>
 </li> -->
 </ul> 
 </div>
 <div class="add-to-do">
 <i class="fa fa-plus-circle"></i>
 <input type="text" id="input" placeholder="Add a to-do">
 </div>
 </div>
 <script src="js/app.js"></script>

</body>
</html>
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
stronger to-do-list with more functions#1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

KKKinlibrary
wants to merge
17
commits into

base:master
Choose a base branch

from

 Open


stronger to-do-list with more functions
#1
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
8198b8a

editable to do list


KKKinlibrary Dec 21, 2019
2e15b0a

Update README.md


KKKinlibrary Dec 21, 2019
8d98c89

Add files via upload


KKKinlibrary Dec 21, 2019
7f69980

Add files via upload


KKKinlibrary Dec 21, 2019
38c8005

Set theme jekyll-theme-time-machine


KKKinlibrary Dec 21, 2019
58a1f84

Rename index.html to ind22ex.html


KKKinlibrary Dec 21, 2019
66f948a

Delete ind22ex.html


KKKinlibrary Dec 21, 2019
834e761

Rename homepage.html to index.html


KKKinlibrary Dec 21, 2019
145f1f7

Update index.html


KKKinlibrary Dec 21, 2019
67bcdd7

Add files via upload


KKKinlibrary Dec 21, 2019
0bb24f9

Update style.css


KKKinlibrary Dec 21, 2019
da5f62a

12.24


KKKinlibrary Dec 24, 2019
e04ef74

added a small function


KKKinlibrary Dec 24, 2019
2990fa9

123


KKKinlibrary Dec 24, 2019
10bd26d

123


KKKinlibrary Dec 24, 2019
6138769

123


KKKinlibrary Dec 24, 2019
8c78450

fix bug


KKKinlibrary Mar 29, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


37 changes: 3 additions & 34 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,35 +1,4 @@
# To-Do-List Using JavaScript
In this tutorial, a JavaScript beginner can be able to create a beautiful and functional to do list using JavaScript.
I will talk about the logic behind every line of code, before opening my text editor and start typing the code.
it's a step by step tutorial, you won't get lost at any stage of this tutorial.
### 2019.12
Based on the preview job, I have added two functions. The first one when double click the item you can edit the content of to-do-list and the changes will auto save when the content lose the focus. The second one is that you can see the lists sorted by their completion.

to follow the tutorial step by step, when we get to the second part (when we type the code), you'll need to download the starter template from here.

The tutorial video link : https://youtu.be/b8sUhU_eq3g

When you open the folder, you'll find all the files needed to get started, the CSS code, is already typed (see style.css file), as we're not going to talk about CSS in our tutorial. we're going just to talk about HTML and JavaScript.

the to-do list we're going to create has a beautiful UI, the user can add a to-do by filling the input and hit ENTER, after that he can rather check the to-do when it's done, or remove it using the delete button.

The user's to-do list is stored in the local storage, so when he refreshes the page, he can always find the list there.

There is the possibility for the user, to clear the list, by clicking the button clear, at the top right corner of our app.

The to do list app, shows the today's date to the user, for that we're using a method called toLocaleDateString, which you can read about here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

///// Here you can find some other tutorial, that you might like to see /////

Ping Pong Game Using JavaScript
https://youtu.be/nl0KXCa5pJk

Create a Multiple Choice Quiz Using JavaScript
https://youtu.be/49pYIMygIcU

Tetris Game Using JavaScript
https://youtu.be/HEsAr2Yt2do

Snake Game Using JavaScript
https://youtu.be/9TcU2C1AACw

Flappy Bird Game Using JavaScript
https://youtu.be/L07i4g-zhDA
You can see the result in https://kkkinlibrary.github.io/To-Do-List/

1 change: 1 addition & 0 deletions
_config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
theme: jekyll-theme-time-machine

217 changes: 121 additions & 96 deletions
css/style.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,130 +1,197 @@
/* ------------ youtube.com/CodeExplained ------------ */
body{
 padding: 0;
 margin: 0;
 background-color:rgba(0,0,0,0.1);
 background-color:rgba(0,0,0,0.1);
 font-family: 'Titillium Web', sans-serif;
}

/* ------------ container ------------ */
/* -----container----- */
.container{
 padding:10px;
 width:380px;
 margin:0 auto;
 padding:10px;
 width:380px;
 margin:0 auto;
}

/* ------------ header ------------ */
/* -----header----- */
.header{
 width: 380px;
 height:200px;
 background-image: url('../img/bg2.jpg');
 height:200px;
 background-image: url('../img/bg1.jpg');
 background-size: 100% 200%;
 background-repeat: no-repeat;
 border-radius: 15px 15px 0 0;
 position: relative;
}

.clear{
 width: 30px;
 width: 30px;
 height: 30px;
 position: absolute;
 right:20px;
 top: 20px;
 right: 20px;
}

.clear i{
 font-size: 30px;
 color: #FFF;
 color: #fff;
}

.clear i:hover{
 cursor: pointer;
 text-shadow: 1px 3px 5px #000;
 transform: rotate(45deg);
}

#date{
 position: absolute;
 bottom: 10px;
 left: 10px;
 color: #FFF;
 font-size: 25px;
 font-family: 'Titillium Web', sans-serif;
 font-family: 'Titillium Web' sans-serif;
}

.display{
 position: absolute;
 height: 45px;
 width: 380px;
 top: 160px;
}

.display i.All{
 position: absolute;
 right: 60px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.All:hover{
 cursor: pointer;
}

/* ------------ content ------------ */
.display i.fulfill{
 position: absolute;
 right: 35px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.fulfill:hover{
 cursor: pointer;
}

.display i.unfinished{
 position: absolute;
 right: 10px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.unfinished:hover{
 cursor: pointer;
}
/* -----content----- */
.content{
 width:380px;
 width:380px;
 height: 350px;
 max-height:350px;
 background-color: #FFF;
 max-height: 350px;
 background-color: #FFF; 
 border-radius: 0 0 0 0;
 overflow: auto;
}
.content::-webkit-scrollbar { 
 display: none; 
}

.content ul{
 padding:0;
 margin:0;
 padding:0;
 margin:0;
}

.fa-check-circle{
 color: #6eb200;
}

.item{
 width:380px;
 font-size: 15px;
 color: #000;
 width: 380px;
 height: 45px;
 min-height: 45px;
 position: relative;
 border-bottom: 1px solid rgba(0,0,0,0.1);
 border-bottom: 1px solid rgba(0,0,0, 0.1);
 list-style: none;
 position: relative;
 padding: 0;
 margin: 0;
}

.item i.co{
 position: absolute;
 font-size: 25px;
 padding-left:5px;
 left:15px;
 top:10px;
 padding-left:5px;
 left:15px;
 top:10px;
}

.item i.co:hover{
 cursor: pointer;
}
.fa-check-circle{
 color:#6eb200;
}
.item p.text{

.item input.text{
 position: absolute;
 padding:0;
 margin:0;
 padding:0;
 margin:0;
 font-size: 20px;
 left:50px;
 top:5px;
 background-color: #FFF;
 max-width:285px;
 left: 50px;
 top: 10px;
 background-color: #fff;
 width: 285px;
 overflow: hidden;
 border: none; 
}
.lineThrough{
 text-decoration: line-through;
 color : #ccc;

.item input:disabled{
 color: #000;
 font-size: 20px;
}

.item i.de{
 position: absolute;
 font-size: 25px;
 right:15px;
 top:10px;
 right:15px;
 top:10px;
}

.item i.de:hover{
 color:#af0000;
 color: red;
 cursor: pointer;
}
/* ------------ add item ------------ */

.lineThrough{
 text-decoration: line-through;
 color: #ccc !important;
}

::-webkit-scrollbar{
 display: none;
}

/* ------ add item ------*/
.add-to-do{
 position: relative;
 width: 360px;
 height:40px;
 background-color: #FFF;
 width: auto;
 height:40px;
 background-color: #fff;
 padding: 10px;
 border-top: 1px solid rgba(0,0,0,0.1);
 border-top: 1px solid rgba(0,0,0,0.1);
}

.add-to-do i{
 position: absolute;
 font-size: 40px;
 color: #4162f6;
}

.add-to-do i:hover{
 cursor: pointer;
 text-shadow: 1px 2px 3px blue;
}

.add-to-do input{
 position: absolute;
 left: 50px;
Expand All@@ -133,53 +200,11 @@ body{
 background-color: transparent;
 border: none;
 font-size: 20px;
 padding-left:10px;
 padding-left:10px;
}
.add-to-do input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input::-moz-placeholder { /* Firefox 19+ */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input:-ms-input-placeholder { /* IE 10+ */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input:-moz-placeholder { /* Firefox 18- */

.add-to-do input::placeholder{
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}





























45 changes: 44 additions & 1 deletion
index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1 +1,44 @@
<!-- CODE EXPLAINED CHANNEL -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Too many lists to do</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web">
 <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
 <link rel="stylesheet" href="css/style.css">
 </script>
</head>
<body>
 <div class="container">
 <div class="header">
 <div class="clear"> 
 <i class="fa fa-refresh"></i>
 </div>
 <div class="display"> 
 <span id="date"></span>
 <i class="fa fa-pencil-square-o All"></i>
 <i class="fa fa-check-square-o fulfill"></i>
 <i class="fa fa-square-o unfinished"></i>
 </div>
 </div>

 <div class="content">
 <ul id="list"><!-- 
 <li class="item">
 <i class="fa fa-circle-thin co"></i>
 <p class="text">Drink Coffee</p>
 <i class="fa fa-trash-o de"></i>
 </li> -->
 </ul> 
 </div>
 <div class="add-to-do">
 <i class="fa fa-plus-circle"></i>
 <input type="text" id="input" placeholder="Add a to-do">
 </div>
 </div>
 <script src="js/app.js"></script>

</body>
</html>
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
stronger to-do-list with more functions#1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

KKKinlibrary
wants to merge
17
commits into

base:master
Choose a base branch

from

 Open


stronger to-do-list with more functions
#1
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
8198b8a

editable to do list


KKKinlibrary Dec 21, 2019
2e15b0a

Update README.md


KKKinlibrary Dec 21, 2019
8d98c89

Add files via upload


KKKinlibrary Dec 21, 2019
7f69980

Add files via upload


KKKinlibrary Dec 21, 2019
38c8005

Set theme jekyll-theme-time-machine


KKKinlibrary Dec 21, 2019
58a1f84

Rename index.html to ind22ex.html


KKKinlibrary Dec 21, 2019
66f948a

Delete ind22ex.html


KKKinlibrary Dec 21, 2019
834e761

Rename homepage.html to index.html


KKKinlibrary Dec 21, 2019
145f1f7

Update index.html


KKKinlibrary Dec 21, 2019
67bcdd7

Add files via upload


KKKinlibrary Dec 21, 2019
0bb24f9

Update style.css


KKKinlibrary Dec 21, 2019
da5f62a

12.24


KKKinlibrary Dec 24, 2019
e04ef74

added a small function


KKKinlibrary Dec 24, 2019
2990fa9

123


KKKinlibrary Dec 24, 2019
10bd26d

123


KKKinlibrary Dec 24, 2019
6138769

123


KKKinlibrary Dec 24, 2019
8c78450

fix bug


KKKinlibrary Mar 29, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


37 changes: 3 additions & 34 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,35 +1,4 @@
# To-Do-List Using JavaScript
In this tutorial, a JavaScript beginner can be able to create a beautiful and functional to do list using JavaScript.
I will talk about the logic behind every line of code, before opening my text editor and start typing the code.
it's a step by step tutorial, you won't get lost at any stage of this tutorial.
### 2019.12
Based on the preview job, I have added two functions. The first one when double click the item you can edit the content of to-do-list and the changes will auto save when the content lose the focus. The second one is that you can see the lists sorted by their completion.

to follow the tutorial step by step, when we get to the second part (when we type the code), you'll need to download the starter template from here.

The tutorial video link : https://youtu.be/b8sUhU_eq3g

When you open the folder, you'll find all the files needed to get started, the CSS code, is already typed (see style.css file), as we're not going to talk about CSS in our tutorial. we're going just to talk about HTML and JavaScript.

the to-do list we're going to create has a beautiful UI, the user can add a to-do by filling the input and hit ENTER, after that he can rather check the to-do when it's done, or remove it using the delete button.

The user's to-do list is stored in the local storage, so when he refreshes the page, he can always find the list there.

There is the possibility for the user, to clear the list, by clicking the button clear, at the top right corner of our app.

The to do list app, shows the today's date to the user, for that we're using a method called toLocaleDateString, which you can read about here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

///// Here you can find some other tutorial, that you might like to see /////

Ping Pong Game Using JavaScript
https://youtu.be/nl0KXCa5pJk

Create a Multiple Choice Quiz Using JavaScript
https://youtu.be/49pYIMygIcU

Tetris Game Using JavaScript
https://youtu.be/HEsAr2Yt2do

Snake Game Using JavaScript
https://youtu.be/9TcU2C1AACw

Flappy Bird Game Using JavaScript
https://youtu.be/L07i4g-zhDA
You can see the result in https://kkkinlibrary.github.io/To-Do-List/

1 change: 1 addition & 0 deletions
_config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
theme: jekyll-theme-time-machine

217 changes: 121 additions & 96 deletions
css/style.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,130 +1,197 @@
/* ------------ youtube.com/CodeExplained ------------ */
body{
 padding: 0;
 margin: 0;
 background-color:rgba(0,0,0,0.1);
 background-color:rgba(0,0,0,0.1);
 font-family: 'Titillium Web', sans-serif;
}

/* ------------ container ------------ */
/* -----container----- */
.container{
 padding:10px;
 width:380px;
 margin:0 auto;
 padding:10px;
 width:380px;
 margin:0 auto;
}

/* ------------ header ------------ */
/* -----header----- */
.header{
 width: 380px;
 height:200px;
 background-image: url('../img/bg2.jpg');
 height:200px;
 background-image: url('../img/bg1.jpg');
 background-size: 100% 200%;
 background-repeat: no-repeat;
 border-radius: 15px 15px 0 0;
 position: relative;
}

.clear{
 width: 30px;
 width: 30px;
 height: 30px;
 position: absolute;
 right:20px;
 top: 20px;
 right: 20px;
}

.clear i{
 font-size: 30px;
 color: #FFF;
 color: #fff;
}

.clear i:hover{
 cursor: pointer;
 text-shadow: 1px 3px 5px #000;
 transform: rotate(45deg);
}

#date{
 position: absolute;
 bottom: 10px;
 left: 10px;
 color: #FFF;
 font-size: 25px;
 font-family: 'Titillium Web', sans-serif;
 font-family: 'Titillium Web' sans-serif;
}

.display{
 position: absolute;
 height: 45px;
 width: 380px;
 top: 160px;
}

.display i.All{
 position: absolute;
 right: 60px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.All:hover{
 cursor: pointer;
}

/* ------------ content ------------ */
.display i.fulfill{
 position: absolute;
 right: 35px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.fulfill:hover{
 cursor: pointer;
}

.display i.unfinished{
 position: absolute;
 right: 10px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.unfinished:hover{
 cursor: pointer;
}
/* -----content----- */
.content{
 width:380px;
 width:380px;
 height: 350px;
 max-height:350px;
 background-color: #FFF;
 max-height: 350px;
 background-color: #FFF; 
 border-radius: 0 0 0 0;
 overflow: auto;
}
.content::-webkit-scrollbar { 
 display: none; 
}

.content ul{
 padding:0;
 margin:0;
 padding:0;
 margin:0;
}

.fa-check-circle{
 color: #6eb200;
}

.item{
 width:380px;
 font-size: 15px;
 color: #000;
 width: 380px;
 height: 45px;
 min-height: 45px;
 position: relative;
 border-bottom: 1px solid rgba(0,0,0,0.1);
 border-bottom: 1px solid rgba(0,0,0, 0.1);
 list-style: none;
 position: relative;
 padding: 0;
 margin: 0;
}

.item i.co{
 position: absolute;
 font-size: 25px;
 padding-left:5px;
 left:15px;
 top:10px;
 padding-left:5px;
 left:15px;
 top:10px;
}

.item i.co:hover{
 cursor: pointer;
}
.fa-check-circle{
 color:#6eb200;
}
.item p.text{

.item input.text{
 position: absolute;
 padding:0;
 margin:0;
 padding:0;
 margin:0;
 font-size: 20px;
 left:50px;
 top:5px;
 background-color: #FFF;
 max-width:285px;
 left: 50px;
 top: 10px;
 background-color: #fff;
 width: 285px;
 overflow: hidden;
 border: none; 
}
.lineThrough{
 text-decoration: line-through;
 color : #ccc;

.item input:disabled{
 color: #000;
 font-size: 20px;
}

.item i.de{
 position: absolute;
 font-size: 25px;
 right:15px;
 top:10px;
 right:15px;
 top:10px;
}

.item i.de:hover{
 color:#af0000;
 color: red;
 cursor: pointer;
}
/* ------------ add item ------------ */

.lineThrough{
 text-decoration: line-through;
 color: #ccc !important;
}

::-webkit-scrollbar{
 display: none;
}

/* ------ add item ------*/
.add-to-do{
 position: relative;
 width: 360px;
 height:40px;
 background-color: #FFF;
 width: auto;
 height:40px;
 background-color: #fff;
 padding: 10px;
 border-top: 1px solid rgba(0,0,0,0.1);
 border-top: 1px solid rgba(0,0,0,0.1);
}

.add-to-do i{
 position: absolute;
 font-size: 40px;
 color: #4162f6;
}

.add-to-do i:hover{
 cursor: pointer;
 text-shadow: 1px 2px 3px blue;
}

.add-to-do input{
 position: absolute;
 left: 50px;
Expand All@@ -133,53 +200,11 @@ body{
 background-color: transparent;
 border: none;
 font-size: 20px;
 padding-left:10px;
 padding-left:10px;
}
.add-to-do input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input::-moz-placeholder { /* Firefox 19+ */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input:-ms-input-placeholder { /* IE 10+ */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input:-moz-placeholder { /* Firefox 18- */

.add-to-do input::placeholder{
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}





























45 changes: 44 additions & 1 deletion
index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1 +1,44 @@
<!-- CODE EXPLAINED CHANNEL -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Too many lists to do</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web">
 <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
 <link rel="stylesheet" href="css/style.css">
 </script>
</head>
<body>
 <div class="container">
 <div class="header">
 <div class="clear"> 
 <i class="fa fa-refresh"></i>
 </div>
 <div class="display"> 
 <span id="date"></span>
 <i class="fa fa-pencil-square-o All"></i>
 <i class="fa fa-check-square-o fulfill"></i>
 <i class="fa fa-square-o unfinished"></i>
 </div>
 </div>

 <div class="content">
 <ul id="list"><!-- 
 <li class="item">
 <i class="fa fa-circle-thin co"></i>
 <p class="text">Drink Coffee</p>
 <i class="fa fa-trash-o de"></i>
 </li> -->
 </ul> 
 </div>
 <div class="add-to-do">
 <i class="fa fa-plus-circle"></i>
 <input type="text" id="input" placeholder="Add a to-do">
 </div>
 </div>
 <script src="js/app.js"></script>

</body>
</html>
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
stronger to-do-list with more functions#1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

KKKinlibrary
wants to merge
17
commits into

base:master
Choose a base branch

from

 Open


stronger to-do-list with more functions
#1
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
8198b8a

editable to do list


KKKinlibrary Dec 21, 2019
2e15b0a

Update README.md


KKKinlibrary Dec 21, 2019
8d98c89

Add files via upload


KKKinlibrary Dec 21, 2019
7f69980

Add files via upload


KKKinlibrary Dec 21, 2019
38c8005

Set theme jekyll-theme-time-machine


KKKinlibrary Dec 21, 2019
58a1f84

Rename index.html to ind22ex.html


KKKinlibrary Dec 21, 2019
66f948a

Delete ind22ex.html


KKKinlibrary Dec 21, 2019
834e761

Rename homepage.html to index.html


KKKinlibrary Dec 21, 2019
145f1f7

Update index.html


KKKinlibrary Dec 21, 2019
67bcdd7

Add files via upload


KKKinlibrary Dec 21, 2019
0bb24f9

Update style.css


KKKinlibrary Dec 21, 2019
da5f62a

12.24


KKKinlibrary Dec 24, 2019
e04ef74

added a small function


KKKinlibrary Dec 24, 2019
2990fa9

123


KKKinlibrary Dec 24, 2019
10bd26d

123


KKKinlibrary Dec 24, 2019
6138769

123


KKKinlibrary Dec 24, 2019
8c78450

fix bug


KKKinlibrary Mar 29, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


37 changes: 3 additions & 34 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,35 +1,4 @@
# To-Do-List Using JavaScript
In this tutorial, a JavaScript beginner can be able to create a beautiful and functional to do list using JavaScript.
I will talk about the logic behind every line of code, before opening my text editor and start typing the code.
it's a step by step tutorial, you won't get lost at any stage of this tutorial.
### 2019.12
Based on the preview job, I have added two functions. The first one when double click the item you can edit the content of to-do-list and the changes will auto save when the content lose the focus. The second one is that you can see the lists sorted by their completion.

to follow the tutorial step by step, when we get to the second part (when we type the code), you'll need to download the starter template from here.

The tutorial video link : https://youtu.be/b8sUhU_eq3g

When you open the folder, you'll find all the files needed to get started, the CSS code, is already typed (see style.css file), as we're not going to talk about CSS in our tutorial. we're going just to talk about HTML and JavaScript.

the to-do list we're going to create has a beautiful UI, the user can add a to-do by filling the input and hit ENTER, after that he can rather check the to-do when it's done, or remove it using the delete button.

The user's to-do list is stored in the local storage, so when he refreshes the page, he can always find the list there.

There is the possibility for the user, to clear the list, by clicking the button clear, at the top right corner of our app.

The to do list app, shows the today's date to the user, for that we're using a method called toLocaleDateString, which you can read about here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

///// Here you can find some other tutorial, that you might like to see /////

Ping Pong Game Using JavaScript
https://youtu.be/nl0KXCa5pJk

Create a Multiple Choice Quiz Using JavaScript
https://youtu.be/49pYIMygIcU

Tetris Game Using JavaScript
https://youtu.be/HEsAr2Yt2do

Snake Game Using JavaScript
https://youtu.be/9TcU2C1AACw

Flappy Bird Game Using JavaScript
https://youtu.be/L07i4g-zhDA
You can see the result in https://kkkinlibrary.github.io/To-Do-List/

1 change: 1 addition & 0 deletions
_config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
theme: jekyll-theme-time-machine

217 changes: 121 additions & 96 deletions
css/style.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,130 +1,197 @@
/* ------------ youtube.com/CodeExplained ------------ */
body{
 padding: 0;
 margin: 0;
 background-color:rgba(0,0,0,0.1);
 background-color:rgba(0,0,0,0.1);
 font-family: 'Titillium Web', sans-serif;
}

/* ------------ container ------------ */
/* -----container----- */
.container{
 padding:10px;
 width:380px;
 margin:0 auto;
 padding:10px;
 width:380px;
 margin:0 auto;
}

/* ------------ header ------------ */
/* -----header----- */
.header{
 width: 380px;
 height:200px;
 background-image: url('../img/bg2.jpg');
 height:200px;
 background-image: url('../img/bg1.jpg');
 background-size: 100% 200%;
 background-repeat: no-repeat;
 border-radius: 15px 15px 0 0;
 position: relative;
}

.clear{
 width: 30px;
 width: 30px;
 height: 30px;
 position: absolute;
 right:20px;
 top: 20px;
 right: 20px;
}

.clear i{
 font-size: 30px;
 color: #FFF;
 color: #fff;
}

.clear i:hover{
 cursor: pointer;
 text-shadow: 1px 3px 5px #000;
 transform: rotate(45deg);
}

#date{
 position: absolute;
 bottom: 10px;
 left: 10px;
 color: #FFF;
 font-size: 25px;
 font-family: 'Titillium Web', sans-serif;
 font-family: 'Titillium Web' sans-serif;
}

.display{
 position: absolute;
 height: 45px;
 width: 380px;
 top: 160px;
}

.display i.All{
 position: absolute;
 right: 60px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.All:hover{
 cursor: pointer;
}

/* ------------ content ------------ */
.display i.fulfill{
 position: absolute;
 right: 35px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.fulfill:hover{
 cursor: pointer;
}

.display i.unfinished{
 position: absolute;
 right: 10px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.unfinished:hover{
 cursor: pointer;
}
/* -----content----- */
.content{
 width:380px;
 width:380px;
 height: 350px;
 max-height:350px;
 background-color: #FFF;
 max-height: 350px;
 background-color: #FFF; 
 border-radius: 0 0 0 0;
 overflow: auto;
}
.content::-webkit-scrollbar { 
 display: none; 
}

.content ul{
 padding:0;
 margin:0;
 padding:0;
 margin:0;
}

.fa-check-circle{
 color: #6eb200;
}

.item{
 width:380px;
 font-size: 15px;
 color: #000;
 width: 380px;
 height: 45px;
 min-height: 45px;
 position: relative;
 border-bottom: 1px solid rgba(0,0,0,0.1);
 border-bottom: 1px solid rgba(0,0,0, 0.1);
 list-style: none;
 position: relative;
 padding: 0;
 margin: 0;
}

.item i.co{
 position: absolute;
 font-size: 25px;
 padding-left:5px;
 left:15px;
 top:10px;
 padding-left:5px;
 left:15px;
 top:10px;
}

.item i.co:hover{
 cursor: pointer;
}
.fa-check-circle{
 color:#6eb200;
}
.item p.text{

.item input.text{
 position: absolute;
 padding:0;
 margin:0;
 padding:0;
 margin:0;
 font-size: 20px;
 left:50px;
 top:5px;
 background-color: #FFF;
 max-width:285px;
 left: 50px;
 top: 10px;
 background-color: #fff;
 width: 285px;
 overflow: hidden;
 border: none; 
}
.lineThrough{
 text-decoration: line-through;
 color : #ccc;

.item input:disabled{
 color: #000;
 font-size: 20px;
}

.item i.de{
 position: absolute;
 font-size: 25px;
 right:15px;
 top:10px;
 right:15px;
 top:10px;
}

.item i.de:hover{
 color:#af0000;
 color: red;
 cursor: pointer;
}
/* ------------ add item ------------ */

.lineThrough{
 text-decoration: line-through;
 color: #ccc !important;
}

::-webkit-scrollbar{
 display: none;
}

/* ------ add item ------*/
.add-to-do{
 position: relative;
 width: 360px;
 height:40px;
 background-color: #FFF;
 width: auto;
 height:40px;
 background-color: #fff;
 padding: 10px;
 border-top: 1px solid rgba(0,0,0,0.1);
 border-top: 1px solid rgba(0,0,0,0.1);
}

.add-to-do i{
 position: absolute;
 font-size: 40px;
 color: #4162f6;
}

.add-to-do i:hover{
 cursor: pointer;
 text-shadow: 1px 2px 3px blue;
}

.add-to-do input{
 position: absolute;
 left: 50px;
Expand All@@ -133,53 +200,11 @@ body{
 background-color: transparent;
 border: none;
 font-size: 20px;
 padding-left:10px;
 padding-left:10px;
}
.add-to-do input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input::-moz-placeholder { /* Firefox 19+ */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input:-ms-input-placeholder { /* IE 10+ */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input:-moz-placeholder { /* Firefox 18- */

.add-to-do input::placeholder{
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}





























45 changes: 44 additions & 1 deletion
index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1 +1,44 @@
<!-- CODE EXPLAINED CHANNEL -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Too many lists to do</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web">
 <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
 <link rel="stylesheet" href="css/style.css">
 </script>
</head>
<body>
 <div class="container">
 <div class="header">
 <div class="clear"> 
 <i class="fa fa-refresh"></i>
 </div>
 <div class="display"> 
 <span id="date"></span>
 <i class="fa fa-pencil-square-o All"></i>
 <i class="fa fa-check-square-o fulfill"></i>
 <i class="fa fa-square-o unfinished"></i>
 </div>
 </div>

 <div class="content">
 <ul id="list"><!-- 
 <li class="item">
 <i class="fa fa-circle-thin co"></i>
 <p class="text">Drink Coffee</p>
 <i class="fa fa-trash-o de"></i>
 </li> -->
 </ul> 
 </div>
 <div class="add-to-do">
 <i class="fa fa-plus-circle"></i>
 <input type="text" id="input" placeholder="Add a to-do">
 </div>
 </div>
 <script src="js/app.js"></script>

</body>
</html>
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
stronger to-do-list with more functions#1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

KKKinlibrary
wants to merge
17
commits into

base:master
Choose a base branch

from

 Open


stronger to-do-list with more functions
#1
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
8198b8a

editable to do list


KKKinlibrary Dec 21, 2019
2e15b0a

Update README.md


KKKinlibrary Dec 21, 2019
8d98c89

Add files via upload


KKKinlibrary Dec 21, 2019
7f69980

Add files via upload


KKKinlibrary Dec 21, 2019
38c8005

Set theme jekyll-theme-time-machine


KKKinlibrary Dec 21, 2019
58a1f84

Rename index.html to ind22ex.html


KKKinlibrary Dec 21, 2019
66f948a

Delete ind22ex.html


KKKinlibrary Dec 21, 2019
834e761

Rename homepage.html to index.html


KKKinlibrary Dec 21, 2019
145f1f7

Update index.html


KKKinlibrary Dec 21, 2019
67bcdd7

Add files via upload


KKKinlibrary Dec 21, 2019
0bb24f9

Update style.css


KKKinlibrary Dec 21, 2019
da5f62a

12.24


KKKinlibrary Dec 24, 2019
e04ef74

added a small function


KKKinlibrary Dec 24, 2019
2990fa9

123


KKKinlibrary Dec 24, 2019
10bd26d

123


KKKinlibrary Dec 24, 2019
6138769

123


KKKinlibrary Dec 24, 2019
8c78450

fix bug


KKKinlibrary Mar 29, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


37 changes: 3 additions & 34 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,35 +1,4 @@
# To-Do-List Using JavaScript
In this tutorial, a JavaScript beginner can be able to create a beautiful and functional to do list using JavaScript.
I will talk about the logic behind every line of code, before opening my text editor and start typing the code.
it's a step by step tutorial, you won't get lost at any stage of this tutorial.
### 2019.12
Based on the preview job, I have added two functions. The first one when double click the item you can edit the content of to-do-list and the changes will auto save when the content lose the focus. The second one is that you can see the lists sorted by their completion.

to follow the tutorial step by step, when we get to the second part (when we type the code), you'll need to download the starter template from here.

The tutorial video link : https://youtu.be/b8sUhU_eq3g

When you open the folder, you'll find all the files needed to get started, the CSS code, is already typed (see style.css file), as we're not going to talk about CSS in our tutorial. we're going just to talk about HTML and JavaScript.

the to-do list we're going to create has a beautiful UI, the user can add a to-do by filling the input and hit ENTER, after that he can rather check the to-do when it's done, or remove it using the delete button.

The user's to-do list is stored in the local storage, so when he refreshes the page, he can always find the list there.

There is the possibility for the user, to clear the list, by clicking the button clear, at the top right corner of our app.

The to do list app, shows the today's date to the user, for that we're using a method called toLocaleDateString, which you can read about here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

///// Here you can find some other tutorial, that you might like to see /////

Ping Pong Game Using JavaScript
https://youtu.be/nl0KXCa5pJk

Create a Multiple Choice Quiz Using JavaScript
https://youtu.be/49pYIMygIcU

Tetris Game Using JavaScript
https://youtu.be/HEsAr2Yt2do

Snake Game Using JavaScript
https://youtu.be/9TcU2C1AACw

Flappy Bird Game Using JavaScript
https://youtu.be/L07i4g-zhDA
You can see the result in https://kkkinlibrary.github.io/To-Do-List/

1 change: 1 addition & 0 deletions
_config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
theme: jekyll-theme-time-machine

217 changes: 121 additions & 96 deletions
css/style.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,130 +1,197 @@
/* ------------ youtube.com/CodeExplained ------------ */
body{
 padding: 0;
 margin: 0;
 background-color:rgba(0,0,0,0.1);
 background-color:rgba(0,0,0,0.1);
 font-family: 'Titillium Web', sans-serif;
}

/* ------------ container ------------ */
/* -----container----- */
.container{
 padding:10px;
 width:380px;
 margin:0 auto;
 padding:10px;
 width:380px;
 margin:0 auto;
}

/* ------------ header ------------ */
/* -----header----- */
.header{
 width: 380px;
 height:200px;
 background-image: url('../img/bg2.jpg');
 height:200px;
 background-image: url('../img/bg1.jpg');
 background-size: 100% 200%;
 background-repeat: no-repeat;
 border-radius: 15px 15px 0 0;
 position: relative;
}

.clear{
 width: 30px;
 width: 30px;
 height: 30px;
 position: absolute;
 right:20px;
 top: 20px;
 right: 20px;
}

.clear i{
 font-size: 30px;
 color: #FFF;
 color: #fff;
}

.clear i:hover{
 cursor: pointer;
 text-shadow: 1px 3px 5px #000;
 transform: rotate(45deg);
}

#date{
 position: absolute;
 bottom: 10px;
 left: 10px;
 color: #FFF;
 font-size: 25px;
 font-family: 'Titillium Web', sans-serif;
 font-family: 'Titillium Web' sans-serif;
}

.display{
 position: absolute;
 height: 45px;
 width: 380px;
 top: 160px;
}

.display i.All{
 position: absolute;
 right: 60px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.All:hover{
 cursor: pointer;
}

/* ------------ content ------------ */
.display i.fulfill{
 position: absolute;
 right: 35px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.fulfill:hover{
 cursor: pointer;
}

.display i.unfinished{
 position: absolute;
 right: 10px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.unfinished:hover{
 cursor: pointer;
}
/* -----content----- */
.content{
 width:380px;
 width:380px;
 height: 350px;
 max-height:350px;
 background-color: #FFF;
 max-height: 350px;
 background-color: #FFF; 
 border-radius: 0 0 0 0;
 overflow: auto;
}
.content::-webkit-scrollbar { 
 display: none; 
}

.content ul{
 padding:0;
 margin:0;
 padding:0;
 margin:0;
}

.fa-check-circle{
 color: #6eb200;
}

.item{
 width:380px;
 font-size: 15px;
 color: #000;
 width: 380px;
 height: 45px;
 min-height: 45px;
 position: relative;
 border-bottom: 1px solid rgba(0,0,0,0.1);
 border-bottom: 1px solid rgba(0,0,0, 0.1);
 list-style: none;
 position: relative;
 padding: 0;
 margin: 0;
}

.item i.co{
 position: absolute;
 font-size: 25px;
 padding-left:5px;
 left:15px;
 top:10px;
 padding-left:5px;
 left:15px;
 top:10px;
}

.item i.co:hover{
 cursor: pointer;
}
.fa-check-circle{
 color:#6eb200;
}
.item p.text{

.item input.text{
 position: absolute;
 padding:0;
 margin:0;
 padding:0;
 margin:0;
 font-size: 20px;
 left:50px;
 top:5px;
 background-color: #FFF;
 max-width:285px;
 left: 50px;
 top: 10px;
 background-color: #fff;
 width: 285px;
 overflow: hidden;
 border: none; 
}
.lineThrough{
 text-decoration: line-through;
 color : #ccc;

.item input:disabled{
 color: #000;
 font-size: 20px;
}

.item i.de{
 position: absolute;
 font-size: 25px;
 right:15px;
 top:10px;
 right:15px;
 top:10px;
}

.item i.de:hover{
 color:#af0000;
 color: red;
 cursor: pointer;
}
/* ------------ add item ------------ */

.lineThrough{
 text-decoration: line-through;
 color: #ccc !important;
}

::-webkit-scrollbar{
 display: none;
}

/* ------ add item ------*/
.add-to-do{
 position: relative;
 width: 360px;
 height:40px;
 background-color: #FFF;
 width: auto;
 height:40px;
 background-color: #fff;
 padding: 10px;
 border-top: 1px solid rgba(0,0,0,0.1);
 border-top: 1px solid rgba(0,0,0,0.1);
}

.add-to-do i{
 position: absolute;
 font-size: 40px;
 color: #4162f6;
}

.add-to-do i:hover{
 cursor: pointer;
 text-shadow: 1px 2px 3px blue;
}

.add-to-do input{
 position: absolute;
 left: 50px;
Expand All@@ -133,53 +200,11 @@ body{
 background-color: transparent;
 border: none;
 font-size: 20px;
 padding-left:10px;
 padding-left:10px;
}
.add-to-do input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input::-moz-placeholder { /* Firefox 19+ */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input:-ms-input-placeholder { /* IE 10+ */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input:-moz-placeholder { /* Firefox 18- */

.add-to-do input::placeholder{
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}





























45 changes: 44 additions & 1 deletion
index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1 +1,44 @@
<!-- CODE EXPLAINED CHANNEL -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Too many lists to do</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web">
 <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
 <link rel="stylesheet" href="css/style.css">
 </script>
</head>
<body>
 <div class="container">
 <div class="header">
 <div class="clear"> 
 <i class="fa fa-refresh"></i>
 </div>
 <div class="display"> 
 <span id="date"></span>
 <i class="fa fa-pencil-square-o All"></i>
 <i class="fa fa-check-square-o fulfill"></i>
 <i class="fa fa-square-o unfinished"></i>
 </div>
 </div>

 <div class="content">
 <ul id="list"><!-- 
 <li class="item">
 <i class="fa fa-circle-thin co"></i>
 <p class="text">Drink Coffee</p>
 <i class="fa fa-trash-o de"></i>
 </li> -->
 </ul> 
 </div>
 <div class="add-to-do">
 <i class="fa fa-plus-circle"></i>
 <input type="text" id="input" placeholder="Add a to-do">
 </div>
 </div>
 <script src="js/app.js"></script>

</body>
</html>
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
stronger to-do-list with more functions#1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

KKKinlibrary
wants to merge
17
commits into

base:master
Choose a base branch

from

 Open


stronger to-do-list with more functions
#1
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
8198b8a

editable to do list


KKKinlibrary Dec 21, 2019
2e15b0a

Update README.md


KKKinlibrary Dec 21, 2019
8d98c89

Add files via upload


KKKinlibrary Dec 21, 2019
7f69980

Add files via upload


KKKinlibrary Dec 21, 2019
38c8005

Set theme jekyll-theme-time-machine


KKKinlibrary Dec 21, 2019
58a1f84

Rename index.html to ind22ex.html


KKKinlibrary Dec 21, 2019
66f948a

Delete ind22ex.html


KKKinlibrary Dec 21, 2019
834e761

Rename homepage.html to index.html


KKKinlibrary Dec 21, 2019
145f1f7

Update index.html


KKKinlibrary Dec 21, 2019
67bcdd7

Add files via upload


KKKinlibrary Dec 21, 2019
0bb24f9

Update style.css


KKKinlibrary Dec 21, 2019
da5f62a

12.24


KKKinlibrary Dec 24, 2019
e04ef74

added a small function


KKKinlibrary Dec 24, 2019
2990fa9

123


KKKinlibrary Dec 24, 2019
10bd26d

123


KKKinlibrary Dec 24, 2019
6138769

123


KKKinlibrary Dec 24, 2019
8c78450

fix bug


KKKinlibrary Mar 29, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


37 changes: 3 additions & 34 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,35 +1,4 @@
# To-Do-List Using JavaScript
In this tutorial, a JavaScript beginner can be able to create a beautiful and functional to do list using JavaScript.
I will talk about the logic behind every line of code, before opening my text editor and start typing the code.
it's a step by step tutorial, you won't get lost at any stage of this tutorial.
### 2019.12
Based on the preview job, I have added two functions. The first one when double click the item you can edit the content of to-do-list and the changes will auto save when the content lose the focus. The second one is that you can see the lists sorted by their completion.

to follow the tutorial step by step, when we get to the second part (when we type the code), you'll need to download the starter template from here.

The tutorial video link : https://youtu.be/b8sUhU_eq3g

When you open the folder, you'll find all the files needed to get started, the CSS code, is already typed (see style.css file), as we're not going to talk about CSS in our tutorial. we're going just to talk about HTML and JavaScript.

the to-do list we're going to create has a beautiful UI, the user can add a to-do by filling the input and hit ENTER, after that he can rather check the to-do when it's done, or remove it using the delete button.

The user's to-do list is stored in the local storage, so when he refreshes the page, he can always find the list there.

There is the possibility for the user, to clear the list, by clicking the button clear, at the top right corner of our app.

The to do list app, shows the today's date to the user, for that we're using a method called toLocaleDateString, which you can read about here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

///// Here you can find some other tutorial, that you might like to see /////

Ping Pong Game Using JavaScript
https://youtu.be/nl0KXCa5pJk

Create a Multiple Choice Quiz Using JavaScript
https://youtu.be/49pYIMygIcU

Tetris Game Using JavaScript
https://youtu.be/HEsAr2Yt2do

Snake Game Using JavaScript
https://youtu.be/9TcU2C1AACw

Flappy Bird Game Using JavaScript
https://youtu.be/L07i4g-zhDA
You can see the result in https://kkkinlibrary.github.io/To-Do-List/

1 change: 1 addition & 0 deletions
_config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
theme: jekyll-theme-time-machine

217 changes: 121 additions & 96 deletions
css/style.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,130 +1,197 @@
/* ------------ youtube.com/CodeExplained ------------ */
body{
 padding: 0;
 margin: 0;
 background-color:rgba(0,0,0,0.1);
 background-color:rgba(0,0,0,0.1);
 font-family: 'Titillium Web', sans-serif;
}

/* ------------ container ------------ */
/* -----container----- */
.container{
 padding:10px;
 width:380px;
 margin:0 auto;
 padding:10px;
 width:380px;
 margin:0 auto;
}

/* ------------ header ------------ */
/* -----header----- */
.header{
 width: 380px;
 height:200px;
 background-image: url('../img/bg2.jpg');
 height:200px;
 background-image: url('../img/bg1.jpg');
 background-size: 100% 200%;
 background-repeat: no-repeat;
 border-radius: 15px 15px 0 0;
 position: relative;
}

.clear{
 width: 30px;
 width: 30px;
 height: 30px;
 position: absolute;
 right:20px;
 top: 20px;
 right: 20px;
}

.clear i{
 font-size: 30px;
 color: #FFF;
 color: #fff;
}

.clear i:hover{
 cursor: pointer;
 text-shadow: 1px 3px 5px #000;
 transform: rotate(45deg);
}

#date{
 position: absolute;
 bottom: 10px;
 left: 10px;
 color: #FFF;
 font-size: 25px;
 font-family: 'Titillium Web', sans-serif;
 font-family: 'Titillium Web' sans-serif;
}

.display{
 position: absolute;
 height: 45px;
 width: 380px;
 top: 160px;
}

.display i.All{
 position: absolute;
 right: 60px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.All:hover{
 cursor: pointer;
}

/* ------------ content ------------ */
.display i.fulfill{
 position: absolute;
 right: 35px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.fulfill:hover{
 cursor: pointer;
}

.display i.unfinished{
 position: absolute;
 right: 10px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.unfinished:hover{
 cursor: pointer;
}
/* -----content----- */
.content{
 width:380px;
 width:380px;
 height: 350px;
 max-height:350px;
 background-color: #FFF;
 max-height: 350px;
 background-color: #FFF; 
 border-radius: 0 0 0 0;
 overflow: auto;
}
.content::-webkit-scrollbar { 
 display: none; 
}

.content ul{
 padding:0;
 margin:0;
 padding:0;
 margin:0;
}

.fa-check-circle{
 color: #6eb200;
}

.item{
 width:380px;
 font-size: 15px;
 color: #000;
 width: 380px;
 height: 45px;
 min-height: 45px;
 position: relative;
 border-bottom: 1px solid rgba(0,0,0,0.1);
 border-bottom: 1px solid rgba(0,0,0, 0.1);
 list-style: none;
 position: relative;
 padding: 0;
 margin: 0;
}

.item i.co{
 position: absolute;
 font-size: 25px;
 padding-left:5px;
 left:15px;
 top:10px;
 padding-left:5px;
 left:15px;
 top:10px;
}

.item i.co:hover{
 cursor: pointer;
}
.fa-check-circle{
 color:#6eb200;
}
.item p.text{

.item input.text{
 position: absolute;
 padding:0;
 margin:0;
 padding:0;
 margin:0;
 font-size: 20px;
 left:50px;
 top:5px;
 background-color: #FFF;
 max-width:285px;
 left: 50px;
 top: 10px;
 background-color: #fff;
 width: 285px;
 overflow: hidden;
 border: none; 
}
.lineThrough{
 text-decoration: line-through;
 color : #ccc;

.item input:disabled{
 color: #000;
 font-size: 20px;
}

.item i.de{
 position: absolute;
 font-size: 25px;
 right:15px;
 top:10px;
 right:15px;
 top:10px;
}

.item i.de:hover{
 color:#af0000;
 color: red;
 cursor: pointer;
}
/* ------------ add item ------------ */

.lineThrough{
 text-decoration: line-through;
 color: #ccc !important;
}

::-webkit-scrollbar{
 display: none;
}

/* ------ add item ------*/
.add-to-do{
 position: relative;
 width: 360px;
 height:40px;
 background-color: #FFF;
 width: auto;
 height:40px;
 background-color: #fff;
 padding: 10px;
 border-top: 1px solid rgba(0,0,0,0.1);
 border-top: 1px solid rgba(0,0,0,0.1);
}

.add-to-do i{
 position: absolute;
 font-size: 40px;
 color: #4162f6;
}

.add-to-do i:hover{
 cursor: pointer;
 text-shadow: 1px 2px 3px blue;
}

.add-to-do input{
 position: absolute;
 left: 50px;
Expand All@@ -133,53 +200,11 @@ body{
 background-color: transparent;
 border: none;
 font-size: 20px;
 padding-left:10px;
 padding-left:10px;
}
.add-to-do input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input::-moz-placeholder { /* Firefox 19+ */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input:-ms-input-placeholder { /* IE 10+ */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input:-moz-placeholder { /* Firefox 18- */

.add-to-do input::placeholder{
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}





























45 changes: 44 additions & 1 deletion
index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1 +1,44 @@
<!-- CODE EXPLAINED CHANNEL -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Too many lists to do</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web">
 <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
 <link rel="stylesheet" href="css/style.css">
 </script>
</head>
<body>
 <div class="container">
 <div class="header">
 <div class="clear"> 
 <i class="fa fa-refresh"></i>
 </div>
 <div class="display"> 
 <span id="date"></span>
 <i class="fa fa-pencil-square-o All"></i>
 <i class="fa fa-check-square-o fulfill"></i>
 <i class="fa fa-square-o unfinished"></i>
 </div>
 </div>

 <div class="content">
 <ul id="list"><!-- 
 <li class="item">
 <i class="fa fa-circle-thin co"></i>
 <p class="text">Drink Coffee</p>
 <i class="fa fa-trash-o de"></i>
 </li> -->
 </ul> 
 </div>
 <div class="add-to-do">
 <i class="fa fa-plus-circle"></i>
 <input type="text" id="input" placeholder="Add a to-do">
 </div>
 </div>
 <script src="js/app.js"></script>

</body>
</html>
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
stronger to-do-list with more functions#1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Open

KKKinlibrary
wants to merge
17
commits into

base:master
Choose a base branch

from

 Open


stronger to-do-list with more functions
#1
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
8198b8a

editable to do list


KKKinlibrary Dec 21, 2019
2e15b0a

Update README.md


KKKinlibrary Dec 21, 2019
8d98c89

Add files via upload


KKKinlibrary Dec 21, 2019
7f69980

Add files via upload


KKKinlibrary Dec 21, 2019
38c8005

Set theme jekyll-theme-time-machine


KKKinlibrary Dec 21, 2019
58a1f84

Rename index.html to ind22ex.html


KKKinlibrary Dec 21, 2019
66f948a

Delete ind22ex.html


KKKinlibrary Dec 21, 2019
834e761

Rename homepage.html to index.html


KKKinlibrary Dec 21, 2019
145f1f7

Update index.html


KKKinlibrary Dec 21, 2019
67bcdd7

Add files via upload


KKKinlibrary Dec 21, 2019
0bb24f9

Update style.css


KKKinlibrary Dec 21, 2019
da5f62a

12.24


KKKinlibrary Dec 24, 2019
e04ef74

added a small function


KKKinlibrary Dec 24, 2019
2990fa9

123


KKKinlibrary Dec 24, 2019
10bd26d

123


KKKinlibrary Dec 24, 2019
6138769

123


KKKinlibrary Dec 24, 2019
8c78450

fix bug


KKKinlibrary Mar 29, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


37 changes: 3 additions & 34 deletions
README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,35 +1,4 @@
# To-Do-List Using JavaScript
In this tutorial, a JavaScript beginner can be able to create a beautiful and functional to do list using JavaScript.
I will talk about the logic behind every line of code, before opening my text editor and start typing the code.
it's a step by step tutorial, you won't get lost at any stage of this tutorial.
### 2019.12
Based on the preview job, I have added two functions. The first one when double click the item you can edit the content of to-do-list and the changes will auto save when the content lose the focus. The second one is that you can see the lists sorted by their completion.

to follow the tutorial step by step, when we get to the second part (when we type the code), you'll need to download the starter template from here.

The tutorial video link : https://youtu.be/b8sUhU_eq3g

When you open the folder, you'll find all the files needed to get started, the CSS code, is already typed (see style.css file), as we're not going to talk about CSS in our tutorial. we're going just to talk about HTML and JavaScript.

the to-do list we're going to create has a beautiful UI, the user can add a to-do by filling the input and hit ENTER, after that he can rather check the to-do when it's done, or remove it using the delete button.

The user's to-do list is stored in the local storage, so when he refreshes the page, he can always find the list there.

There is the possibility for the user, to clear the list, by clicking the button clear, at the top right corner of our app.

The to do list app, shows the today's date to the user, for that we're using a method called toLocaleDateString, which you can read about here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

///// Here you can find some other tutorial, that you might like to see /////

Ping Pong Game Using JavaScript
https://youtu.be/nl0KXCa5pJk

Create a Multiple Choice Quiz Using JavaScript
https://youtu.be/49pYIMygIcU

Tetris Game Using JavaScript
https://youtu.be/HEsAr2Yt2do

Snake Game Using JavaScript
https://youtu.be/9TcU2C1AACw

Flappy Bird Game Using JavaScript
https://youtu.be/L07i4g-zhDA
You can see the result in https://kkkinlibrary.github.io/To-Do-List/

1 change: 1 addition & 0 deletions
_config.yml

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
theme: jekyll-theme-time-machine

217 changes: 121 additions & 96 deletions
css/style.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,130 +1,197 @@
/* ------------ youtube.com/CodeExplained ------------ */
body{
 padding: 0;
 margin: 0;
 background-color:rgba(0,0,0,0.1);
 background-color:rgba(0,0,0,0.1);
 font-family: 'Titillium Web', sans-serif;
}

/* ------------ container ------------ */
/* -----container----- */
.container{
 padding:10px;
 width:380px;
 margin:0 auto;
 padding:10px;
 width:380px;
 margin:0 auto;
}

/* ------------ header ------------ */
/* -----header----- */
.header{
 width: 380px;
 height:200px;
 background-image: url('../img/bg2.jpg');
 height:200px;
 background-image: url('../img/bg1.jpg');
 background-size: 100% 200%;
 background-repeat: no-repeat;
 border-radius: 15px 15px 0 0;
 position: relative;
}

.clear{
 width: 30px;
 width: 30px;
 height: 30px;
 position: absolute;
 right:20px;
 top: 20px;
 right: 20px;
}

.clear i{
 font-size: 30px;
 color: #FFF;
 color: #fff;
}

.clear i:hover{
 cursor: pointer;
 text-shadow: 1px 3px 5px #000;
 transform: rotate(45deg);
}

#date{
 position: absolute;
 bottom: 10px;
 left: 10px;
 color: #FFF;
 font-size: 25px;
 font-family: 'Titillium Web', sans-serif;
 font-family: 'Titillium Web' sans-serif;
}

.display{
 position: absolute;
 height: 45px;
 width: 380px;
 top: 160px;
}

.display i.All{
 position: absolute;
 right: 60px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.All:hover{
 cursor: pointer;
}

/* ------------ content ------------ */
.display i.fulfill{
 position: absolute;
 right: 35px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.fulfill:hover{
 cursor: pointer;
}

.display i.unfinished{
 position: absolute;
 right: 10px;
 font-size: 25px;
 color: #fff;
 bottom: 13px;
}
.display i.unfinished:hover{
 cursor: pointer;
}
/* -----content----- */
.content{
 width:380px;
 width:380px;
 height: 350px;
 max-height:350px;
 background-color: #FFF;
 max-height: 350px;
 background-color: #FFF; 
 border-radius: 0 0 0 0;
 overflow: auto;
}
.content::-webkit-scrollbar { 
 display: none; 
}

.content ul{
 padding:0;
 margin:0;
 padding:0;
 margin:0;
}

.fa-check-circle{
 color: #6eb200;
}

.item{
 width:380px;
 font-size: 15px;
 color: #000;
 width: 380px;
 height: 45px;
 min-height: 45px;
 position: relative;
 border-bottom: 1px solid rgba(0,0,0,0.1);
 border-bottom: 1px solid rgba(0,0,0, 0.1);
 list-style: none;
 position: relative;
 padding: 0;
 margin: 0;
}

.item i.co{
 position: absolute;
 font-size: 25px;
 padding-left:5px;
 left:15px;
 top:10px;
 padding-left:5px;
 left:15px;
 top:10px;
}

.item i.co:hover{
 cursor: pointer;
}
.fa-check-circle{
 color:#6eb200;
}
.item p.text{

.item input.text{
 position: absolute;
 padding:0;
 margin:0;
 padding:0;
 margin:0;
 font-size: 20px;
 left:50px;
 top:5px;
 background-color: #FFF;
 max-width:285px;
 left: 50px;
 top: 10px;
 background-color: #fff;
 width: 285px;
 overflow: hidden;
 border: none; 
}
.lineThrough{
 text-decoration: line-through;
 color : #ccc;

.item input:disabled{
 color: #000;
 font-size: 20px;
}

.item i.de{
 position: absolute;
 font-size: 25px;
 right:15px;
 top:10px;
 right:15px;
 top:10px;
}

.item i.de:hover{
 color:#af0000;
 color: red;
 cursor: pointer;
}
/* ------------ add item ------------ */

.lineThrough{
 text-decoration: line-through;
 color: #ccc !important;
}

::-webkit-scrollbar{
 display: none;
}

/* ------ add item ------*/
.add-to-do{
 position: relative;
 width: 360px;
 height:40px;
 background-color: #FFF;
 width: auto;
 height:40px;
 background-color: #fff;
 padding: 10px;
 border-top: 1px solid rgba(0,0,0,0.1);
 border-top: 1px solid rgba(0,0,0,0.1);
}

.add-to-do i{
 position: absolute;
 font-size: 40px;
 color: #4162f6;
}

.add-to-do i:hover{
 cursor: pointer;
 text-shadow: 1px 2px 3px blue;
}

.add-to-do input{
 position: absolute;
 left: 50px;
Expand All@@ -133,53 +200,11 @@ body{
 background-color: transparent;
 border: none;
 font-size: 20px;
 padding-left:10px;
 padding-left:10px;
}
.add-to-do input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input::-moz-placeholder { /* Firefox 19+ */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input:-ms-input-placeholder { /* IE 10+ */
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}
.add-to-do input:-moz-placeholder { /* Firefox 18- */

.add-to-do input::placeholder{
 color: #4162f6;
 font-family: 'Titillium Web', sans-serif;
 font-size: 20px;
}





























45 changes: 44 additions & 1 deletion
index.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1 +1,44 @@
<!-- CODE EXPLAINED CHANNEL -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Too many lists to do</title>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web">
 <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
 <link rel="stylesheet" href="css/style.css">
 </script>
</head>
<body>
 <div class="container">
 <div class="header">
 <div class="clear"> 
 <i class="fa fa-refresh"></i>
 </div>
 <div class="display"> 
 <span id="date"></span>
 <i class="fa fa-pencil-square-o All"></i>
 <i class="fa fa-check-square-o fulfill"></i>
 <i class="fa fa-square-o unfinished"></i>
 </div>
 </div>

 <div class="content">
 <ul id="list"><!-- 
 <li class="item">
 <i class="fa fa-circle-thin co"></i>
 <p class="text">Drink Coffee</p>
 <i class="fa fa-trash-o de"></i>
 </li> -->
 </ul> 
 </div>
 <div class="add-to-do">
 <i class="fa fa-plus-circle"></i>
 <input type="text" id="input" placeholder="Add a to-do">
 </div>
 </div>
 <script src="js/app.js"></script>

</body>
</html>
Loading