• fetch는 promise -> 반응이 일어나는 데 시간이 걸림
<!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>Hello from HTML!</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">
        <input type="text" placeholder="Write a To Do and Press Enter" required/>
    </form>
    <ul id="todo-list"></ul>
    <div id="quote">
        <span></span>
        <span></span>
    </div>
    <div id="weather">
        <span></span>
        <span></span>
    </div>
    <script src="js/clock.js"></script>
    <script src="js/greetings.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>
const API_KEY = "a6f2559162df44deffc73c104257b1ad";

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 weatherContainer = document.querySelector("#weather span:first-child");
        const city = document.querySelector("#weather span:last-child");
        city.innerText = data.name;
        weatherContainer.innerText = `${data.weather[0].main} / ${data.main.temp}`;
    });
}

function onGeoError() {
    alert("널 못찾았다..날씨 못줘");
}

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

'JavaScript' 카테고리의 다른 글

#8.0 Geolocation  (2) 2023.02.15
#7.8 Deleting To Dos part Three  (1) 2023.02.15
#7.7 Deleting To Dos part Two  (1) 2023.02.15
#7.6 Deleting To Dos part One  (1) 2023.02.15
#7.5 Loading To Dos part Two  (2) 2023.02.15 
function onGeoOk(position){
    const lat = position.coords.latitude;
    const lng = position.coords.longitude;
    console.log("너는 여기있다", lat, lng);
}

function onGeoError(){
    alert("널 못찾았다..날씨 못줘");
}

navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError);

'JavaScript' 카테고리의 다른 글

#8.1 Weather API  (1) 2023.02.16
#7.8 Deleting To Dos part Three  (1) 2023.02.15
#7.7 Deleting To Dos part Two  (1) 2023.02.15
#7.6 Deleting To Dos part One  (1) 2023.02.15
#7.5 Loading To Dos part Two  (2) 2023.02.15 
function deleteToDo(event) {
    const li = event.target.parentElement;
    li.remove();
    toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id)); //우리가 클릭한 li.id와 다른 toDo는 남겨두겠다, 데이터타입 같게 만들기
    saveToDos();
}

'JavaScript' 카테고리의 다른 글

#8.1 Weather API  (1) 2023.02.16
#8.0 Geolocation  (2) 2023.02.15
#7.7 Deleting To Dos part Two  (1) 2023.02.15
#7.6 Deleting To Dos part One  (1) 2023.02.15
#7.5 Loading To Dos part Two  (2) 2023.02.15
  •  forEach함수는 paintToDo를 parsedToDos배열의 요소마다 실행
  •  forEach는 각각의 item을 줌, item은 object가 됨
  • 지우고 싶은 item를 제외하고 새 array를 만듦 

filter함수는 true인 경우에만 배열에 남아있게 해줌

 

 

'JavaScript' 카테고리의 다른 글

#8.0 Geolocation  (2) 2023.02.15
#7.8 Deleting To Dos part Three  (1) 2023.02.15
#7.6 Deleting To Dos part One  (1) 2023.02.15
#7.5 Loading To Dos part Two  (2) 2023.02.15
#7.4 Loading To Dos part One  (1) 2023.02.15
  • Date.now() -> 밀리초를 주는 함수(1000분의 1초) ->랜덤숫자얻기에 유용
const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos";

let toDos = [];//항상 빈 array로 시작하므로 업데이트 가능한 let으로

function saveToDos() {
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); //배열을 문자열로 만들어줌
}

function deleteToDo(event) {
    const li = event.target.parentElement;
    console.log(li.id);
    li.remove();
}
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); //button을 클릭하면 event를 얻음
    li.appendChild(span);
    li.appendChild(button); //button은 span뒤에 있어야 함
    toDoList.appendChild(li);
}
function handleToDoSubmit(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    const newTodoObj = {
        text:newTodo,
        id: Date.now(), //각각의 li item을 구별
    }
    toDos.push(newTodoObj); //빈 array에 push
    paintToDo(newTodoObj);
    saveToDos();
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY); //그냥 string

if (savedToDos !== null) {
    const parsedToDos = JSON.parse(savedToDos);//array
    toDos = parsedToDos; //toDos를 업데이트, 이전 배열들도 복원
    parsedToDos.forEach(paintToDo);
}

'JavaScript' 카테고리의 다른 글

#7.8 Deleting To Dos part Three  (1) 2023.02.15
#7.7 Deleting To Dos part Two  (1) 2023.02.15
#7.5 Loading To Dos part Two  (2) 2023.02.15
#7.4 Loading To Dos part One  (1) 2023.02.15
#7.3 Saving To Dos  (4) 2023.02.15 
const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos";

