diff --git a/index.html b/index.html index aed8f6d3..b42c18f6 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,6 @@ 🎱 ν–‰μš΄μ˜ 둜또 -
@@ -17,30 +16,35 @@

🎱 ν–‰μš΄μ˜ 둜또

- +
- +
-
- 🎟️ - 🎟️ - 🎟️ - 🎟️ - 🎟️ -
+
+ - diff --git a/src/js/index.js b/src/js/index.js index 1e2fb993..026c1a25 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,17 +1,17 @@ -const $showResultButton = document.querySelector('.open-result-modal-button') -const $modalClose = document.querySelector('.modal-close') -const $modal = document.querySelector('.modal') +const $showResultButton = document.querySelector(".open-result-modal-button"); +const $modalClose = document.querySelector(".modal-close"); +const $modal = document.querySelector(".modal"); const $lottoNumbersToggleButton = document.querySelector( - '.lotto-numbers-toggle-button' -) + ".lotto-numbers-toggle-button" +); -const onModalShow = () => { - $modal.classList.add('open') -} +export const onModalShow = () => { + $modal.classList.add("open"); +}; const onModalClose = () => { - $modal.classList.remove('open') -} + $modal.classList.remove("open"); +}; -$showResultButton.addEventListener('click', onModalShow) -$modalClose.addEventListener('click', onModalClose) +// $showResultButton.addEventListener("click", onModalShow); +$modalClose.addEventListener("click", onModalClose); diff --git a/src/step-web-index.js b/src/step-web-index.js index 72e7fe2c..c44984f2 100644 --- a/src/step-web-index.js +++ b/src/step-web-index.js @@ -2,5 +2,131 @@ * step 3의 μ‹œμž‘μ μ΄ λ˜λŠ” νŒŒμΌμž…λ‹ˆλ‹€. * λ…Έλ“œ ν™˜κ²½μ—μ„œ μ‚¬μš©ν•˜λŠ” readline 등을 뢈러올 경우 μ •μƒμ μœΌλ‘œ λΉŒλ“œν•  수 μ—†μŠ΅λ‹ˆλ‹€. */ +import "./css/index.css"; +import "./js/index"; +import { + buyLottos, + calculateProfitRate, + getLottoRanks, +} from "./js/domain/LottoService"; +import { LottoStats } from "./js/domain/LottoStats"; +import { LottoRank } from "./js/domain/enum/LottoRank"; +import { onModalShow } from "./js/index"; -console.log("Web Browser!"); +const $buyButton = document.getElementById("buyButton"); +const $moneyInput = document.getElementById("moneyInput"); +const $totalCountLabel = document.getElementById("totalCountLabel"); +const $lottosDiv = document.getElementById("lottosDiv"); +const $numbersToggle = document.getElementById("numbersToggle"); +const $winningNumberInputs = document.getElementsByClassName("winning-number"); +const $bonusNumberInput = document.getElementsByClassName("bonus-number")[0]; +const $resultButton = document.getElementById("resultButton"); + +const $fifthRankCountSpan = document.getElementById("fifthRankCount"); +const $fourthRankCountSpan = document.getElementById("fourthRankCount"); +const $thirdRankCountSpan = document.getElementById("thirdRankCount"); +const $secondRankCountSpan = document.getElementById("secondRankCount"); +const $firstRankCountSpan = document.getElementById("firstRankCount"); +const $profitRateSpan = document.getElementById("profitRate"); + +const $restartButton = document.getElementById("restartButton"); + +let lottos = null; + +$buyButton.addEventListener("click", buyLottosEvent); + +$moneyInput.addEventListener("keydown", (event) => { + if (event.key === "Enter") { + event.preventDefault(); + buyLottosEvent(); + } +}); + +$numbersToggle.addEventListener("change", (event) => { + const display = event.currentTarget.checked ? "" : "none"; + $lottosDiv.style.display = display; +}); + +$resultButton.addEventListener("click", showLottoStats); + +[...$winningNumberInputs].forEach((e) => { + e.addEventListener("keydown", (event) => { + if (event.key === "Enter") { + showLottoStats(); + } + }); +}); + +$bonusNumberInput.addEventListener("keydown", (event) => { + if (event.key === "Enter") { + showLottoStats(); + } +}); + +$restartButton.addEventListener("click", () => location.reload()); + +function buyLottosEvent() { + try { + const money = getMoney(); + lottos = buyLottos(money); + setTotalCountLabel(lottos.length); + setLottosDiv(lottos.map((e) => e.numbers)); + $winningNumberInputs[0].focus(); + } catch (err) { + alert(err.message); + } +} + +function showLottoStats() { + try { + const winningNumbers = getWinningNumbers(); + const bonusNumber = getBonusNumber(); + + const lottoRanks = getLottoRanks(lottos, winningNumbers, bonusNumber); + + const { rankCount, totalCount, totalReward } = new LottoStats(lottoRanks); + + $fifthRankCountSpan.innerHTML = rankCount.get(LottoRank.FIFTH.rank) ?? 0; + $fourthRankCountSpan.innerHTML = rankCount.get(LottoRank.FOURTH.rank) ?? 0; + $thirdRankCountSpan.innerHTML = rankCount.get(LottoRank.THIRD.rank) ?? 0; + $secondRankCountSpan.innerHTML = rankCount.get(LottoRank.SECOND.rank) ?? 0; + $firstRankCountSpan.innerHTML = rankCount.get(LottoRank.FIRST.rank) ?? 0; + + const profitRate = calculateProfitRate(totalCount, totalReward); + $profitRateSpan.innerHTML = profitRate; + + onModalShow(); + } catch (err) { + alert(err.message); + } +} + +function getWinningNumbers() { + return [...$winningNumberInputs].map((e) => parseInt(e.value)); +} + +function getBonusNumber() { + return parseInt($bonusNumberInput.value); +} + +function getMoney() { + return parseInt($moneyInput.value); +} + +function setTotalCountLabel(length) { + $totalCountLabel.innerHTML = `총 ${length}개λ₯Ό κ΅¬λ§€ν•˜μ˜€μŠ΅λ‹ˆλ‹€.`; +} + +function setLottosDiv(numbersList) { + const spans = numbersList.map(generateLottoNumbersSpan); + $lottosDiv.replaceChildren(...spans); +} + +function generateLottoNumbersSpan(numbers) { + const span = document.createElement("span"); + span.classList.add("mx-1"); + span.classList.add("text-4xl"); + span.value = numbers; + span.innerHTML = `🎟️ ${numbers}`; + return span; +}