크롬 앱 만들기 (노마드코더)

style.css

html, body {
    height: 100%;
}

#clock {
    font-size: 50px;
    padding-top: 70px;
}

#greeting {
    font-size: 25px;
    color: aliceblue;
}

.whiteFont {
    color: rgb(255, 255, 255);
}

.container {
    height: 100%;
    background-color: rgb(0,0,0, 0.6);
    top: 0;
}

::placeholder{
    color: rgb(256, 256, 256, 0.6);
}

.hidden {
    display: none;
}

.js {
    text-align: center;
}
li {
    list-style: none;
}

.nameBlank {
    border: none; 
    background-color: transparent; 
    height: 40px; 
    width: 500px; 
    font-size: 20px;
    outline: none;
}

.y-btn {
    border: none;
    font-weight: 600;
    padding: 3px 6px;
}

.y-btn-color {
    color: #000000;
}

.ML20 {
    margin-left: 20px;
}

#weather {
    font-size: 20px;
}

 

background.js

const images = ["img01.jpg", "img02.jpg", "img03.jpg", "img04.jpg"];
const no = Math.floor(Math.random()*images.length);
const currentImg = `img/${images[no]}`;

document.body.style.backgroundImage = `url(${currentImg})`;
document.body.style.height = "100%";
document.body.style.backgroundSize = "cover";
document.body.style.backgroundRepeat ="no-repeat";

clock.js

const clock = document.querySelector("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);

greeting.js

const loginForm = document.querySelector("#login-form");
    const USERNAME_KEY = "userName";
    const isUserName = (localStorage.getItem(USERNAME_KEY));
    if(isUserName === null){
        loginForm.classList.remove("hidden");
    } else {
        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}!`;

        const todoBlank = document.querySelector("#todo-form");
        todoBlank.classList.remove("hidden");

        const todoList = document.querySelector("#todo-list");
        todoList.classList.remove("hidden");
    }
    
    loginForm.addEventListener("submit", loginClick);
    
    function paintGreetings(userName){
        const HIDDEN_CLASSNAME = "hidden";
        greeting.innerText = `Hello, ${userName}!`;
        greeting.classList.remove(HIDDEN_CLASSNAME);
    }

todo.js

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

if(localStorage.getItem("userName") === null){
    todoFrom.classList.add("hidden");
    todoList.classList.add("hidden");
} else {
    todoFrom.classList.remove("hidden");
    todoList.classList.remove("hidden");
}

todoFrom.addEventListener("submit", todoSubmit);

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

function addTodo(todo) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    span.innerText = todo;
    button.innerText = "x";
    button.classList.add("y-btn");
    button.classList.add("y-btn-color");
    button.classList.add("ML20");

    button.addEventListener("click", deleteTodo);
    li.appendChild(span);
    li.appendChild(button);

    const todoList = document.getElementById("todo-list");
    todoList.appendChild(li);

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

    updateTodoList();
}

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

    updateTodoList();
}

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 = "x";
    button.classList.add("y-btn");
    button.classList.add("y-btn-color");
    button.classList.add("ML20");
    button.addEventListener("click", deleteTodo);
    li.appendChild(span);
    li.appendChild(button);
    todoList.appendChild(li);
}

weather.js

const weather = document.querySelector("#weather span:first-child");
const city = document.querySelector("#weather span:last-child");
const API_KEY="7ae887e0190dd721c973671081d81c73";

function onGeoOk(position){
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;
    console.log("You live in", lat, lon);
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}`;

    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}`;
            const tmp = (data.main.temp).toFixed(1);
            weather.innerText = `${data.weather[0].main}  ${tmp}°`;
        });
}

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


navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

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>Momentum</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <div id="weather" class="whiteFont" style="position: absolute; top:0; right:20px;">
            <span></span>
            <span></span>
        </div>
        
        <h2 id="clock" class="js whiteFont"></h2>
        <h1 id="greeting" class="js fontShadow"></h1>
        <form id="login-form" class="js">
            <input class="js nameBlank whiteFont" type="text" placeholder="Please write your name" required>
        </form>
        <form id="todo-form" class="js">
            <input type="text" class="nameBlank js whiteFont" placeholder="Write a todo" required>
        </form>
        <ul id="todo-list" class="js whiteFont" style="font-size: 30px;">
        </ul>
        
        <!-- <div id="quote" class="js fontShadow" style="position: absolute; bottom: 20px; left: 50%; transform: translate(-50%, 0);">
            <span style="font-size: 25px;"></span>
            <span></span>
        </div> -->
        <div id="weather">
            <span></span>
            <span></span>
        </div>
    </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>

 

 

 

날씨 허용해주면 이래뜸