10. 팁 계산기

극악을 겪고 나니까 계산기라는 단어만 들어가도 긴장됨.

하지만 팁계산기는 설계가 아주 간단했다.

만족도에 따라 팁을 얼마나 계산할지 그 값을 나타내는 grade와 해당하는 인덱스번호를 객체로 만들어 배열을 만들고

각 배열의 값에 해당하는 옵션을 만들어서 html코드로 짠 드롭박스 안에 넣어줌.

결과 버튼을 눌렀을 때  각 항목중 하나라도 값이 입력되지 않으면 에러메세지 창이 뜬다. 

 

-각 항목의 내용이 입력되지 않을 때마다 다른 메세지가 뜨도록 설계함.

그리고 3초 뒤에 에러메세지는 사라짐.

하지만 항목들에 값이 입력되면

드롭박스에 저장했던 객체 중에서 value값에 해당하는 것을 선택했을 때 얼마의 팁을 계산할 건지 적음

 

그리고 showloader 로 로딩되는 중~이라는 느낌의 애니메이션이 뜨도록 함

그리고 3초뒤에 로딩창이 끝나고

총 계산금액과 한 사람당 계산해야할 가격, 팁 가격이 계산된 결과창을 보여주고 10초뒤에 다시 원래대로 돌아옴.