[JS] Vending Mahcine 우여곡절 제작기

웹버전

모바일버전

 

 

콜라자판기 기능 요약

 

1. 소지금한도내에서 돈을 자판기에 입금한다.

2. 콜라를 선택하고 입금된 금액한도 내에서 획득한다.

3. 거스름돈을 반환한다.

 

 

---

1. 자판기에 돈 입금하기 

 

만드는 과정에서 있었던 실수

• 입금버튼 기능을 잘못 이해함
• 입금액에 음수를 쓰면 소지금이 그만큼 늘어나는 현상

 

1) 입금버튼 기능을 잘못 이해함

소지금이 0원인상태에서 돈을 입금하면 소지금이 생기는, 소지금을 입금하는 버튼으로 오해함!

 

➜ HTML에서 소지금을 20000으로 입력해둠. 나중에 숫자만 빼기쉽도록 분리해둠

          <div class="info-mymoney">
            소지금 :
            <span class="txt-mymoney">20000</span>
            <span class="txt-won"> 원</span>
          </div>

 

 

 

 

2)  입금액에 음수를 쓰면 소지금이 그만큼 늘어나는 현상

 

소지금에서 입금액을 빼는 수식에서 생긴 버그, 값이 0보다 작은경우 튕기게했지만 음수x음수는 양수라서 뚫어버림..

result = parseInt(nowBalance.innerText) -parseInt(deposit.value);

//nowBalance.innerText 는 소지금 , deposit.value는 입금액

 

if(deposit.value<0){
    alert("입금액을 확인하세요")
    deposit.value=""
    return
}  

if(result>=0){
    nowBalance.innerText=`${result}`;
    realBalance.innerText=`${transfer}`;
}else{
    alert("입금액을 확인하세요");
}

그래서 먼저 입금액이 마이너스인경우에 알트창으로 튕겨버린후에 , 수식이 작동하도록 함!

---

 

2. 카트에 담기

 

우선 이 기능부터 정말 벽느껴지고 막막했다..

객체에서 어떻게 따오는지, 특정값만 어떻게 지정해야할지...

팀원들과 멘토님의 티칭으로 일단 한단계한단계 해보기로 한다.

 

만드는 과정에 있었던 실수

• for문에 if문을 씀. 게다가 코드도 이상하게 짬

 

1) for문에 if문을 쓰다.

for(let i = 0; i<colaList.length; i++){
    let colaitem = colaList[i];
    if(colaitem["name"]=="Original Cola"){  
      selectCola.append(colaLi);
      colaLi.append(button);
      button.append(image,colaName,numCount);
    }
    else if(colaitem["name"]=="Violet Cola"){
      selectCola.append(colaLi);
      colaLi.append(button);
      button.append(image,colaName,numCount);
    }
    else if(colaitem["name"]=="Yellow Cola"){
      selectCola.append(colaLi);
      colaLi.append(button);
      button.append(image,colaName,numCount);
    }
    else if(colaitem["name"]=="Cool Cola"){
      selectCola.append(colaLi);
      colaLi.append(button);
      button.append(image,colaName,numCount);
    }
    else if(colaitem["name"]=="Green Cola"){
      selectCola.append(colaLi);
      colaLi.append(button);
      button.append(image,colaName,numCount);
    }
    else if(colaitem["name"]=="Orange Cola"){
      selectCola.append(colaLi);
      colaLi.append(button);
      button.append(image,colaName,numCount);
    }}

처음 내 의도:

1. for문을 돌면서 객체의 "name"을 돌면서 이름을 대조한다.

2. 객체와 if문에 지정한 이름이 같다면 각 미리 지정해둔 HTML요소들을 생성한다.

 

Original Cola를 클릭한 결과

결과는 i=1인 Original을 눌렀는데 Orange Cola까지 몽땅 클릭이 되어버렸다...

처음에는 그 이유로 if가 맞다면 멈춰야하는데  break가 없어서 그런가보다 하고 if문마다 모두 break를 써 줬다.

 

 if(colaitem["name"]=="Original Cola"){  
      selectCola.append(colaLi);
      colaLi.append(button);
      button.append(image,colaName,numCount);
      break;
    } 
    // 똑같은 방법으로 밑에 else if까지 싹 break 넣어줌

그 결과 누르면 카트에 하나만 담기긴 하는데 뭘 눌러도 Original Cola만 담겼다.

그 이유는 i가 6까지 돌지만 모두 1번 break에서 그냥 멈춰버려서 그랬던것 같다...

 

 if(colaitem["name"]=="Original Cola"){  
      selectCola.append(colaLi);
      colaLi.append(button);
      button.append(image,colaName,numCount);
       if(colaitem["name"]=="Violet Cola"){  
      selectCola.append(colaLi);
      colaLi.append(button);
      button.append(image,colaName,numCount);
    }}

그래서 이중 for문처럼 if문안에 if문을 만들어서 하려했지만 이것도 실패했다...ㅋㅋ

 

 

➜ 그냥 처음 설계부터 다시하자!

 

클릭 이벤트가 일어나는곳을 LI로 한정하고 

콜라 이름과 이미지를 가져오는 방법을 querySelector로 해결하였다.

displayCola.addEventListener('click', (e) => {
  if(e.target.tagName == 'LI'){
    const clickedCola = e.target;
    const clickedColaName = clickedCola.querySelector('.tit-item').innerText;
    const clickedColaImg = clickedCola.querySelector('.img-item').src;


    const colaLi = document.createElement("li");
    const button = document.createElement('button');
    const image = document.createElement('img');
    const colaName = document.createElement('strong');
    const numCount = document.createElement("span");
  
    button.className ="btn-staged";
    image.className = "img-item";
    image.src = clickedColaImg;
    colaName.className = "txt-item";
    colaName.innerText = clickedColaName;
    numCount.className = "num-counter";
    numCount.innerText = click();  

    selectCola.append(colaLi);
        colaLi.append(button);
        button.append(image,colaName,numCount);
  }

clickedCola는 클릭 타겟을

clickedColaName은 클릭타겟의 cola이름이 적힌 클래스의 Text를

clickedColaImg는 클릭타겟의 cola사진이 있는 클래스의 src를 특정했다!!

(쓰는 이미지는 같고 CSS로 이미지를 조정함)

 

그래서 클릭할때마다 요소를 생성하고, 요소내의 이름과 이미지는 위에서 특정한 이름과 이미지로 랜더링 해준다.