HTML, CSS, JAVASCRIPT로 나만의 계산기 만들기

안녕하세요 여러분!

오늘 우리는 HTML, CSS 및 JAVASCRIPT를 사용하여 자체 계산기를 만들 것입니다.

이 프로젝트는 프런트 엔드와 백 엔드의 두 부분으로 나뉩니다. HTML을 사용하여 계산기의 구조를 만들고 Front end 부분에서 CSS를 사용하여이를 아름답게 만들 것입니다.

백엔드 부분에서 우리는 그것에 생명을 줄 것입니다. 즉, 방정식을 풀기 위해 작동하게 할 것입니다. 백엔드 부분은 javascript를 사용하여 수행됩니다.

최종 프로젝트는 다음과 같습니다.

최종 출력은 다음과 같습니다.

이제 1 부 : 계산기의 구조와 디자인을 살펴 보겠습니다.

먼저 원하는 코드 편집기를 엽니 다. 제 경우에는 VS Code를 사용하고 있습니다. 원하는 사람 (Sublime Text, Atom 등)을 사용할 수 있습니다. 메모장을 사용하지 마십시오.

먼저 새 파일을 "* projectname * .html"로 저장합니다. 그런 다음 HTML 파일의 기본 구조 (상용구)를 추가 할 것입니다. VS Code에서는 "!"를 입력하여 가져올 수 있습니다. 숭고한 텍스트에서 Enter 키를 누르면 "<html"을 입력하고 Enter 키를 눌러 얻을 수 있습니다. 이제 다음과 같은 내용이 표시됩니다.

계산기 프로젝트에 부여 할 이름으로 "문서"텍스트를 변경합니다.

이제 사용자에게 출력을 표시 할 영역을 정의해야합니다. 이것은 우리의 출력 화면입니다. 이를 위해 저는 수업 전시로 부서를 만들고 있습니다.

<div class="display">   </div>

<p id="output">0</p>

첫 번째 버튼 행에는 3 개의 버튼이 있지만 다음 행에는 4 개의 버튼이 있습니다. 이것은 첫 번째 행의 지우기 버튼이 계산기의 기본 버튼이기 때문에 2 개의 버튼으로 대체되기 때문입니다 (0도 마찬가지입니다). 위의 스크린 샷에서도 보셨을 것입니다.

스타일링에 대해 걱정하지 마세요. HTML 구조를 다 마치면 CSS 섹션에서 할 것입니다.

이를 위해 "first-row"클래스로 새 div를 정의하고 있습니다. 여기에 첫 번째 행에 속한 모든 버튼이 여기에 배치됩니다. 버튼은 "C", "%"및 "/"입니다.

<div class="first-row"> </div>

ID는 "row_no-button_no"형식을 따라야합니다. 예 : 버튼이 행 1 용이고 행의 첫 번째 버튼 인 경우 ID는 "r1–1"입니다.

아래 예 참조

<button id="r1-1">C</button>

지금까지의 계산기는 다음과 같아야합니다.

위와 같은 내용이 나타나지 않으면 주어진 HTML을 참조하십시오. 복사하여 붙여 넣기 만하지 마십시오). 모든 것이 완벽하다면 건배하십시오.

<p id="output">0</p>
<div class="first-row">
   <button id="r1-1">C</button>
   <button id="r1-3">%</button>
   <button id="r1-4">/</button>
</div>
<div class="second-row">
   <button id="r2-1" >7</button>
   <button id="r2-2" >8</button>
   <button id="r2-3" >9</button>
   <button id="r2-4" >X</button>
</div>
<div class="third-row">
   <button id="r3-1" >4</button>
   <button id="r3-2" >5</button>
   <button id="r3-3" >6</button>
   <button id="r3-4" >-</button>
</div>
<div class="fourth-row">
   <button id="r4-1"  >1</button>
   <button id="r4-2"  >2</button>
   <button id="r4-3"  >3</button>
   <button id="r4-4"  >+</button>
</div>
<div class="fifth-row">
  <button id="r5-1" >0</button>
  <button id="r5-2" >.</button>
  <button id="r5-3" >=</button>
</div>

하지만 계산기가보기 흉해 보입니다. CSS 섹션으로 이동하겠습니다.

설명하는 데 더 많은 시간이 걸리므로 계산기가 응답하지 않습니다. 따라서이 간단한 코딩 프로세스를 이해할 수있게되면 계산기를 반응 형으로 만들 수 있습니다.

따라서 새 CSS 파일 (예 : "style.css")을 HTML 페이지에 연결해야합니다.

이를 위해 head 태그 안에 아래 코드가 있어야합니다.

<link rel="stylesheet" href="style.css" type="text/css">

위의 스냅 샷처럼 보이게해야합니다.

따라서 출력 화면을 그렇게 만드는 데 5 가지가 관련됩니다.

  1. 배경색입니다
  2. 텍스트 정렬
  3. 글꼴 크기

