web - 음식 호불호 테스트

심심할 때, 해볼 만한 음식호불호 테스트를 만들어보았습니다.

사이트

사이트 주소는 다음과 같습니다.

음식 호불호 테스트

음식 호불호 레벨 테스트

likefoodtest.netlify.app

코드는 제 깃허브에 들어가면 볼 수 있습니다.

GitHub - ZaRi1l/likefoodtest: 음식호불호테스트 웹

음식호불호테스트 웹. Contribute to ZaRi1l/likefoodtest development by creating an account on GitHub.

github.com

먼저 메인 화면은 다음과 같습니다.

그리고 시작하기 버튼을 누르면

위의 그림과 같이 음식과 음식 사진이 나오며, 물어보게 됩니다.

또한 진행상황 표시됩니다.

이렇게 마지막까지 테스트를 다 하게 되면 결과화면이 나오게 됩니다.

결과 화면에서는 결과와 결과에 대한 설명이 출력됩니다.

그리고 지금까지 테스트한 음식들을 얼마나 먹을 수 있는지 %로 나오게 되고, 각 음식들을 먹을 수 있는지 테스트했던 결과를 기호로 알려주게 됩니다.

그리고 아래 다시하기 버튼을 누르면 처음으로 돌아갑니다.

그리고 아래 카카오, 클립보드 버튼을 누르면 공유할 수 있습니다.

나중에 심심할 때 해보면 재밌을 것 같습니다.

이번에 처음으로 웹을 만들어 보았는데 아직 미흡한 점이 많았습니다.

학교에서 파이썬하고 자바 배우고 있는데, 독학으로 html, css, javascript를 같이 하려니까 확실히 어렵네요.

웹은 다음에 만들면 더 예쁘게 만들 수 있을 것 같은데, 필요할 때 만들고, 이제 어플이나 다른 것들을 만들어봐야겠습니다. ㅎㅎ