[노마드 코더] 바닐라 JS로 크롬 앱 만들기

티스토리 뷰

Front-end 🔥🖤/JavaScript

[노마드 코더] 바닐라 JS로 크롬 앱 만들기

stable_sound 2022. 5. 9. 13:36

몇~~~~~달 전에 만들었던 노마드 코더의 크롬 앱 만들기를 이제야 올린다^^..ㅜㅜ

얼른 개인 프로젝트도 해보고 싶었고 정처기 공부도 해야했어서 정리할 시간이 없었다.

크롬 앱 만들기에서는 다음과 같은 기능을 구현 할 수 있다.

◾ 실시간 시간 확인하기

◾ 사용자의 이름을 입력하면 Local Storage에 저장되고 기억

◾ 할 일을 추가하기 / 삭제하기

◾ 위치 정보를 받아와서 지역과 온도 확인하기

◾ 새로 고침 시, 배경화면과 명언 랜덤 변경하기

디렉터리 설정

- css

- img

- js
- background.js
- clock.js
- greetings.js
- quotes.js

- todo.js

- weather.js

- index.html

index.html

<!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 JS!</title>
</head>

<body>

    <h3 id="clock">00:00:00</h3>
    <h2 id="calendar">00/00/0</h2>
    <form id="login-form" class="hidden">
        <input required maxlength="15" type="text" placeholder="What is your name?">
        <!--<input type="submit" value="Log In" />  submit은 엔터/버튼을 누르면 발생하고 브라우저가 재시작된다. -->
    </form>

    <h1 id="greeting" class="hidden"></h1>
    <form id="todo-form">
        <input type="text" placeholder="Write a To Do here" 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/greetings.js"></script>
    <script src="js/clock.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>

style.css

body {
    text-align: center;
    color: white;
    background-position:center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

h3 {
    font-size: 80px;
    text-align: center;
    color: white;
    margin-bottom: auto;
}

h2 {
    margin-top: auto;
    color: white;
}
h1 {
    color: white;  
}
.hidden {
    display: none;
}

#login-form input {
    font-size: 20px;
    margin-bottom: 20px;
}

#todo-form input {
    font-size: 17px;;
}
input {
    border: none;
    border-bottom: 2px solid white;
    background: transparent;
    color: white;
    text-align: center;
}

input::placeholder {
    color: white;
  }

li {
      
    list-style: none;
  }

button {
    background: transparent;
    border: none;
  }

  #quote {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 13px;
    font-style: italic;
  }

  #weather {
    position: absolute;
    top: 15px;
    width: 130px;
  }
img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    opacity: 80%;
    filter: brightness(70%);
}

background.js

const images = [
  "0.jpg",
  "1.jpg",
  "2.jpg",
  "3.jpg",
  "4.jpg",
  "5.jpg",
  "6.jpg",
  "7.jpg",
  "8.jpg",
  "9.jpg",
  "10.jpg",
];

const chosenImage = images[Math.floor(Math.random() * images.length)];

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

bgImage.src = `img/${chosenImage}`;

document.body.appendChild(bgImage); // body의 맨 뒤에 넣는다.

/* 
appendChild : 맨 뒤에 추가
prependChild : 맨 앞에 추가
*/

이미지가 새고로침이 될 때마다 랜덤으로 출력되도록 한다.

clock.js

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

function getClock() {
  const dateDefine = new Date();
  const year = dateDefine.getFullYear();
  const month = String(dateDefine.getMonth() + 1).padStart(2, "0");
  const date = String(dateDefine.getDate()).padStart(2, "0");
  const hours = String(dateDefine.getHours()).padStart(2, "0");
  const minutes = String(dateDefine.getMinutes()).padStart(2, "0");
  //const seconds = String(dateDefine.getSeconds()).padStart(2, "0");
  calendar.innerText = `${year}.${month}.${date}`;
  clock.innerText = `${hours}:${minutes}`;
}

//setInterval(sayHello, 5000); 5초 후 마다 함수 실행
//setTimeout(getClock, 1000); // 5초 후에 함수 실행

getClock(); // 1초 기다렸다가 출력되는게 아니라 바로 출력하고 setInterval이 돌아가도록 한다.
setInterval(getClock, 1000); // 매 초마다 새로운 Date object를 만들고 있음

