シンプルな計算ウェブサイトを構築する-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

シンプルな計算ウェブサイトを構築する

王林

Aug 23, 2024 pm 02:33 PM

Build a Simple Calculator Website

導入

開発者の皆さん、こんにちは！私の最新プロジェクトであるシンプルな計算機を共有できることを嬉しく思います。このプロジェクトは、特に数学的演算の処理、DOM の動的更新、対話型ユーザーインターフェイスの作成など、JavaScript の基本を学ぶのに最適な方法です。 Web 開発が初めての場合でも、JavaScript スキルを磨きたいと考えている場合でも、この Simple Calculator プロジェクトは優れた出発点となります。

プロジェクト概要

簡易計算機は、ユーザーが加算、減算、乗算、除算などの基本的な算術演算を実行できる Web ベースのアプリケーションです。このプロジェクトでは、計算を実行するためのユーザー入力を効率的に処理しながら、応答性の高いユーザーフレンドリーなインターフェイスを作成する方法に焦点を当てています。

特徴

直感的なインターフェース: 簡単に操作できるすっきりとしたシンプルなデザイン。
基本的な算術演算: 加算、減算、乗算、除算をサポートします。
クリアおよび削除機能: ユーザーは、ワンクリックで入力をクリアしたり、最後のエントリを削除したりできます。
レスポンシブデザイン: さまざまなデバイスや画面サイズにわたって一貫した使いやすさを保証します。

使用されている技術

HTML: Web ページと入力要素を構造化します。
CSS: 電卓インターフェイスのスタイルを設定し、クリーンで応答性の高いデザインを保証します。
JavaScript: 計算ロジックとユーザーインタラクションを管理します。

プロジェクトの構造

プロジェクトの構造を簡単に見てみましょう:

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

index.html: Simple Calculator の HTML 構造が含まれています。
styles.css: 電卓の外観と応答性を向上させる CSS スタイルが含まれています。
script.js: 計算ロジックとユーザーインタラクションを管理します。

インストール

プロジェクトを開始するには、次の手順に従います:

リポジトリのクローンを作成します:

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

プロジェクトディレクトリを開きます:
```
cd Simple-Calculator
```
プロジェクトを実行します:
- Web ブラウザでindex.html ファイルを開いて、簡易電卓の使用を開始します。

使用法

Web ブラウザで Web サイトを開きます。
数値を入力し、電卓ボタンを使用して算術演算を実行します。
「AC」ボタンを使用してすべての入力をクリアするか、「DEL」ボタンを使用して最後のエントリを削除します。
「=」ボタンをクリックすると、計算結果が表示されます。

コードの説明

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>Simple Calculator</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="header">
      <h1>Simple Calculator</h1>
    </div>
    <div class="container">
      <div class="calculator">
        <input type="text" id="inputBox" placeholder="0" />
        <div>
          <button class="button operator">AC</button>
          <button class="button operator">DEL</button>
          <button class="button operator">%</button>
          <button class="button operator">/</button>
        </div>
        <div>
          <button class="button">7</button>
          <button class="button">8</button>
          <button class="button">9</button>
          <button class="button operator">*</button>
        </div>
        <div>
          <button class="button">4</button>
          <button class="button">5</button>
          <button class="button">6</button>
          <button class="button operator">-</button>
        </div>
        <div>
          <button class="button">1</button>
          <button class="button">2</button>
          <button class="button">3</button>
          <button class="button operator">+</button>
        </div>
        <div>
          <button class="button">00</button>
          <button class="button">0</button>
          <button class="button">.</button>
          <button class="button equalBtn">=</button>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

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;
}

JavaScript

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 とインタラクティブな Web アプリケーションの構築方法についての理解を深めた、やりがいのある経験でした。このプロジェクトが、皆さんが独自の JavaScript プロジェクトを試してみるようになることを願っています。コーディングを楽しんでください!

クレジット

このプロジェクトは、JavaScript とユーザーインタラクションに焦点を当て、Web 開発スキルを向上させる私の旅の一環として開発されました。

著者

アビシェク・グルジャル
- GitHub プロフィール

以上がシンプルな計算ウェブサイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undress AI Tool

脱衣画像を無料で

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

PHP チュートリアル

1527

276

Related knowledge

一般的なCSSブラウザの矛盾とは何ですか？ Jul 26, 2025 am 07:04 AM

