계산기 만들기
- 함수와 switch문 사용하여 계산기 만들기
- 💡 prompt, input 등에서 받아오는 값은 문자열이기 때문에 형변환 해줘야 함.
* input 태그로 첫번째 숫자 입력 받기 (예. 10)
-> let firstNum = document.getElementById("num1").value;
* select 콤보 박스로 (사칙연산 선택) (+, -, *, /)
-> let op = document.getElementById("operator").value;
* input 태그로 두번째 숫자 입력 받기 (예. 20)
-> let secondNum = document.getElementById("num2").value;
* 계산 버튼을 만들기
-> html에서 자바스크립트 함수 호출 :
<button onclick="함수명()">계산하기</button>
JavaScript
function calculator() {
const firstNum = Number(document.getElementById("num1").value);
const secondNum = Number(document.getElementById("num2").value);
const op = document.getElementById("operator").value;
let result;
switch(op) {
case "+" :
result = add(firstNum,secondNum);
break;
case "-" :
result = sub(firstNum,secondNum);
break;
case "*" :
result = mul(firstNum,secondNum);
break;
case "/" :
result = div(firstNum,secondNum);
break;
}
document.getElementById("rst").innerHTML = `${result}`;
}
function add(a,b) {
return a+b;
}
function sub(a,b) {
return a-b;
}
function mul(a,b) {
return a*b;
}
function div(a,b) {
return a/b;
}HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#rst {
width: 250px;
height: 80px;
border: 1px solid #696969;
border-radius: 5px;
background-color: lemonchiffon;
}
</style>
</head>
<body>
<label for="num1">첫번째 숫자</label>
<input id="num1" type="number">
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<label for="num2">두번째 숫자</label>
<input id="num2" type="number">
<button onclick="calculator()">계산하기</button>
<br><br>
<p id="rst"></p>
<script src="./230327_1_1_계산기.js"></script>
</body>
</html>
중복 없는 로또 번호
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>로! 또!</title>
<style>
h1 {
text-align: center;
}
.container {
display: flex;
justify-content: center;
gap: 10px;
}
.item {
width: 50px;
height: 50px;
text-align: center;
line-height: 47px;
color: #fff;
font-weight: bold;
font-size: 30px;
}
.item1 {
background-color: #845ec2;
}
.item2 {
background-color: #d65db1;
}
.item3 {
background-color: #ff6f91;
}
.item4 {
background-color: #ff9671;
}
.item5 {
background-color: #ffc75f;
}
.item6 {
background-color: #dbdb03;
}
.button-container {
text-align: center;
margin-bottom: 25px;
}
button {
width: 100px;
height: 40px;
box-shadow: 1px 1px 2px #000;
font-size: 16px;
}
</style>
</head>
<body>
<h1>이번주 로또 당첨 예상 번호</h1>
<div class="button-container">
<button onclick="lottoNum()">클릭!</button>
</div>
<div class="container">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item5"></div>
<div class="item item6"></div>
</div>
<script src="./230327_2_1_중복없는로또.js"></script>
</body>
</html>JavaScript
function lottoNum() {
let lotto = [];
let tmp;
while(lotto.length < 6) {
tmp = Math.floor(Math.random() * 44 + 1);
if(!lotto.includes(tmp)) lotto.push(tmp);
}
let items = document.querySelectorAll(".item");
for(let i = 0; i < items.length; i++) {
items[i].innerText = lotto[i];
}
}
'🎨 Frontend > JavaScript' 카테고리의 다른 글
| 🍦Vanilla JS ⑤ 객체 - (2).1 표준 내장 객체 : String, Number (0) | 2023.03.28 |
|---|---|
| 🍦Vanilla JS ⑤ 객체 - (1) 리터럴 객체 (0) | 2023.03.28 |
| 🍦Vanilla JS ④ 함수 - 함수 선언문, 표현식, 화살표, 콜백, 클로저 (2) | 2023.03.27 |
| 🍦Vanilla JS ③ 조건문과 반복문 (2) | 2023.03.22 |
| 🍦Vanilla JS ② 기초 문법 (2) 연산자, 형변환 (0) | 2023.03.22 |
