210225

31237 단어 jsjs

노마드코더 강의 '바닐라 js로 크롬 앱 만들기' 강의를 들었다.

이론Part에서 DOM을 활용한 if else문을 응용하는 법을 배웠다.

const title = document.querySelector(".hi");

const CLICKED_CLASS = "clicked";

function handleClick() {
  const hasClass = title.classList.contains(CLICKED_CLASS);
  if (hasClass) {
    title.classList.remove(CLICKED_CLASS);
  } else {
    title.classList.add(CLICKED_CLASS);
  }
}

function init() {
  title.addEventListener("click", handleClick);
}

init();

JS로 리얼타임 시계를 만드는법도 배웠다.

<!DOCTYPE html>   //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" />
    <title>Realtime</title>
    <link rel="stylesheet" href="realtime.css" />
  </head>
  <body>
    <div class="js-clock">
      <h1>00:00</h1>
    </div>

    <script src="clock.js"></script>
  </body>
</html>
<script>   //JS
const clockContainer = document.querySelector(".js-clock");
const clockTitle = clockContainer.querySelector("h1");

function getTime() {
  const date = new Date();
  const minutes = date.getMinutes();
  const hours = date.getHours();
  const seconds = date.getSeconds();
  clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${
    minutes < 10 ? `0${minutes}` : minutes
  }:${seconds < 10 ? `0${seconds}` : seconds}`;
}

function init() {
  getTime();
  setInterval(getTime, 1000);
}

init();
</script>

JS로 input창에 넣은 값을 고정시키는 것을 배웠다.

<!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" />
    <title>Realtime</title>
    <link rel="stylesheet" href="realtime.css" />
  </head>
  <body>
    <div class="js-clock">
      <h1>00:00</h1>
    </div>
    <form class="js-form form">
      <input type="text" placeholder="what is your name?" />
    </form>
    <h4 class="js-greetings greetings"></h4>
    <form class="js-toDoForm">
      <input type="text" placeholder="Write a to do" />
    </form>
    <ul class="js-toDoList"></ul>
    <script src="gretting.js"></script>
    <script src="clock.js"></script>
    <script src="todo.js"></script>
  </body>
</html>

<style>
body {
  color: #34495e;
  background-color: #ecf0f1;
}

.clicked {
  color: #7f8c8d;
}

.form,
.greetings {
  display: none;    
}

.showing {
  display: block;    /*이 css를 조건마다 넣으므로 보였다 안보였다 할 수 있다.*/ 
}
</style>
<script>
const form = document.querySelector(".js-form"),
  input = form.querySelector("input"),
  greeting = document.querySelector(".js-greetings");

const USER_LS = "currentUser",
  SHOWING_CN = "showing";

function saveName(text) {
  localStorage.setItem(USER_LS, text);
}             //브라우저에 데이터를 저장한다.

function handleSubmit(event) {
  event.preventDefault();    //input을 submit했을 때 새로고침하는 걸 없애준다.
  const currentValue = input.value;
  paintGreeting(currentValue);
  saveName(currentValue);
}

function askForName() {
  form.classList.add(SHOWING_CN);
  form.addEventListener("submit", handleSubmit);
}

function paintGreeting(text) {
  form.classList.remove(SHOWING_CN);
  greeting.classList.add(SHOWING_CN);
  greeting.innerText = `Hello ${text}`;
}

function loadName() {
  const currentUser = localStorage.getItem(USER_LS);
  if (currentUser === null) {
    askForName();  //저장된 데이터가 없으면 askForName함수 실행
  } else {
    paintGreeting(currentUser);
  }
}

function init() {
  loadName();
}

init();
</script>



to do list만드는 법은 반 정도 배웠는데 코드를 따라치기만 하는 것 같아서 기분이 몹시 안좋았다. 이해가 안가더라도 따라치는 것이 맞는건지 어떤게 좋은 방법일지는 모르겠다.
내일은 마저 강의를 들어보고 완성을 시키고 강의를 안보고 내가 스스로 todolist를 만들 때 비로소 이 강의를 졸업하고 다른것을 배워야겠다.

#39_트위치 페이지 실습(2)
2020.11.03 일지

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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