이에 대한 CSS 코드를 작성해 보겠습니다.

.display {
      background-color: rgb(201, 201, 201);
      padding: 15px;
      width: 250px;
      text-align: right;
      font-size: 20px;
      border-top-left-radius:10px;
      border-top-right-radius:10px;
}

축하합니다. 출력 화면을보기 좋게 만들었습니다.

이제 비슷하게 보이기를 원하는 모든 버튼에 대해 공통 CSS 코드를 작성합니다. (0과 C를 제외하고 다시 돌아올 것입니다).

여기에는 7 가지가 포함됩니다.

  1. 신장
  2. 여유
  3. 배경색
  4. 텍스트 색상
  5. 글꼴 크기

button {
      padding: 10px;
      width: 67px;
      height: 45px;
      margin-top: 10px;
      background-color: rgb(194, 194, 194);
      color: black;
      font-size: 20px;
}

코드를 참조하십시오 :

<button id="r1-1" style="width: 138px;">C</button>
<button id="r5-1" style="width: 138px;">0</button>
5 버튼 위로 마우스를 가져갔습니다.

이를 위해 커서를 포인터로 변경하고 마우스를 가져 갔을 때 배경색을 약간 더 어둡게 변경해야합니다. 또한 클릭했을 때 좀 더 어둡게 보일 것입니다.

button:hover {
 cursor: pointer;
 background-color: rgb(182, 178, 178);
}
button:active {
 background-color: rgb(136, 136, 136);
}

그러나 여전히 생명이 없습니다. 우리는 그것에 생명을 주어야합니다.

이제 백엔드 섹션으로 들어가 계산기로 문제를 해결하도록하겠습니다.

"script.js"라는 JavaScript 파일을 만들어 보겠습니다. HTML 파일에도 링크해야합니다.

head 태그 안에 코드를 넣으십시오.

<script src="script.js">

이제 "C"버튼이 트리거 될 때 실행되는 출력 화면의 모든 혼란을 제거하는 첫 번째 기능을 만들어 보겠습니다.

forclear () 함수를 호출합시다 .

이 기능의 작동 뒤에있는 개념은 출력 화면의 값을 가져 와서 기본값 (예 : 0)으로 설정해야한다는 것입니다.

function forclear() {
      document.getElementById("output").innerHTML = "0";
}

<button id="r1-1" onclick="forclear()" style="width: 138px;">
     C
</button>

이제 출력 화면에서 기본값 0을 제거하는 함수를 정의해야합니다. 그렇지 않으면 출력 화면에서 업데이트 된 모든 값이 다음과 같이 0과 연결됩니다.

이것은 멋지고 논리적으로 보이지 않습니다. 작업이 시작되기 전에이 0을 제거해야합니다.

그래서 우리는 새로운 함수“removeZero ()”를 정의하는데, 이것은 어떤 작업이 시작되기 전에 0이 존재한다면 0을 단지 간격으로 대체합니다.

function removeZero() {
      var value = document.getElementById("output").innerHTML;
      if (value == "0") {
           value = " "
           document.getElementById("output").innerHTML = value;
      }
}

이를 위해 출력 화면에서 값을 가져 와서 100으로 나눈 다음 다시 보내는 함수를 perc () 로 정의합니다 .

function perc() {
      var value = document.getElementById("output").innerHTML;
      value = value / 100;
      document.getElementById("output").innerHTML = value;
}

<button id="r1-3" onclick="perc()"> % </button>

이제 두 가지가 남았습니다. 버튼을 클릭하면 출력 화면의 값을 업데이트하고“=”버튼을 클릭하면 출력 화면에서 방정식을 푸는 것입니다.

출력 화면에 값을 표시하기위한 코드를 작성합니다.

이를 위해 display (value)에 대한 새 함수를 정의합니다 . 여기서 value 는 숫자 값 또는 산술 연산자에 불과한 매개 변수입니다.

코드를 보자 :

function fordisplay(value) {
      removeZero()
      document.getElementById("output").innerHTML += value;
}

그런 다음 트리거 된 값 또는 연산자로 출력 화면의 값을 업데이트합니다.

하지만 HTML 섹션의 모든 숫자와 연산자에 대해 "onclick"속성을 정의해야합니다.

"값"은 트리거 된 값으로 대체됩니다.

예:

<button id="r3-1" value="4" onclick="fordisplay('4') ">4</button>

코드는 다음과 같습니다.

이제 계산기에서 누르는 것은 출력 화면에서 업데이트됩니다.

여전히 계산기의 목적은 제공되지 않습니다.

"="버튼이 트리거되면 출력을 표시해야합니다.

이를 위해 우리는이를 위해 solve () 함수를 정의 합니다.

그러나 문제는 우리가 방정식을 어떻게 풀 것인가?

