본문 바로가기
Project/mini

[계산기] 계산기만들기 예제 따라하기 (유튜브 수코딩)

개발자두슬 2023. 6. 3.
반응형

 

 

CSS
*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

body{
    background-color: #1f1f1f;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.calculator{
    width: 287px;
    border: 1px solid #333;
    background-color: #ccc;
    padding: 5px;
} 

.calculator form{
    display: grid;
    grid-template-columns: repeat(4, 65px);
    grid-auto-rows: 65px;
    grid-gap: 5px;
}

.calculator form input{
    border: 2px solid #333;
    cursor: pointer;
    font-size: 19px;
}

.calculator form input :hover {
    box-shadow: 1px 1px 2px #333;
}

.calculator form .clear{
    background-color: #ed4848;
}

.calculator form .operator{
    background-color: orange;
}

.calculator form .dot{
    background-color: green;
}

.calculator form input[type="text"]{
    grid-column: span 4;
    text-align: right;
    padding: 0 10px;
    color: #000;
}

.calculator form .clear{
    grid-column: span 3;
}

.calculator form .result{
    grid-column: span 2;
}

 

HTML
<!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>Cute Calculator</title>
    <link rel="stylesheet" href="calculator.css" />
    <style>
      .calculator {
        border-color: rgb(0, 0, 0);
        background-color: lavender;
      }

      .calculator form input {
        color: rgb(0, 0, 0);
      }

      .calculator form input.operator {
        background-color: rgb(255, 225, 0);
      }
      .calculator .result {
        background-color: green;
      }
      .calculator form input:hover {
        box-shadow: 1px 1px 2px #333;
      }
    </style>
  </head>
  <body>
    <div class="calculator">
      <form name="forms">
        <input type="text" name="output" readonly />
        <input
          type="button"
          class="clear"
          value="C"
          onclick="document.forms.output.value = ''"
        />
        <input
          type="button"
          class="operator"
          value="/"
          onclick="document.forms.output.value += '/'"
        />
        <input
          type="button"
          value="1"
          onclick="document.forms.output.value += '1'"
        />
        <input
          type="button"
          value="2"
          onclick="document.forms.output.value += '2'"
        />
        <input
          type="button"
          value="3"
          onclick="document.forms.output.value += '3'"
        />
        <input
          type="button"
          class="operator"
          value="*"
          onclick="document.forms.output.value += '*'"
        />
        <input
          type="button"
          value="4"
          onclick="document.forms.output.value+='4'"
        />
        <input
          type="button"
          value="5"
          onclick="document.forms.output.value+='5'"
        />
        <input
          type="button"
          value="6"
          onclick="document.forms.output.value+='6'"
        />
        <input
          type="button"
          class="operator"
          value="+"
          onclick="document.forms.output.value+='+'"
        />
        <input
          type="button"
          value="7"
          onclick="document.forms.output.value+='7'"
        />
        <input
          type="button"
          value="8"
          onclick="document.forms.output.value+='8'"
        />
        <input
          type="button"
          value="9"
          onclick="document.forms.output.value+='9'"
        />
        <input
          type="button"
          class="operator"
          value="-"
          onclick="document.forms.output.value+='-'"
        />
        <input
          type="button"
          class="dot"
          value="."
          onclick="document.forms.output.value+='.'"
        />
        <input
          type="button"
          value="0"
          onclick="document.forms.output.value += '0'"
        />
        <input type="button" class="result" value="="
        onclick="document.forms.output.value=eval(document.forms.output.value)"
      </form>
    </div>
    <script></script>
  </body>
</html>

 

value와 name이 헷갈렸는데 이젠 확실히 이해했다.

 

반응형

'Project > mini' 카테고리의 다른 글

[바닐라JS] Todo List 만들기 - DOM 자바스크립트 예제  (0) 2023.08.14
[typescript/타입스크립트] ToDo List 미니 프로젝트 - FullList 코드리뷰  (0) 2023.07.31
[Spotify] 스포티파이 프리미엄 클론코딩 (미완성본) Box레이아웃  (0) 2023.06.11
[McDonald] 맥도날드 홈페이지 클론코딩 | 그리드 레이아웃 반응형 웹  (0) 2023.06.11
[Youtube] 유튜브 클론코딩, 처음으로 막힘없이 따라했다! !! (유튜브 드림코딩)  (0) 2023.06.06

'Project/mini' 관련글

티스토리툴바