let toDos = [];//항상 빈 array로 시작하므로 업데이트 가능한 let으로

function saveToDos() {
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); //배열을 문자열로 만들어줌

}

function deleteToDo(event) {
  const li = event.target.parentElement;//target:클릭된 html element(button), parentElement-Element의 부모
  li.remove();
}
function paintToDo(newTodo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  span.innerText = newTodo;
  const button = document.createElement("button");
  button.innerText = "❌";
  button.addEventListener("click", deleteToDo); //button을 클릭하면 event를 얻음
  li.appendChild(span);
  li.appendChild(button); //button은 span뒤에 있어야 함
  toDoList.appendChild(li);
}
function handleToDoSubmit(event) {
  event.preventDefault();
  const newTodo = toDoInput.value;
  toDoInput.value = "";
  toDos.push(newTodo); //빈 array에 push
  paintToDo(newTodo);
  saveToDos();
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY); //그냥 string

if (savedToDos !== null) {
  const parsedToDos = JSON.parse(savedToDos);//array
  toDos = parsedToDos; //toDos를 업데이트, 이전 배열들도 복원
  parsedToDos.forEach(paintToDo);
}

진짜 개빢친다

'JavaScript' 카테고리의 다른 글

#7.7 Deleting To Dos part Two  (1) 2023.02.15
#7.6 Deleting To Dos part One  (1) 2023.02.15
#7.4 Loading To Dos part One  (1) 2023.02.15
#7.3 Saving To Dos  (4) 2023.02.15
#7.2 Deleting To Dos  (2) 2023.02.15
  • JSON.parse : 자바스크립트 객체를 만들어줌
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input"); //document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos";

const toDos = [];

function saveToDos(){
    localStorage.setItem(TODOS_KEY,JSON.stringify(toDos)); //배열을 문자열로 만들어줌
}

function deleteToDo(event){
    const li = event.target.parentElement;//target:클릭된 html element(button), parentElement-Element의 부모
    li.remove();
}

function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click",deleteToDo); //button을 클릭하면 event를 얻음
    li.appendChild(span);
    li.appendChild(button); //button은 span뒤에 있어야 함
    span.innerText = newTodo;
    toDoList.appendChild(li);
}

function toDoSubmit(event){
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    toDos.push(newTodo);
    paintToDo(newTodo);
    saveToDos(); 
}

toDoForm.addEventListener("submit",toDoSubmit);

function sayHello(item){
    console.log("이거다",item);
}

const savedToDos = localStorage.getItem(TODOS_KEY); //그냥 string

if(saveToDos !== null){
    const parsedToDos = JSON.parse(savedToDos); //array
    parsedToDos.forEach(sayHello); //array에 있는 각각의 item에 대해서 함수를 실행하게 함 
    //parsedToDos.forEach((item) => console.log("이거다",item));
}

'JavaScript' 카테고리의 다른 글

#7.6 Deleting To Dos part One  (1) 2023.02.15
#7.5 Loading To Dos part Two  (2) 2023.02.15
#7.3 Saving To Dos  (4) 2023.02.15
#7.2 Deleting To Dos  (2) 2023.02.15
#7.1 Adding ToDos  (2) 2023.02.15
  • 브라우저에 저장하려면 localStorage 필요
  •  localStorage는 오직 텍스트만 저장 가능
  • JSON.stringify : 오브젝트이든 배열이든 string으로 만들어줌  
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input"); //document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");

const toDos = [];

function saveToDos(){
    localStorage.setItem("todos",JSON.stringify(toDos)); //배열을 문자열로 만들어줌
}

function deleteToDo(event){
    const li = event.target.parentElement;//target:클릭된 html element(button), parentElement-Element의 부모
    li.remove();
}

function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click",deleteToDo); //button을 클릭하면 event를 얻음
    li.appendChild(span);
    li.appendChild(button); //button은 span뒤에 있어야 함
    span.innerText = newTodo;
    toDoList.appendChild(li);
}

function toDoSubmit(event){
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    toDos.push(newTodo);
    paintToDo(newTodo);
    saveToDos(); 
}

toDoForm.addEventListener("submit",toDoSubmit);

'JavaScript' 카테고리의 다른 글

#7.5 Loading To Dos part Two  (2) 2023.02.15
#7.4 Loading To Dos part One  (1) 2023.02.15
#7.2 Deleting To Dos  (2) 2023.02.15
#7.1 Adding ToDos  (2) 2023.02.15
#7.0 Setup  (1) 2023.02.15

+ Recent posts

티스토리툴바