Project/Toy Project4 포켓몬 게임 만들기 (Javascript, HTML, CSS) 한 줄 소개 🕹 포켓볼을 주워 포켓몬을 잡아 경험치를 쌓고, 레벨을 올리는 게임이다. 주요 기능 1. 로그인 화면 입력한 아이디로 게임을 시작할 수 있다. 아이디는 세 글자 이상으로 지정해야한다. 유효성 검사를 통해 글자수를 확인해 세글자 미만일 경우 입력창이 빨간색으로 바뀌며 다시 입력하라는 피드백을 보낸다. 2. 레벨에 따른 테마 변경 & 경험치 얻는 TIP 일정한 경험치가 쌓이면 레벨이 올라가고, 레벨에 따라 테마가 풀 → 바다 → 숲으로 배경과 포켓몬 타입이 바뀌게 된다. 경험치는 포켓몬을 잡아야 올라간다. TIP 1. 포켓몬 포켓몬이 움직이는 속도는 랜덤하게 지정되는데, 경험치를 속도에 비례하게 증가하도록 설정해둬서 빠른 포켓몬을 잡을수록 더 많은 경험치를 얻을 수 있다. TIP 2. 포켓볼 포.. 2021. 1. 23. 날씨 APP 만들기 (OpenWeather API 활용) HTML, CSS, Javascript와 OpenWeather API 이용해 날씨 APP을 만들어 보았다. 앱에 대해 먼저 소개를 해보자면, 사용자가 검색창에 도시명을 입력하면 해당 도시의 온도, 습도, 풍속 등의 날씨 정보와 현재날짜를 아이콘, 사진과 함께 알려주는 앱이다. OpenWeather API는 날씨와 관련된 정보를 제공하는 API인데, fetch를 이용해 서버 요청을 하는 방식으로 데이터를 받아와 활용했다. 이번에도 HTML & CSS의 디자인적인 부분과 Javascript 부분으로 나누어 새로 알게 되었거나 중요한 부분들에 대해서만 간략히 소개해보려고 한다. 최종 완성본 1. HTML & CSS ✔️ input placeholder 색상 변경 검색창 부분을 input 태그로 만들어줬는데, .. 2021. 1. 5. 회원가입 페이지 만들기 (유효성 검사) 회원가입을 하다보면 대부분 id는 8글자 이상, 비밀번호는 숫자/특수문자/영문자를 조합해서 만들라고 한다. 귀찮아서 대충 입력하면, 다시 입력하라는 경고 문구(?)같은게 나온다. 즉, 정해진 형식에 맞게 입력해야만 하도록 조건을 지정해두고, 조건에 맞지 않는 경우에는 다시 입력하라는 피드백을 주는 것이다. 이렇게 입력값이 '유효한지'를 검사하는게 바로 유효성 검사(form validation)이다. 이런 '유효성 검사'를 통해 회원가입을 하는 웹페이지를 만들어봤는데, 자세한 코드는 생략하고 새로 배운 기능이나 기억할만한 것들만 간략히 정리해보려고 한다. 전체적인 과정은 아래와 같은 순서로 진행했다. 1. 목업 만들기 (HTML, CSS) 2. 유효성 검증 함수 구현하기 3. 요소들에 이벤트 연결하기 1... 2020. 12. 25. twittler 목업 (HTML, CSS 하드코딩) 지난주동안 배웠던 내용들을 바탕으로 twitter와 비슷하게 웹페이지를 구현해보는 연습을 했다. 아직 실제 데이터를 자동으로(?) 넣는 방법은 배우지 않아서 HTML에 몇개의 데이터만 일일이 입력하는 식으로 목업만 완성했다! 완성하기까지의 과정 중 기억해둘만한 부분만 기록으로 남겨두려고 한다. (최종적으로 완성된 모습은 여기👈서 볼 수 있다. Change View를 Full Page View로 하고 보는걸 추천한다) Step1. Framework 먼저 프레임워크를 오른쪽처럼 구상했다. 구성은 크게 header, writing-section, contents-section 세 부분으로 나누었다. ✔️ header : 로고, 새로고침 버튼이 포함된 부분 ✔️ writing-section : 글을 작성하는 부.. 2020. 12. 18. 이전 1 다음 반응형
