-
Notifications
You must be signed in to change notification settings - Fork 168
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
[2단계 - 행운의 로또 미션] 서니(박선희) 미션 제출합니다. #53
Changes from all commits
ad33d0b
94c61bf
c0c4a4e
ac13664
b48a6c5
2f22269
57989a5
168e387
bdb7439
55e5233
4468432
0857c93
6059757
d75e251
3e25871
8749ebc
66f7882
0d53698
b77a5be
8e400a0
a1c59c6
4cd25ee
c9c2e8b
042885f
1316a06
0c5e85a
9f6630c
68476f9
cabe5ab
7df8239
8dc3f11
c57eef4
c071f43
2afcf5a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,63 +9,73 @@ | |
</head> | ||
|
||
<body> | ||
<div id="app" class="p-3"> | ||
<main id="app" class="p-3"> | ||
<div class="d-flex justify-center mt-5"> | ||
<div class="w-100"> | ||
<h1 class="text-center">🎱 행운의 로또</h1> | ||
<form class="mt-5" id="money-input-form"> | ||
<label class="mb-2 d-inline-block">구입할 금액을 입력해주세요.</label> | ||
<label for="money-input" class="mb-2 d-inline-block">구입할 금액을 입력해주세요.</label> | ||
<div class="d-flex"> | ||
<input id="money-input" type="number" min="0" class="w-100 mr-2 pl-2" placeholder="구입 금액" /> | ||
<input id="money-input" type="number" min="0" class="w-100 mr-2 pl-2" placeholder="구입 금액" autofocus | ||
required /> | ||
<button id="money-submit-button" type="submit" class="btn btn-cyan">확인</button> | ||
</div> | ||
</form> | ||
<section class="lotto-list-container mt-9 hidden"> | ||
<section class="lotto-list-section mt-9 hidden"> | ||
<div class="d-flex"> | ||
<label class="flex-auto my-0">총 <span class="lotto-count"> | ||
<!--로또 개수--></span>개를 구매하였습니다.</label> | ||
<div class="flex-auto d-flex justify-end pr-1"> | ||
<label class="switch" id="lotto-numbers-toggle"> | ||
<input type="checkbox" class="lotto-numbers-toggle-button" /> | ||
<label for="lotto-numbers-toggle-button" class="switch" id="lotto-numbers-toggle"> | ||
<input type="checkbox" id="lotto-numbers-toggle-button" class="lotto-numbers-toggle-button" /> | ||
<span class="text-base font-normal">번호보기</span> | ||
</label> | ||
</div> | ||
</div> | ||
<div class="lotto-list d-flex flex-wrap"> | ||
<div class="lotto-list-container d-flex flex-wrap"> | ||
<!-- 로또 목록 --> | ||
</div> | ||
</section> | ||
<section class="winning-number-form-container hidden"> | ||
<form class="mt-9"> | ||
<label class="flex-auto d-inline-block mb-3">지난 주 당첨번호 6개와 보너스 넘버 1개를 입력해주세요.</label> | ||
<section class="winning-number-form-section hidden"> | ||
<form class="mt-9" id="winning-number-form"> | ||
<label class="flex-auto d-inline-block mb-3">지난 주 당첨번호 6개와 보너스 넘버 1개를 | ||
입력해주세요.</label> | ||
<div class="d-flex"> | ||
<div> | ||
<h4 class="mt-0 mb-3 text-center">당첨 번호</h4> | ||
<label for="first-winning-number" class="mt-0 mb-3 text-center text-base d-block font-semibold">당첨 | ||
번호</label> | ||
<div> | ||
<input type="number" class="winning-number mx-1 text-center" /> | ||
<input type="number" class="winning-number mx-1 text-center" /> | ||
<input type="number" class="winning-number mx-1 text-center" /> | ||
<input type="number" class="winning-number mx-1 text-center" /> | ||
<input type="number" class="winning-number mx-1 text-center" /> | ||
<input type="number" class="winning-number mx-1 text-center" /> | ||
<input type="number" name="winning-number" aria-label="winning-number1" id="first-winning-number" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 접근성 측면에서 사용하신 부분은 좋아보입니다! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 해당 부분은 label에서 for을 이용하기 위해서 속성을 주었습니다. 지금 보니 이렇게 사용할거면 js 내에서 focus를 줄 때 이용했어도 좋을 것 같네요. |
||
class="winning-number mx-1 text-center" min="1" max="45" required /> | ||
<input type="number" name="winning-number" aria-label="winning-number2" | ||
class="winning-number mx-1 text-center" min="1" max="45" required /> | ||
<input type="number" name="winning-number" aria-label="winning-number3" | ||
class="winning-number mx-1 text-center" min="1" max="45" required /> | ||
<input type="number" name="winning-number" aria-label="winning-number4" | ||
class="winning-number mx-1 text-center" min="1" max="45" required /> | ||
<input type="number" name="winning-number" aria-label="winning-number5" | ||
class="winning-number mx-1 text-center" min="1" max="45" required /> | ||
<input type="number" name="winning-number" aria-label="winning-number6" | ||
class="winning-number mx-1 text-center" min="1" max="45" required /> | ||
</div> | ||
</div> | ||
<div class="bonus-number-container flex-grow"> | ||
<h4 class="mt-0 mb-3 text-center">보너스 번호</h4> | ||
<label for="bonus-number" class="mt-0 mb-3 text-center text-base d-block font-semibold">보너스 번호</label> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 중복된 클래스를 사용하지 않기 위해서, class style을 잘 활용하고 계시는 것 같습니다! |
||
<div class="d-flex justify-center"> | ||
<input type="number" class="bonus-number text-center" /> | ||
<input type="number" name="bonus-number" id="bonus-number" aria-label="bonus-number" | ||
class="bonus-number text-center" min="1" max="45" required /> | ||
</div> | ||
</div> | ||
</div> | ||
<button type="button" class="open-result-modal-button mt-5 btn btn-cyan w-100"> | ||
<button type="submit" class="open-result-modal-button mt-5 btn btn-cyan w-100"> | ||
결과 확인하기 | ||
</button> | ||
</form> | ||
</section> | ||
</div> | ||
</div> | ||
|
||
<div class="modal"> | ||
<div class="modal hidden"> | ||
<div class="modal-inner p-10"> | ||
<div class="modal-close"> | ||
<svg viewbox="0 0 40 40"> | ||
|
@@ -87,38 +97,38 @@ <h2 class="text-center">🏆 당첨 통계 🏆</h2> | |
<tr class="text-center"> | ||
<td class="p-3">3개</td> | ||
<td class="p-3">5,000</td> | ||
<td class="p-3">n개</td> | ||
<td class="p-3"><span class="winning-count" data-rank="5"></span>개</td> | ||
</tr> | ||
<tr class="text-center"> | ||
<td class="p-3">4개</td> | ||
<td class="p-3">50,000</td> | ||
<td class="p-3">n개</td> | ||
<td class="p-3"><span class="winning-count" data-rank="4"></span>개</td> | ||
</tr> | ||
<tr class="text-center"> | ||
<td class="p-3">5개</td> | ||
<td class="p-3">1,500,000</td> | ||
<td class="p-3">n개</td> | ||
<td class="p-3"><span class="winning-count" data-rank="3"></span>개</td> | ||
</tr> | ||
<tr class="text-center"> | ||
<td class="p-3">5개 + 보너스볼</td> | ||
<td class="p-3">30,000,000</td> | ||
<td class="p-3">n개</td> | ||
<td class="p-3"><span class="winning-count" data-rank="2"></span>개</td> | ||
</tr> | ||
<tr class="text-center"> | ||
<td class="p-3">6개</td> | ||
<td class="p-3">2,000,000,000</td> | ||
<td class="p-3">n개</td> | ||
<td class="p-3"><span class="winning-count" data-rank="1"></span>개</td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
</div> | ||
<p class="text-center font-bold">당신의 총 수익률은 %입니다.</p> | ||
<p class="text-center font-bold">당신의 총 수익률은 <span class="winning-rate"></span>%입니다.</p> | ||
<div class="d-flex justify-center mt-5"> | ||
<button type="button" class="btn btn-cyan">다시 시작하기</button> | ||
<button type="button" class="btn btn-cyan restart-button">다시 시작하기</button> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</main> | ||
<script type="module" src="./src/js/index.js"></script> | ||
</body> | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
테스트 로직이 점점 길어지고 있는데, 테스트 로직을 분리해보는 건 어떨까요?
가령,도메인 단위로 나눠볼 수도 있겠구요! UI, 기능테스트로 분리해볼 수도 있겠구요!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 부분은 기능이 증가함에 따라서 점점 길어지고 있는 것 같아 분리를 해볼 계획이었습니다 : ) 이전에는 에러처리와 메인 기능으로 분리했었는데, 도메인이나 UI/기능으로 구분하는 것도 좋네요!