const newToDoObject = {
text: newToDo,
id: Date.now(),
};
toDos.push(newToDoObject);
paintToDo(newToDoObject);
todo들에 고유한 아이디를 부여하기 위해서 다음과 같이 작성한다.
Date.now : 메소드는 UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리초를 반환합니다. (MDN)
toDos.push와 paintToDo에는 newToDo 대신 새로만든 오브젝트인 newToDoObject를 넣어 준다.
로컬스토리지에 이런 식으로 저장이 된다.
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);
}
그리고 paintToDo 함수의 span.innerText 부분을 newToDo.text로 바꿔준다. text만 출력되어야 하기 때문이다.
그리고 li.id = newTodo.id라는 항목을 추가해 주어서 li의 아이디를 newTodo의 id와 연결시켜 준다.
function deleteToDo(event) {
const li = event.target.parentElement;
li.remove();
toDos = toDos.filter((v) => v.id !== parseInt(li.id));
saveToDos()
}
filter를 이용해서 li의 id와 같은 것만 걸러 준 새 배열로 반환 시키도록 한다.
마지막에 saveToDos() 함수를 호출시켜서 저장시키는 것을 잊으면 안 된다.
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("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((v) => v.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 newToDoObject = {
text: newToDo,
id: Date.now(),
};
toDos.push(newToDoObject);
paintToDo(newToDoObject);
saveToDos();
}
toDoForm.addEventListener("submit", handleToDoSubmit);
const savedToDos = localStorage.getItem(TODOS_KEY);
if (savedToDos !== null) {
const parseToDos = JSON.parse(savedToDos);
toDos = parseToDos
parseToDos.forEach(paintToDo);
}
날씨
navigator.geolocation.getCurrentPosition()
날씨를 불러오기 위해선 먼저 현재 위치를 알아야 하는데, 이때 navigator.geolocation.getCurrntPosition() 을 사용한다
이것을 부르면 브라우저에서 위치 좌표를 준다.
인자로 두 개가 들어가는데, 하나는 잘 모든 게 잘 됐을 때 실행 될 함수, 하나는 오류가 났을 때 실행 될 함수이다.
function onGeoOK(position) {
console.log(position);
}
function onGeoError() {
alert("Can't find you. No weather for you.");
}
navigator.geolocation.getCurrentPosition(onGeoOK, onGeoError);
함수를 입력해준다. 그리고 인자로 입력해 준다.
그런 다음 페이지로 와서 위치 허용을 누르면 콘솔에 다음과 같은 텍스트가 출력된다.
여기에 나오는 정보를 이용해서 위도와 경도를 구할 수 있다.
function onGeoOK(position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
console.log(lat,lng);
}
위도와 경도가 출력됨
이 숫자들을 장소로 바꿔줄 서비스를 사용해야 하고, api 계정을 열어야 한다.
https://home.openweathermap.org/
Members
Enter your email address and we will send you a link to reset your password.
home.openweathermap.org
이것을 이용
페이지를 들어가면 이런 링크가 있는데, 이것을 복사한 후 {lat} {lon} {API key}의 부분에 아까 우리가 구했던 값과 홈페이지의 내 프로필에 있는 API key를 복사해서 넣어준 후에 링크에 들어가면 날씨 정보가 나온다. (괄호까지 없애야 함)
const API_KEY = ""
function onGeoOK(position) {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
console.log(url);
}
API_KEY에다 자신의 api 키 넣는다.
그리고 함수 안에 url 작성, {lat} {lon} {API key} 연결시켜 준다.
콘솔로 출력했을 때 나오는 링크를 들어갔을 때 정상적으로 나오면 잘 된 것.
fetch()를 사용하여 URL 얻기
function onGeoOK(position) {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
fetch(url);
}
(주소의 끝에다가 &units=metric 적으면 화씨 => 섭씨로 바뀜)
네트워크에 들어가면 자바스크립트가 url을 불렀다는 것을 알 수 있다.
더블클릭하고 미리보기
이 정보를 활용해야 함
function onGeoOK(position) {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
fetch(url).then(response => response.json());
}
fetch(url).then(response => response.json());
이것을 이용
<div id="weather">
<span></span>
<span></span>
</div>
html
function onGeoOK(position) {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
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}`;
});
}
쿼리셀렉터를 이용하여 html 태그를 불러오고, 각 태그의 이너텍스트를 다음과 같이 연결시켜 준다.
이렇게 하면 모든 게 끝이 났다..!!
css를 이용하여 다음과 같이 디자인해보았다.
@charset "utf-8";
@font-face {
font-family: 'SUITE-Regular';
font-weight: 400;
font-style: normal;
}
body {
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
color: #fff;
font-family: 'SUITE-Regular';
font-weight: 200;
}
.container {
width: 98%; height: 100vh;
display: flex;
justify-content: space-between;
flex-direction: column;
position: absolute;
z-index: 1;
}
.hidden {
display: none;
}
h1 {
transition: all .5s;
font-weight: 100;
}
#weather {
margin-top: 10px;
text-align: right;
}
#clock {
font-size: 130px;
}
.login-todo-container {
width: 100%;
height: 500px;
text-align: center;
}
.todo-container {
margin-top: 50px;
}
#todo-form {
margin-bottom: 20px;
}
#todo-list {
line-height: 2;
width: 200px;
margin: 0 auto;
font-size: 16px;
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
padding: 20px;
}
#todo-list li {
display: flex;
justify-content: space-between;
}
button {
background-color: transparent;
border: none;
}
input {
background-color: transparent;
border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.434);
text-align: center;
}
input::placeholder {
color: #ffffff8b;
}
#quote {
margin-bottom: 100px;
}
#quote span {
display: block;
text-align: center;
}
img {
width: 100%;
height: 100vh;
object-fit: cover;
z-index: -10;
opacity: 0.9;
filter: brightness(0.8);
}
css코드