본문 바로가기
  • GDG on campus Ewha Tech Blog
3-2기 스터디/프론트엔드 입문

[9주차] JavaScript (5)

by rovemin 2022. 6. 30.

[노마드코더] 바닐라 JS로 크롬 앱 만들기

 

1. To Do 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">
        <link rel="stylesheet" href="css/style.css">
        <title>Plan Your Day</title>
    </head>
    <body>
        <h2 id="clock">00:00:00</h2>
        <form class="hidden" id="login-form">
            <input
                required
                maxlength="15"
                type="text" 
                placeholder="What is your name?" />
            <input type="submit" value="Log In"/>
        </form>
        <h1 class="hidden" id="greeting"></h1>
        <form id="todo-form">
            <input type="text" placeholder="Write a To Do and Press Enter" required />
        </form>
        <ul id="todo-list"></ul>
        <div id="quote">
            <span></span>
            <span></span>
        </div>
        <script src="js/greetings.js"></script>
        <script src="js/clock.js"></script>
        <script src="js/quotes.js"></script>
        <script src="js/backgroud.js"></script>
        <script src="js/todo.js"></script>
    </body>
</html>

 

CSS

.hidden {
    display: none;
}

 

JavaScript

const toDoForm = document.querySelector("#todo-form");
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.querySelector("#todo-list");

const TODOS_KEY = "todos";

let toDos = [];

function saveToDos() {
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

function deleteToDo(event) {
    const li = event.target.parentElement;
    li.remove();
    toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
    saveToDos();
}

function paintToDo(newToDo) {
    const li = document.createElement("li");
    li.id = newToDo.id;
    const span = document.createElement("span");
    span.innerText = newToDo.text;
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo);
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value = "";
    const newToDoObj = {
        text: newToDo,
        id: Date.now(),
    };
    toDos.push(newToDoObj);
    paintToDo(newToDoObj);
    saveToDos();
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

if (savedToDos !== null) {
    const parsedToDos = JSON.parse(savedToDos);
    toDos = parsedToDos;
    parsedToDos.forEach(paintToDo);
}

 

2. Weather 기능

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">
        <link rel="stylesheet" href="css/style.css">
        <title>Plan Your Day</title>
    </head>
    <body>
        <h2 id="clock">00:00:00</h2>
        <form class="hidden" id="login-form">
            <input
                required
                maxlength="15"
                type="text" 
                placeholder="What is your name?" />
            <input type="submit" value="Log In"/>
        </form>
        <h1 class="hidden" id="greeting"></h1>
        <form id="todo-form">
            <input type="text" placeholder="Write a To Do and Press Enter" required />
        </form>
        <ul id="todo-list"></ul>
        <div id="quote">
            <span></span>
            <span></span>
        </div>
        <div id="weather">
            <span></span>
            <span></span>
        </div>
        <script src="js/greetings.js"></script>
        <script src="js/clock.js"></script>
        <script src="js/quotes.js"></script>
        <script src="js/backgroud.js"></script>
        <script src="js/todo.js"></script>
        <script src="js/weather.js"></script>
    </body>
</html>

 

CSS

.hidden {
    display: none;
}

 

JavaScript

const API_KEY = "e1a4e792b02f0ee5531efe946aaf67ef";

function onGeoSuccess(position) {
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;
    fetch(url)
        .then(response => response.json())
        .then(data => {
            const weather = document.querySelector("#weather span:first-child");
            const city = document.querySelector("#weather span:last-child");
            city.innerText = data.name;
            weather.innerText = `${data.weather[0].main} / ${data.main.temp}`;
        });
}

function onGeoError() {
    alert("Can't find you. No weather for you.");
}

navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError);
저작자표시 비영리

'3-2기 스터디 > 프론트엔드 입문' 카테고리의 다른 글

[8주차] JavaScript (4)  (0) 2022.06.30
[7주차] JavaScript (3)  (0) 2022.06.30
[6주차] JavaScript (2)  (0) 2022.06.23
[5주차] JavaScript (1)  (0) 2022.06.23
[4주차] CSS (2)  (0) 2022.06.21

관련글

댓글

티스토리툴바