[ToDoList] background

웹/ToDoList|2019. 1. 3. 11:54

ToDoList

  • index.html
    기본적인 timer markup
    greeting 부분
    greeting.js

  • clock.js
    현재 시간을 출력할 수 있도록 작성한 js
    시 분 초가 1자리 수인 경우 앞에 0 추가해주기
    1초 지날 때마다 시간 실시간으로 얻어오기 

  • greeting.js
    이름을 입력하지 않으면(localStorage에 없으면) 이름 입력 받는 input 출력
    이름을 입력하면 해당 이름 localStorage 저장

  • todo.js
    localStorage에 값이 있으면 출력한다.
    paintToDo 함수에서 값을 출력해준다.
    handleSubmit 함수에서 입력이 끝나면 다시 공백으로 만들어 둔다.
    localStorage에 저장 - saveToDos 함수
    각각 li에 id 추가
    할일 li를 삭제하는 deleteToDo 함수 추가
    오탈자 수정

  • (추가) bg.js
    배경 랜덤으로 출력하기

  • index.css
    (추가) css 각자 알아서 보기

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="index.css">

    <title>Timer</title>
</head>
<body>
    <div class="wrap">
        <div class="js-clock">
            <h1 class="js-clock-text">00:00</h1>
        </div>

        <form action="" class="js-form form">
            <input type="text" placeholder="what's your name">
        </form>
        <h4 class="js-greetings greetings"></h4>
    </div>
    <script src="clock.js"></script>
    <script src="greeting.js"></script>
</body>
</html>

clock.js

// js-clock을 가진 요소에 접근
// js-clock 내에 있는 h1 요소에 접근
const clockContainer = document.querySelector(".js-clock");
const clockText = clockContainer.querySelector("h1");

// 현재 시간을 얻어오는 함수
function getTime() {
    const date = new Date();

    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    clockText.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
}

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

init();

// js-clock을 가진 요소에 접근
// js-clock 내에 있는 h1 요소에 접근
const clockContainer = document.querySelector(".js-clock");
const clockText = clockContainer.querySelector("h1");

function getTime() {
    // Date 객체 생성
    const date = new Date();

    // 시 분 초 받아 오기
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    // 숫자가 1자리 수인 경우 앞에 0 붙여주기
    clockText.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
}

function init() {
    getTime();
    // 1000 밀리세컨드(1초) 당 1번 getTime 실행시키기
    setInterval(getTime, 1000);
}

init();

greeting.js

const form = document.querySelector(".js-form");
const input = form.querySelector("input");
const greeting = document.querySelector(".greetings");

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

// 사용자 이름을 localStorage에 저장한다.
function saveName(name) {
    localStorage.setItem(USER_LS, name);
}

function handleSubmit() {
    // event 기본 동작을 막는다.
    event.preventDefault();

    const currentValue = input.value;

    paintGreeting(currentValue);
    saveName(currentValue);
}

// 사용자에게 이름을 입력 받는 함수
function askName() {
    // form에 showing class를 추가시켜 보이도록 한다.
    form.classList.add(SHOWING_CN);

    // form은 submit을 하면 default로 무언가를 다른 곳으로 보내려고 한다.
    // 이때 handleSubmit을 사용한다. 이것을 막기 위해 사용하는 함수.
    form.addEventListener("submit", handleSubmit);
}

// 사용자 이름 출력 함수
function paintGreeting(name) {
    // 기존에 form에 추가해주었던 .showing 삭제
    // greeting에 .showing 추가
    form.classList.remove(SHOWING_CN);
    greeting.classList.add(SHOWING_CN);
    greeting.innerHTML = `Hello ${name}`;
}

function loadName() {
    // localStorage에서 USER_LS의 값을 가져온다.
    // 해당 값이 없으면 이름을 입력받고 있으면 출력한다.
    const currentUser = localStorage.getItem(USER_LS);

    if(currentUser === null) {
        askName();
    }
    else {
        paintGreeting(currentUser);
    }
}

function init() {
    loadName();
}

init();

todo.js

