<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" src="./main.js"></script>
<title>Document</title>
</head>
<body>
<h1>Random Number Game</h1>
<form class="main-form">
<p>
Generate a number between 0 and<input
class="set-input"
type="number"
min="0" />
</p>
<p>
guess the number: <input class="user-input" type="number" /><button>
play!
</button>
</p>
</form>
<ul class="result"></ul>
</body>
</html>
document.querySelector(".main-form").addEventListener("submit", (e) => {
e.preventDefault();
let maxRange = document.querySelector(".set-input").value;
let userChose = document.querySelector(".user-input").value;
let ranNum = Math.floor(Math.random() * maxRange) + 1;
let result = userChose == ranNum ? "You WIn" : "You Lost";
document.querySelector(
".result"
).innerHTML = ` <li>you Chose : ${userChose}, the machine chose : ${ranNum}</li>
<li>${result}</li>`;
});
노마드 코더 Nomad Coders
코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요!
nomadcoders.co
'프로그래밍 > Javascript' 카테고리의 다른 글
| Javascript n초후 검색어기록 저장,검색어 삭제기능 구현 (0) | 2023.09.21 |
|---|---|
| #5 코드챌린지 크리스마스디데이 (0) | 2023.09.14 |
| 챌린지3-4일차) 이벤트리스너 코드챌린지 (0) | 2023.09.08 |
| [javascript]함수 선언 var let const 차이 (0) | 2023.09.06 |
| 챌린지2일차)변수,배열,객체 (0) | 2023.09.06 |