vanilla JS #3

CODING/Javascript

by 피그말리온(PYGM) 2020. 6. 9. 21:01

<!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();

저작자표시 비영리 변경금지

'CODING > Javascript' 카테고리의 다른 글

예제로 보는 자바스크립트 기본 문법 pt.3 (0)	2022.05.28
예제로 보는 자바스크립트 기본 문법 pt.2 (0)	2022.05.28
예제로 보는 자바스크립트 기본 문법 pt.1 (0)	2022.05.28
vanilla JS #2 (0)	2020.06.09
vanilla JS (0)	2020.06.08