Skip to content
This repository was archived by the owner on Oct 13, 2022. It is now read-only.

Commit 922615e

Browse files
hisaacdelrhisaacdelr
committed
Update Todo List (HTML, CSS, JS)
1 parent 4b8dade commit 922615e

File tree

3 files changed

+97
-12
lines changed

3 files changed

+97
-12
lines changed

‎Projects/ToDoList/assets/css/todos.css

Lines changed: 82 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,89 @@
1+
@import 'https://fonts.googleapis.com/css?family=Roboto';
2+
3+
body{
4+
font-family: Roboto;
5+
background: #5C258D; /* fallback for old browsers */
6+
background: -webkit-linear-gradient(to left, #5C258D , #4389A2); /* Chrome 10-25, Safari 5.1-6 */
7+
background: linear-gradient(to left, #5C258D , #4389A2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
8+
9+
10+
}
11+
12+
h1{
13+
background: #2980B9;
14+
color: white;
15+
margin: 0;
16+
padding: 10px 20px;
17+
text-transform: uppercase;
18+
font-size: 24px;
19+
font-weight: normal;
20+
}
21+
22+
ul{
23+
list-style: none;
24+
margin: 0;
25+
padding: 0;
26+
}
27+
28+
.fa-plus{
29+
float: right;
30+
}
31+
32+
li{
33+
background: #FFFFFF;
34+
height: 40px;
35+
line-height: 40px;
36+
color: #666;
37+
}
38+
39+
li:nth-child(2n){
40+
background: #F7F7F7;
41+
}
42+
input{
43+
font-size: 18px;
44+
color: #2980B9;
45+
background: #F7F7F7;
46+
width: 100%;
47+
padding: 13px 13px 13px 20px;
48+
box-sizing: border-box; /*includes border, but not margin, width=100% only accounted for content, putting this includes content + padding*/
49+
border: 3px solid rgba(0,0,0,0);
50+
}
51+
52+
input:focus{
53+
background: white;
54+
border: 3px solid #2980B9;
55+
outline: none;
56+
}
57+
158
#container{
259
width: 360px;
3-
margin: auto;
4-
border: 1px solid gray;
60+
margin: 100px auto;
61+
background: #F7F7F7;
62+
box-shadow: 0 0 10px rgba(0,0,0,0.5);
563
}
664

765
.completed{
866
color: gray;
967
text-decoration: line-through;
10-
}
68+
}
69+
70+
span{
71+
background: #E74C3C;
72+
height: 40px;
73+
margin-right: 20px;
74+
text-align: center;
75+
color: white;
76+
width: 0;
77+
display: inline-block;
78+
transition: 0.2s linear;
79+
opacity: 0;
80+
}
81+
82+
li:hover span{
83+
width: 40px;
84+
opacity: 1;
85+
}
86+
87+
span:hover{
88+
89+
}

‎Projects/ToDoList/assets/js/todos.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
//Check Off Specific Todos By Clicking
2-
//as opposed to $("li").click(function(){})... because that only creates
2+
//use .on() as opposed to $("li").click(function(){})... because that only creates
33
//listeners to already existing lis and doesn't account for
44
//lis created in the future
55
$("ul").on("click", "li", function(){
@@ -27,16 +27,21 @@ $("ul").on("click", "span", function(event){
2727
$(this).parent().fadeOut(500, function(){
2828
$(this).remove();
2929
});
30-
event.stopPropagation(); //stops event bubbling
30+
event.stopPropagation(); //stops event bubbling,
31+
//in this case, stops from triggering parent element click (the strikethrough when you click the li)
3132
});
3233

33-
$("input[type=text]").keypress(function(event){
34+
$("input[type='text']").keypress(function(event){
3435
if(event.which === 13){
3536
//grabbing new todo text from input
3637
var todoText = $(this).val();
3738
$(this).val("");
3839
//create a new li and add to ul
39-
$("ul").append("<li><span>X </span>" + todoText + "</li>");
40+
$("ul").append("<li><span><i class='fa fa-trash'></i> </span>" + todoText + "</li>");
4041
//remove text from input
4142
}
43+
});
44+
45+
$(".fa-plus").click(function(){
46+
$("input[type='text']").fadeToggle();
4247
});

‎Projects/ToDoList/index.html

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,19 @@
55
<title>Todo List</title>
66
<script src="assets/js/lib/jquery-3.1.0.min.js"></script>
77
<link rel="stylesheet" href="assets/css/todos.css">
8+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
89
</head>
910
<body>
1011

1112
<div id="container">
12-
<h1>To-do List</h1>
13+
<h1>To-do List <i class="fa fa-plus"></i></h1>
1314

14-
<input type="text">
15+
<input type="text" placeholder="Add New Todo">
1516

1617
<ul>
17-
<li><span>X </span>Go to Potions Class</li>
18-
<li><span>X </span>Buy New Robes</li>
19-
<li><span>X </span>Visit Hagrid</li>
18+
<li><span><i class="fa fa-trash"></i> </span>Go to Potions Class</li>
19+
<li><span><i class="fa fa-trash"></i> </span>Buy New Robes</li>
20+
<li><span><i class="fa fa-trash"></i> </span>Visit Hagrid</li>
2021
</ul>
2122

2223
</div>

0 commit comments

Comments
 (0)