status:

js 수료해야하는데 .. 코드 흐름을 전혀 모르는 나는 시험을 통과못하고..
재시를 치게되는데..

how to solv

• 일단 박스부터 만들었다.
• 기본 css에 형태가 만들어져있었는데 하필 이게 i tag 라 web에서 올라오지않았다..
• 도대체 어떻게 올려야 할지 감도 안온다..
• div로 형태 만들고 js에 getElementbyId/qeurySelector 시도했다.
• 로직은 어느정도 생각이 드는데, 왜 css가 반영이 되지않을까?
• 기본적인 부분이 약한 듯 해 (최근에 js 코드를 안 짜긴 함..) 족보를 찾기로 결심.
• 일단 정답인 듯 한 코드를 발견해 시도해보았다.

불좀꺼줄래?1

• 여기 코드에서 참조해 각 i tag default css를 web 에 올리는 것 까진 성공함.

 <ul>
      <li class="select one" id="one">
        <i class="check_icon"></i>
      </li>
 </ul>

problem

• ul > li > i 이런식으로 만들었는데 좀 불필요한 코드같다 굳이? 이렇게 만들필요가 있나
• 각 태그별로 켜지고 꺼지는 것까지만 가능함
• 해당 요구사항인 '단 하나의 박스가 노란색인 상태에서 다른 박스를 클릭하면 원래 노란색인 박스는 회색이 되도록 on 클래스를 제거하세요.' 가 실행되지 않았다.
• 1 ) 로직을 보강하던지, 2 ) html을 원복시켜서 최대한 건드리지않는 방향으로 가야했음.

로직보강

 
//1 로직 바꿈
function handleClick(e){
  if (e.target.matches('.favorites-icon.on')) {
    return;
  }else{
      this.classList.toggle('on'); //error! event 안들어감!
    }
 console.log('works');
}

 // 2 변수 dom도 바꿔봄 -getElementById
const target2 = document.getElementById('second-favorites-icon')
 // 2 변수 dom도 바꿔봄 -querySelector;
const target3 = document.querySelector('i.third-favorites-icon');

// 2 변수 dom도 바꿔봄 -  querySelectorAll
var targets = document.querySelectorAll('i.favorites-icon');

//3 css 문제인듯해 바꿈  i 태그를 css가 인식못하는 해 div 태그 하단에 위치하게 함

div {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #ccc;
  margin-bottom: 10px;
}
div > .favorites-icon {
  background-color: #ccc;
  display: block;
  width: 50px;
  height: 50px;

  margin-bottom: 10px;
}

div > .favorites-icon.on {
  background-color: yellow;
}

err1] TypeError: addEventListener is not a function in JavaScript

• status: getElementById 를 버리고 queryselectorAll 을 이용해서 변수를 쓰고있는데
  addEventListener 가 함수가 아니라면서 계속 에러 오류가 나옴

• solv

//index.html
    <i id="first-favorites-icon" class="favorites-icon"></i>
 
    <i id="second-favorites-icon" class="favorites-icon"></i>
     
    <i id="third-favorites-icon" class="favorites-icon"></i>

//index.js
var targets= document.querySelectAll('i.favorites-icon')
for (const key of targets) {
  key.addEventListener('click', handleClick);
}

위와 같이 똑같은 class명의 태그가 여러개다 보니, index를 지정하던지 for 문을 써서 전체에 event를 걸어줘야했다.

TypeError: addEventListener is not a function in JavaScript

err2] How to create event listeners for icons?

• status: 아니 근데 왜 css 적용이 안돼죠? console.log 찍었을때 이벤트 함수가 실행되는게 콘솔에서 보이는데, 색이 안바뀌어서 미칠것 같았음..
• solv
  i 태그 ,a태그 등은 .. 제일 앞에 꼭 태그명 명시해줘야함.

var targets = document.querySelectorAll(' .favorites-icon');
//위에서 아래로 변경해야함. 
var targets = document.querySelectorAll('i.favorites-icon');

how-to-create-event-listeners-for-icons

