포스기 만들기 part.3

과제 발표 당일 발표 전까지 약 2시간 정도 여유시간이 있었다. 미처 수정하지 못한 코드나 오류를 수정하고

 

우리는 마지막으로 객체에 새 메뉴를 추가하면 메뉴 버튼이 자동적으로 생성되고 그 버튼 역시 기존 버튼과

 

똑같이 작동하게 만드는 것을 구현하기로 했다.

 

기존 버튼들 모두 메뉴이름과 가격이 적혀 있었는데 그 값 역시 객체에서 받아오고 객체에 수에 따라서 반복문을

이용해 모든 객체의 요소를 불러올 수 있게 설정하고 마무리 지었다.

function makeMenu() {
  for(let i = 0; i < coffees.length; i++){

  let makeMenuBtn = document.createElement('button');
  makeMenuBtn.setAttribute('id' , coffees[i].name + 'btn');
  makeMenuBtn.setAttribute('class','btncss');

  makeMenuBtn.innerHTML = coffees[i].name + `<br><br>` + coffees[i].price;
 
  letfBottom.appendChild(makeMenuBtn);
}
}
makeMenu()


function control() {
var allMenuBtn = document.querySelectorAll('.btncss');
for(let i = 0; i < allMenuBtn.length; i++){
  allMenuBtn[i].addEventListener('click',function(){
    return temple(coffees[i]);
})
}
}
control()

 

대망의 발표.

 

다른 조들 역시 비슷한 기능과 코드를 작성했지만 내 자식이 제일 예쁘다고.. 괜히 우리 기능이 제일 좋아 보이고 프론트엔드 역시

내 눈에는 우리 조의 결과물이 제일 예뻤다. 발표 후에는 각자 어느 부분에서 막혔는지 , 어떤 방법으로 해결했는지에 대해

이야기를 나누고 짧은 과제 타임을 마무리 지었다.

 

마지막으로 우리 조의 결과물 작동 실행 영상을 첨부한다.

 

 

짧은 시간 동안 동기들과 함께 무언가를 직접 만들어본다는 것은 정말 새롭고 지금까지 (몇 달 안되었지만) 코딩을 배우면서 가장

재밌고 행복한 경험이었다. 업무를 분할해서 각자 맡은 역할을 해내고 결과물을 합쳐서 완성한다는 것은 정말 즐거운 일이다.

 

셋 다 불과 2개월 전까지만 해도 코딩은 접해본 적도 없는 우리들이지만 학원에서 함께 공부하면서 이런 결과물을 만든 사실이 놀라웠다.

 

다른 이들이 보기엔 별 것 아닌 것처럼 보일지 몰라도 백지에서 설계부터 직접 부딪혀가면서 만들어 본 첫 결과물은 잊을 수 없을 것이다.

 

너무 고생 많으셨습니다 동기님들 ㅠㅠ 정말 즐거운 시간이었어요. 

 

포스기 만들기 끝!