[Javascript] Chrome App - Momemtum 만들기

LOGIN

* 주요 내용

- preventDefault()

- Template literials

- Local Storage ==> 개발자 도구 - Application에서 값 확인. https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

 

* JS Source Code (app.js)

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
const loginGreeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden"; // define처럼 자주 쓰는 string 정의
const USERNAME_KEY = "userName";

function onLoginSummit(event) {
    event.preventDefault();
    const username = loginInput.value;

    loginForm.classList.add(HIDDEN_CLASSNAME); // Login 하면 Form 숨김 처리. css에 기 정의되어있음
    localStorage.setItem(USERNAME_KEY, username); // Local Storage에 값 등록

    paintGreetings(username);
}

function onLoginBtnClick() {
    const value = loginInput.value;

    if (value == "") {
        alert("Please write your name");
    } else if (value.length > 15) {
        alert("Your name is too long");
    }
}

function paintGreetings(userName) {
    loginGreeting.innerText = `Hello ${userName}`; // Template literials
    loginGreeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUserName = localStorage.getItem(USERNAME_KEY); // 저장되어있는 값이 있으면

if (savedUserName === null) {
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSummit);
} else {
    paintGreetings(savedUserName);
}

 

CLOCK

* 주요 내용

- 폴더구조 정리

- Interval ==> setInterval(함수명, 실행주기);

- Timeout ==> setTimeout(함수명, 함수가 실행되길 원하는 시간);

- Date (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date)

- padStart ==> 제시한 문자열 길이보다 작으면 앞에 내가 원하는 문자를 붙여줌. ex) 1초 -> 01초

- String Constructor

 

* JS Source Code (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.innerText = `${hours}:${minutes}:${seconds}`;
}

getClock();

setInterval(getClock, 1000);

---

QUOTES AND BACKGROUND

* 주요 내용

- Math (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math)

- document.createElement("태그명");

- document.body.appendChild();

 

* JS Source Code (quote.js)

const quotes = [
    {
      quote: "The way to get started is to quit talking and begin doing.",
      author: "Walt Disney",
    },
    {
      quote: "Life is what happens when you're busy making other plans.",
      author: "John Lennon",
    },
    {
      quote:
        "The world is a book and those who do not travel read only one page.",
      author: "Saint Augustine",
    },
    {
      quote: "Life is either a daring adventure or nothing at all.",
      author: "Helen Keller",
    },
    {
      quote: "To Travel is to Live",
      author: "Hans Christian Andersen",
    },
    {
      quote: "Only a life lived for others is a life worthwhile.",
      author: "Albert Einstein",
    },
    {
      quote: "You only live once, but if you do it right, once is enough.",
      author: "Mae West",
    },
    {
      quote: "Never go on trips with anyone you do ntot love.",
      author: "Hemmingway",
    },
    {
      quote: "We wander for distraction, but we travel for fulfilment.",
      author: "Hilaire Belloc",
    },
    {
      quote: "Travel expands the mind and fills the gap.",
      author: "Sheda Savage",
    },
  ];

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");

const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];  

quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;

 

* JS Source Code (background.js)

const images = [
    "0.jpeg",
    "1.jpeg",
    "2.jpeg"
];

const chosenImage = images[Math.floor(Math.random() * images.length)];
const bgImages = document.createElement("img");

bgImages.src = `img/${chosenImage}`;

document.body.appendChild(bgImages);

---