JavaSript 덕분에 매개 변수로 전달 된 방정식을 평가 / 실행하는 eval (equation) 함수가 있습니다 . 우리는 여기서 그 개념을 사용할 것입니다.

function solve() {
     removeZero()
     var equation = document.getElementById("output").innerHTML;
     var solved = eval(equation);
     document.getElementById('output').innerHTML = solved;
}

그런 다음 평가 된 표현식의 값을 저장하는 풀이 변수를 만들었습니다 .

(다른 곳에서는 사용되지 않기 때문에 값을 어디에도 저장할 필요가 없다고 생각할 수도 있습니다. EASTER EGG :이 계산기 프로젝트의 고급 버전을 만들 수 있으며 사용자의 계산 기록도 저장합니다.)

다음으로 solved에 저장된 값으로 출력 화면을 업데이트합니다. 이것이 사용자가 풀기 위해 보낸 방정식의 답입니다.

마지막 단계로“=”버튼을 클릭하면 무엇을해야하는지 알려줘야합니다.

<button id="r5-3" value="=" onclick="solve()" >=</button>

축하합니다!!!

자신 만의 계산기를 만들었습니다. 작동하고 잘 보입니다. 문제도 해결합니다. 큰!

어딘가에 갇혀 있습니까? Twitter 에서 DM을 보내주세요.

이 비디오 에서이 프로젝트를 코딩하는 것을 볼 수도 있습니다 .

소스 코드를 원하십니까? 이 프로젝트를 코딩하고있는 비디오의 설명 상자 에서 가져 오거나 아래에서 확인하십시오.

Twitter에서 나를 따르라 : @ bediishaan

읽어 주셔서 감사합니다.

놀라운 하루 보내세요 !!!

Suggested posts

좋은 습관을 만들고 유지하는 방법

장기적인 습관을 유지하기위한 생산성 팁

좋은 습관을 만들고 유지하는 방법

두 아이의 엄마가 된 후 일을 끝내기가 더 어려워졌습니다. 나는 한 작업에서 다음 작업으로 뛰어 들었고 하루가 끝날 때까지 아무것도하지 않았을 때 실망했습니다.

양자 컴퓨팅 Pt를위한 프로그래밍. 1 : NumPy

이제 양자 컴퓨팅이면의 물리학을 배우기 시작 했으므로 "이봐, 실제로 양자 컴퓨터를 사용하려면 실제로 양자 장치를 손으로 만들어야합니까?"라고 궁금해 할 것입니다. 답은 양자 컴퓨터를 컴퓨터라고 부르는 이유가 있습니다. 프로그래밍이 가능합니다! 이 시리즈에서는 수학 개념을 시뮬레이션하고 양자 컴퓨터에서 실행하는 소프트웨어를 구축하는 방법을 배우게됩니다. 깨끗하고 현대적이며 라이브러리가 풍부한 언어이기 때문에 Python을 사용하여 코드를 작성할 것입니다.

Related posts

"실용적인 프로그래머"의 5 가지 필수 사항

역대 베스트셀러 코딩 북의 요점

"실용적인 프로그래머"의 5 가지 필수 사항

Pragmatic Programmer는 1999 년에 처음 출판되었으며 이후 역대 최고의 프로그래밍 책으로 선정되었습니다. 저자 Andy Hunt와 David Thomas는 Agile Manifesto의 원저자 중 하나였으며 몇 가지 심각한 자격을 가지고 있습니다.

대규모 GraphQL 쿼리 공격으로부터 보호

공격자가 공개적으로 사용 가능한 GraphQL 인터페이스를 사용하여 사이트를 스크랩하거나 서비스 거부 공격을 실행하는 방법에 대해 알아보십시오. 이들은 4 가지 방법 중 하나로이를 수행 할 수 있습니다. 단일 대형 쿼리를 신중하게 구성하여 실행하고, 관련 데이터를 가져올 수있는 병렬 쿼리를 많이 작성하고, 일괄 요청을 사용하여 많은 쿼리를 연속적으로 실행하고, 마지막으로 많은 요청을 보냅니다.

기술 인터뷰의 사회적 구성 요소

코딩 문제는 스트레스가 많지만 스트레스에 대한 당신의 반응은 당신의 기술적 능력보다 더 크게 말합니다.

기술 인터뷰의 사회적 구성 요소

기술 업계의 직책을 위해 인터뷰 할 때 일반적으로 제안을 고려하기 전에 최소한 3 차례의 인터뷰를 거치게됩니다. 라운드는 일반적으로 다음과 같습니다. 그렇게 생각하면 잘못된 것입니다.

훌륭한 개발자의 3 가지 행동 특성

훌륭한 개발자의 3 가지 행동 특성

훌륭한 개발자를 만드는 비 기술적 인 것들 나는이 기사를 작성하는 것을 한동안 미루고 있습니다. 나는 그것을 작성할 자격이 있다고 생각하지 못했습니다. 오늘은 쓸 때라고 생각했습니다.