const toDoForm = document.querySelector(".js-toDoForm");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.querySelector(".js-toDoList");

const TODOS_LS = "toDos";

let toDos = [];

// filter는 함수 하나를 실행시킨다.
// filter는 forEach와 같이 각각의 item과 같이 실행이 된다.
// filter가 하는 것은 array를 하나 만들고
// 결과가 true인 것들을 return 한다.
function deleteToDo(event) {
    const btn = event.target;
    const li = btn.parentNode;
    toDoList.removeChild(li);

    const cleanToDos = toDos.filter(function(toDo) {
        return toDo.id !== parseInt(li.id);
    });
    toDos = cleanToDos;
    saveToDos();
}

// localStorage에는 string만 저장할 수 있다.
// JSON.stringify - 자바스크립트 object를 string으로 바꾸어 준다.
function saveToDos() {
    localStorage.setItem(TODOS_LS, JSON.stringify(toDos));
}

function paintToDo(text) {
    // 각각 요소 생성
    const li = document.createElement("li");
    const delBtn = document.createElement("button");
    const span = document.createElement("span");
    const newId = toDos.length + 1;

    delBtn.innerText = "❌";
    delBtn.addEventListener("click", deleteToDo);

    span.innerText = text;

    // li의 자식으로 delBtn, span을 추가
    li.appendChild(delBtn);
    li.appendChild(span);

    // li 삭제를 위해 id 추가
    li.id = newId;

    // toDoList 자식으로 li 추가
    toDoList.appendChild(li);

    const toDoObj = {
        text: text,
        id: newId
    };

    toDos.push(toDoObj);
    saveToDos(toDoObj);
}

function handleSubmit(event) {
    event.preventDefault();
    
    const currentValue = toDoInput.value;
    paintToDo(currentValue);

    // 입력이 끝나면 다시 공백으로 만들어 둔다.
    toDoInput.value = "";
}

// JSON은 JavaScript Object Notation
// 데이터를 전달하때 js가 그걸 다룰 수 있도록 object로 바꾸어주는 기능이다.
// 그래서 js는 object를 string으로 string을 object로 변환해줄 수 있다.
function loadToDos() {
    const loadedToDos = localStorage.getItem(TODOS_LS);
    
    if(loadedToDos !== null) {
        const parsedToDos = JSON.parse(loadedToDos);

        parsedToDos.forEach(function(todo) {
            paintToDo(todo.text);
        });
    }
    // 만약 toDos가 null이랑 같으면 할게 없다.
    // why? 이 form은 항상 showing이기 때문에
    // 그래서 else 는 할 필요가 없다.
}

function init() {
    loadToDos();
    toDoForm.addEventListener("submit", handleSubmit);
}

init();

bg.js

const body = document.querySelector("body");

// image 개수
const IMG_NUMBER = 7;

function paintImage(imgNumber) {
    const image = new Image();

    // 1 - 7 .jpg 찾기
    image.src = `images/${imgNumber + 1}.jpg`;
    image.classList.add("bgImage");
    body.appendChild(image);
}

// 0 - 6 랜덤으로 만들기
function getRandom() {
    const number = Math.floor(Math.random() * IMG_NUMBER);
    return number;
}

function init() {
    const randomNumber = getRandom();
    paintImage(randomNumber);    
}

init();

index.css

.js-greetings,
.js-form {
    display: none;
}

.showing {
    display: block;
}

결과



<참고>

이미지는 https://pixabay.com/ko/ 해당 사이트에서 찾았습니다. 

구글에 무료 이미지 검색하셔서 아무거나 사용하면 좋을 것 같습니다.

저작자표시 비영리 변경금지

'웹 > ToDoList' 카테고리의 다른 글

[ToDoList] todo - 3  (0) 2019.01.03
[ToDoList] todo - 2  (0) 2019.01.03
[ToDoList] todo - 1  (0) 2019.01.03
[ToDoList] Name  (0) 2019.01.03
[ToDoList] Timer - 2  (0) 2019.01.03

댓글()

티스토리툴바