JS #15- 웹 API 5 (주접생성기, 랜덤다이스 프로그램)

두 프로젝트 모두 모듈프로그래밍을 기초로 둔다. 

 

 

 

 

주접생성기 (main.js)

import {

    copy,

    shake,

    getNode,

    addClass,

    showAlert,

    getRandom,

    insertLast,

    removeClass,

    clearContents,

    isNumericString,

  } from "./lib/index.js";

 

 

  import jujeobData from "./data/data.js";

 

  // 모듈 프로그래밍 사용해서

 

  // [phase-1]

  // 1. 주접 떨기 버튼을 클릭할 수 있는 핸들러를 연결해 주세요.

  //    - button     click      addEventListener

  // 2. input 값을 (콘솔에)가져와 주세요.

  //    - input   value  console.log

  // 3. jujeob 데이터를 가져오기

 

  // 4. jujeobData 함수에 input.value를 넣어주세요

  // 5. 랜덤한 주접 한개를 pick

  //    - jujeobData => return  ???

  //    - array =>  array[] + getRandom( n )

 

  // 6. pick을 result에 랜더링해주세요.

  //    - result 내용 비우기 ( clearContents, node.textContent = '')

  //    - pick text => insertAdjacentHTML('beforeend',text) , insertLast()

 

  // [phase-2]

  // 1. 아무 값도 입력 받지 못했을 때 예외처리 (alert)

  // 2. 공백 문자를 받았을 때 예외처리 (alert)

  //    - String.prototype.replace  +  regExp

  // 3. 숫자형 문자를 받았을 때 예외처리 (alert)

 

  const submit = getNode("#submit");

  const nameField = getNode("#nameField");

  const result = getNode(".result");

 

 

  function handleJujeob(e) {

    e.preventDefault();

 

    const name = nameField.value;

    const list = jujeobData(name);

    const pick = list[getRandom(list.length)];

 

 

 

    if (!name || name.replace(/\s*/g, "") === "") {

      showAlert(".alert-error", "이름을 입력해주세요");

      shake.restart();

      return;

    }

 

 

    if (!isNumericString(name)) {

      showAlert('.alert-error','제대로된 이름을 입력해주세요');

      shake.restart();

      return;

    }

 

 

    clearContents(result);

    insertLast(result, pick);

  }

 

 

  function handleCopy(){

 

    const text = this.textContent;

 

    if(!nameField.value) return;

 

    copy(text).then(()=>{

      showAlert('.alert-success','클립보드 복사 완료!!');

    })

 

  }

 

 

  submit.addEventListener("click", handleJujeob);

  result.addEventListener('click',handleCopy)

 

 

---

랜덤다이스 (main.js)

 

// [phase-1]

// 1. 주사위 굴리기 버튼을 누르면 diceAnimation() 실행될 수 있도록

// 2. 같은 버튼 toggle 만들기 (isClicked)

// 3. setInterval 재생 / 정지

// 4. 바깥 변수 보호하기 (closure)

// 5. button 활성화 여부

// [phase-2]

// 1. recordButton 이벤트 바인딩

// 2. recordListWrapper show / hidden

// 3. renderRecordItem 함수 만들기

//    - 주사위 눈 가져오기

//    - 템플릿 랜더링하기

//    - 값 계산하기

// 미니 과제 => 만들어주는 함수, 초기화 버튼 클릭시 모든 데이터 날리기

import {diceAnimation, getNode, getNodes} from './lib/index.js'

const [rollingButton, recordButton, resetButton] = getNodes('.buttonGroup > button'); //queryselectorAll로, 유사배열에 구조분해할당 받기

const recordListWrapper = getNode('.recordListWrapper');

const tbody = getNode('.recordList tbody');

function handleRollingDice(){

    let isClicked = false;

    let stopAnimation;

   

        return () => { //클로저 사용

            if(!isClicked){

                stopAnimation = setInterval(diceAnimation, 300);

                console.log('시작');

                recordButton.disabled = true; //버튼 활성화 여부

                resetButton.disabled = true;

            }

   

            else {

                clearInterval(stopAnimation);

                console.log('종료')

                recordButton.disabled = false;

                resetButton.disabled = false;

            }

        isClicked = !isClicked;

        }

}

let count = 0;

let total = 0;

function renderRecordItem() {

    const cube = getNode('#cube');

    const diceValue = +cube.dataset.dice;

    let template = `

    <tr>

        <td> ${++count} </td>

        <td> ${diceValue} </td>

        <td> ${total += diceValue} </td>

    </tr>`

  //랜더링

  tbody.insertAdjacentHTML('beforeend',template);

}

function handleRecord() {

    recordListWrapper.hidden = false;

    renderRecordItem();

}

function handleReset() {

    // child.remove();

    // const child = document.querySelectorAll('.recordList tbody tr');

    tbody.innerHTML = '';

    count = 0;

    total = 0;

}

rollingButton.addEventListener('click', handleRollingDice());

recordButton.addEventListener('click', handleRecord);

resetButton.addEventListener('click', handleReset);