[javascript] 바닐라 JS로 크롬 앱 만들기 - 오늘의 기분 선택하기, 디데이까지~

// index.html
<ul class="mood">
      <li>뒹굴뒹굴</li>
      <li>스트레스</li>
      <li>라라라라</li>
    </ul>
    
// mood.js

const moods = document.querySelectorAll(".mood li");
const moodImg = document.querySelector("#mood-img");

console.log(moods);

const todayMood = ["뒹굴뒹굴", "스트레스", "라라라라"];

const onClickMood = (event) => {
  todayMood.map((image) => {
    switch (event.target.innerText) {
      case image:
        moodImg.src = `img/${image}.gif`;
        return;

      default:
        return;
    }
  });
};

moods.forEach((mood) => mood.addEventListener("click", onClickMood));

 뒹굴뒹굴 누르면 뒹굴거리는 모코코, 스트레스 누르면 매운 거 먹는 모코코, 라라라라 누르면 이디야 모코코가 나온다. 

새로운..바닐라 JS! 그리고 오랜만에 보는 switch문... 처음 써보는 forEach(왜 map으로는 이벤트리스너가 안 뜨는지 모르겠다.)

 

 이렇게도 되긴하는데 뒹굴뒹굴, 스트레스, 라라라라 를 html이랑 javascript 양쪽에서 두 번 쓰는 게 비효율적이라고 느껴졌다. 

 

 // index.html
 <ul class="mood-ul">
    </ul>
    
    
// mood.js

const moodUl = document.querySelector(".mood-ul");
const moodImg = document.querySelector("#mood-img");

const todayMoods = ["뒹굴뒹굴", "스트레스", "라라라라"];

todayMoods.map((mood) => {
  const todayMood = document.createElement("div");
  todayMood.className = "mood";
  todayMood.innerText = mood;
  moodUl.appendChild(todayMood);
});

const moods = document.querySelectorAll(".mood");


const onClickMood = (event) => {
  todayMoods.map((image) => {
    switch (event.target.innerText) {
      case image:
        moodImg.src = `img/${image}.gif`;
        return;

      default:
        return;
    }
  });
};

moods.forEach((mood) => mood.addEventListener("click", onClickMood));

중간에 const moods = 들어가 있는 게 좀 불편하다..ㅎ

mood 클래스의 div를 만든 뒤에 가져와야 하기 때문에 순서가 이렇게 됐다. (뭐가 맞는진 모른다~~~!)

 

이제 또 다른 기분을 추가할 때, 이미지 폴더에 이미지 넣고 맨 위의 배열에 추가만 해주면 된다. 

 

근데 진짜 이게 맞는진 모르겠다. (좋은 방법인지는 모르겠다!)

 

 

 

---

 

 

내 생일까지 < 하드 코딩된 부분을 바꿔보자

 

 

<form id="count-form">
          <input id="until-input" class="hidden"/>
          <span id="until">까지</span>
        </form>

greeting 만들었던 것처럼 hidden을 쓰기로 했다. 

// .js

const until = document.querySelector("#until");
const untilInput = document.querySelector("#until-input");
const countForm = document.querySelector("#count-form");

const getUntil = () => {
  const localUntil = localStorage.getItem("until");
  return localUntil;
};

until.innerText = getUntil() || "디데이까지";
untilInput.defaultValue = getUntil() || "디데이까지";

const onClickUntil = () => {
  until.classList.add(HIDDEN_CLASS);

  untilInput.classList.remove(HIDDEN_CLASS);
};

until.addEventListener("click", onClickUntil);

const handleUntilSubmit = (event) => {
  event.preventDefault();
  localStorage.setItem("until", untilInput.value);
  untilInput.value = "";
  if (getUntil()) {
    until.innerText = `${getUntil()}`;
  }
  untilInput.classList.add(HIDDEN_CLASS);
  until.classList.remove(HIDDEN_CLASS);
};

countForm.addEventListener("submit", handleUntilSubmit);

 

뭔가 굉장히 코드가 지저분해졌다. 

안돼서 이것저것 시도하다보니... ^^??라기엔 greeting과 많이 다르지 않은 것 같은데 왜 이렇게까지 된거지? 

 

react 가 굉장히 그리웠다. 

그리고 HIDDEN_CLASS를 다시 선언해야하는 줄 알았는데 다른 js파일의 것도 사용할 수 있었다!