【かんたん】メモ帳だけで！おしゃれな電卓アプリを作ろう

AI・プログラミング

【かんたん】メモ帳だけで！おしゃれな電卓アプリを作ろう

こんにちは！
今日は、小学生でもできる
**「メモ帳だけでつくる電卓アプリ」**の作り方を紹介します！

しかも、プログラムはChatGPTに作ってもらうので、
むずかしいコードを書く必要はありません。
とっても楽しいので、ぜひやってみてね！

つかうもの

  • パソコン

  • メモ帳（Windowsに入ってる）

  • インターネット（ChatGPTにプログラムを書いてもらうため）

ざっくり流れ

  1. ChatGPTに「電卓アプリを作ってください」とたのむ

  2. もらったプログラムをメモ帳にコピペする

  3. ファイルを保存する

  4. ブラウザでひらく！

  5. 電卓であそぶ！

くわしい作り方

① ChatGPTにたのもう！

まず、ChatGPTにこう聞いてみましょう。

メモ帳だけで作れる電卓アプリをHTMLで作ってください。
おしゃれなデザインにしてください。

すると、ChatGPTがかんぺきなプログラムをつくってくれます！

※この記事の一番下に「サンプルコード」も載せておきます！

② メモ帳にコピペする

  1. パソコンで「メモ帳」をひらく

  2. ChatGPTからもらったプログラムをぜんぶコピーする

  3. メモ帳にはりつける（ペーストする）

③ ファイルを保存する

  1. メモ帳で「名前をつけて保存」をえらぶ

  2. ファイル名を「dentaku.html」にする（なんでもOKだけど「.html」が大事！）

  3. 「保存」をクリック

これでOK！

④ ブラウザで開く！

さっき保存したファイルをダブルクリックすると、
インターネットみたいな画面（ブラウザ）が開きます！

そこに、自分だけの電卓アプリができてるよ✨
電卓アプリ

【まとめ】

  • プログラムが苦手でも大丈夫！

  • ChatGPTにお願いすれば作れる！

  • メモ帳だけでアプリができる！

世界にひとつだけの電卓、ぜひ作ってみてね😊

【サンプルコード】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>おしゃれ電卓</title>
<style>
body {
background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: 'Helvetica Neue', sans-serif;
}
.calculator {
background: white;
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 300px;
}
.display {
background: #f0f0f0;
border-radius: 10px;
height: 60px;
margin-bottom: 20px;
text-align: right;
padding: 10px;
font-size: 2em;
overflow: hidden;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 20px;
font-size: 1.2em;
border: none;
border-radius: 10px;
background: #e0e0e0;
cursor: pointer;
transition: background 0.3s;
}
button.operator {
background: #66a6ff;
color: white;
}
button.equal {
background: #ff6b6b;
color: white;
grid-column: span 2;
}
button.clear {
background: #ffd93b;
color: white;
grid-column: span 2;
}
button:hover {
background: #d1d1d1;
}
</style>
</head>
<body>
<div class="calculator">
<div id="display" class="display">0</div>
<div class="buttons">
<button onclick="append('7')">7</button>
<button onclick="append('8')">8</button>
<button onclick="append('9')">9</button>
<button class="operator" onclick="append('/')">÷</button><button onclick=“append(‘4’)”>4</button>
<button onclick=“append(‘5’)”>5</button>
<button onclick=“append(‘6’)”>6</button>
<button class=“operator” onclick=“append(‘*’)”>×</button>

<button onclick=“append(‘1’)”>1</button>
<button onclick=“append(‘2’)”>2</button>
<button onclick=“append(‘3’)”>3</button>
<button class=“operator” onclick=“append(‘-‘)”>−</button>

<button onclick=“append(‘0’)”>0</button>
<button onclick=“append(‘.’)”>.</button>
<button class=“equal” onclick=“calculate()”>=</button>
<button class=“operator” onclick=“append(‘+’)”>＋</button>

<button class=“clear” onclick=“clearDisplay()”>C</button>
</div>
</div>

<script>
let display = document.getElementById(‘display’);

function append(value) {
if (display.innerText === ‘0’ && value !== ‘.’) {
display.innerText = value;
} else {
display.innerText += value;
}
}

function calculate() {
try {
display.innerText = eval(display.innerText);
} catch {
display.innerText = ‘Error’;
}
}

function clearDisplay() {
display.innerText = ‘0’;
}
</script>
</body>
</html>

</details>

おわりに

これで、あなただけの手作り電卓アプリが完成！🎉
プログラミングって、こんなふうに楽しくてワクワクするものなんだ！

もっとすごいアプリも、同じように作れるよ♪
「つぎはゲームを作ってみたい！」って人は、またブログで紹介するね！

コメント

タイトルとURLをコピーしました