// "1".padStart(2, "0") -> string의 시작부분에 padding을 추가한다. 길이 2가 되지 않는다면 "0"을 추가하여 길이를 2로 만들어 준다.

greeting.js

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden"; // 별로 중요하지 않은 건 변수 명을 대문자로 적는다.
const USERNAME_KEY = "username"; // 반복되는 string은 변수에 저장해서 사용하는게 개발자의 오타 오류로 인한 에러를 방지할 수 있다.

function onLoginSubmit(e) {
  e.preventDefault(); //event의 기본 행동이 발생되지 않도록 함. 여기서는 form을 submit하면 브라우저는 기본적으로 새로고침 하는 기본 동작을 하는데 그것을 막아준다.
  loginForm.classList.add(HIDDEN_CLASSNAME); // form을 숨겨준다.
  const username = loginInput.value; //input에 입력한 값을 username에 저장한다.
  localStorage.setItem(USERNAME_KEY, username); //입력한 유저명을 저장해서 기억해줌.
  paintGreetings(username);
}

function paintGreetings(username) {
  greeting.innerText = `Hello ${username}!`; // "Hello + username" 보다 훨씬 좋음!
  greeting.classList.remove(HIDDEN_CLASSNAME); //hidden 클래스를 삭제한다. (h1 태그가 보여야 하니까 form은 안보이게 함.)
}
const savedUsername = localStorage.getItem(USERNAME_KEY);

if (savedUsername === null) {
  //show the form (만약 저장된 username이 없으면 hidden 클래스 삭제하고 폼을 띄운다.)
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit); //submit 이벤트 발생 시 onLoginSubmit 함수 실행
} else {
  // show the greetings (만약 저장된 username이 있으면 h1태그에 username 넣어서 띄운다.)
  paintGreetings(savedUsername);
}

/* 
정리
: 처음에는 form과 h1은 hidden 클래스때문에 숨겨져 있음.
js가 username_key를 가지고 localStorage 확인함.
처음엔 없으니까 form을 보여줌. (hidden 클래스 삭제)
서브밋 기다렷다가 이벤트 발생 시 onLoginSubmit 함수 실행.
기본 동작 못하게 막고 from을 다시 숨긴 후, input에 적은 값을 username에 저장.
입력한 유저명을 저장하고 paintGretings 함수 실행.

h1태그에 text 적어주고 띄워야하기 때문에 hidden 클래스 삭제함.

그럼 localStorage에서 username이 key인 값을 가져와서 savedUsername에 넣고 다시 if문 돌림.
로컬스토리지에서 값 받아와서 null이 아니니까 paintGreetings 함수 실행 (h1 태그 보여줌)


*/

quotes.js

const quotes = [
  {
    quote: "I never dreamed about success, I worked for it",
    author: "Estee Lauder",
  },
  {
    quote: "Do not try to be original, just try to be good.",
    author: "Paul Rand",
  },
  {
    quote: "Do not be afraid to give up the good to go for the great",
    author: "John D. Rockefeller",
  },
  {
    quote:
      "If you cannot fly then run. If you cannot run, then walk. And if you cannot walk, then crawl, but whatever you do, you have to keep moving forward.",
    author: "Martin Luther King Jr.",
  },
  {
    quote:
      "Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.",
    author: "Thomas Edison",
  },
  {
    quote:
      "The fastest way to change yourself is to hang out with people who are already the way you want to be",
    author: "REid Hoffman",
  },
  {
    quote:
      "Money is like gasoline during a road trip. You do not want to run out of gas on your trip, but you are not doing a tour of gas stations",
    author: "Tim O Reilly",
  },
  {
    quote:
      "Some people dream of success, while other people get up every morning and make it happen",
    author: "Wayne Huizenga",
  },
  {
    quote:
      "The only thing worse than starting something and falling.. is not starting something",
    author: "SEth Godin",
  },
  {
    quote:
      "If you really want to do something, you will find a way. If you do not, you will find an excuse.",
    author: "Jim Rohn",
  },
];

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

