Vanilla JS로 To DO List Web 사이트 만들기 2

김동현·2022년 6월 6일
0

VanillaJS To Do List

목록 보기
2/4

이번 시간 부터는 저번에 요약했던 기능들을 완성할 때 마다 지우면서 진행할 예정이다.

다음에 이런 작업을 진행할 때는 직접 만든 사이트를 이용하면 좋겠다...

저번에 요약한 내용은 다음과 같다.

1. 사용자의 이름 또는 닉네임을 입력 받는다.
2. 화면에 이름이 출력되면서, 이름 입력창이 시계로 바뀐다.
3. Create My To-Do-List 버튼을 누르면 작성 페이지로 이동한다.
4. 작성 폴더를 만들고 삭제할 수 있는 페이지가 먼저 나온다.
5. 더블 클릭을 통해 To-Do-List 작성 페이지로 넘어갈 수 있다.
6. Drag, Drop 기능으로 폴더를 삭제할 수 있다.
7. 한번 클릭 시 미리보기 모달창을 띄워준다.
8. To-Do-List 작성 창은 폴더와 비슷하다.

오늘은 사용자의 이름을 입력 받아 화면에 보여주는것을 만들 예정이다.

일단 디자인적인 요소는 나중에 하기로 생각하고 있다. 필요한 기능을 만든 뒤 해도 늦지않기 떄문이다 ㅎㅎ

다음과 같이 input태그를 통해 입력받은 값을 화면에 출력해주었다.
계속해서 값을 가져가기 위해서 localstorage를 사용했다.

또한 날씨 API를 이용해 날씨를 보여주려 했지만
무엇이 문제인지 잘 작동되지 않는다... 하라는 거 다했는데

하지만 오늘은 여기까지 내일의 나를 위해서!

먼저 작성한 코드는 다음과 같다.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="index.css" />
        <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>Document</title>
    </head>
    <body>
        <div class="container">
            <header class="header">
                <div class="icon__container">
                    <h3 class="user"></h3>
                </div>
            </header>
            <div class="main__text__container">
                <h1 class="main__text">
                    What do you want to do?
                    <h2 class="user__name hidden"></h2>
                </h1>
                <input class="user__name__input" type="text" placeholder="Enter your name" />
                <a class="to__do__link" href="">
                    <h1>Create your To-Do-List -></h1>
                </a>
            </div>
        </div>
        <script src="index.js"></script>
    </body>
</html>```


CSS
@import './reset.css';

.container {
    width: 100vw;
    height: 100vh;
    background-size: cover;
}

.header {
    display: flex;
    justify-content: right;
}

.main__text__container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main__text {
    font-size: 32px;
    color: white;
    margin-bottom: 30px;
}

.user {
    color: white;
}

.user__name {
    font-size: 24px;
    color: white;
    margin-bottom: 150px;
}

.user__name__input {
    width: 350px;
    height: 40px;
    border: 1px solid black;
    border-radius: 10px;
    margin-bottom: 150px;
}

.to__do__link {
    color: white;
    text-decoration: none;
}

.to__do__link:active {
    text-decoration: none;
}

.to__do__link h1:hover {
    color: black;
    transition: color 0.4s linear;
}

.to__do__link h1 {
    color: white;
}

.hidden {
    display: none;
}



Javascript

const container = document.querySelector('.container');
const ImageArray = ['Red.jpg', 'orange.jpg', 'yellow.jpg', 'green.jpg', 'blue.jpg', 'navy.jpg', 'purple.jpg'];
const user = document.querySelector('.user');
const userName = document.querySelector('.user__name');
const input = document.querySelector('.user__name__input');

const HIDDEN = 'hidden';
const isIn = localStorage.getItem('user');

const date = new Date();
const index = date.getDay();

if (isIn !== null) {
    user.innerText = `Hello ${isIn}`;
    userName.innerText = `${isIn}`;
    userName.classList.remove(HIDDEN);
    input.classList.add(HIDDEN);
} else {
    user.innerText = `Hello`;
    userName.classList.add(HIDDEN);
    input.classList.remove(HIDDEN);
}

const pressEnterKey = (e) => {
    const keyCode = e.keyCode;
    if (keyCode === 13) {
        localStorage.setItem('user', `${input.value}`);
        window.location.reload();
    }
};

container.style.backgroundImage = `url(./background/${ImageArray[index]})`;

navigator.geolocation.getCurrentPosition(async (position) => {
    if (position) {
        const latitude = position.coords.latitude;
        const longitude = position.coords.longitude;
        const weatherData = await fetch(
            `https://api.openweathermap.org/data/3.0/onecall?lat=${latitude}&lon=${longitude}&exclude=current&appid=c5932b21b8f7196c8f78ffbc47bd638b`
        );
        console.log(weatherData);
    }
});

document.addEventListener('keydown', pressEnterKey);
input.addEventListener('change', (e) => {
    console.log(e);
});

github : https://github.com/Kimdong11/VanillaJS-TodoList

profile
프론트엔드 개발자...이고 싶은 사람

0개의 댓글