초등학생 소프트웨어 교육을 위해서 이상형 월드컵과 비슷한 나만의 월드컵이라는 것을 만들어 보았습니당.
다음과 같이 16개의 칸에 이상형 월드컵에서 종목들을 입력하면 관련된 이미지를 Google Custom Search API를 통해 받아와서 보여줍니다.
주소:https://www.rootall.org/media/worldcup/start.html
1~2개 넣으면 2강전, 3~4개 넣으면 4강전, 4~8개 넣으면 8강, 8~16개 넣으면 16강입니다. 실행하면 다음과 같이 나옵니다.
API query가 하루에 100개 넘어가면 과금되서 쿼리량을 줄어보려고 같은 단어는 이미지를 sessionStorage에 넣어서 다시 받아오도록 하였습니다.
css는 spectre라는 굉장히 가벼운 라이브러리를 써서 만들었고 한 3일 걸렸나? 퀄리티가 딱 봐도 그래보이지요.
그래도 google api 써보는게 조금은 재미있었네요.