🍦Vanilla JS ④ 함수 - 실습 예제 (계산기 만들기, 로또 번호)

계산기 만들기

함수와 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

계산기 만들기

JavaScript

HTML

중복 없는 로또 번호

HTML

JavaScript

'🎨 Frontend > JavaScript' 카테고리의 다른 글

검색 태그

티스토리툴바