Cookie Project 1

LeeMir, 31 January 2021

Cell Calculator with Vanilla

Vanilla JS로 배양 계산기 만들기

2021.01.19 ~ 2021.01.31


ABOUT

image

  • 생명과학을 연구하고 있는 지인의 부탁으로 위 사진과 같은 역할을 하는 “계산기”를 한 html 파일 안에 담아서 만들었다. 처음에는 모바일에서 접근하기 쉬운 애플리케이션을 만들어달라는 부탁을 받았으나, 설치가 필요 없는 사이트 형식으로 만드는 것으로 제안해 그렇게 합의했다.

  • 처음에는 display: grid로 페이지의 레이아웃을 구성했다가, flex-direction: column인 flex로 구성을 바꿨다.

Main features

  • ‘Cal’ 버튼을 누르면 입력된 값들을 바탕으로 계산해 값을 출력
  • ’+’ 버튼과 ‘-‘ 버튼으로 ‘Section’이라는 값을 입력할 수 있는 칸의 개수를 조절할 수 있음
  • 계산에 필요한데 입력되지 않은 칸은 자동으로 표시해줌
  • 툴팁 텍스트, 모달 창을 이용해 사용자에게 기능 설명
  • 반응형(모바일 고려)

Stacks

  • HTML
  • CSS
  • JavaScript(Vanilla)

image