이상형 월드컵 제작

Posted by 이창권 on February 21, 2019

초등학생 소프트웨어 교육을 위해서 이상형 월드컵과 비슷한 나만의 월드컵이라는 것을 만들어 보았습니당. 다음과 같이 16개의 칸에 이상형 월드컵에서 종목들을 입력하면 관련된 이미지를 Google Custom Search API를 통해 받아와서 보여줍니다.

주소:https://www.rootall.org/media/worldcup/start.html

image

1~2개 넣으면 2강전, 3~4개 넣으면 4강전, 4~8개 넣으면 8강, 8~16개 넣으면 16강입니다. 실행하면 다음과 같이 나옵니다.

image

API query가 하루에 100개 넘어가면 과금되서 쿼리량을 줄어보려고 같은 단어는 이미지를 sessionStorage에 넣어서 다시 받아오도록 하였습니다.

css는 spectre라는 굉장히 가벼운 라이브러리를 써서 만들었고 한 3일 걸렸나? 퀄리티가 딱 봐도 그래보이지요.

그래도 google api 써보는게 조금은 재미있었네요.