GeezerVison is showing github.com — ToDoList · Jaehyunleejava/JavaScript@9dbbbf6
File tree
Expand file treeCollapse file tree
Open diff view settings
Expand file treeCollapse file tree
Open diff view settings
Collapse file
Copy file name to clipboard +38Lines changed: 38 additions & 0 deletions | Original file line number | Diff line number | Diff line change |
|---|
|
| 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 | +} |
Collapse file
Copy file name to clipboard 1.32 MB
- Display the source diff
- Display the rich diff
Collapse file
Copy file name to clipboard 2.78 MB
- Display the source diff
- Display the rich diff
Collapse file
Copy file name to clipboard 2.64 MB
- Display the source diff
- Display the rich diff
Collapse file
Copy file name to clipboard 6.82 MB
- Display the source diff
- Display the rich diff
Collapse file
Copy file name to clipboard 10.1 MB
- Display the source diff
- Display the rich diff
Collapse file
Copy file name to clipboard 2.43 MB
- Display the source diff
- Display the rich diff
Collapse file
Copy file name to clipboard 2.98 MB
- Display the source diff
- Display the rich diff
Collapse file
Copy file name to clipboard +35Lines changed: 35 additions & 0 deletions | Original file line number | Diff line number | Diff line change |
|---|
|
| 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> |
Collapse file
Copy file name to clipboard +32Lines changed: 32 additions & 0 deletions | Original file line number | Diff line number | Diff line change |
|---|
|
| 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(); |