暇つぶしに「今日のご飯は何にする?」ボタンを作ってみた!

みなさんこんにちは!最近お店で見かけた、「カップチャーハン」に感動しました!おさかなです!(ピラフもあったよ…!あれはすごい!笑)

今回は「今日のご飯は何にする?」ボタンを作ってみたので、ご紹介します!(作成時間:約1時間)

今日のご飯は何にする?ボタンはコチラ!


それではレッツゴー!!!!!!!!

目次
1. ドットインストールのおみくじ講座のアウトプット!
2. 「今日のご飯は何にする?」ボタンを押してみよう!
3. ソースコード!
4. 疑問点、改善点
5. まとめ

1. ドットインストールのおみくじ講座のアウトプット!


今回は、ドットインストールの「JavaScriptでおみくじを作ろう」という講座を基に作成しました!

使用言語
・html/css
・JavaScript

新たに「JavaScript」という言語を使用しています!

JavaScriptとは、プログラミング言語のひとつである。Javaと名前が似ているが、全く異なるプログラミング言語である。 JavaScriptはプロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。 (ウィキペディア)


2. 「今日のご飯は何にする?」ボタンを押してみよう!

じゃーーーん!
こんな感じになっています!

「今回のラインナップは10種類!」
・寿司
・カレー
・魚   
・ピザ
・炒飯
・うなぎ
・パスタ
・焼肉
・シチュー
・そば

(ん~!どれも美味しそう…!✨)

それでは早速ボタンを押してみましょう!


(何が出るかな…?!)

ポチっと!

おさかなは、ピザが出ました!!!今日のご飯はピザに決定!!!!🍕 

(わーーーーーい!✨)

みなさんもこちらから体験できるので、ご飯のメニューが決まらないときは是非試してみてください…!

今日のご飯は何にする?ボタンはコチラ!

3. ソースコード!

html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>今日のご飯は何にする?</title>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
	<link rel="stylesheet" href="css/style.css">
</head>
<body id="body">
	<h1 id ="title"><i class="fas fa-utensils"></i> 今日のご飯は何にする?</h1>
	<div id="btn">?</div>
	<script src="js/main.js"></script>
</body>
</html>

css

#body {
	background:#FFFFBB;
	text-align: center;
	}
#title {
	color: #B22222;
	}
#btn {
	margin:30px auto 0;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background:#9ACD32;
	text-align: center;
	line-height: 200px;
	color: #fff;
	font-size: 42px;
	font-weight: bold;
	cursor: pointer;
	opacity: 0.9;
   box-shadow: 0 10px 0 #6B8E23;
   border: 3px solid #6B8E23;
   user-select: none;
   display: inline-block;
	}
#btn:hover {
	opacity: 1;
	}
#btn.pressed {
	margin-top: 36px;
	box-shadow: 0 4px 0 #6B8E23;
	}

JavaScript

'use strict';

{
	const btn = document.getElementById('btn');

	btn.addEventListener('click', () => {
	 const results = ['寿司','カレー','魚','ピザ','炒飯','うなぎ','パスタ','焼肉','シチュー','そば'];
	 const n = Math.floor(Math.random() * results.length);
	 btn.textContent = results[n];
	});

	btn.addEventListener('mousedown', () => {
		btn.classList.add('pressed');
	});

	btn.addEventListener('mouseup', ()  =>{
		btn.classList.remove('pressed');
	});
}

4. 疑問点、改善点 

・4文字以上の文字が、丸からはみ出てしまった。

フォントサイズの問題かな…?

・複数ボタンを作りたかったけど、うまくいかなかった。

CSSで丸自体を増やすことはできたけど、jsでボタンの動作を作った時に、複数同時にボタンが押されてしまった。バラバラに押せるようにしたい…!

(まだまだ分からないことが、いーっぱい…!)

5. まとめ

今回は「今日のご飯は何にする?」ボタンを紹介してみました!

もう少し改良して、「主食」「主菜」「副菜」などのボタンを作ってみてもおもしろいかなと思いました!

(栄養バランス大事…!)

あと個人的に、このボタンが楽器に見えたので、ドラムとかタンバリンとかカスタネットとかにして、音が鳴るようにしたら楽しいかな…と思いました✨

もう少しスキルを上げて、作ってみたいと思いますのでお楽しみに…!😄



ここまで読んでくださり、ありがとうございました!

おさかなでした!


@osakana1699もフォローしてね!

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

「この記事おもしろい!」「おさかなは海に帰れ!」 「泳げないおさかな…なんて…!」と、思ったそこのあなた!!!! ぜひ!サポートよろしくお願いします🙇 様々なジャンルの本を読むために活用させていただきます✨ 「え、読書する新種のおさかなだ!」と思ったあなたも!今すぐタッチ!

最近お魚たべた?
5

おさかな

プログラミング学習

「プログラミング学習」に関して、誰が見てもわかるように丁寧に書いていきます。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。