Skip to content

Commit e820968

Browse files
ClientCrashClientCrash
committed
added git for publishing
Code is old. Very old. Very Very old.
0 parents  commit e820968

File tree

6 files changed

+315
-0
lines changed

6 files changed

+315
-0
lines changed

‎.gitignore

Whitespace-only changes.

‎css/main.css

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
body{
2+
background-color: #4D5061;
3+
font-family: 'Roboto', Arial, Helvetica, sans-serif;
4+
background: linear-gradient(to right,rgb(64, 0, 88) 0%,rgb(103, 222, 255) 100%);
5+
}
6+
.todo{
7+
background-color: #648DE5;
8+
border-radius: 14px;
9+
margin: 14px;
10+
margin-top: 14px;
11+
font-size: 2rem;
12+
display: inline-block;
13+
padding-top: 14px;
14+
padding-right: 14px;
15+
padding-bottom: 14px;
16+
padding-left: 14px;
17+
background: linear-gradient(to right, rgb(100, 201, 229) 0%, rgb(158, 100, 229) 100%);
18+
}
19+
.card {
20+
21+
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
22+
transition: 0.3s;
23+
margin: 14px;
24+
}
25+
.longtextarea{
26+
width: 42.8vw;
27+
28+
font-size: 3vh;
29+
}
30+
/* On mouse-over, add a deeper shadow */
31+
.card:hover {
32+
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
33+
}
34+
35+
/* Add some padding inside the card container */
36+
.container {
37+
padding: 2px 16px;
38+
}
39+
input{
40+
height: 32px;
41+
width: 32px;
42+
background-color: #eee;
43+
44+
}
45+
.container:hover input ~ .checkmark {
46+
background-color: #ccc;
47+
}
48+
.rightal{
49+
text-align: right;
50+
float: right;
51+
52+
}
53+
input[type="text"], textarea {
54+
55+
background-color : rgb(200, 224, 147);
56+
border-style: none;
57+
58+
}
59+
.redbutton1{
60+
background-color : #F96E46;
61+
border-style: none;
62+
padding-top: 8px;
63+
padding-left: 8px;
64+
padding-right: 8px;
65+
padding-bottom: 8px;
66+
border-radius: 4px;
67+
font-size: 16px;
68+
margin-left: 32px;
69+
background: linear-gradient(to right, #F96E46 0%, rgb(249, 192, 70) 100%);
70+
}
71+
textarea:focus, input:focus{
72+
outline: none;
73+
}
74+
.footer{
75+
position:fixed;
76+
bottom:0;
77+
left:0;
78+
display: inline-block;
79+
background-color: #FF8811;
80+
padding-bottom: 8px;
81+
padding-top: 4px;
82+
padding-left: 14px;
83+
padding-right: 14px;
84+
margin-left: 14px;
85+
margin-right: 14px;
86+
}
87+
.righter{
88+
position: absolute;
89+
right: 0;
90+
top: 0;
91+
display: inline-block;
92+
background-color: #FF8811;
93+
padding-bottom: 8px;
94+
padding-top: 4px;
95+
padding-left: 14px;
96+
padding-right: 14px;
97+
margin-left: 14px;
98+
margin-right: 14px;
99+
}

‎img/checklist.png

7.12 KB
Loading

‎index.html

+199
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" type="text/css" href="./css/main.css" />
8+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet" />
9+
<link rel="icon" href="./img/meat.png" />
10+
<title>TODO - The simple to use ToDo App.</title>
11+
</head>
12+
13+
<body>
14+
<div>
15+
<img src="img/checklist.png" width="80vw" height="80wh" />
16+
<div id="controllsarea" class="card" style="
17+
padding-top: 14px;
18+
padding-bottom: 14px;
19+
padding-left: 14px;
20+
padding-rigth: 14px;
21+
background-color: #dbf4a7;
22+
display: inline-block;
23+
">
24+
25+
<form action="POST" onsubmit="event.preventDefault(); formaddTodo();">
26+
<input placeholder="Classtest , Homework , Publishing this repo to github ..." size="100" id="addformtextinput" class="longtextarea"
27+
type="text" name="text" id="textinp" />
28+
<button id="addtotobutton" class="redbutton1" type="submit" style="margin-right: 14px">
29+
Add
30+
</button>
31+
</form>
32+
</div>
33+
<button id="addtotobutton" class="redbutton1" onclick="saveToCookies();" style="text-align: center">
34+
Save ToDos in cookies 🍪
35+
</button>
36+
37+
<div id="todosarea" class="card" style="
38+
background: linear-gradient(
39+
to right,
40+
rgba(3, 133, 153, 1) 0%,
41+
rgba(219, 244, 167, 1) 100%
42+
);
43+
">
44+
45+
<h2 style="padding-left: 8px; padding-top: 8px; padding-right: 8px">
46+
ToDo
47+
</h2>
48+
<ul id="todoslist"></ul>
49+
<h2 style="padding-left: 8px; padding-top: 8px; padding-right: 8px">
50+
In Progress
51+
</h2>
52+
<ul id="proglist"></ul>
53+
<h2 style="padding-left: 8px; padding-top: 8px; padding-right: 8px">
54+
Done
55+
</h2>
56+
<ul id="donelist"></ul>
57+
</div>
58+
</div>
59+
<div class="card righter" id="statsarea" style="
60+
background: linear-gradient(to right, #ff7f51 0%, #fffd77 100%);
61+
margin-top: 8%;
62+
">
63+
<table>
64+
<tbody>
65+
<tr>
66+
<td class="tg-0lax">TODO</td>
67+
<td class="tg-0lax" id="todopercentage">100%</td>
68+
</tr>
69+
<tr>
70+
<td class="tg-0lax">In Progress</td>
71+
<td class="tg-0lax" id="progpercentage">0%</td>
72+
</tr>
73+
<tr>
74+
<td class="tg-0lax">Done</td>
75+
<td class="tg-0lax" id="donepercentage">0%<br /></td>
76+
</tr>
77+
</tbody>
78+
</table>
79+
</div>
80+
81+
<div class="footer">
82+
<span onclick="window.open('./info.html',200,400)">Info</span>
83+
</div>
84+
<div class="righter"><a href="github.com/clientcrash/stodo">Github</a></div>
85+
</body>
86+
87+
</html>
88+
89+
<script>
90+
setInterval(function () {
91+
updateStats();
92+
}, 2000);
93+
94+
function updateStats() {
95+
console.log("updating stats...");
96+
97+
todoamount = document.getElementById("todoslist").childElementCount;
98+
progamount = document.getElementById("proglist").childElementCount;
99+
doneamount = document.getElementById("donelist").childElementCount;
100+
totalamount = todoamount + progamount + doneamount;
101+
document.getElementById("todopercentage").innerText =
102+
((todoamount / totalamount) * 100).toString() + "%";
103+
document.getElementById("progpercentage").innerText =
104+
((progamount / totalamount) * 100).toString() + "%";
105+
document.getElementById("donepercentage").innerText =
106+
((doneamount / totalamount) * 100).toString() + "%";
107+
}
108+
109+
function addTodo(text, id, status) {
110+
if (text == "") {
111+
return;
112+
}
113+
switch (status) {
114+
case "todo":
115+
document.getElementById("todoslist").innerHTML +=
116+
'<li data-status="' +
117+
status +
118+
'" id="' +
119+
id +
120+
'"><div class="todo card"><input type="button" onclick="onCheck(' +
121+
id +
122+
')" class="rightal redbutton1" name="Done" id="" style="padding-top:8px;padding-bottom:8px;padding-left:8px;padding-right:8px;margin-left: 8vw;"><span class="rigthal "style="margin-right: 16px;">' +
123+
text +
124+
"</span></div></li>";
125+
break;
126+
case "prog":
127+
document.getElementById("proglist").innerHTML +=
128+
'<li data-status="' +
129+
status +
130+
'" id="' +
131+
id +
132+
'"><div class="todo card"><input type="button" onclick="onCheck(' +
133+
id +
134+
')" class="rightal redbutton1" name="Done" id="" style="padding-top:8px;padding-bottom:8px;padding-left:8px;padding-right:8px;margin-left: 8vw;"><span class="rigthal "style="margin-right: 16px;">' +
135+
text +
136+
"</span></div></li>";
137+
break;
138+
case "done":
139+
document.getElementById("donelist").innerHTML +=
140+
'<li data-status="' +
141+
status +
142+
'" id="' +
143+
id +
144+
'"><div class="todo card"><input type="button" onclick="onCheck(' +
145+
id +
146+
')" class="rightal redbutton1" name="Done" id="" style="padding-top:8px;padding-bottom:8px;padding-left:8px;padding-right:8px;margin-left: 8vw;"><span class="rigthal "style="margin-right: 16px;">' +
147+
text +
148+
"</span></div></li>";
149+
break;
150+
default:
151+
break;
152+
}
153+
}
154+
155+
function formaddTodo() {
156+
elem3 = document.getElementById("addformtextinput");
157+
text = elem3.value;
158+
console.log(text);
159+
addTodo((text = text), (id = Date.now().toString()), (status = "todo"));
160+
elem3.value = "";
161+
return true;
162+
}
163+
164+
function onCheck(id) {
165+
id = id.toString();
166+
console.log("THE ID IS => " + id);
167+
elem = document.getElementById(id);
168+
console.log("THE ELEMENT IS => ");
169+
console.log(elem);
170+
status = elem.getAttribute("data-status");
171+
console.log("THE STATUS IS " + status);
172+
text = elem
173+
.getElementsByTagName("div")[0]
174+
.getElementsByTagName("span")[0].innerText;
175+
console.log("THE TEXT IS " + text);
176+
switch (status) {
177+
case "todo":
178+
document.getElementById(id).remove();
179+
addTodo(text, id, "prog");
180+
console.log("IS TODO MOVED TO PROG");
181+
break;
182+
case "prog":
183+
document.getElementById(id).remove();
184+
addTodo(text, id, "done");
185+
break;
186+
case "done":
187+
document.getElementById(id).remove();
188+
break;
189+
default:
190+
break;
191+
}
192+
}
193+
194+
function saveToCookies() {
195+
alert("Not Supported!");
196+
}
197+
198+
function loadFromCookies() {}
199+
</script>

‎info.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Simple ToDo Information</title>
7+
</head>
8+
<body>
9+
NO INFO
10+
</body>
11+
</html>

‎readme.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Stodo
2+
## A simple todo app written in vanilla JS.
3+
![GitHub repo size](https://img.shields.io/github/repo-size/clientcrash/stodo?style=flat-square)
4+
5+
I wrote this a **long long LONG** time ago just for fun.
6+
I wrote this at a time when I couldn't do proper web design.

0 commit comments

Comments
 (0)