칠구의 블로그

이상형 월드컵을 하다보면 랭킹(순위)를 볼 수 있다. 자바스크립트를 이용한 간단한 구현이기 때문에 로컬스토리지를 이용했다. 당신의 1등이 로컬스토리지이고 나머지 1등들은 그냥 코드를 넣었다 ㅜㅜ 실력이슈 저번 리뷰를 만약 봤으면 알겠지만 나는 우승자를 나타내는 함수가 winnerImage이다. 그래서 라운드 진행하는.html localStorage.setItem('winnerImage', winnerImage); 랭킹을 보여주는 .html var winnerImage = localStorage.getItem('winnerImage'); // 가져온 이미지를 화면에 표시 document.getElementById('winnerImage').src = winnerImage; 이것만 추가해주면 된다. 전체 코..

저번에 화면 구현을 완료했고 이번엔 게임을 진행해보았다. 솔직히 금방 끝날 줄 알았는데 생각보다 오류가 많이 발생해서 오래걸림 ㅠㅠ var text = ""; var images = []; //이미지 데이터들을 담을 곳 var rounds = ["16강", "8강", "4강", "결승", "우승자"]; // 라운드별 이미지 수 var roundIndex = 0; // 현재 라운드 인덱스 var matches = rounds[roundIndex] === "16강" ? 8 : (rounds[roundIndex] === "8강" ? 4 : (rounds[roundIndex] === "4강" ? 2 : 1)); // 현재 라운드의 경기 수 var currentMatch = 0; // 현재 진행 중인 경기 var..

저번에 피그마로 구상했던 화면 구현을 완료했다. 막상 구현하다보니 수정된 부분들이 조금 있다. 기능 부분은 아직 구현 전이다. 메인화면 아이돌 이상형 월드컵 👩여자 아이돌 시작 랭킹 👨남자 아이돌 시작 랭킹 라운드 선택 (팝업창) 👨남자 아이돌 라운드 16강 8강 4강 결승 시작 라운드 진행 여자 아이돌 16강 👑당신의 이상형👑 🏆여자 아이돌 랭킹🏆 🥇1등🥇 여기에 이름 여기에 픽 🥈2등🥈 여기에 이름 여기에 픽 🥉3등🥉 여기에 이름 여기에 픽 4등 여기에 이름 여기에 픽 5등 여기에 이름 여기에 픽

자바스크립트를 공부하며 작은 토이 프로젝트를 하면 좋겠다라고 생각을 했고 이상형 월드컵을 만들어봐야겠다고 생각을 했다 메인 화면 -> 팝업창 (라운드 선택) -> 월드컵 -> 우승자 -> 랭킹 이렇게 프로토타입을 구성했고 피그마를 통해 화면을 구상해봤다. 일단 남자 , 여자 아이돌 16 / 8 / 4 / 2 라운드로 구현할 예정이다 화면 구상 -> 화면 구현 -> 기능 구현 -> 벡엔드 연동 이렇게 진행해볼 예정 메인 화면 구별하기 쉽게 여자 아이돌은 7D3AD2 15% 남자 아이돌은 2293D2 15%로 대표 색을 지정했다. 라운드 선택 팝업창 라운드 진행 우승자 랭킹 화면