노마드코더의 *바닐라 JS로 구글 크롬앱 만들기 *강의를 정리하는 글입니다.
#3.1 ~ #3.2 Making a JS Clock
<div class="js-clock">
<h1>00:00</h1>
</div>const clockContainer = document.querySelector('.js-clock'),
clockTitle = clockContainer.querySelector('h1');
function getTime() {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
// 숫자가 한 자리수일 때 앞에 0을 붙여 주기 위해 삼항 조건 연산자(mini if, if 조건문의 축약 형태)를 사용
}
function init() {
getTime();
setInterval(getTime, 1000);
};
init();#3.3 ~ 3.4 Saving the User Name
<body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<form class="js-form form">
<input type="text" placeholder="What's your name?" />
</form>
<h4 class="js-greetings greetings"></h4>
<script src="clock.js"></script>
<script src="greetings.js"></script>
</body>.form,
.greetings{display:none;}
.showing{display:block;}const form = document.querySelector('.js-form'),
input = form.querySelector('input');
greetings = document.querySelector('.js-greetings');
// Local Storage : user의 브라우저에 작은 JS information을 저장하는 저장소.
const user_ls = 'currentUser';
const showClass = 'showing';
function saveName(text) {
localStorage.setItem(user_ls, text);
};
function handleSubmit(event) {
event.preventDefault();
const currentValue = input.value;
paintGreetings(currentValue);
saveName(currentValue);
};
function askForName() {
form.classList.add(showClass);
form.addEventListener('submit', handleSubmit);
};
function paintGreetings(text) {
form.classList.remove(showClass);
greetings.classList.add(showClass);
greetings.innerText = `Hello, ${text}!`
};
function LoadName() {
const currentUser = localStorage.getItem(user_ls);
if (currentUser === null) {
// she is not
askForName();
} else {
// she is
paintGreetings(currentUser);
}
};
function init() {
LoadName();
};
init();#3.5 Making a To Do List - 1
const toDoForm = document.querySelector('.js-toDoForm');
const toDoInput = toDoForm.querySelector('input');
const toDoList = document.querySelector('.js-toDoList');
const todo_ls = 'toDos';
function paintToDo(text) {
const li = document.createElement('li');
const delBtn = document.createElement('button');
delBtn.value = '😣';
const span = document.createElement('span');
span.innerText = text;
toDoList.appendChild(li);
li.appendChild(delBtn);
li.appendChild(span);
}
function handleSubmit(event) {
event.prevantDefault();
const currentValue = toDoInput.value;
paintToDo(currentValue);
toDoInput.value = '';
}
function loadTodos() {
const toDos = localStorage.getItem(todo_ls);
if(toDos !== null) {
}
}
function init() {
toDoInput.addEventListener('submit', handleSubmit);
}
init();'Tech > JavaScript' 카테고리의 다른 글
| [JS] 바닐라 JS로 구글 크롬앱 만들기 #3 Make your first JS App - 2 (0) | 2019.07.30 |
|---|---|
| [JS] 팝업 - 오늘 하루 열지 않기 (0) | 2019.07.22 |
| [JS] 바닐라 JS로 구글 크롬앱 만들기 #1 Theory ~ #2 Practice (0) | 2019.07.20 |
| [JS] Math Method (소수점 올림, 버림, 반올림) (0) | 2019.07.20 |
| Number guessing game 만들기 (0) | 2018.10.04 |