const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_key}`

fetch를 이용해서 도시와 날씨 정보를 가져온다.

일반적으로 fetch의 사용법은 다음과 같다.

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

이 경우에는 api 를 호출해서, data를 json으로 받은 후 데이터에서 도시 이름과 날씨를 받아야 한다.

fetch(url).then(response => response.json()).then(data => {
const city = document.querySelector(#weather span:first-child);
const weather = document.querySelector(#weather span:last-child);
city.innerText = data.name
weather.innerText = `${data.weather[0].main} / {data.main.temp}`

html에는 해당 영역을 만들어두어야 한다.

navigator.geolocation.getCurrentPosition(GeoSuccess, GeoError);

성공, 실패 경우에 대한 함수를 정의한다. 성공 시에는 인자에 position을 전달한다.

function GeoSuccess(position){
    const lat = position.coords.latitude;
    const lng = position.coords.longitude;
    console.log("You are in "+ lat, lng);

실패시에는 실패 메시지를 출력한다.

function GeoError(){
    console.log("No weather");
}

function deleteTodo(event){
    const li = event.target.parentElement;
    li.remove();
    toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id))
    saveTodo();
}

newTodo를 newTodoObj로 변경해서 저장한다.

    const newTodoObj = {
        text : newTodo,
        id : Date.now(),
    }

id에는 Date.now()를 이용해 랜덤값을 준다. 그다음에 toDos array에는 newTodoObj를 추가한다. 그러면 사용자가 submit 했을때 텍스트와 id 값이 함께 저장된다. 저장된 값이 있을때 아이템을 하나씩 그려주는 paintTodo에도 newTodoObj를 입력한다.

html에 id를 전해주기 위해 li.id = newTodo.id를 추가한다. 그리고 span.innerText = newTodo.text로 텍스트 값만 넣어준다.

function paintTodo(newTodo){
    const li = document.createElement("li");
    li.id = newTodo.id;
    const span = document.createElement("span");
    const button = document.createElement("button");
    li.appendChild(span);
    li.appendChild(button);
    span.innerText = newTodo.text;
    button.innerText = "X";
    button.addEventListener("click", deleteTodo);
    console.log(li);
    todoList.appendChild(li);
}

local storage에 기록된 todo list는 새로고침해도 화면에 그려진채 있어야 한다.

그러기 위해서 우선 savedTodos를 변수로 만든다.

const savedTodos = localStorage.getItem("todos")

그런다음, 저장된 todos가 존재한다면 그것을 parse해주고, parse한 각각의 아이템을 화면에 리스트로 보여주어야 한다.

따라서 조건문을 통해 todos가 있는지 확인하고, parsedTodos 변수를 만든다.

if (savedTodos !== null){
  const parsedTodos = JSON.parse(savedTodos);

그리고 각각의 아이템을 paint 해준다.

  parsedTodos.forEach(paintTodos);

그런데 const toDos = [] 이 코드에서 빈 array로 toDos가 항상 세팅되기 때문에 예전 값만 저장하고 새로운 값이 저장되지 않는 문제가 있다. 이것을 해결하기 위해 toDos array를 let으로 선언하고 parsed Todo를 toDos array에 할당해준다.

const savedTodos = localStorage.getItem("todos")
console.log(savedTodos);
if (saveTodo !== null){
    const parsedTodos = JSON.parse(savedTodos);
    toDos = parsedTodos;
    parsedTodos.forEach(paintTodo);
}

const toDos = []

그런다음, newTodo가 생길때마다, todo에 push한다.

function handleTodoSubmit(event){
    event.preventDefault();
    const newTodo = todoInput.value;
    toDos.push() = newTodo;
    paintTodo(newTodo);
    todoInput.value = "";
}

console에서 toDos array에 변수가 잘 들어갔는지 확인한다. 그러나 어차피 새로고침하면 없어지므로 local storage에 저장해야 한다. local storage에 toDos를 저장하는 함수를 만든다.

function saveTodo(){
    localStorage.setItem("toDos", toDos);
}

그리고 나서 submit 함수 내에서 saveTodo()를 호출한다. 그러면 application에서 key-value로 todo가 저장되는 것을 확인가능하다.

그러나 이것은 텍스트 값으로 저장된 것이라서 array로 저장하기 위해서는 JSON.stringify를 해줘야 한다.

function saveTodo(){
    localStorage.setItem("toDos", JSON.stringify(toDos));
}

그러면 ["a", "b", "c"]로 저장된다.

어차피 js 안에서 파일을 수정하고 html은 손대지 않는다. 다음의 코드를 추가한다.

const button = document.createElement("button");
  li.appendChild(span);
  li.appendChild(button);
  span.innerText = newTodo;
  button.innerText = "X";

그리고 당연히 button이 클릭되었을 때 이벤트를 리슨해주어야 한다.

button.addEventListener("click", deleteTodos);

그런다음 deleteTodos 함수를 정의한다. 이 함수는 사용자가 클릭한 리스트를 찾아서 그것을 delete 해주어야 한다. 어떤 것이 클릭된 것인지 정확히 찾고 그것을 삭제해야 한다. 그래서 그 타겟이 어떤 것인지 정확히 찾는 변수를 할당해주어야 한다. 타겟 대상의 부모 객체(li)를 삭제해주기 위해 다음과 같이 작성한다.

function deleteTodos(event) {
  const removingOne = event.target.parentElement;
  removingOne.remove();
}

 <form id="todo-form">
        <input required type="text" placeholder="write todos">
    </form>
    <ul id="todo-list"></ul>

그다음에 todo.js에서 해당영역을 선택해 준다.

const todoForm = document.getElementById("todo-form");
const todoList = document.getElementById("todo-list");
const todoInput = todoForm.querySelector("input");

form에 대한 event를 listen하기 위해 다음 코드를 추가해준다.

todoForm.addEventListener("submit", handleSubmit);

그다음 함수에 대해 정의해준다. 자동으로 새로고침되는 것을 막고, 인풋에 추가되는 밸류를 newTodo로 할당한다. 그리고 밸류는 비운다. 그리고 newTodo 리스트는 새로운 함수로 만든다.

function handleSubmit(event) {
  event.preventDefault();
  const newTodo = todoInput.value;
  todoInput.value = "";
  paintTodos(newTodo);
}

새로운 함수를 정의한다. html에 li, span을 만들고, li의 차일드로 span을 지정한다. span에 내부 텍스트로 newTodo를 할당하고, todoList 영역에 li를 차일드로 지정해준다.

function paintTodos(newTodo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  li.appendChild(span);
  span.innerText = newTodo;
  todoList.appendChild(li);
}

js에서 html에 이미지를 추가해본다. 먼저, img 폴더를 만들고, 0.jpeg, 1.jpeg, 2.jpeg를 추가한다.

그리고 background.js 파일을 생성한다. 생성한 후 html에도 당연히 연결해준다.

background.js에는 img의 array를 만든다.

const imges = ["0.jpg", "1.jpg", "2.jpg"];

그리고 그 중에 하나를 랜덤하게 선택하는 const를 만든다.

const chosenImg = imges[Math.floor(Math.random() * imges.length)];

백그라운드 이미지에 대한 const도 만든다. 이때 createElement("img")는 html 도큐먼트에 img 태그를 새롭게 생성해준다.

const bgImg = document.createElement("img");

그다음에 bg Img의 source를 chosen img로부터 랜덤하게 선택해준다.

bgImg.src = `img/${chosenImg}`

마지막으로, html의 body에 랜덤하게 선택되는 bgImg를 넣어준다.

document.body.appendChild(bgImg);

html에 공간을 만들어 둔다.

    <div id="quote">
        <span></span>
        <span></span>
    </div>

그리고 quotes.js를 html에 불러온다.

<script src="quote.js"></script>

quotes.js에서 html의 quotes 영역을 선택한다.

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");

그다음에, quotes의 array에서 랜덤한 것을 선택하기 위해 Math.random()을 이용한다.

const todaysQuote = quotes[Math.floor(Math.random()*quotes.length)];

그리고 html에 quote와 author을 넣어주기 위해 아까 설정한 quote에 innerText 속성으로 오늘의 quote에 quote, author을 할당해준다.

quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;

마지막에 uncaught syntax error로 quote와 author가 이미 사용되었다고 나와서 애먹었다. 아무리 array안에 있어도 중복되면 안되나보다. 변수명은 다른 이름으로 지어주는게 좋겠다.

<h2 id="clock"></h2>

이제 app.js에서 html의 영역을 선택한다.

const clock = document.querySelector("h2#clock");

다음으로 clock의 데이터를 가져올 수 있는 function을 만든다. 시, 분, 초는 각각 const로 만들어준다. 그리고 clock 의 innerText로 시, 분, 초를 넣어준다. padStart(유지하고자 하는 자릿수, 자릿수를 채우기위해 채워넣을 스트링) 으로 01, 02 같은 형태를 만들어 준다. padStart를 위해 가져온 시, 분, 초를 String화 해준다.

함수를 1초 단위로 호출하기 위해 setInterval 함수를 이용한다.

이것을 활용해, 자바스크립트에서 사용자의 인풋값을 저장해두고 사용자가 다시 로그인했을때 저장된 인풋값을 활용할 수 있음.

localStorage.setItem("username", username)

을 추가해서 사용자로부터 받은 유저이름을 저장함. (변수명, 변수) 임

만약 localStorage에 username이 없으면 form을 표시해서 사용자의 인풋을 기다리고

username이 있으면 form을 표시하지 않고 저장된 username을 활용함

이를 위해 우선 localStorage에서 가져온 username을 const로 저장

const savedUsername = localStorage.getItem("username")

만약 localStorage에 username이 없으면 form의 숨김 기능을 제거해야 하는데 이를 위해 html에서 우선 form의 class에 hidden을 추가

만약 username이 저장돼 있으면, loginform을 표시하기 위해 hidden을 제거하고, addEventListener를 조건문 안에 넣어서 사용자의 이름이 없을 경우 이벤트에 대한 함수가 실행되게 함

const savedUsername = localStorage.getItem("username"); 

if (savedUsername === null) {
    loginForm.classList.remove("hidden")
    loginForm.addEventListener("submit", handleSubmitBtn)

사용자의 이름이 있을 경우에는 h1이 표시되면 되는데, else 조건문 뒤에 greeting의 hidden을 제거

} else {
    greeting.classList.remove("hidden")
}

사용자가 이름을 넣고 제출 버튼을 누르면,

제출 버튼 양식이 없어지고 h1으로 환영 메시지가 나타나게 해본다.

그러려면 h1 태그를 html의 form태그 아래에 추가한다. 기본적으로는 h1이 숨겨져 있고, 사용자가 이름을 제출해야만 h1이 표시되도록 한다. 그러기 위해서 class를 hidden으로 하고,

hidden일 때 숨겨지도록 하기 위해 style.css에 display를 none으로 설정한다.

style.css가 추가되었으므로 당연히 index.html에 style.css를 연결해준다.

제출 버튼을 눌렀을때 form 태그부분이 사라져야 하므로 loginForm.classList.add("hidden")을 추가한다.

입력받은 사용자 이름으로 환영인사를 하기 위해 html에 greeting 태그를 추가한다.

다시 app.js에서 우선 greeting 을 선택해주고, greeting의 innerText를 변경해준다음, hidden을 제거해준다.

우선 index.html에, script src를 통해 app.js를 연결해 준다.

그리고 form태그를 만든 후 자바스크립트에서 form을 제어하면 된다.

이제 app.js에서 우선 form 태그부분과 login Input 부분을 선택한다.

그런 다음,

form에서 사용자가 제출 버튼을 눌렀을 때 인풋을 가져오기 위해, addEventListener함수를 통해 Event를 감지한다.

마지막으로 미리 이름을 설정해두었던 '제출 버튼을 누르면 사용자의 이름을 가져오는" 함수를 정의한다.

제출 버튼을 누르면 기본 디폴트로 새로고침되기 때문에 preventDefault()를 통해 새로고침을 막아준다. 주의할점은 argument로 event를 넣어주어야 한다는 것이다. 그리고 인풋에서 밸류를 가져와 username에 할당하고 마지막으로 username을 console에 log한다.