Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[1단계 - 자동차 경주 구현] 병민(윤병인) 미션 제출합니다. #93

Merged
merged 38 commits into from
Feb 17, 2022
Merged
Changes from 1 commit
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
c2509ce
:truck: chore: 프로젝트 기본 환경 설정을 한다
airman5573 Feb 10, 2022
e2dbc24
:memo: docs(readme.md): 기능구현 목록을 추가한다
airman5573 Feb 10, 2022
40be3e6
:memo: docs(readme.md): css관련 구현 항목을 추가한다
airman5573 Feb 11, 2022
97a67b9
:sparkles: feat(markup): 자동차 경주 template을 만든다
airman5573 Feb 11, 2022
7d47f8e
:sparkles: feat(markup): spinner를 추가한다
airman5573 Feb 11, 2022
2934725
:memo: docs(readme.md): 완료한 항목을 표시한다
airman5573 Feb 11, 2022
2661ee1
:recycle: refactor(css): css파일을 분리한다
airman5573 Feb 11, 2022
327b211
:sparkles: feat(car-game): 자동차의 이름을 입력받는다
airman5573 Feb 11, 2022
cfc63dc
:sparkles: feat(car-game): 시도할 횟수를 입력받고 유효성 검사를 한다
airman5573 Feb 11, 2022
37a7d55
:pencil2: typo(eslintrc.js): 작은따움표를 사용한다
airman5573 Feb 11, 2022
468f175
:sparkles: feat(car-game): 횟수를 입력한후 게임을 시작한다
airman5573 Feb 11, 2022
81b77a8
:pencil2: typo(index.html): lang을 kr -> ko로 변경한다
airman5573 Feb 15, 2022
a9f269f
:pencil2: typo(package.json): description을 변경한다
airman5573 Feb 15, 2022
b84b719
:truck: chore(.eslintrc.js): 불필요한 설정을 삭제하고 각 설정에 대한 주석을 기재한다
airman5573 Feb 15, 2022
1d4b1f7
:truck: chore(.prettierrc.js): 각 설정에 대한 주석을 기재한다
airman5573 Feb 15, 2022
b2627ce
:truck: chore(eslint): eslint에서 지원하는 ecma version을 es2021로 낮춘다
airman5573 Feb 15, 2022
afbc4f7
:truck: chore(pacakage.json): eslint버전을 업데이트한다
airman5573 Feb 15, 2022
5b4e4eb
:pencil2: typo(eslint): minor
airman5573 Feb 15, 2022
58bca5f
:recycle: refactor(structure): 코드의 흐름을 MVC패턴으로 재건축한다
airman5573 Feb 15, 2022
5d791a0
:lipstick: style(css): css파일을 재분류 스타일을 수정한다
airman5573 Feb 15, 2022
44f61bc
:lipstick: style(index.html): class와 구조를 수정한다
airman5573 Feb 15, 2022
6bafe15
:recycle: refactor(etc): class를 id로 변경한다
airman5573 Feb 15, 2022
d143993
:recycle: refactor(constants): html에서 새로 부여한 selector들을 상수로 등록한다
airman5573 Feb 15, 2022
c7c2472
:recycle: refactor(etc): 동적으로 view를 조작할것이기 때문에 기존에 static하게 작성한 마크업을 …
airman5573 Feb 15, 2022
2724ec5
:recycle: refactor(car.model): 더 적절한 변수명으로 변경한다
airman5573 Feb 15, 2022
7df9c32
:bug: fix(style): 사용하지 않는 css파일을 import하지 않는다
airman5573 Feb 16, 2022
c623289
:recycle: refactor(util): $함수에 찾으려는 element의 root node를 설정할 수 있다
airman5573 Feb 16, 2022
86c002b
:sparkles: feat(validation): 유효성 검사 실패시에 throw할 커스텀 에러 클래스를 추가한다
airman5573 Feb 16, 2022
d3e9bbc
:sparkles: feat(validation): 유효성 검사후에 그 결과를 담는 클래스를 추가한다
airman5573 Feb 16, 2022
ecffd2f
:sparkles: feat(car-names-input): 사용자로부터 자동차 경주에 등록할 자동차들의 이름을 입력받는다
airman5573 Feb 16, 2022
bf08972
:sparkles: feat(racing-count-input): 사용자로부터 자동차가 움직이려고 시도하는 횟수를 입력받는다
airman5573 Feb 16, 2022
f1448c8
:recycle: refactor(racing-count-input): 자동차 이름 입력이 선행되어야 한다
airman5573 Feb 16, 2022
c17c0c4
:pencil2: typo(util): 파일 이름을 하이픈 스타일로 변경한다
airman5573 Feb 16, 2022
8972216
:truck: chore(eslint): class안에 static property를 사용하기 위해서 ecmaVersion을…
airman5573 Feb 16, 2022
225f729
:recycle: refactor(util): 여러개의 node도 찝을 수 있도록 개선한다
airman5573 Feb 16, 2022
f693192
:recycle: refactor(naming): element의 class를 변경한다
airman5573 Feb 16, 2022
3b95f0b
:sparkles: feat(racing-screen): 게임을 시작하면 screen에 자동차들의 이동거리를 출력한다
airman5573 Feb 16, 2022
af8de81
:sparkles: feat(racing-game-prepare-form): 게임시작하면 경기에 필요한 정보들을 입력할 수 …
airman5573 Feb 16, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
💄 style(index.html): class와 구조를 수정한다
airman5573 committed Feb 15, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 44f61bce49d1c83e05e1ba0ab0965a8a38432693
86 changes: 58 additions & 28 deletions index.html
Original file line number Diff line number Diff line change
@@ -13,40 +13,70 @@

