Q1. 철수는 369게임을 더럽게 못합니다.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>Hello, world!</title>
</head>
<body>
<!------------------------------------------------------------------>
<!-- modal -->
<div class="black-bg">
<div class="white-bg">
<h4>숫자를 입력하세요</h4>
<form>
<div class="my-3">
<input type="number" class="form-control" name="number">
</div>
<p id="result"></p>
<button type="submit" class="btn btn-primary" id="submit">확인하기</button>
<button type="button" class="btn btn-danger" id="close">나가기</button>
</form>
</div>
</div>
<!------------------------------------------------------------------>
<div class="main-bg">
<h2>3!6!9! 게임</h4>
<br>
<br>
<button id="start" class="btn btn-danger"><b> 시작하기 </b></button>
</div>
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script>
/* STEP 3 */
// 모달창 노출
$('#start').on('click', function(){
$('.black-bg').addClass('show-modal');
})
// 모달창 닫기
$('#close').on('click', function(){
$('.black-bg').removeClass('show-modal');
})
// 로그인 버튼 누른 후의 이벤트들
$('#submit').on('click', function(){
event.preventDefault();
if ($('input[name="number"]').val().trim() != ''){
$('#result').text('결과: ' + threesixnineGame($('input[name="number"]').val()));
} else {
$('#result').text('숫자를 입력해주세요.');
}
});
// 369게임 함수
function threesixnineGame(num) {
if (num%3==0){
return '박수를 치세요!'
} else {
return '통과를 하세요!'
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
</body>
</html>
Q2. 하지만 369게임 업그레이드 버전이 등장했습니다.
function threesixnineGameUp(num) {
if (num%3==0 && num%9!=0){
return '박수를 치세요!'
} else if(num%3==0 && num%9==0){
return '박수박수를 치세요!'
} else {
return '통과를 하세요!'
}
}
Q3. 공인중개사 시험점수를 입력하면 합격인지 알려주는 함수를 만들어봅시다.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>Hello, world!</title>
</head>
<body>
<!------------------------------------------------------------------>
<!-- modal -->
<div class="black-bg">
<div class="white-bg">
<h4>시험 점수를 입력하세요</h4>
<form>
<div class="my-3">
<input type="number" class="form-control" name="test1" placeholder="개론 점수를 입력해주세요.">
</div>
<div class="my-3">
<input type="number" class="form-control" name="test2" placeholder="민법 점수를 입력해주세요.">
</div>
<p id="result"></p>
<button type="submit" class="btn btn-primary" id="submit">확인하기</button>
<button type="button" class="btn btn-danger" id="close">나가기</button>
</form>
</div>
</div>
<!------------------------------------------------------------------>
<div class="main-bg">
<h2>공인중개사 시험 합격했냐?</h4>
<br>
<br>
<button id="start" class="btn btn-danger"><b> 확인하기 </b></button>
</div>
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script>
/* STEP 3 */
// 모달창 노출
$('#start').on('click', function(){
$('.black-bg').addClass('show-modal');
})
// 모달창 닫기
$('#close').on('click', function(){
$('.black-bg').removeClass('show-modal');
})
// 로그인 버튼 누른 후의 이벤트들
$('#submit').on('click', function(){
event.preventDefault();
$('#result').text(successOrFail($('input[name="test1"]').val(), $('input[name="test2"]').val()));
});
// 조건1 두 시험의 합이 120이상 합격
// 조건2 한 시험이 40점 미만이라면 불합격
function successOrFail(score1, score2) {
if (score1 < 40 || score2 < 40) {
return '불합격하셨습니다.'
} else {
if (Number(score1) + Number(score2) > 119){
alert(score1 + score2)
return '축하합니다. 합격하셨습니다.'
} else {
return '불합격하셨습니다.'
}
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
</body>
</html>
'Web > JAVASCRIPT' 카테고리의 다른 글
| setTimeout 타이머 (0) | 2023.07.23 |
|---|---|
| 변수문법과 Dark mode 버튼만들기 (0) | 2023.07.20 |
| 폼 만들기(if else) (0) | 2023.07.15 |
| 모달창만들기와 간단한 애니메이션 (0) | 2023.07.15 |
| jQuery (0) | 2023.07.13 |