err3] class명에 포함되는지 여부 로직 어떻게 짜야하냐.

• status : 문제에서 this를 이용하라고 하는데 , 감도 안오고 e.target.value만 되뇌이는 나... 어떻하죠..

• try1
  how-to-create-event-listeners-for-icons

• 위에서 어느정도 힌트를 얻음 그러나 matches가 잘 되지 않는 듯 해 포기함.

function handleClick(e) {
  
  // try 1 
  if (!targets.matches(' .favorites-icon *')) {
    this.classList.toggle('on');;
  }
 this.classList.remove('on'); 
};


// try 2  
  if (!targets.matches('.favorites-icon .favorites-icon.on ')) {
      this.classList.toggle('on');;
  }
 this.classList.remove('on'); 
};

//try 3 
   if (!targets.matches('.on')) {
 	this.classList.toggle('on'); 
  }
 	this.classList.remove('on'); 
};

• this.classList.toggle('on'); 꾸준히 이 메서드를 이용해서 해결해보려했는데, 사용 이해를 다 못한듯.. 결국 사용 실패. 잘 쓰면 for 문이나 if 문 안써도 될 것 같은데!

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

• 원인 : 일단 내가 classListan문법을 모르는 상태에서 문제 조건에 맞춰쓰려하다보니 잘 이해가 되지않아 공식문서를 계속 읽어봄

• add,remove,toggle 등 주요 3가지 메서드를 돌아가면서 써보았는데 처음 toggle을 쓰다가
  결국 add로 해결함
  

• solv

  function handleClick() {
  for (const key of targets) {
    key.classList.remove('on');
  
    this.classList.add('on');
  }
  console.log('works');
  }
  

  • 각 태그들을 돌아가면서 remove 를 적용.
  • display :none 상태로 초기화
  • 이후 e.target === this에 on을 add 해줌.

Html 원복

• status : 일단 기능 구현이 되니 리팩토링하면서 잡아보자 싶었다

• 아래글을 참조하면서 하나씩 삭제해보았다.
  불좀꺼줄래?2

• try :

Selector

• 원인 : 오랜만에 css라.. 선택자 부분이 어려웠다.
• id 는 #, className은 . , > 이걸로 부모 자식관계 만들고..
• 아래 코드는 "select one" 으로 클래스 명이 띄어져있을때 css 선택자가 .select.one 으로 연결되는 부분이 신기해서 가져옴.
• .select#one 으로도 css가 적용 되긴함.
• id 명 붙일경우 첫번째 자식 tag 만 css 적용됨

 //idex.html
        <li class="select one" id="one">
                <i class="check_icon"></i>
            </li>
//index.css
.select.one {
    background-color: #b3b3b3;
}

inline-block?

• display :inline-block가 뭔지 몰라서 찾아봄
• inline : 컨텐트의 크기 만큼만 공간을 차지하도록 되어있다고 한다
• inline- block : 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능합니다.
• display:flex와 유사해보였다. 하지만 좀 더 자율성 있어보임.
  inline-block

  span {
   display: inline-block;
   background: yellow;
   width: 200px;
   height: 50px;
   margin: 20px;
   padding: 10px;
  }

• solv
  - css를 e.target인 .favorites-icon 에게만 주고자 했다.
  • 최종 .favorite-icon (default css) 과 .favorites-icon.on 두개만 남기면 되는 문제였음

    //index.css
/* ol,
ul {
  list-style: none;
} */

/* .select {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #ccc;
  margin-bottom: 10px;
}
  */
  
/* 
div {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #ccc;
  margin-bottom: 10px;
} */
    /* .on {
  display: none;
  width: 50px;
  height: 50px;
  background-color: yellow;
  margin-bottom: 10px;
} */

// index.html
   <!-- <ul>
        <li class="select" id="one"> -->
    <!-- <div> -->
   <!-- </li> -->
    <!-- <li class="select" id="two"> -->
   <!-- </li> -->
    <!-- <li class="select" id="three"> -->
  <!-- </li> -->
    <!-- </ul> -->
    <!-- </div> -->

selector

classList

최종 코드