포스기 만들기 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개월 전까지만 해도 코딩은 접해본 적도 없는 우리들이지만 학원에서 함께 공부하면서 이런 결과물을 만든 사실이 놀라웠다.

 

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

 

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

 

포스기 만들기 끝!