노마드코더 / 바닐라 JS로 크롬 앱 만들기 ③

42676 단어 2021.112021.11

1. Clock

//index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css" />
  <title>Momentum App</title>
</head>

<body>
  <form id="login-form" class="hidden">
    <input required maxlength="15" type="text" placeholder="What is your name?" />
    <button>Log In</button>
  </form>
  <h2 id="clock">00:00:00</h2>
  <h1 id="greeting" class="hidden"></h1>
  <script src="js/clock.js"></script>
  <script src="js/greetings.js"></script>
</body>

</html>

// js/greetings.js
const loginForm = document.querySelector("#login-form")
const loginInput = document.querySelector("#login-form input")
const greeting = document.querySelector("#greeting")

const HIDDEN_CLASSNAME = "hidden"
const USERNAME_KEY = "userName"

function onLoginSubmit(event) {
  event.preventDefault()
  loginForm.classList.add(HIDDEN_CLASSNAME)
  const userName = loginInput.value
  localStorage.setItem(USERNAME_KEY, userName)
  paintGreetings(userName)
}

function paintGreetings(username) {
  greeting.innerHTML = "hello " + username
  greeting.classList.remove(HIDDEN_CLASSNAME)
}

const savedUserName = localStorage.getItem(USERNAME_KEY)

if (savedUserName === null) {
  // show the form
  loginForm.classList.remove(HIDDEN_CLASSNAME)
  loginForm.addEventListener("submit", onLoginSubmit)
} else {
  // show the greetings
  paintGreetings(savedUserName)
}

//js/clock.js
const clock = document.querySelector("h2#clock")

function getClock() {
  const date = new Date()
  clock.innerHTML = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
}

getClock()
setInterval(getClock, 1000) // 1초마다 함수 실행

// css/style.css
.hidden {
  display: none;
}

setInterval함수를 활용해 1초마다 시간을 가져올 수 있다.

2. zoro fill

우리가 자주 마주하는 문제점이 있다면, 그 해결을 위한 함수가 만들어져 있을 확률이 높다.

우리는 시간을 가져오지만 숫자가 한 자리일 때, 1, 2, 3, 이렇게 표기된다.
우리는 시계이기 때문에 01, 02, 03으로 표기하길 원한다.
그를 위한 함수이다.


"1".padStart(2,"0") // "02"


// clock.js
const clock = document.querySelector("h2#clock")

function getClock() {
  const date = new Date()
  const hours = String(date.getHours()).padStart(2, "0")
  const minutes = String(date.getMinutes()).padStart(2, "0")
  const seconds = String(date.getSeconds()).padStart(2, "0")
  clock.innerHTML = `${hours}:${minutes}:${seconds}`
}

getClock()
setInterval(getClock, 1000) // 1초마다 함수 실행

date.getHours에는 padStart()를 사용할 수 없다.
타입이 number이기 때문이다.
padStart()는 string타입만 사용할 수 있어서, 타입을 변경했다.

크리스마스까지 남은 시간 계산하기 과제 🎄
: https://codesandbox.io/s/a08blueprint-forked-8oho1?file=/index.html

시간 비교한 사이트 : https://www.emailsanta.com/ko/how-many-days-christmas-countdown.asp

3. random

명언들을 작성해두고 랜덤으로 화면에 출력하는 작업을 진행했다.

// index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css" />
  <title>Momentum App</title>
</head>

<body>
  <form id="login-form" class="hidden">
    <input required maxlength="15" type="text" placeholder="What is your name?" />
    <button>Log In</button>
  </form>
  <h2 id="clock">00:00:00</h2>
  <h1 id="greeting" class="hidden"></h1>
  <div id="goodSentance">
    <span></span>
  </div>
  <script src="js/clock.js"></script>
  <script src="js/greetings.js"></script>
  <script src="js/goodSentance.js"></script>
</body>

</html>
// goodSentance.js
const goodSentances = [
  "아무거나로 인생을 낭비하지 않기",
  "너를 보면 가슴에서 장미꽃이 피어나고, 캄캄한 밤바다에 등대불이 반짝인다.",
  "산다는 것 자체를 하나의 축제로 여기면, 우리의 삶은 목표가 아니라 과정이 더 중요해진다.",
  "길을 잃었을 때 그 주변의 아름다움을 볼 수 있었다.",
  "다른사람의 충고는 듣지마. 자기가 지금 뭐하고 있는지 제대로 아는 사람은 아무도 없다. 네가 하고 싶은대로 해",
  "태산(泰山)이 높다 하지만 하늘 아래 산이로다.\n오르고 또 오르면 못 오를 리 없건만\n사람이 자기 스스로 오르지않고 산을 높다 하는구나",
  "고통은 잠깐이다. 포기는 영원히 남는다.",
  "모든 성취의 출발점은 꿈을 꾸는 것에서 시작됩니다.",
  "미친 짓이란, 매번 똑같은 행동을 반복하면서 다른 결과를 기대하는 것이다.",
  "내일 죽을 것처럼 살아라. 영원히 살 것처럼 공부하라."
]

const goodSentance = document.querySelector("#goodSentance span:first-child")

const todayGoodSentance = goodSentances[Math.floor(Math.random() * goodSentances.length)]

goodSentance.innerHTML = todayGoodSentance

Math.random() 과 Math.floor()을 활용해서 랜덤으로 배열요소를 가져오게 했다.

4. image

// index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css" />
  <title>Momentum App</title>
</head>

<body>
  <form id="login-form" class="hidden">
    <input required maxlength="15" type="text" placeholder="What is your name?" />
    <button>Log In</button>
  </form>
  <h2 id="clock">00:00:00</h2>
  <h1 id="greeting" class="hidden"></h1>
  <div id="goodSentance">
    <span></span>
  </div>
  <script src="js/clock.js"></script>
  <script src="js/greetings.js"></script>
  <script src="js/goodSentance.js"></script>
  <script src="js/background.js"></script>
</body>

</html>

// backgroung.js

const images = [
  "0.jpg",
  "1.jpg",
  "2.jpg"
]

const chosenImage = images[Math.floor(Math.random() * images.length)]

const bgImage = document.createElement("img")
console.log(bgImage) // <img> 이미지 태그가 만들어진다.

bgImage.src = `img/${chosenImage}`
console.log(bgImage) // <img src="img/2.jpg"> 옵션도 넣을 수 있다.

document.body.appendChild(bgImage) // body에 추가해주면 끝이다 ~!

참고 공식문서 : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients
참고 js로 css옵션추가 : https://css-tricks.com/random-numbers-css/

TIL-037 | 꾸며줘 홈즈 project(1)_초기 세팅
졸꾸 코딩일기 21.7.7

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage