간단한 계산기 웹사이트 구축

소개

안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 간단한 계산기를 공유하게 되어 기쁩니다. 이 프로젝트는 특히 수학적 연산 처리, DOM 동적으로 업데이트 및 대화형 사용자 인터페이스 생성에서 JavaScript의 기본 사항을 탐색할 수 있는 완벽한 방법입니다. 웹 개발이 처음이시거나 JavaScript 기술을 향상시키려는 분이라면 이 Simple Calculator 프로젝트가 훌륭한 출발점이 될 것입니다.

프로젝트 개요

간단한 계산기는 사용자가 덧셈, 뺄셈, 곱셈, 나눗셈과 같은 기본적인 산술 연산을 수행할 수 있는 웹 기반 애플리케이션입니다. 이 프로젝트에서는 계산을 수행하기 위해 사용자 입력을 효율적으로 처리하면서 반응성이 뛰어나고 사용자 친화적인 인터페이스를 만드는 방법을 강조합니다.

특징

• 직관적인 인터페이스: 쉽게 상호 작용할 수 있는 깔끔하고 간단한 디자인
• 기본 산술 연산: 덧셈, 뺄셈, 곱셈, 나눗셈을 지원합니다.
• 지우기 및 삭제 기능: 사용자는 한 번의 클릭으로 입력 내용을 지우거나 마지막 항목을 삭제할 수 있습니다.
• 반응형 디자인: 다양한 기기와 화면 크기에 걸쳐 일관된 사용성을 보장합니다.

사용된 기술

• HTML: 웹페이지와 입력 요소를 구성합니다.
• CSS: 계산기 인터페이스 스타일을 지정하여 깔끔하고 반응성이 뛰어난 디자인을 보장합니다.
• JavaScript: 계산 논리와 사용자 상호 작용을 관리합니다.

프로젝트 구조

프로젝트 구조를 간단히 살펴보겠습니다.

Simple-Calculator/
├── index.html
├── styles.css
└── script.js

• index.html: 단순 계산기의 HTML 구조를 포함합니다.
• styles.css: CSS 스타일을 포함하여 계산기의 모양과 반응성을 향상시킵니다.
• script.js: 계산 논리와 사용자 상호 작용을 관리합니다.

설치

프로젝트를 시작하려면 다음 단계를 따르세요.

1. 저장소 복제:
   

   git clone https://github.com/abhishekgurjar-in/Simple-Calculator.git
   

2. 프로젝트 디렉토리 열기:
   

   cd Simple-Calculator
   

3. 프로젝트 실행:

   • 간단한 계산기를 사용하려면 웹 브라우저에서 index.html 파일을 엽니다.

용법

1. 웹사이트를 엽니다 웹 브라우저에서
2. 숫자를 입력하고 계산기 버튼을 사용하여 산술 연산을 수행합니다.
3. 'AC' 버튼을 사용하여 모든 입력 내용을 삭제하거나 'DEL' 버튼을 사용하여 마지막 항목을 삭제합니다.
4. "=" 버튼을 클릭하면 계산 결과를 확인할 수 있습니다.

코드 설명

HTML

