[JS]아랍어 단어장 구현하기 - Final. 단어 출력기능 고도화

아랍어 단어장 홈페이지

Al-Klimat

Goal

단어 출력 관련

1. 단어 옆에 체크박스를 만들고 이를 클릭하면 한글 뜻만 보이도록 하여 암기하는데 도움이 되는 기능 도입

PLAN

check box를 같이 삽입하여 check box의 체크 여부를 JS로 받고,
이에 따라 아랍어 단어를 Toggle 하는 방식

참고 링크

StackOverFlow: How to addEventListener to multiple elements in a single line

코드

  export default class WordList extends CoreCompoent {
 
  render(){
    const data = DATA
     this.el.innerHTML = /* html */`
        <ul id = "myUL">
        ${data
        .map(function (element) {
            return `
            <li class="unchecked">
              <input type ="checkbox" class="unchecked"/>
              <span class="arabic">${element.single} ${element.plural ? "-" + element.plural : ""}</span>
              <span class="korean">${element.mean}</span>
            </li>
            `
            }).join('')}
        </ul> 
    `
     
    const toggleEls = this.el.querySelectorAll(".unchecked")
    toggleEls.forEach(element => {
      element.addEventListener("change",()=>{
        element.classList.toggle("checked")
      })
    });
  }
}

toggle을 이용해서, 체크박스가 체크가 되면 checked라는 클래스를 붙여주고,
체크가 해제가 되면 checked라는 클래스를 없애주었다.

  #myUL .checked+.arabic{
    display: none;
  }

.checkbox와 .arabic 이 형제요소로 바로 붙어있음을 이용하였다.
CSS 인접 형제 선택자를 사용하여
체크박스에 체크가 되어 .checked가 붙어있다면,
인접한 .arabic 을 보이지 않도록 하였다.

#myUL li.checked {
  box-shadow: inset 20px 20px 60px #cccfd9,
            inset -20px -20px 60px #ffffff;
  transition: .6s;
}

<li>에도 checked를 toggle 하여, checked가 붙어있으면 안쪽으로 움푹 들어가게끔 CSS로 처리함

li.checked {
  box-shadow: inset 20px 20px 60px #cccfd9,
            inset -20px -20px 60px #ffffff;
  transition: .6s;
}

구현결과

모바일 버전 미디어 쿼리 적용(About)

/* about */
.about {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 20px;
}

@media (max-width:700px) {
  .about {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}

About 페이지의 링크를 걸어놓은 이미지들이 모바일로 접속시 잘려서,
미디어 쿼리를 이용하여, 세로로 출력되도록 flex-direction 을 이용하였다.

미디어쿼리 적용 결과

그리고...

이 프로젝트를 진행하면서, 참 많은 것을 느낄 수 있었다.

누군가는 아마 이글을 보면, 그닥 복잡한 기능도 없고, 그저 단어장에 불과한 쉬운 프로젝트라고 할지도 모른다.

하지만 그저 따라치기만 할줄 알았던 나한테 있어서는,
이 쉬운 프로젝트가 성취감 을 불어넣어 주었다.

내가 원하던 기능이 페이지에서 이루어지는 것을 보면서,
아 내가 이것 때문에 코딩 시작했지...! 를 느낄 수 있었다.

이 단어장은 여전히 많은 부분을 이루어내지 못했다.
특히 검색기능 부분에서 목표를 이루지 못하고 프로젝트를 끝낸 것에 대해 너무나 많은 아쉬움이 남는다.

원인은 여전히 this,class(constructor,super),Store 기능에 대한 개념이 많이 부족함에 있는 것 같다.

이 프로젝트를 통해 얻은 성취감을 원동력으로 삼아
부족한 부분에 대해 다시 공부할 것이다.

Fin.