개요

①초기


위의 이미지를 게임 시작으로 설정합니다.

②게임 개시


②처럼 버튼을 누르면 OK가 나오는 게임을 만들었습니다.

또한 첫 번째 클릭 때 목록이 삭제되도록 구현했습니다.

① 타이틀

1,HTML

index.html

  <div class=header>
    <h1 class="title">ToDo!!</h1>
  </div>

2,CSS

style.css

.title {
  padding-left:60px ;
  cursor: pointer;
 }

 .title2 {
   border-bottom:3px solid greenyellow;
   font-size: 50px;
   color: red;
   transform:rotateZ(20deg);
  }

3,JS

main.js

const title = document.querySelector('.title');
console.log(title);

title.addEventListener('dblclick',()=>{
  title.classList.toggle('title2');
});

더블 클릭 이벤트 발생에서 title2 클래스를 설정합니다. 그러나 클래스를 제거하고 싶기 때문에 toggle 메서드를 사용합니다.

②게임

1,HTML

index.html

<button>ボタン</button>
 <ul class="ul">
   <li class="lis" >リスト</li>
 </ul>

2,JS

main.js

let count = 0;
const button = document.querySelector('button');
button.addEventListener('click',() =>{
  count += 1;
  if(count === 1) {
    const ul2 = document.querySelector('.ul');
    const lis =document.querySelector('.lis')
    ul.removeChild(lis);
   }
  const makeLi = document.createElement('li');
  makeLi.textContent = 'ok';
  const ul = document.querySelector('ul');
  ul.appendChild(makeLi);
  makeLi.classList.toggle('list');
});

1,remove.child();
let에 0을 대입합니다.
첫 번째 클릭으로 HTML li 요소 목록을 삭제합니다.
부모 요소의 ul을 가져옵니다. 삭제할 클래스 lis를 가져옵니다.
ul.removeChild(lis)로 자식 노드를 삭제합니다.

2,document.createElement();
새롭게, li 요소를 생성해 갑니다.
document.createElement('li') 메서드로 빈 요소를 생성합니다.
빈 요소에 ok를 내용 요소에 추가합니다.

3,appendchaild();
li 요소를 ul의 자식 노드로 추가합니다.