💻 D-day 04

점심을 먹고 바로 삭제버튼을 만들기로 했다. 구현하고 싶은 것을 생각했다.

• 휴지통모양의 아이콘으로 삭제버튼을 만들면 좋겠다

• 휴지통아이콘을 클릭하면 해당 list만 삭제되면 좋겠다

• 삭제버튼에 마우스를 올렸을때 색이 변했으면 좋겠다(css)

• 삭제버튼에 마우스를 올리면 포인터로 변했으면 좋겠다(css)

먼저 아이콘을 가져오기 위해 폰트어썸을 이용하기로 했다. 폰트어썸 사용법은 이 블로그를 참고해서 휴지통모양의 아이콘을 무료로 이용했다.

list에 자식으로 아이콘을 줘야겠다고 생각해서 index.js에서 코드를 추가했다.

//index.js
//index.js
if (typeof window === "undefined") {
  var jsdom = require("jsdom");
  var { JSDOM } = jsdom;
  var { document } = new JSDOM("").window;
}

class makeListClass {
  constructor(value) {
    this.value = value;
    this.$list = this.createListElement();
  }

  delListBtn() {
    //this를 bind하지 않고 console.log(this)를 하면 이벤트의 객체가 나온다. 
    //그래서 this를 binding해주었다.
    let todoLists = document.querySelector("#TodoLists");
    todoLists.removeChild(this);
  }

  createListElement() {
    let elList = document.createElement("li");
    elList.className = "list";
    elList.innerText = this.value;
    
    //list에 icon을 자식으로 추가하고 event를 추가했다.
    let delIcon = document.createElement("i");
    delIcon.className = "fas fa-trash-alt";
    elList.appendChild(delIcon);
    delIcon.addEventListener("click", this.delListBtn.bind(elList));

    return elList;
  }
}

if (typeof window === "undefined") {
  module.exports = makeListClass;
}

아래는 css를 추가해주었다.

/* js에서 만들어지는 Element */
/* js에서 만들어지는 Element */
#TodoLists {
  width: 100%;
}

.list {
  width: 100%;
  position: relative;
  font-size: 18px;
  margin-bottom: 10px;
}

.fas {
  position: absolute;
  right: 0;
}

.fas:hover {
  color: brown;
  cursor: pointer;
}

위의 이미지는 마우스를 올렸을때 색이 변하는 것을 확인된다.

"삭"의 list가 사라진것을 확인할 수 있다.