#8 [2021 UPDATE] WEATHER

#8.0 Geolocation

navigator 함수 사용
아주 간단하게 내 위치 정보를 확인할 수 있다

function onGeoOk(position){
    const lat = position.coords.latitude;
    const long = position.coords.longitude;

    console.log("You live in ", lat, long );
}

function onGeoError(){
    alert("[Error : can't load your current location.]");
}


navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

 

OPEN API를 이용해서 날씨 정보를 불러와보자

Weather API - OpenWeatherMap

 

#8.1 Weather API

API는 다른 서버와 이야기할 수 있는 방법

fetch(url); 
promise 는 당장 실행되는 것이 아니라 시간이 좀 지난 뒤에 실행되는 것을 말한다.

 

//background.js

const images = ["img01.jpg", "img02.jpg", "img03.jpg"];

const no = Math.floor(Math.random()*3);
const currentImg = `img/${images[no]}`;
//document.body.style.backgroundImage = "src='img/img01.jpg'";

const image = document.createElement("img");
image.src = currentImg;
document.body.appendChild(image);

//body 태그에 들어갈 이미지 
//background-image: url('img/img01.jpg')

 

//clock.js

const clock = document.querySelector("h2#clock");

function getClock(){
    const date = new Date();

    let h = String(date.getHours()).padStart(2, "0");
    let m = String(date.getMinutes()).padStart(2, "0");
    let s = String(date.getSeconds()).padStart(2, "0");

    let t = `${h}:${m}:${s}`;

    clock.innerText = t;
}

getClock();
setInterval(getClock, 1000);

 

//todo.js

const todoFrom = document.getElementById("todo-form");
const todoList = document.getElementById("todo-list");

//form input 내용을 submit(enter) 했을 때
todoFrom.addEventListener("submit", todoSubmit);

function todoSubmit(event) {
    event.preventDefault();
    const todo = document.querySelector("#todo-form input").value;

    addTodo(todo);
  // todoList.innerHTML += "<li>"+todo+" <span>[x]</span> </li>";
}

function addTodo(todo) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    span.innerText = todo;
    button.innerText = "❌";
    button.addEventListener("click", deleteTodo);
    li.appendChild(span);
    li.appendChild(button);
    todoList.appendChild(li);

    document.querySelector("#todo-form input").value = "";

    // const todos = [];

    // const newTodoObj = {
    //     id: Date.now(),
    //     text: todo
    // };

    // todos.push(newTodoObj);
    
    // localStorage.setItem("todos", todos);

    // for(let i = 0; i < todos.length; i++){
    //     console.log("todos: "+ todos[i].id + ", " + todos[i].text);
    // }

    updateTodoList();
}

function deleteTodo(event) {
    const li = event.target.parentElement;
    li.remove();

    updateTodoList();
}

//localStorage에 todoList 저장하기
//브라우저 실행시마다 localStorage에 있는 todoList 불러오기
//todo 삭제 또는 todo 추가할 때마다 실행할 function
function updateTodoList() {
    const todos = [];

    const todoList = document.getElementById("todo-list");
    const todoListCount = todoList.childElementCount;
    const todoResult = document.querySelectorAll("#todo-list li span");

    for (let i = 0; i < todoListCount; i++) {
        todos.push(todoResult[i].innerText);
    }

    saveInStorage(JSON.stringify(todos));
}

function saveInStorage(todos) {
    localStorage.setItem("todos", todos);
}

showTodos();

function showTodos() {
    const todos = JSON.parse(localStorage.getItem("todos"));
    
    if(localStorage.getItem("todos") !== null){
        const parseTodos = JSON.parse(localStorage.getItem("todos"));
        parseTodos.forEach((item) => callSavedTodos(item));
    }
}

function callSavedTodos(item) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    span.innerText = item;
    button.innerText = "❌";
    button.addEventListener("click", deleteTodo);
    li.appendChild(span);
    li.appendChild(button);
    todoList.appendChild(li);
}

 

//weather.js

