はじめに
唐突ですが、みなさん運勢占いは好きですか？
ラッキーカラーを身につけて気分を上げたり、楽しいですよね！
そんな運勢占いを今まで習ったHTMLやCSS、JavaScriptでつくってみました！
少しでも楽しんでいただけると幸いです。
コード
HTML,CSS,JSそれぞれのコードを置いていきます。
HTML
index.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>本日の運勢</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="zenn">
<h1>今日の運勢占います</h1>
<div class="mae">
<button onclick="uranai()"><img src="img/suisyou.png" alt=""></button>
<h2> ←水晶をタップ</h2>
</div>
<p id="unnsei"></p>
<p id="com"></p>
<p id="iro1"></p>
<p id="iro2"></p>
<p id="item"></p>
<p id="kekka"></p>
</div>
<script src="main.js"></script>
</body>
</html>
占うときただのボタンだと面白くないので、buttonタグにimgで占いっぽい水晶をボタンにしてみました。
CSS
style.css
body{width: 500px; margin: auto;}
button{outline: none; border: 0ch;}
img{width: 100px; border: 0; cursor: grab;}
p{font-size: 20px; font-weight: bold;}
.mae{display: flex;}
.mae h2{text-align: center; margin-top: 40px}
body{background-image: url(img/uranaishi2.png);}
.zenn{background-color: rgba(246, 212, 246, 0.886); width: 450px;
padding-left: 15px; padding-bottom: 10px;
padding-top: 10px; margin-top: 30px;
margin-left: 10px; }
CSSはあまり得意ではないのでそろえる程度です。
水晶にカーソルが乗ったときにカーソルが手✋に変わるようにしました。
JS
main.js
function uranai(){
let unnsei=["大吉","吉","小吉","凶","大凶"];
let r=Math.floor(Math.random()*unnsei.length);
document.getElementById("unnsei").innerHTML="あなたの今日の運勢は"+unnsei[r];
let com=["素晴らしい！最高の一日✨","今日もいい一日になるよ！","何とも言えない普通の日...","絶妙に運の悪い一日になりそう","最悪の一日に...気を付けて"]
document.getElementById("com").innerHTML=com[r];
let iro=["白","黒","赤","青","緑","黄","ピンク","紫"];
let i=Math.floor(Math.random()*iro.length);
document.getElementById("iro1").innerHTML="ラッキーカラーは"+iro[i];
document.getElementById("iro2").innerHTML=iro[i]+"色のものを身に着けると運気アップ🆙";
let item=["ぬいぐるみ","時計","お花","ティーポット","音楽プレーヤー","ハンドクリーム","スニーカー","お菓子"]
let t=Math.floor(Math.random()*item.length);
document.getElementById("item").innerHTML="ラッキーアイテムは"+item[t];
if(r<4)
document.getElementById("kekka").innerHTML="今日も良い一日になりますように🍀"
else
document.getElementById("kekka").innerHTML="明日はきっといい日になるよ☻☻"
}
占い結果やラッキーカラーを乱数で出すようにしました。
種類もたくさん入れているので組み合わせは多いはずです！
lengthで乱数を求めているので要素の追加もしやすいと思います。
実際のサイト
タップ後⇩⇩⇩
イラストは全ていらすとやさんからお借りしました。
最後に
自分が作りたいものを実現するにはその言語のことを詳しく知らないといけないし、
作っていくうちにより理解が深まった気がしました。
まだまだ分からないことが沢山あったのでより一層頑張らなくてはと思いました。
実際作り始めると楽しかったです。
皆さんも楽しく学べるものを自分から積極的に学んでください！
そしてたまに息抜きで運勢占いしちゃってください!!（笑）
最後までまで見ていただきありがとうございました！