팁 계산기 웹사이트 구축-CSS 튜토리얼-php.cn

팁 계산기 웹사이트 구축

PHPz

풀어 주다： 2024-08-19 04:24:05

원래의

736명이 탐색했습니다.

Build a Tip Calculator Website

소개

안녕하세요, 개발자 여러분! 간단하면서도 편리한 팁 계산기라는 최신 프로젝트를 소개하게 되어 기쁩니다. 이 프로젝트는 사용자 입력 처리, 계산 수행, DOM 동적으로 업데이트와 같은 기본적인 JavaScript 개념을 연습할 수 있는 완벽한 기회입니다. JavaScript를 처음 접하거나 기술을 연마하기 위한 소규모 프로젝트를 찾고 있다면 이 팁 계산기가 탁월한 선택입니다.

프로젝트 개요

팁 계산기는 청구 금액과 팁 비율에 따라 팁을 포함해 지불해야 할 총액을 빠르게 계산할 수 있는 웹 기반 애플리케이션입니다. 이 프로젝트는 대화형 사용자 인터페이스를 만들고, 계산을 관리하고, 사용자에게 실시간 피드백을 제공하는 방법을 보여줍니다.

특징

사용자 친화적인 인터페이스: 간단하고 직관적인 디자인으로 쉽게 사용할 수 있습니다.
실시간 계산: 청구서와 팁 비율을 입력하면 총액이 즉시 계산됩니다.
반응형 디자인: 레이아웃이 다양한 화면 크기에 맞게 조정되어 데스크톱과 모바일 기기 모두에서 원활한 환경을 보장합니다.
재설정 기능: 사용자는 쉽게 입력 필드를 재설정하고 새로운 계산을 시작할 수 있습니다.

사용된 기술

HTML: 웹페이지와 입력 요소를 구성합니다.
CSS: 인터페이스 스타일을 지정하여 깔끔하고 반응성이 뛰어난 디자인을 보장합니다.
JavaScript: 계산 로직을 처리하고 총액을 실시간으로 업데이트합니다.

프로젝트 구조

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

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

로그인 후 복사

index.html: 팁 계산기의 HTML 구조가 포함되어 있습니다.
styles.css: CSS 스타일을 포함하여 계산기의 모양을 향상시킵니다.
script.js: 계산 논리와 동적 업데이트를 관리합니다.

설치

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

저장소 복제:

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

로그인 후 복사

프로젝트 디렉토리 열기:
```
cd Tip-Calculator
```
로그인 후 복사
프로젝트 실행:
- 팁 계산기 사용을 시작하려면 웹 브라우저에서 index.html 파일을 엽니다.

용법

웹사이트를 엽니다 웹 브라우저에서
지정된 입력란에 청구 금액을 입력하세요.
청구서에 추가할 팁 비율을 입력하세요.
'계산' 버튼을 클릭하세요 팁을 포함한 총 금액을 확인하세요.
새로운 계산을 시작하려면 필드를 재설정하세요.

코드 설명

HTML

index.html 파일은 청구 금액 및 팁 비율에 대한 입력 필드와 계산을 실행하는 버튼을 포함하여 팁 계산기의 기본 구조를 제공합니다. 다음은 일부 내용입니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tip Calculator</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" defer></script>
</head>

<body>
    <div class="container">
        <h1>Tip Calculator</h1>
        <p>Enter the bill amount and tip percentage to calculate the total amount</p>

        <label for="bill">Bill amount:</label>
        <input type="number" id="bill">
        <br>

        <label for="tip">Tip percentage:</label>
        <input type="number" id="tip">
        <br>

        <button id="calculate">Calculate</button>
        <br>

        <label for="total">Total Amount:</label>
        <span id="total"></span>
    </div>

    <div class="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
</body>

</html>

로그인 후 복사

CSS

styles.css 파일은 팁 계산기의 스타일을 지정하여 깔끔하고 반응성이 뛰어난 레이아웃을 제공합니다. 주요 스타일은 다음과 같습니다.

* {
    box-sizing: border-box;
}

body {
    color: white;
    background-color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
    background-color: rgb(0, 0, 0);
    max-width: 600px;
    margin: 100px auto;
    padding: 20px;
    box-shadow: inset;
    border-radius: 10px;
}

h1 {
    text-align: center;
}

input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 10px 0;
    width: 100%;
}

button {
    background-color: green;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    margin: 10px 0;
    text-transform: uppercase;
    transition: background-color 0.2s ease;
}

button:hover {
    background-color: #45a049;
}

#total {
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
}

.footer {
    margin: 70px;
    text-align: center;
    color: black;
}

로그인 후 복사

자바스크립트

script.js 파일은 계산 로직을 처리하여 사용자 입력에 따라 총액을 업데이트합니다. 다음은 일부 내용입니다.

const btn = document.getElementById("calculate");
const inputBill = document.getElementById("bill");
const inputTip = document.getElementById("tip");
const totalSpan = document.getElementById("total");

function calculateTotal() {
    const billValue = parseFloat(inputBill.value);
    const tipValue = parseFloat(inputTip.value);
    const totalValue = billValue * (1 + tipValue / 100);
    totalSpan.innerText = totalValue.toFixed(2);
}

btn.addEventListener("click", calculateTotal);

로그인 후 복사

라이브 데모

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

결론

이 팁 계산기를 만드는 것은 특히 대화형 웹 애플리케이션 작성에 대한 JavaScript에 대한 이해를 강화하는 재미있고 교육적인 경험이었습니다. 이 프로젝트가 여러분이 JavaScript를 실험하고 자신만의 유용한 도구를 구축하는 데 영감을 주기를 바랍니다. 즐거운 코딩하세요!