index.html 파일은 표시 영역과 산술 연산 버튼을 포함하여 단순 계산기의 기본 구조를 제공합니다. 다음은 일부 내용입니다.

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Simple Calculator6e916e0f7d1e588d4f442bf645aedb2f
    af75c476cdb7e6c074ca6da9b40841de
    90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    924ff17625d603f964501dd897c96cc6
      4a249f0d628e2318394fd9b75b4636b1Simple Calculator473f0a7621bec819994bb5020d29372a
    16b28748ea4df4d9c2150843fecfba68
    4883ec0eb33c31828b7c767c806e14c7
      484fa028d8c6f85de53c7938dec280ce
        81304ad60882cdf6a4703237057e689b
        dc6dce4a544fdca2df29d5ac0ea9906b
          88c70033a81354858c2d5d5f8799f2d2AC65281c5ac262bf6d81768915a4a77ac0
          88c70033a81354858c2d5d5f8799f2d2DEL65281c5ac262bf6d81768915a4a77ac0
          88c70033a81354858c2d5d5f8799f2d2%65281c5ac262bf6d81768915a4a77ac0
          88c70033a81354858c2d5d5f8799f2d2/65281c5ac262bf6d81768915a4a77ac0
        16b28748ea4df4d9c2150843fecfba68
        dc6dce4a544fdca2df29d5ac0ea9906b
          7a766ea05486930017614b5a53f01815765281c5ac262bf6d81768915a4a77ac0
          7a766ea05486930017614b5a53f01815865281c5ac262bf6d81768915a4a77ac0
          7a766ea05486930017614b5a53f01815965281c5ac262bf6d81768915a4a77ac0
          88c70033a81354858c2d5d5f8799f2d2*65281c5ac262bf6d81768915a4a77ac0
        16b28748ea4df4d9c2150843fecfba68
        dc6dce4a544fdca2df29d5ac0ea9906b
          7a766ea05486930017614b5a53f01815465281c5ac262bf6d81768915a4a77ac0
          7a766ea05486930017614b5a53f01815565281c5ac262bf6d81768915a4a77ac0
          7a766ea05486930017614b5a53f01815665281c5ac262bf6d81768915a4a77ac0
          88c70033a81354858c2d5d5f8799f2d2-65281c5ac262bf6d81768915a4a77ac0
        16b28748ea4df4d9c2150843fecfba68
        dc6dce4a544fdca2df29d5ac0ea9906b
          7a766ea05486930017614b5a53f01815165281c5ac262bf6d81768915a4a77ac0
          7a766ea05486930017614b5a53f01815265281c5ac262bf6d81768915a4a77ac0
          7a766ea05486930017614b5a53f01815365281c5ac262bf6d81768915a4a77ac0
          88c70033a81354858c2d5d5f8799f2d2+65281c5ac262bf6d81768915a4a77ac0
        16b28748ea4df4d9c2150843fecfba68
        dc6dce4a544fdca2df29d5ac0ea9906b
          7a766ea05486930017614b5a53f018150065281c5ac262bf6d81768915a4a77ac0
          7a766ea05486930017614b5a53f01815065281c5ac262bf6d81768915a4a77ac0
          7a766ea05486930017614b5a53f01815.65281c5ac262bf6d81768915a4a77ac0
          7c8d25676e5efa114cb91329eb362165=65281c5ac262bf6d81768915a4a77ac0
        16b28748ea4df4d9c2150843fecfba68
      16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

styles.css 파일은 단순 계산기의 스타일을 지정하여 현대적이고 사용자 친화적인 레이아웃을 제공합니다. 주요 스타일은 다음과 같습니다.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(45deg, #0a0a0a, #3a4452);
}

.header {
    color: white;
    margin: 30px;
    text-align: center;
}

.calculator {
    border: 1px solid #717377;
    padding: 20px;
    border-radius: 16px;
    background: transparent;
    box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);
}

input {
    width: 320px;
    border: none;
    padding: 24px;
    margin: 10px;
    background: transparent;
    box-shadow: 0px 3px 15px rgba(84, 84, 84, 0.1);
    font-size: 40px;
    text-align: right;
    cursor: pointer;
    color: #ffffff;
}

input::placeholder {
    color: #ffffff;
}

button {
    border: none;
    width: 60px;
    height: 60px;
    margin: 10px;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    font-size: 20px;
    box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.equalBtn {
    background-color: #fb7c14;
}

.operator {
    color: #6dee0a;
}

.footer {
    color: white;
    margin: 50px;
    text-align: center;
}

자바스크립트

script.js 파일은 계산을 수행하고 사용자 상호 작용을 처리하기 위한 로직을 관리합니다. 다음은 일부 내용입니다.

let input = document.getElementById("inputBox");
let buttons = document.querySelectorAll("button");

let string = "";
let arr = Array.from(buttons);

arr.forEach((button) => {
  button.addEventListener("click", (e) => {
    if (e.target.innerHTML === "=") {
      string = eval(string);
      input.value = string;
    } else if (e.target.innerHTML === "AC") {
      string = "";
      input.value = string;
    } else if (e.target.innerHTML === "DEL") {
      string = string.substring(0, string.length - 1);
      input.value = string;
    } else {
      string += e.target.innerHTML;
      input.value = string;
    }
  });
});

라이브 데모

간단한 계산기의 라이브 데모를 여기에서 확인하실 수 있습니다.

결론

이 간단한 계산기를 만드는 것은 JavaScript와 대화형 웹 애플리케이션 구축 방법에 대한 이해를 심화시키는 보람 있는 경험이었습니다. 이 프로젝트를 통해 여러분이 자신만의 JavaScript 프로젝트를 실험해 볼 수 있기를 바랍니다. 즐거운 코딩하세요!

크레딧

이 프로젝트는 JavaScript와 사용자 상호 작용에 중점을 두고 웹 개발 기술을 향상시키기 위한 여정의 일환으로 개발되었습니다.

작가

• 아비셰크 구자르
  • GitHub 프로필

위 내용은 간단한 계산기 웹사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!