πŸŽˆλ…Έλ§ˆλ“œμ½”λ” 크둬앱 λ§Œλ“€κΈ°πŸŽˆ

igun0423Β·2022λ…„ 1μ›” 17일
0

WEB

λͺ©λ‘ 보기
1/1

πŸŽˆλ…Έλ§ˆλ“œμ½”λ” 크둬앱 λ§Œλ“€κΈ°πŸŽˆ


πŸ“Œκ³„κΈ°

μΉœκ΅¬μ™€ ν† μ΄ν”„λ‘œμ νŠΈλ₯Ό κ°€λ³κ²Œ 진행쀑인데, ν”„λ‘ νŠΈμ—”λ“œμ˜ μŠ€νƒμ„ λ¦¬μ•‘νŠΈλ‘œ μ‚¬μš©ν•΄μ•Όκ² λ‹€~ κ²°μ •ν–ˆμ§€λ§Œ 웹은 정말 μ²˜μŒμ΄λΌβ€¦ κΈ°μ΄ˆλŠ” ν•˜κ³  κ°€μ•Όκ² λ‹€λŠ” 생각이 λ“€μ—ˆμŠ΅λ‹ˆλ‹€πŸ˜‚
λ°”λ‘œ λ¦¬μ•‘νŠΈλ₯Ό κ³΅λΆ€ν•˜λ©΄μ„œ ν•΄λ΄€λŠ”λ°, κ΅¬λ¦„μœ„μ—μ„œ μ½”λ”©ν•˜λŠ” 듯이(…) 뭐가뭔지 잘 λͺ¨λ₯΄κ² μ–΄μ„œ μ°¨κ·Όμ°¨κ·Ό ν•˜λŠ” 것에 λŒ€ν•œ μ€‘μš”μ„±μ„ κΉ¨λ‹¬μ•˜μŠ΅λ‹ˆλ‹€πŸ€£
ν•΄μ„œ μ„ νƒν•œ 것이 λ…Έλ§ˆλ“œμ½”λ” 크둬앱 κ°•μ˜! μ˜€λŠ”λ°, λ“€μ–΄λ³΄λ‹ˆκΉŒ ν™•μ‹€νžˆ 뭐 μ–΄λ–»κ²Œ 해야할지 감이 μž‘νžˆλŠ” λŠλ‚Œμ΄μ—ˆλ„€μš”!πŸ˜†πŸ˜†

이제 바닐라 μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό μ΄μš©ν•΄ ν† μ΄ν”„λ‘œμ νŠΈ 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 λͺ¨λ‘ 처음이긴 ν•˜μ§€λ§Œ λ¦¬μ•‘νŠΈλ₯Ό λ§Œμ§€λ©΄μ„œ λŒ€~μΆ© μ•Œκ³  μžˆλŠ” 것이 μžˆμ–΄μ„œ κ·ΈλŸ°κ°€ μ–΄λ €μ›Œμ„œ λ‹€μ‹œλ“€μ–΄λ³΄κ±°λ‚˜ ν•˜λŠ” 건 μ—†μ—ˆμ–΄μš”!

이제 κ°•μ˜μ—μ„œ 배운 것을 ν† λŒ€λ‘œ μƒˆλ‘œμš΄ μ›Ή 앱을 μ œμž‘ν•΄λ³Ό μƒκ°μž…λ‹ˆλ‹€!

  • ν•˜λ£¨ ν•œ 쀄 일기
  • λ‚˜λ§Œμ˜ λ•μ§ˆ νŽ˜μ΄μ§€

μ΄λ²ˆμ£Όμ•ˆμ— μ™„μ„±ν•˜λŠ”κ²Œ λͺ©ν‘œμž…λ‹ˆλ‹€πŸ˜Œ
ν™”μ΄νŒ…πŸ€Έβ€β™€οΈπŸ€Έβ€β™€οΈ

profile
성곡이… μ‹€νŒ¨ λ”Έμ΄μ—μš”β€¦πŸ˜Ž

0개의 λŒ“κΈ€