<body>
<div id="app">
<div class="d-flex justify-content-center mt-5">
<div>
<section>
<h1 class="text-center">🏎️ 자동차 경주 게임🏁</h1>
<p>5자 이하의 자동차 이름을 콤마로 구분하여 입력해주세요.</p>
</section>
<section class="mb-5">
<h1 class="text-center mb-8">🏎️ 자동차 경주 게임🏁</h1>
<section class="mb-8">
<form id="racing-game-prepare-form">
<fieldset id="car-names-fieldset" class="mb-5">
<label class="form-label" for="car-names">5자 이하의 자동차 이름을 콤마로 구분하여 입력해주세요.</label>
<div class="d-flex">
<input id="car-names-input" type="text" class="w-100 mr-2" placeholder="ex) east, west, south, north, all" />
<button id="car-names-button" type="button" class="btn btn-cyan">확인</button>
<input id="car-names-input" class="form-control mr-4" name="car-names" type="text" placeholder="ex) 람보르기니, 부가티, 마이바흐, 롤스로이스, 코닉세그" />
<button id="car-names-submit-button" class="btn btn-cyan" type="button">확인</button>
</div>
</section>
<section id="racing-count-form" hidden>
<p>시도할 횟수를 입력해주세요.</p>
</fieldset>
<fieldset id="racing-count-fieldset">
<label class="form-label" for="racing-count">시도할 횟수를 입력해주세요.</label>
<div class="d-flex">
<input id="racing-count-input" type="number" class="w-100 mr-2" placeholder="시도 횟수" />
<button id="racing-count-button" type="button" class="btn btn-cyan">확인</button>
<input id="racing-count-input" class="form-control mr-4" name="racing-count" type="number" placeholder="시도 횟수" />
<button id="racing-count-submit-button" type="button" class="btn btn-cyan">확인</button>
</div>
</section>
</fieldset>
</form>
</section>
<section class="racing-screen mb-4">
<div class="car-lane">
<label class="car-name">람보르기니</label>
<div class="skid-mark">
<div class="forward-icon">️⬇️️</div>
<div class="forward-icon">️⬇️️</div>
<div class="forward-icon">️⬇️️</div>
<div class="forward-icon">️⬇️️</div>
</div>
</div>
<div class="car-lane">
<label class="car-name">람보르기니</label>
<div class="skid-mark">
<div class="forward-icon">️⬇️️</div>
<div class="forward-icon">️⬇️️</div>
<div class="forward-icon">️⬇️️</div>
<div class="forward-icon">️⬇️️</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center mt-5">
<section class="result-screen d-flex mt-4" hidden>
</section>
</div>
<div class="d-flex justify-content-center mt-5">
<section hidden>
<h2>🏆 최종 우승자: east, west 🏆</h2>
<div class="d-flex justify-content-center">
<button id="reset-btn" type="button" class="btn btn-cyan">다시 시작하기</button>
<div class="car-lane">
<label class="car-name">람보르기니</label>
<div class="skid-mark">
<div class="forward-icon">️⬇️️</div>
<div class="forward-icon">️⬇️️</div>
<div class="forward-icon">️⬇️️</div>
<div class="forward-icon">️⬇️️</div>
</div>
</section>
</div>
</div>
</div>
<div class="car-lane">
<label class="car-name">람보르기니</label>
<div class="skid-mark">
<div class="forward-icon">️⬇️️</div>
<div class="forward-icon">️⬇️️</div>
<div class="forward-icon">️⬇️️</div>
<div class="forward-icon">️⬇️️</div>
</div>
</div>
</section>
<section class="racing-result">
<h2 class="text-center">🏆 최종 우승자: <span id="winners"></span> 🏆</h2>
<div class="text-center">
<button id="restart-btn" type="button" class="btn btn-cyan btn-long">다시 시작하기</button>
</div>
</section>
</section>
<script type="module" src="./src/js/index.js"></script>
</body>