CSSを使ったジューシーなWEB電卓の作り方🧮

こんにちは〜ららぽてすらです♪

今回は、ちょっとした楽しいコーディングの話題をお届けしたいと思います✨何かと言うと、それは「HTMLとCSSを使ったスタイリッシュな電卓の作り方」です⭐️

1. はじめに

今回のプログラムでは、JavaScriptを使用して計算機能を実装し、CSSで見た目を整えることで、デザイン性と実用性の両方を備えた電卓を作成します。

2. CSSでデザインを作る

HTMLとCSSを使用して、電卓の外観を作成します。以下はCSSのコードです。

css

.bckGは、電卓全体を覆う背景のスタイルを定義します。
.calculatorは、電卓本体のスタイルを定義します。背景色や影、ボーダーのスタイルなどを設定しています。
.result2は、計算結果を表示する部分のスタイルを定義します。
.numは、電卓のボタン一つ一つのスタイルを定義します。マウスオーバーやクリック時のスタイルも含まれています。
.clearと.equalは、それぞれクリアボタンと等号ボタンのスタイルを定義します。

HTMLでは、このCSSを適用するための要素とクラスを設定しています。以下にその一部を示します。

html

...

</div>

3. JavaScriptで計算機能を作る

次にJavaScriptを使用して、電卓の計算機能を実装します。

javascript

変数myTotalは、計算の結果を格納します。
変数myInputは、ユーザーが入力した数値を格納します。
変数myCalcは、ユーザーが選択した演算子を格納します。
変数myFlgは、二回連続で演算子が押された場合に計算をスキップするためのフラグとして使用されます。

myValue, myCalculate, myCの3つの関数が定義されています。

myValueは、ユーザーが数値ボタンを押した時に呼び出され、その数値をmyInputに追加します。
myCalculateは、ユーザーが演算子ボタンを押した時に呼び出され、その演算子を使用して計算を行います。また、「=」が押された時には、現在の計算を終了します。
myCは、ユーザーが「C」ボタンを押した時に呼び出され、全ての値をリセットします。

最後に、全てのボタンに対応するイベントリスナーを設定します。

以上で、スタイリッシュな電卓の完成です！HTML、CSS、JavaScriptの三つの要素が一体となって機能するこのプログラムは、ウェブ開発の基本的な要素を学ぶ上でとても有益です。ぜひ自分で試してみて、それぞれのパートがどのように働いているか確認してみてください♪

⭐️電卓ソースコード⭐️

<style>

.bckG {

background: #333;

height: 600px;

display: flex;

margin-bottom: 100px;

}

.wrapper {

margin: auto;

}

.calculator {

position: relative;

display: grid;

grid-template-columns: repeat(4, 75px);

grid-gap: 1px;

margin: auto;

position: relative;

background: rgba(255, 255, 255, 0.05);

border-radius: 6px;

overflow: hidden;

z-index: 10;

backdrop-filter: blur(15px);

border-top: 1px solid rgba(255, 255, 255, 0.2);

border-left: 1px solid rgba(255, 255, 255, 0.2);

box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);

margin: auto;

}

.result2 {

grid-column: span 4;

height: 140px;

text-align: right;

border: none;

outline: none;

padding: 10px;

font-size: 30px;

background: transparent;

color: #fff;

border-bottom: 1px solid rgba(255, 255, 255, 0.05);

border-right: 1px solid rgba(255, 255, 255, 0.05);

border-top: 1px solid rgba(255, 255, 255, 0.2);

}

.num {

display: grid;

place-items: center;

width: 75px;

height: 75px;

color: #fff;

font-weight: 400;

cursor: pointer;

font-size: 20px;

user-select: none;

border-bottom: 1px solid rgba(255, 255, 255, 0.05);

border-right: 1px solid rgba(255, 255, 255, 0.05);

transition: 0.5s;

}

.num:hover {

transition: 0s;

background: rgba(255, 255, 255, 0.05);

}

.num:active {

background: #2785ff;

color: #192f00;

font-size: 24px;

font-weight: 500;

}

.clear {

grid-column: span 2;

width: 150px;

background: rgba(255, 255, 255, 0.05);

}

.equal {

background: rgba(255, 255, 255, 0.05);

}

</style>

</div>

var myTotal = 0;

var myInput = "";

var myCalc = "+";

var myFlg = 1;

function myValue(myData) {

myFlg = 0;

myInput += myData;

document.querySelector('.result2').value = myInput;

}

function myCalculate(myData) {

if (myFlg == 0) {

myFlg = 1;

var myWork = myTotal + myCalc + myInput;

myTotal = eval(myWork);

myInput = "";

document.querySelector('.result2').value = myTotal;

}

if (myData == "=") {

myTotal = 0;

myCalc = "+";

} else {

myCalc = myData;

}

function myC() {

myTotal = 0;

myCalc = "+";

myInput = "";

document.querySelector('.result2').value = myTotal;

}

// Add Event Listeners to each button

document.querySelectorAll('.num').forEach(function(num) {

if (num.textContent === 'C') {

num.addEventListener('click', function() {

myC();

});

} else if ('/*-+'.includes(num.textContent)) {

num.addEventListener('click', function() {

myCalculate(num.textContent);

});

} else if (num.textContent === '=') {

num.addEventListener('click', function() {

myCalculate(num.textContent);

myInput = "";

});

} else {

num.addEventListener('click', function() {

myValue(num.textContent);

});

}

});

</script>

有機あずき美人茶ペットボトル 500mL 12本セット【送料無料】【有機JAS認定】

価格:3,240円
(2023/4/25 09:43時点)
感想(1件)

《2000円クーポン配布中》ヤ−マンアセチノ5Dデザイニングクリーム 35g ボディクリーム美容クリームスキンケアアセチノクリームアセチノ美容クリーム

価格:3,980円
(2023/4/9 22:54時点)
感想(45件)