개발 노트

사칙연산 사이트 만들기 본문

JavaScript

사칙연산 사이트 만들기

알 수 없는 사용자 2022. 1. 5. 13:04
  • 내용

사칙연산

단순한 두자리 연산 - 연산자 a와 b 의 연산 후 결과 출력

문제와 답을 박스형식으로 만들고 예시로 [11]+[19]=[30] [확인]

확인 누르면 (맞았습니다. 틀렸습니다. 알려주기)

  • 사칙연산 사이트 레퍼런스 - 일일수학

11math.com

누르면 맞았습니다. 틀렸습니다

https://www.11math.com/calc#72CE6769

  • 입력한 시간 날짜

 

<!DOCTYPE html>
<html lang="ko">
  <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>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>사칙연산 연습</h1>

    <p>숫자를 입력하세요</p>
    <div id="center">
      <input type="text" size="3" id="num1" class="intext11" />
      <span id="opr"></span>
      <input type="text" size="3" id="num2" class="intext11" />
    </div>

    <span id="res"></span>

    <!-- text input -->
    <br />

    <p>연산을 선택하세요</p>
    <div id="moem">
      <button class="op" type="button" onclick="fnPlus()">+</button>
      <button class="op" type="button" onclick="fnMinus()">-</button>
      <button class="op" type="button" onclick="fnMulti()">X</button>
      <button class="op" type="button" onclick="fnDiv()">/</button>
    </div>

    <div id="wrap">
      <span>값을 입력하세요</span>
      <div class="box2">
        <input tpye="text" id="intext2" />
      </div>
      <script src="main.js"></script>
      <!-- button -->
      <div class="box2">
        <button class="btn" onclick="Answer()">확인해보기</button>
        <button class="btn" onclick="re()">다시하기</button>
      </div>
    </div>
    <p>정답확인</p>
    <div class="show-anwser"><span id="ans"></span></div>
  </body>
</html>
#wrap {
  width: 400px;
  margin: 50px auto;
  text-align: center;
  background-color: rgb(238, 214, 214);
  border-radius: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px;
}

body {
  background-color: #000000;
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: roboto;
}

h1 {
  width: 400px;
  margin: 100px auto;
  text-align: center;
  color: rgb(255, 255, 255);
}
p {
  margin: 10px auto;
  text-align: center;
  color: #fff;
}

button {
  margin: 10px 3px;
  color: rgb(0, 0, 0);
  border: 1px solid #aaa;
  cursor: pointer;
}
button:hover {
  color: #fff;
  background-color: rgb(255, 0, 98);
}
#res {
  font-size: 20px;
  color: rgb(255, 0, 98);
  font-weight: bold;
  display: none;
}
input {
  text-align: center;
}

.box1 {
  display: flex;
}

#intext2 {
  width: 300px;
  height: 35px;
  margin: 10px 0px;
  padding: 0px 15px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  border: none;
}

.btn {
  padding: 8px 20px;
  border: none;
  font-size: 16px;
  color: #fff;
  background: #fb6868;
  box-shadow: 1px 1px 0px #999, 2px 2px 0px #999, 3px 2px 0px #999,
    4px 4px 0px #999, 5px 5px 0px #999;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.intext11 {
  width: 76px;
  margin: 5px;
  font-size: 20px;
  font-weight: 600;
  height: 55px;
  padding: 0px 10px;
  text-align: center;
  border: none;
  background: #fff;
  box-shadow: 1px 1px 0px #999, 2px 2px 0px #999, 3px 2px 0px #999,
    4px 4px 0px #999, 5px 5px 0px #999;
}

.op {
  width: 76px;
  font-size: 20px;
  font-weight: 600;
  height: 55px;
  padding: 0px 10px;
  text-align: center;
  border: none;
  background: rgb(255, 255, 255);
  border-radius: 10px;
}

#moem {
  width: 400px;
  margin: 0px auto;
  text-align: center;
  background-color: rgb(202, 162, 162);
  border-radius: 50px;
}

#opr {
  width: 100%;
  height: 55px;
  background: #fb6868;
  margin: 0px 0px 60px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  width: 100px;
  margin: 10px auto;
}

.show-anwser {
  width: 100%;
  height: 55px;
  background: #f8f8f8;
  margin: 0px 0px 60px 0px;

  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  width: 400px;
  margin: 10px auto;
}

#center {
  width: 10px;

  background: #fb6868;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  width: 400px;
  margin: 10px auto;
}

#ans {
  font-weight: bold;
}​
let num1;
let num2;
let opr = document.querySelector("#opr");
let res = document.querySelector("#res");

function fnPlus() {
  num1 = Number(document.querySelector("#num1").value);
  num2 = Number(document.querySelector("#num2").value);
  opr.innerText = "+";
  res.innerText = num1 + num2;

  if (isNaN(num1 + num2)) {
    alert("숫자만 입력해주세요");
    res.innerText = "";
    opr.innerText = "";
  }
}

function fnMinus() {
  num1 = Number(document.querySelector("#num1").value);
  num2 = Number(document.querySelector("#num2").value);
  opr.innerText = "-";
  res.innerText = num1 - num2;

  if (isNaN(num1 - num2)) {
    alert("숫자만 입력해주세요");
    res.innerText = "";
    opr.innerText = "";
  }
}

function fnMulti() {
  num1 = Number(document.querySelector("#num1").value);
  num2 = Number(document.querySelector("#num2").value);
  opr.innerText = "X";
  res.innerText = num1 * num2;

  if (isNaN(num1 * num2)) {
    alert("숫자만 입력해주세요");
    res.innerText = "";
    opr.innerText = "";
  }
}

function fnDiv() {
  num1 = Number(document.querySelector("#num1").value);
  num2 = Number(document.querySelector("#num2").value);
  opr.innerText = "/";
  res.innerText = num1 / num2;

  if (isNaN(num1 * num2)) {
    alert("숫자만 입력해주세요");
    res.innerText = "";
    opr.innerText = "";
  }
}

function Answer() {
  let user = document.getElementById("intext2").value;

  if (user == Number(res.innerHTML)) {
    document.getElementById("ans").innerHTML = "맞았습니다!";
    document.getElementById("ans").style.color = "blue";
  } else {
    document.getElementById("ans").innerHTML =
      "정답은 " + Number(res.innerHTML) + " . 틀렸습니다";
    document.getElementById("ans").style.color = "red";
  }
}

const input = document.getElementById("intext2");
input.addEventListener("keyup", (event) => {
  if (event.keyCode === 13) {
    Answer();
  }
});

function re() {
  const re = document.getElementById("intext2");
  const re2 = document.getElementById("ans");
  re.value = null;
  re2.value = null;
}
저작자표시

'JavaScript' 카테고리의 다른 글

카카오 책검색 api 사용하기  (0) 2022.01.08
사칙연산 연습문제 만들기  (0) 2022.01.07
투두리스트 html,css,js  (0) 2022.01.03
DOM은 무엇인가  (0) 2022.01.02
자바스크립트 객체  (0) 2022.01.01
'JavaScript' Related Articles more