さまざまなブラウザのCSS解析に違いがあるため、主にデフォルトのスタイルの違い、ボックスモデルの計算方法、フレックスボックスおよびグリッドレイアウトサポートレベル、および特定のCSS属性の一貫性のない動作を含む一貫性のないディスプレイ効果が得られます。 1.デフォルトのスタイル処理は一貫性がありません。解決策は、cssresetまたはremormize.cssを使用して初期スタイルを統合することです。 2。IEの古いバージョンのボックスモデル計算方法は異なります。 Box-Sizing：Border-Boxを統一された方法で使用することをお勧めします。 3. FlexBoxとグリッドは、エッジの場合や古いバージョンでは異なる機能を示します。より多くのテストを行い、Autoprefixerを使用します。 4.一部のCSS属性の動作は一貫性がありません。 Caniuseは相談して格下げする必要があります。

アクセントカラーのプロパティとは何ですか？ Jul 26, 2025 am 09:25 AM

Accent-Colorは、CSSで使用される属性であり、チェックボックス、ラジオボタン、スライダーなどのフォーム要素のハイライト色をカスタマイズします。 1.チェックボックスの青いチェックマークを赤に変更するなど、フォームコントロールの選択した状態のデフォルト色を直接変更します。 2。サポートされている要素には、type = "チェックボックス"、type = "Radio"、type = "range"の入力ボックスが含まれます。 3.アクセントカラーを使用すると、複雑なカスタムスタイルと余分なDOM構造を回避し、ネイティブアクセシビリティを維持できます。 4.一般的に最新のブラウザによってサポートされており、古いブラウザを格下げする必要があります。 5. Accent-Colを設定します

「垂直アライグル」プロパティとその典型的なユースケースを説明してください Jul 26, 2025 am 07:35 AM

thevertical-AlignPropertyincsSalignSinlineortable-cellElementsive.1.ItadjustsemageSlikeImagesSwitSwitSwithinputswithintingtlinessingVaseLine、Middle、super、andsub.2.IntableCells、ItControlScontEntalInmentWithop、Middle、Orbottomvalues、頻繁に

CSSのテキスト色を変更する方法は？ Jul 27, 2025 am 04:25 AM

CSSのテキスト色を変更するには、色属性を使用する必要があります。 1。色属性を使用して、テキストの前景色を設定し、色名（赤など）、16進コード（＃FF0000など）、RGB値（RGB（255,0,0）など）、HSL値（HSL（0,100％、50％）など）、RGBAまたはHSLAを使用してRGBAまたはHSLA 2. H1からH6タイトル、パラグラフP、リンクAなどのテキストを含む任意の要素に色を適用できます（a：link、a：a：a：hover、a：active、div、spanなどの異なる状態の色設定に注意してください）。 3。最も

未使用のCSSをパージする方法は？ Jul 27, 2025 am 02:47 AM

useautomatedtoolslikepurgecssoruncsStoscanandRemoveUnusedcss; ’scontentConfiguration; 3.OuditcsSusageWithRedevtoolScoveragetabbeavePurgingToavoidRemovingedStyles; 4.SafelistDynamic

CSSダークモードのトグル例 Jul 30, 2025 am 05:28 AM

まず、JavaScriptを使用して、ユーザーシステムの設定とローカルに保存されたテーマ設定を取得し、ページテーマを初期化します。 1. HTML構造には、トピックの切り替えをトリガーするボタンが含まれています。 2。CSSの使用：rootは明るいテーマ変数を定義し、.dark-modeクラスは暗いテーマ変数を定義し、これらの変数をvar（）を介して適用します。 3. JavaScript検出は、カラーのスchemeを好み、LocalStorageを読み取り、最初のテーマを決定します。 4.ボタンをクリックするときにHTML要素のダークモードクラスを切り替え、現在の状態をLocalStorageに保存します。 5.すべての色の変更には、ユーザーを強化するために0.3秒の移行アニメーションが伴います

CSSバックドロップフィルタープロパティを使用する方法は？ Aug 02, 2025 pm 12:11 PM

バックドロップフィルターは、要素の背後にあるコンテンツに視覚効果を適用するために使用されます。 1。バックドロップフィルター：Blur（10px）およびその他の構文を使用して、つや消しガラス効果を実現します。 2。ぼやけ、明るさ、コントラストなどの複数のフィルター関数をサポートし、重ねることができます。 3.ガラスカードの設計でよく使用されており、要素が背景と重複するようにする必要があります。 4.最新のブラウザには優れたサポートがあり、@Supportsを使用してダウングレードソリューションを提供できます。 5。パフォーマンスを最適化するために、過度のぼかしと頻繁な再描画を避けてください。この属性は、要素の背後にコンテンツがある場合にのみ有効になります。

CSSアスペクト比プロパティとの使用方法は何ですか？ Aug 04, 2025 pm 04:38 PM

Theaspect-ratioCSSpropertydefinesthewidth-to-heightratioofanelement,ensuringconsistentproportionsinresponsivedesigns.1.Itisapplieddirectlytoelementslikeimages,videos,orcontainersusingsyntaxsuchasaspect-ratio:16/9.2.Commonusecasesincludemaintainingres

See all articles