🎈노마드코더 크롬앱 만들기🎈

22612 단어 바긁가 html vanillajs CSS CSS

🎈노마드코더 크롬앱 만들기🎈

📌계기

친구와 토이프로젝트를 가볍게 진행중인데, 프론트엔드의 스택을 리액트로 사용해야겠다~ 결정했지만 웹은 정말 처음이라… 기초는 하고 가야겠다는 생각이 들었습니다😂
바로 리액트를 공부하면서 해봤는데, 구름위에서 코딩하는 듯이(…) 뭐가뭔지 잘 모르겠어서 차근차근 하는 것에 대한 중요성을 깨달았습니다🤣
해서 선택한 것이 노마드코더 크롬앱 강의! 였는데, 들어보니까 확실히 뭐 어떻게 해야할지 감이 잡히는 느낌이었네요!😆😆

이제 바닐라 자바스크립트를 이용해 토이프로젝트 2개 정도를 직접 진행해보고 리액트로 넘어가려합니다.

📌코드

📄 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>Momentum App</title>
  </head>
  <body>
    <div id="weather">
      <span class="weat"></span>
      <span class="home"></span>
    </div>
    <h2 id="clock">00:00:00</h2>
    <form class="hidden" id="login-form">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"
      />
      <button>Log In</button>
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <form id="todo-form">
      <input type="text" placeholder="Write a To Do" required />
    </form>
    <ul id="todo-list"></ul>
    <div id="quote">
      <span></span><br />
      <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/secret.js"></script>
    <script src="js/weather.js"></script>
  </body>
</html>

📄 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";

function onLoginSubmit(event) {
  event.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);
  localStorage.setItem(USERNAME_KEY, loginInput.value);
  paintGreetings();
}

function paintGreetings() {
  const username = localStorage.getItem(USERNAME_KEY);
  greeting.innerText = `Hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

console.log(savedUsername);

if (savedUsername === null) {
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit);
} else {
  paintGreetings();
}

📄 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 're 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 failing ... is not starting something.",
    author: "Seth Godin",
  },
  {
    quote:
      "If you really want to do something, you'll find a way. If you do not, you'll find an excuse.",
    author: "Jim Rohn",
  },
];

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

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

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

📄 background.js

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

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

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

bgImage.src = `img/${chosenImage}`;
bgImage.classList.add("bgImage");

document.body.appendChild(bgImage);

📄 todo.js

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

const TODOS_KEY = "todos";
let toDos = [];

function saveToDos() {
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

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

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);
  li.appendChild(span);
  li.appendChild(button);
  toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
  event.preventDefault();
  const newTodo = toDoInput.value;
  toDoInput.value = "";
  const newTodoObj = {
    text: newTodo,
    id: Date.now(),
  };
  toDos.push(newTodoObj);
  paintToDo(newTodoObj);
  saveToDos();
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

if (savedToDos) {
  const parsedToDos = JSON.parse(savedToDos);
  toDos = parsedToDos;
  parsedToDos.forEach(paintToDo);
}

📄 weather.js

function onGeoOk(position) {
  const lat = position.coords.latitude;
  const lon = position.coords.longitude;
  console.log("You live it", lat, lon);
  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.weather[0].main;
    });
}
function onGeoError() {
  alert("Can't find you. No weather for you.");
}

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

📄 style.css

.hidden {
  display: none;
}

body {
  background-color: #2d3436;
  text-align: center;
  color: #ecf0f1;
  padding: 1%;
}

h2 {
  font-size: 5rem;
  margin-top: 8%;
}

h1 {
  font-size: 3rem;
  font-style: italic;
}

input {
  border: none;
  background: transparent;
  font-size: 20px;
  margin: 3px;
  text-align: center;
  color: #ecf0f1;
  border-bottom: 2px solid #ecf0f1;
}

button {
  border: none;
  background: transparent;
  font-size: 22px;
}

ul {
  margin-left: 42%;
}

li {
  list-style: none;
  font-size: 20px;
  text-align: left;
  color: #ecf0f1;
}

li:before {
  content: "💘";
  display: inline;
  vertical-align: left;
  padding: 5px;
}

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

.weat {
  padding-left: 90%;
}

.home {
  padding-left: 90%;
}

📌완성

예쁩니다!

📌후기

강의를 들으면서 더 깊게 공부해야할 것이나, 중요하다고 생각이 드는 부분은 따로 메모를했습니다.
너무 주절주절 저만 알아 볼 수 있게 정리해서 바로 업로드 하긴 어렵겠지만 천천히 복습하고 예쁘게 포스팅 해볼 생각입니다.

생각보다 너무 재밌는 강의였고, HTML CSS JS 모두 처음이긴 하지만 리액트를 만지면서 대~충 알고 있는 것이 있어서 그런가 어려워서 다시들어보거나 하는 건 없었어요!

이제 강의에서 배운 것을 토대로 새로운 웹 앱을 제작해볼 생각입니다!

하루 한 줄 일기

나만의 덕질 페이지

이번주안에 완성하는게 목표입니다😌
화이팅🤸‍♀️🤸‍♀️

Author And Source

이 문제에 관하여(🎈노마드코더 크롬앱 만들기🎈), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@igun0423/chromeapp

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[STL] 관련 용기 - 붉 은 검 은 나무

Collections.synchronizedMap(new LinkedHashMap())

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다