<!DOCTYPE html>
<html>
<head>
<title>something</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="js-clock">
<h1 class="js-title">00:00</h1>
</div>
<form class="js-form form">
<input type="text" placeholder="what is your name?" />
</form>
<h4 class="js-greetings greetings"></h4>
<form class="js-toDoForm">
<input type="text" placeholder="Write a to do" />
</form>
<ul class="js-toDoList"></ul>
<span class="js-weather"></span>
<script src="clock.js"></script>
<script src="gretting.js"></script>
<script src="todo.js"></script>
<script src="bg.js"></script>
<script src="weather.js"></script>
</body>
</html>
body {
background-color: #2c3e50;
}
h1 {
color: white;
}
.clicked {
color: #7f8c8d;
}
.form,
.greetings {
display: none;
}
.showing {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.bgImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
animation: fadeIn 0.5s linear;
}
const toDoForm = document.querySelector(".js-toDoForm"),
toDoInput = toDoForm.querySelector("input"),
toDoList = document.querySelector(".js-toDoList");
const TODOS_LS = "toDos";
let toDos = [];
function deleteToDo(event) {
const btn = event.target;
const li = btn.parentNode;
toDoList.removeChild(li);
const cleanToDos = toDos.filter(function (toDo) {
return toDo.id !== parseInt(li.id);
});
toDos = cleanToDos;
saveToDos();
}
function saveToDos() {
localStorage.setItem(TODOS_LS, JSON.stringify(toDos));
}
function paintToDo(text) {
const li = document.createElement("li");
const delBtn = document.createElement("button");
delBtn.innerText = "❌";
delBtn.addEventListener("click", deleteToDo);
const span = document.createElement("span");
const newId = toDos.length + 1;
span.innerText = text;
li.appendChild(delBtn);
li.appendChild(span);
li.id = newId;
toDoList.appendChild(li);
const toDoObj = {
text: text,
id: newId,
};
toDos.push(toDoObj);
saveToDos();
}
function handleSubmit(event) {
event.preventDefault();
const currentValue = toDoInput.value;
paintToDo(currentValue);
toDoInput.value = "";
}
function loadToDos() {
const loadedToDos = localStorage.getItem(TODOS_LS);
if (loadedToDos !== null) {
const parseToDos = JSON.parse(loadedToDos);
parseToDos.forEach(function (toDo) {
paintToDo(toDo.text);
});
}
}
function init() {
loadToDos();
toDoForm.addEventListener("submit", handleSubmit);
}
init();
const weather = document.querySelector(".js-weather");
const API_KEY = "ceaaf2c080e78958c442d031da859dfb";
const COORDS = "coords";
function getWeather(lat, lng) {
fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}
`)
.then(function (response) {
return response.json();
})
.then(function (json) {
const temperature = json.main.temp;
const place = json.name;
weather.innerText = `${temperature} @ ${place}`;
});
}
function saveCoords(coordsObj) {
localStorage.setItem(COORDS, JSON.stringify(coordsObj));
}
function handleGeoSucces(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const coordsObj = {
latitude,
longitude,
};
saveCoords(coordsObj);
getWeather(latitude, longitude);
}
function handleGeoError() {
console.log("Cant access geo location");
}
function askForCoords() {
navigator.geolocation.getCurrentPosition(handleGeoSucces, handleGeoError);
}
function loadCoards() {
const loadedCoords = localStorage.getItem(COORDS);
if (loadedCoords === null) {
askForCoords();
} else {
const parsedCoords = JSON.parse(loadedCoords);
getWeather(parsedCoords.latitude, parsedCoords.longitude);
}
}
function init() {
loadCoards();
}
init();
댓글 영역