Skip to content

Commit 8e46687

Browse files
author
guldus98
committed
html, css and js
1 parent 1dbd0f1 commit 8e46687

File tree

3 files changed

+223
-0
lines changed

3 files changed

+223
-0
lines changed

‎JavaScript To Do List/JavaScript To Do List.css

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
2+
body {
3+
padding: 0;
4+
margin: 0;
5+
display: flex;
6+
height: 100vh;
7+
justify-content: center;
8+
align-items: center;
9+
background: #262626
10+
}
11+
.container{
12+
position: relative;
13+
background: linear-gradient(45deg,#69d9e2, #003da2);
14+
width: 325px;
15+
height: 550px;
16+
border-radius: 7.5px;
17+
overflow: hidden;
18+
}
19+
h2 {
20+
display: block;
21+
width: 100%;
22+
height: 40px;
23+
padding: 0px;
24+
text-align: center;
25+
line-height: 40px;
26+
margin: 0px;
27+
box-shadow: 0px 3px 20px #262626;
28+
color: #fbfbfb;
29+
font-size: 20px;
30+
font-family: 'Roboto Condensed', sans-serif;
31+
}
32+
#addBox {
33+
position: relative;
34+
display: block;
35+
background: #003da2;
36+
width: 300px;
37+
height: 35px;
38+
margin: 15px auto;
39+
border-radius: 2px;
40+
}
41+
input {
42+
width: 250px;
43+
background: none;
44+
border: none;
45+
outline: none;
46+
font-family: 'Roboto Condensed', sans-serif;
47+
background: none;
48+
padding: 5px;
49+
margin-top: 3px;
50+
color: #fbfbfb;
51+
margin-left: 36px;
52+
font-size: 16px;
53+
}
54+
#txt::placeholder {
55+
color: #fbfbfb
56+
}
57+
58+
#plus {
59+
position: absolute;
60+
width: 25px;
61+
height: 25px;
62+
cursor: pointer;
63+
margin: 5px 0px 5px 10px;
64+
}
65+
#plus::before{
66+
position: absolute;
67+
font-family: "Font Awesome 5 Free";
68+
font-weight: 900;
69+
content: "\f067";
70+
color: #fbfbfb;
71+
font-size: 24px;
72+
transition: .4s;
73+
}
74+
#plus:hover::before{
75+
margin-top: -3px;
76+
margin-left: -3px;
77+
font-size: 30px;
78+
}
79+
#list {
80+
width: 300px;
81+
height: 400px;
82+
margin: 10px auto;
83+
overflow: scroll;
84+
}
85+
.box {
86+
position: relative;
87+
display: block;
88+
width: 300px;
89+
overflow: scroll;
90+
height: 45px;
91+
margin: 5px 0px 5px 0px;
92+
background: #fbfbfb;
93+
opacity: .9;2;
94+
box-sizing: border-box;
95+
transition: .5s;
96+
max-height: 100%;
97+
border-radius: 3px;
98+
}
99+
.box::-webkit-scrollbar {
100+
display: none;
101+
}
102+
#list::-webkit-scrollbar {
103+
display: none;
104+
}
105+
.x{
106+
position: absolute;
107+
top: 50%;
108+
transform: translateY(-50%);
109+
right: 10px;
110+
width: 20px;
111+
height: 20px;
112+
}
113+
.x:before{
114+
font-family: "Font Awesome 5 Free";
115+
font-weight: 900;
116+
content: "\f00d";
117+
font-size: 20px;
118+
color: #262626;
119+
cursor: pointer;
120+
transition: .5s;
121+
}
122+
.x:hover:before{
123+
color: #bc2626
124+
}
125+
.txtBox {
126+
font-family: 'Roboto Condensed', sans-serif;
127+
position: absolute;
128+
left: 20px;
129+
top: 12px;
130+
font-size: 17px;
131+
}
132+
.box.active {
133+
max-height: 0%;
134+
opacity: 0;
135+
margin: 0;
136+
}
137+
.box.checked {
138+
background: #b6ff00;
139+
}

‎JavaScript To Do List/JavaScript To Do List.html

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>page</title>
6+
<link rel="stylesheet" type="text/css" href="JavaScript To Do List.css">
7+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
8+
</head>
9+
<body>
10+
11+
<div class="container">
12+
<h2>TO DO LIST</h2>
13+
<div id="addBox">
14+
<div id="plus" onclick="addBox()"></div>
15+
<input type="text" id="txt" class="txt" placeholder="Add to-do..."/>
16+
</div>
17+
18+
<div id="list">
19+
<div class="box" id="box">
20+
<div class="txtBox">Örnek kutu</div>
21+
</div>
22+
</div>
23+
</div>
24+
25+
26+
27+
<script>
28+
29+
30+
let box = document.getElementsByClassName("box");
31+
var i;
32+
33+
for (i = 0; i < box.length; i++) {
34+
let x = document.createElement("DIV");
35+
x.setAttribute("class", "x");
36+
box[i].appendChild(x);
37+
}
38+
39+
40+
let Xbox = document.getElementsByClassName("x");
41+
42+
43+
function addBox() {
44+
let div = document.createElement("div");
45+
div.setAttribute("class", "box");
46+
div.setAttribute("id", "box");
47+
let txt = document.getElementById("txt").value;
48+
let txtNode = document.createTextNode(txt);
49+
let txtBox = document.createElement("div");
50+
txtBox.setAttribute("class", "txtBox");
51+
txtBox.appendChild(txtNode);
52+
div.appendChild(txtBox);
53+
54+
55+
if (txt === "") {
56+
alert("You can't do an empty job");
57+
}
58+
else {
59+
document.getElementById("list").appendChild(div);
60+
}
61+
document.getElementById("txt").value = "";
62+
63+
let x = document.createElement("DIV");
64+
x.setAttribute("class", "x");
65+
box[i].appendChild(x);
66+
for (i = 0; i < Xbox.length; i++) {
67+
Xbox[i].onclick = function () {
68+
this.parentElement.classList.add("active")
69+
}
70+
}
71+
72+
}
73+
74+
let list = document.getElementById("list");
75+
list.addEventListener("click", function (e) {
76+
if (e.target.getAttribute("class") === "box") {
77+
e.target.classList.toggle("checked");
78+
}
79+
},false)
80+
81+
</script>
82+
83+
</body>
84+
</html>

‎JavaScript To Do List/JavaScript To Do List.png

84.4 KB
Loading

0 commit comments

Comments
 (0)