/* 정리
 * Math.random() : 0~1 사이의 숫자를 랜덤으로 출력
 * Math.random() * 10 하면 0~9 사이 숫자 랜덤 출력 가능하지만 소수점이 붙음.
 * Math.round(숫자) : 실수를 정수로 반올림해줌.
 * Math.ceil(숫자) : 실수를 가장 위의 숫자로 올려줌. (ex. 1.1을 2로 반올림한다. 1.0만 1이 될 수 있음)
 * Math.floor(숫자) : 실수를 가장 바닥의 숫자로 내려줌. (ex. 1.999를 1로 내려줌.)
 */

// console.log(quotes[Math.floor(Math.random() * 10)]);  quotes 배열의 0~9 사이의 값을 랜덤으로 출력. 근데 이건 딱 10개를 가지고 있을 때에만 가능. 배열의 길이만큼 랜덤되게 할 필요가 있음.
const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];

quote.innerText = todaysQuote.quote;
author.innerText = `<${todaysQuote.author}>`;

quotes 역시 여러 개를 넣어두고 랜덤으로 출력되도록 한다.

todo.js

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos";

let toDos = [];

function saveTodos() {
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); //  JSON.stringify : 배열 또는 객체 등을 string으로 만들어준다.
}

function deleteToDo(event) {
  const li = event.target.parentElement;
  li.remove();
  toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id)); // 삭제하려고 누른 li태그의 id와 같지 않으면 새로 배열을 만들어서 보여준다. 이대 li.id는 string이기 때문에 형변환을 해줘야 한다.
  saveTodos(); // 삭제 후에 한번 더 배열을 저장해준다.
}

function paintTodo(newTodo) {
  const todo = document.createElement("li");
  todo.id = newTodo.id;
  const span = document.createElement("span");
  span.innerText = newTodo.text;
  const button = document.createElement("button");
  button.innerText = "❌";
  button.addEventListener("click", deleteToDo);
  todo.appendChild(span); // li의 자식 span
  todo.appendChild(button);
  toDoList.appendChild(todo);
}

function handleToDoSubmit(event) {
  event.preventDefault();
  const newTodo = toDoInput.value; // input 값 저장
  toDoInput.value = ""; // input 창 비우기
  const newTodoObj = {
    text: newTodo,
    id: Date.now(),
  }; // 각각의 todo에 id를 부여해서 특정 todo를 삭제할 수 있도록 한다.
  toDos.push(newTodoObj); // 배열에 input 내용들을 저장
  paintTodo(newTodoObj);
  saveTodos(); // 배열에 내용을 넣은 후 localStorage에 저장한다.
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

if (savedToDos !== null) {
  const parsedToDos = JSON.parse(savedToDos);
  toDos = parsedToDos;
  parsedToDos.forEach(paintTodo); // forEach : 배열의 각 아이템들에 대해서 function 을 실행하게 함.
}

weather.js

const API_KEY = "각자 자신의 키 사용!";
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 weather = document.querySelector("#weather span:first-child");
      const city = document.querySelector("#weather span:last-child");
      city.innerText = data.name;
      weather.innerText = `${data.main.temp}°`;
    });
}

function onGeoError() {
  alert("Can't find you. No weather for you.");
}

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

✨ 결과물 ✨

이름과 투두리스트를 입력하면 위와 같은 모습이다!

왼쪽 상단에는 자신의 위치 정보를 받아와서 지역과 날씨를 표시하고,

왼쪽 하단에는 배경화면과 같이 랜덤으로 quote를 보여준다.

새로 고침하면 배경화면이 바뀐다.

위의 움짤은 화면이 바뀌는 모습, 이름과 투두를 입력하는 모습이다.

'Front-end 🔥🖤 > JavaScript' 카테고리의 다른 글

[Java Script] String.prototype.split()이란? (0)	2022.05.13
[Vanilla JS] const 와 let, var 의 차이점 (0)	2022.05.12
[노마드 코더] 바닐라 js로 그림판 만들기 (0)	2022.02.17
📚 드림코딩 by 엘리 JavaScript 정리 5. 클래스 (0)	2022.02.04
📚 드림코딩 by 엘리 JavaScript 정리 4. 함수의 선언과 표현 (0)	2022.02.04

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

TAG more

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

글 보관함

바른소리

티스토리 뷰