初心者のバニラJavaScript練習

cssファイル

body{
    background-color: aliceblue;
}

.btn{
    cursor: pointer;
}

h1{
    color: burlywood;
    transition: color 0.5s ease-in-out;

}


.clicked{
    color: slategray;
}


.form
.greetings{
    display: none;
}

.showing {
    display: block;
}

.bgImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    animation: fadeIn 0.5s linear;
  }

clock.js

 // ,로 구분
const clockContainer = document.querySelector(".js-clock"),
    clockTitle = clockContainer.querySelector("h1"); //꼭 js-clock 안에 h1태그가 포함되어있는지 체크하자..


function getTime(){
    const date= new Date();
    const minutes = date.getMinutes();
    const hours = date.getHours();
    const seconds = date.getSeconds();
    clockTitle.innerText=`${hours < 10 ? `0${hours}`: hours}:${minutes < 10 ? `0${minutes}`: minutes}:${seconds < 10 ? `0${seconds}`: seconds}`; 
}

function init(){
    getTime();
    setInterval(getTime,1000); //첫번째 인자는 함수, 1초마다 실행
}

init();

gretting.js

const form = document.querySelector(".js-form"),
    input = form.querySelector("input"),
    greetings = document.querySelector(".js-greetings");


const USER_LS = "currentUser", //local storage key 값
    SHOWING_CN = "showing"; 


function saveName(text){
    localStorage.setItem(USER_LS, text); //Local Storage = 만료기한 없음, Session Storage = 세션 종료 시 만료.
}

function handleSubmit(event){
    event.preventDefault();
    const currentValue = input.value;
    paintGreetings(currentValue);
    saveName(currentValue);
}


function askForName(){
    form.classList.add(SHOWING_CN);
    form.addEventListener("submit", handleSubmit); //submit 리스너 등록
}


function paintGreetings(text){
    form.classList.remove(SHOWING_CN);
    greetings.classList.add(SHOWING_CN);
    greetings.innerText = `Hello ${text}`;
}


function loadName(){
    const currentUser = localStorage.getItem(USER_LS);

    if(currentUser === null){
        askForName();
    }else{
        paintGreetings(currentUser);
    }
}

function init(){
  loadName();  

}

init();


//local storage : 아주 작은 정보를 컴퓨터에 저장시키는 방법

todo.js

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; //이벤트가 발생한 dom. 여기서는 button 태그
  const li = btn.parentNode; //부모 태그를
  toDoList.removeChild(li); //html part에서 지우고
  const cleanToDos = toDos.filter(function(toDo) { //li.id가 아닌 것만 걸러내기
    return toDo.id !== parseInt(li.id); // li.id는 string이라 number로 형변환
  });
  toDos = cleanToDos; //대체
  saveToDos(); //로컬스토리지에 저장
}

function saveToDos() { //로컬에 저장해서 휘발되지 않게
  localStorage.setItem(TODOS_LS, JSON.stringify(toDos)); //자바스크립트 오브젝트를 string으로 변환
}

function paintToDo(text) {
  const li = document.createElement("li");
  const delBtn = document.createElement("button");
  const span = document.createElement("span");
  const newId = toDos.length + 1; //1부터
  delBtn.innerText = "❌";
  delBtn.addEventListener("click", deleteToDo); //클릭 리스너 등록
  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) { //form submit시(Enter)
  event.preventDefault(); //기본 form 동작을 막아주고
  const currentValue = toDoInput.value; //input 박스 안의 내용을 가져온 다음
  paintToDo(currentValue); //넘겨준다.
  toDoInput.value = ""; //다시 비워줌
}

function loadToDos() { // userName 없다면 toDolist 출력되지 않음. 새로고침해도 로컬내용보고 불러옴
  const loadedToDos = localStorage.getItem(TODOS_LS);
  if (loadedToDos !== null) {
    const parsedToDos = JSON.parse(loadedToDos); //자바스크립트 object로 변환
    parsedToDos.forEach(function(toDo) {
      paintToDo(toDo.text);
    });
  }
}

function init() {
  loadToDos();
  toDoForm.addEventListener("submit", handleSubmit); //리스너 등록
}

init();

bg.js

const body = document.querySelector("body");

const IMG_NUMBER = 3;

function paintImage(imgNumber) {
  const image = new Image(); //이미지 객체 생성
  image.src = `images/${imgNumber + 1}.jpg`;
  image.classList.add("bgImage");
  body.prepend(image); //선택한 요소의 내용의 앞에 콘텐트를 추가합니다.
}

function genRandom() { // 0~2까지 난수 생성
  const number = Math.floor(Math.random() * IMG_NUMBER); //floor = 소수점 이하 버리기
  return number;
}

function init() {
  const randomNumber = genRandom();
  paintImage(randomNumber);
}

init();

weather.js

const weather = document.querySelector('.js-weather');

const API_KEY = 'Your API Code Here'; //가입하기 귀찮다 그냥 넘어가자
const COORDS = 'coords';

// function getWeather(latitude, longitude) { 
//   fetch(
//     `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric` //http가 아니라 https로
//   )
//     .then(function (response) {
//       return response.json();
//     })
//     .then(function (json) {
//       const temperature = json.main.temp;
//       const place = json.name;
//       weather.innerText = `🌡${temperature.toFixed(1)}℃  🇰🇷${place}`;
//     });
// }

function saveCoords(coordsObj) {
  localStorage.setItem(COORDS, JSON.stringify(coordsObj)); //성공했으면 저장.

  console.log("coordsObj: "+coordsObj);
  
}


function handleGeoSuccess(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(handleGeoSuccess, handleGeoError); //내 현재 위치를 가져온다.
}

function loadCoords() {
  const loadedCoords = localStorage.getItem(COORDS);
  if (loadedCoords == null) {
    askForCoords();
  } else {
    const parsedCoords = JSON.parse(loadedCoords);
    //getWeather(parsedCoords.latitude, parsedCoords.longitude);
  }
}

function init() {
  loadCoords();
}

init();