const API_KEY = "9e2a05c90c2ad4186c2e24322a1b68f7";
function onGeoOk(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("[Error : can't load your current location.]");
}


navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

 

//quotes.js

const quotes = [
    {
        quote: "삶이 있는 한 희망은 있다",
        author: "키케로"
    },
    {
        quote: "산다는것 그것은 치열한 전투이다.",
        author: "로망로랑"
    },
    {
        quote: "하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다.",
        author: "사무엘존슨"
    },
    {
        quote: "언제나 현재에 집중할 수 있다면 행복할 것이다.",
        author: "파울로 코엘료"
    },
    {
        quote: "진정으로 웃으려면 고통을 참아야하며 , 나아가 고통을 즐길 줄 알아야 해",
        author: "찰리 채플린"
    },
    {
        quote: "직업에서 행복을 찾아라. 아니면 행복이 무엇인지 절대 모를 것이다.",
        author: "엘버트 허버드"
    },
    {
        quote: "행복의 문이 하나 닫히면 다른 문이 열린다 그러나 우리는 종종 닫힌 문을 멍하니 바라보다가 우리를 향해 열린 문을 보지 못하게 된다",
        author: "헬렌켈러"
    },
    {
        quote: "피할수 없으면 즐겨라",
        author: "로버트 엘리엇"
    },
    {
        quote: "단순하게 살아라. 현대인은 쓸데없는 절차와 일 때문에 얼마나 복잡한 삶을 살아가는가?",
        author: "이드리스 샤흐"
    },
    {
        quote: "너무 소심하고 까다롭게 자신의 행동을 고민하지 말라 . 모든 인생은 실험이다 . 더많이 실험할수록 더나아진다",
        author: "랄프 왈도 에머슨"
    }
];

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");

let sequence = Math.floor(Math.random()*quotes.length);
const todaysQuote = quotes[sequence].quote;
const todaysAuthor = quotes[sequence].author;
quote.innerText = todaysQuote;
author.innerText = `- ${todaysAuthor}`;

 

//greetings.js

window.onload = function(){
    const loginForm = document.querySelector("#login-form");
    const USERNAME_KEY = "userName";
    const isUserName = (localStorage.getItem(USERNAME_KEY));
    if(isUserName === null){
        // show the form
        loginForm.classList.remove("hidden");
    } else {
        // show the greetings
        paintGreetings(isUserName);
        loginForm.classList.add("hidden");
    }

    
    function loginClick(event) {
        const HIDDEN_CLASSNAME = "hidden";
        event.preventDefault();
        loginForm.classList.add(HIDDEN_CLASSNAME);
        const userName = document.querySelector("#login-form input").value;
        
        const greeting = document.querySelector("#greeting");
        localStorage.setItem(USERNAME_KEY, userName);
        // greeting.innerText = "Hello "+ userName;
        greeting.innerText = `Hello ${userName}`;
    }
    
    loginForm.addEventListener("submit", loginClick);
    
    function paintGreetings(userName){
        const HIDDEN_CLASSNAME = "hidden";
        greeting.innerText = `Hello ${userName}`;
        greeting.classList.remove(HIDDEN_CLASSNAME);
    }

}

 

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatiable" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index.html</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <form id="login-form">
        <input type="text" placeholder="Please write your name" max-legnth="20" required>
        <button>Log in</button>
    </form>
    <h1 id="greeting"></h1>

    <h2 id="clock"></h2>

    <div id="quote">
        <span></span>
        <span></span>
    </div>

    <form id="todo-form">
        <input type="text" placeholder="Write a todo and Press Enter Key" required>
    </form>
    <ul id="todo-list">
    </ul>

    <div id="weather">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <script src="js/greeting.js"></script>
    <script src="js/clock.js"></script>
    <script src="js/quotes.js"></script>
    <script src="js/background.js"></script>
    <script src="js/todo.js"></script>
    <script src="js/weather.js"></script>
</body>
</html>

.hidden {
    display: none;
}

 

기본 마무리 후

css 정리한 새로운 momentum 개선해야겠다