현재 시간과 To do List

GunYong·2022년 8월 24일

Today I Learned

목록 보기

7/15

Todo-List 제목만들기

구현하고자 하는바

1. Make current time clock

2. (userName)'s to do List

3. Username을 받는 input과 button을 누르면 자체 새로고침되는 기본값을 지우고 h1헤더를 사용해서 목표인 (userName)'s to do List가 뜨는 것

4. userName은 localstorage에 저장까지 하기

5. Make Todo-List

Html

<!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>What to do?</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div>
            <span class="clock">clock</span>
            <form class="name__form hidden">
                <input required="required" placeholder="What is your name?" type="text">
                <button>Submit</button>
            </form>
            <h1 id="greeting" class="hidden"></h1>
            <div class="todoList">
                <input type="text" placeholder="Write what to do" class="todo__input">
                <button class="todo__button">+</button>
            </div>
            <div class="to__dos"></div>
        </div>
        <script src="clock.js"></script>
        <script src="entername.js"></script>
        <script src="todo.js"></script>
    </body>
</html>

CSS

html{
    background-color: beige;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
div{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.clock{
    font-size: 70px;
    color: plum;
}
.hidden{
    display:none;
}
.name__form{
    margin-bottom: 10px;
}
.name__form button{
    background-color: plum;
    border: none;
    border-radius: 5px;
    height: 25px;
}
.name__form input{
    height: 20px;
    border-radius: 5px;
}
h1{
    margin: 0;
    font-size: 30px;
    color:blueviolet;
    margin-bottom: 10px;
}
.todoList{
    display: flex;
    flex-direction: row;
    margin: 0;
}
.todo__input{
    padding: 5px 10px;
    margin-right: 10px;
    border-radius: 5px;
}
.todo__button{
    border-radius: 5px;
    border: none;
    background-color: plum;
    padding: 5px 10px;
}
.to__dos{
    font-size: 20px;
    margin-top: 10px;
}

entername.js

const enterNameForm = document.querySelector(".name__form");
const enterNameInput = enterNameForm.querySelector(".name__form input");
const greeting = document.querySelector("h1");

const nameSubmit = ((event) => {
    event.preventDefault();
    enterNameForm
        .classList
        .add("hidden");
    const userName = enterNameInput.value;
    localStorage.setItem("userName", userName);
    // save data to local storage
    greeting.innerText = `${userName}'s to do List`;
    greeting
        .classList
        .remove("hidden");
})

const getUserName = localStorage.getItem("userName");
if (getUserName === null) {
    enterNameForm
        .classList
        .remove("hidden");
    enterNameForm.addEventListener("submit", nameSubmit);
    // show the form
} else {
    greeting
        .classList
        .remove("hidden");
    greeting.innerText = `${getUserName}'s to do List`;
    // show the greeting
}

clock.js

const timeContainer = document.querySelector(".clock");
const clockManager = (() => {
    const time = new Date();
    const hours = time.getHours();
    const minutes = time.getMinutes();
    const seconds = time.getSeconds();
    timeContainer.innerText = `${hours < 10
        ? `0${hours}`
        : hours}:${minutes < 10
            ? `0${minutes}`
            : minutes}:${seconds < 10
                ? `0${seconds}`
                : seconds}`;
})
const init = (() => {
    clockManager();
    setInterval(clockManager, 1000);
})
init();

todo.js

const inputBox = document.querySelector('.todo__input');
const addButton = document.querySelector('.todo__button');
const toDOList = document.querySelector('.to__dos');

const addList = (() =>{
    const list = document.createElement('li');
    if(!inputBox.value){
        alert('Please enter what to do');
    } else{
        list.innerText = inputBox.value;
        toDOList.appendChild(list);
        inputBox.value = ""; 
    }
    // when you click toDOList it takes redline
    const checkFinishList = (() => {
        list.style.textDecoration = 'line-through red';
    })
    list.addEventListener('click',checkFinishList);
    //when you doubleclick toDoList it vanishes
    const deleteList = (() => {
        toDOList.removeChild(list);
    })
    list.addEventListener('dblclick',deleteList);
    
})  
addButton.addEventListener('click',addList);