Skip to content

Commit 9dbbbf6

Browse files
yjkwon07yjkwon07
committed
ToDoList
1 parent d0dae6e commit 9dbbbf6

File tree

14 files changed

+377
-0
lines changed

14 files changed

+377
-0
lines changed

‎JS/ToDoList/css/index.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
body {
2+
background-color : #95a5a6;
3+
}
4+
5+
.btn {
6+
cursor: pointer;
7+
}
8+
9+
.clicked {
10+
color : white;
11+
}
12+
13+
.form , .greetings{
14+
display: none;
15+
}
16+
17+
.showing{
18+
display: block;
19+
}
20+
21+
@keyframes fadeIn {
22+
from {
23+
opacity: 0;
24+
}
25+
to {
26+
opacity: 1;
27+
}
28+
}
29+
30+
.bgImage {
31+
position: absolute;
32+
top : 0;
33+
left : 0;
34+
width: 100%;
35+
height: 100%;
36+
z-index: -1;
37+
animation : fadeIn 0.5s linear;
38+
}

‎JS/ToDoList/images/1.jpg‎

1.32 MB
Loading

‎JS/ToDoList/images/2.jpg‎

2.78 MB
Loading

‎JS/ToDoList/images/3.jpg‎

2.64 MB
Loading

‎JS/ToDoList/images/4.jpg‎

6.82 MB
Loading

‎JS/ToDoList/images/5.jpg‎

10.1 MB
Loading

‎JS/ToDoList/images/6.jpg‎

2.43 MB
Loading

‎JS/ToDoList/images/7.jpg‎

2.98 MB
Loading

‎JS/ToDoList/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title> Hello World!!</title>
5+
<meta charset="utf-8"/>
6+
<link rel="stylesheet" href = "./css/index.css"/>
7+
</head>
8+
9+
<body>
10+
11+
<!-- 현재 시간 -->
12+
<div class = "js-clock">
13+
<h1>00:00:00</h1>
14+
</div>
15+
16+
<!-- 사용자 -->
17+
<form class = "js-greetingForm form">
18+
<input type = "text" placeholder = "what is your name?"/>
19+
</form>
20+
<h4 class ="js-greetings greetings"></h4>
21+
22+
<!--할일 -->
23+
<form class = "js-toDoForm">
24+
<input type="text" placeholder="Write a to do"/>
25+
</form>
26+
<ul class ="js-toDoList"></ul>
27+
<span class="js-weather"></span>
28+
<script src = "./js/clock.js"></script>
29+
<script src = "./js/greeting.js"></script>
30+
<script src = "./js/todo.js"></script>
31+
<script src = "./js/bg.js"></script>
32+
<script src = "./js/weather.js"></script>
33+
</body>
34+
35+
</html>

‎JS/ToDoList/js/bg.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const body = document.querySelector("body");
2+
3+
const IMG_NUMBER = 7;
4+
5+
// function handleImgLoad() {
6+
// console.log("finished loading");
7+
// }
8+
9+
function paintImage(imgNumber) {
10+
const image = new Image();
11+
image.src = `images/${imgNumber + 1}.jpg`;
12+
image.classList.add("bgImage");
13+
body.prepend(image);
14+
15+
// table listener를 이미지화 하기 위해 even listener를 연결
16+
// but, API에서 나온게 아니기 때문에 로딩이 안된다..
17+
// image.addEventListener("loadend", handleImgLoad);
18+
19+
}
20+
21+
function getRandom() {
22+
// Math.ceil , Math.random , Math.floor
23+
const number = Math.floor(Math.random() * IMG_NUMBER);
24+
return number;
25+
}
26+
27+
function init() {
28+
const randomNumber = getRandom();
29+
paintImage(randomNumber);
30+
}
31+
32+
init();

0 commit comments

Comments
 (0)