📝 오늘 한 것

1. localStorage / string() / string.prototype.padStart()

📚 배운 것

1. Log In

4) localStorage

브라우저에 데이터를 저장하고, 이를 나중에 가져다 쓸 수 있도록 한다

여기서는 user가 새로고침할 때마다 이름을 입력하지 않아도 되게끔 브라우저가 user의 이름을 기억하도록 한다

localStorage.setItem(키, 값);
로컬 스토리지에 키 값 쌍 추가

localStorage.getItem(키);
로컬 스토리지에서 해당 키에 대응하는 값 읽기

localStorage.removeItem(키);
로컬 스토리지에서 해당 키 값 쌍 제거

localStorage.clear();
로컬 스토리지 항목 전체 제거

<!-- h1과 form 모두 기본적으로 숨김 상태 -->
<h1 id="greeting" class="hidden"></h1>
<form id="login-form" class="hidden">
  <input required maxlength="15" type="text" placeholder="what is your name?">
  <button>Log In</button>
</form>

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.innerText = `Hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername = localStorage.getItem(USERNAME_key);

// 키에 대응하는 값이 없으면 변수에는 null이 할당된다
if (savedUsername === null) {
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener('submit', onLoginSubmit);
} else {
  paintGreetings(savedUsername);
}

2. Clock

1) setInterval() VS setTimeout()

function print() {
  console.log('syong');
}

setInterval(print, 1000); // 1초마다 한 번씩 실행
setTimeout(print, 1000); // 1초 뒤에 한 번 실행

2) string.prototype.padStart()

string.padStart(최소 길이, 길이 미달 시 추가할 문자)
string.prototype.padEnd(최소 길이, 길이 미달 시 추가할 문자)

"end".padStart(5, "0"); // 00end
"end".padEnd(5, "0"); // end00
"end".padEnd(3, "0"); // end

padStart()는 string에만 실행할 수 있으므로 String() 함수를 이용해 시간을 의미하는 숫자들을 문자열로 전부 바꿔줌

const clock = document.querySelector('h2');

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);

3. Quotes and Background

1) quotes

명언들을 배열 안에 object 형태로 나열해 놓은 후 Math.random()과 setInterval()을 이용해 일정한 시간 간격을 두고 랜덤으로 뽑아 화면에 보이도록 해주었다.

<div id="quote">
  <span></span>
  <span></span>
</div>

const quotes = [
  {
    quotes: '블라블라',
    author: '블라'
  },
  
  {
  	quotes: '블라블라블라블라',
    author: '블라블라블라'
  },
  
  // 생략 (총 5개 명언 작성)
];

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

function showQuote() {
  const todayQuote = quotes[Math.floor(Math.random() * quotes.length)];
  quote.innerText = todayQuote.quotes;
  author.innerText = todayQuote.author;
}

showQuote();
setInterval(showQuote, 5000);

2) background

quotes와 비슷하게 이미지들을 배열 안에 나열해 놓은 후 Math.random()과 document.createElement(), Node.appendChild()를 이용해 document의 body 끝에 이미지를 추가해 주었다. 새로고침할 때마다 이미지가 랜덤하게 바뀐다.

const images = [
  '0.jpg',
  '1.jpg',
  '2.jpg'
];

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

const bgImage = document.createElement('img');
bgImage.setAttribute('src', `img/${chosenImage}`);
document.body.appendChild(bgImage);

✨ 내일 할 것

1. 클론코딩 계속