見出し画像

JavaScriptを使ってシンプルな電卓アプリケーションを作成する

プログラミング言語によるプログラム220円。マガジンあり。


javascriptで電卓を作ろう


JavaScriptを使ってシンプルな電卓アプリケーションを作成することができます。以下に、HTML、CSS、およびJavaScriptを使用して電卓を作成する方法を説明します。

HTML

まず、電卓の構造を定義します。HTMLでは、ボタンとディスプレイ領域を作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>電卓</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <div id="display" class="calculator-display">0</div>
        <div class="calculator-keys">
            <button class="key" data-action="clear">AC</button>
            <button class="key" data-action="delete">DEL</button>
            <button class="key" data-action="divide">÷</button>
            <button class="key" data-action="multiply">×</button>
            <button class="key" data-action="subtract">-</button>
            <button class="key" data-action="add">+</button>
            <button class="key" data-action="decimal">.</button>
            <button class="key" data-action="equals">=</button>
            <button class="key">0</button>
            <button class="key">1</button>
            <button class="key">2</button>
            <button class="key">3</button>
            <button class="key">4</button>
            <button class="key">5</button>
            <button class="key">6</button>
            <button class="key">7</button>
            <button class="key">8</button>
            <button class="key">9</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

次に、電卓のスタイルを定義します。CSSでレイアウトとデザインを設定します。

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}

.calculator {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.calculator-display {
    font-size: 2rem;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #222;
    color: #fff;
    border-radius: 5px;
    text-align: right;
}

.calculator-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.key {
    padding: 20px;
    font-size: 1.5rem;
    background-color: #f0f0f0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.key:hover {
    background-color: #d0d0d0;
}

.key[data-action="clear"] {
    background-color: #ff4d4d;
    color: #fff;
}

.key[data-action="clear"]:hover {
    background-color: #ff0000;
}

.key[data-action="equals"] {
    background-color: #4dff4d;
    color: #fff;
}

.key[data-action="equals"]:hover {
    background-color: #00ff00;
}



ここから先は

3,509字 / 1ファイル
この記事のみ ¥ 220

ログイン

この記事が気に入ったらチップで応援してみませんか？