1. element
<!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>Momentum App</title>
</head>
<body>
<form id="login-form" class="hidden">
<input required maxlength="15" type="text" placeholder="What is your name?" />
<button>Log In</button>
</form>
<h2 id="clock">00:00:00</h2>
<h1 id="greeting" class="hidden"></h1>
<form id="todo-form"> // 값을 받기위해 form 태그 추가
<input type="text" placeholder="Write a To Do and Press Enter">
</form>
<ul id="todo-list"></ul> // ul태그를 만들고 js에서 li태그를 추가해야함
<div id="goodSentance">
<span></span>
</div>
<script src="js/clock.js"></script>
<script src="js/greetings.js"></script>
<script src="js/goodSentance.js"></script>
<script src="js/background.js"></script>
<script src="js/todo.js"></script> // 새로운 파일 생성
</body>
</html>const todoForm = document.getElementById("todo-form")
const toDoInput = todoForm.querySelector("input") // 미리 찾은 엘리멘트에서 다시 검색할 수 있다.
const toDoList = document.getElementById("todo-list")
function deleteTodo(event) {
// console.log(event.target.parentElement) // 클릭된 element의 부모
const li = event.target.parentElement
li.remove() // 버튼의 부모인 li를 찾아서 span과 버튼도 삭제되게
}
function paintToDo(newTodo) {
const li = document.createElement("li") // li태그를 만들고 그 안에
const span = document.createElement("span") // span 태그와
span.innerHTML = newTodo
const button = document.createElement("button") // 버튼 넣기
button.innerHTML = "❌"
button.addEventListener("click", deleteTodo)
li.appendChild(span) // li태그에 span 태그와
li.appendChild(button) // 버튼을 추가하고
toDoList.appendChild(li) // li태그를 ul태그에 추가하기
}
function handelToDoSubmit(event) {
event.preventDefault()
const newTodo = toDoInput.value
toDoInput.value = "" // 엔터치면 다시 공백으로 만들기
paintToDo(newTodo)
}
todoForm.addEventListener("submit", handelToDoSubmit)아래 캡쳐는 deleteTodo 함수에서
console.log(event.target.parentElement) 을 확인한 것이다.
X 버튼을 눌렀을 때, 해당 버튼의 부모를 확인할 수 있다.
2. localStorage
const todoForm = document.getElementById("todo-form")
const toDoInput = todoForm.querySelector("input")
const toDoList = document.getElementById("todo-list")
const TODOS_KEY = "todos"
let toDos = [] // localStorage에 저장할 투두리스트
function saveToDos() {
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)) // 배열로 저장하기 위해
}
function deleteTodo(event) {
// console.log(event.target.parentElement) // 클릭된 element의 부모
const li = event.target.parentElement
li.remove() // li 태그 삭제
toDos = toDos.filter(toDo => toDo.id !== parseInt(li.id)) // 선택된 요소 배열에서 삭제 후
saveToDos() // localStroage에 반영
}
function paintToDo(newTodo) {
const li = document.createElement("li")
li.id = newTodo['id']
const span = document.createElement("span")
span.innerHTML = newTodo['text']
const button = document.createElement("button")
button.innerHTML = "❌"
button.addEventListener("click", deleteTodo)
li.appendChild(span)
li.appendChild(button)
toDoList.appendChild(li)
}
function handelToDoSubmit(event) {
event.preventDefault()
const newTodo = toDoInput.value
toDoInput.value = ""
const newTodoObj = { // 삭제할 때 id를 확인하고 삭제하기 위해 객체로 데이터 저장
text: newTodo,
id: Date.now()
}
toDos.push(newTodoObj)
paintToDo(newTodoObj)
saveToDos()
}
todoForm.addEventListener("submit", handelToDoSubmit)
// 처음에 localStorage에 데이터가 있는 경우 가져와서 화면에 보여주기
const savedToDos = localStorage.getItem(TODOS_KEY)
if (savedToDos) { // 만약 기존 데이터가 있는 경우 실행
const parsedToDos = JSON.parse(savedToDos)
toDos = parsedToDos
parsedToDos.forEach(paintToDo)
}
3. 프로세스 정리
- 처음 실행했을 때 로컬스토리지에 투두리스트 있는 경우, 기존데이터 보여주기
- 투두리스트를 작성해서 enter 제출하면 handelToDoSubmit 함수에서 객체를 만들기
- paintToDo 함수로 li태그와 버튼을 만들어서 ul태그 자식으로 생성 (화면)
- saveToDos 함수로 로컬스토리지에 새로운 데이터 반영 (DB)
- X 버튼을 누르면 deleteTodo 함수 실행
- 해당 li 태그 삭제 (화면)
- 로컬스토리지에 삭제된 데이터 제외한 데이터 반영 (DB)
4. weather
const API_KEY = "71922718a637ab462406a66d14d54997"
function onGeoOk(position) {
// 위도와 경도 받기
const lat = position.coords.latitude
const lon = position.coords.longitude
// 날씨 API 활용
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.innerHTML = 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(onGeoOk, onGeoError)참고 : https://developer.mozilla.org/ko/docs/Web/API/Geolocation/getCurrentPosition
https://openweathermap.org/
기록하는 백엔드 개발자