作ったアプリ
https://festive-austin-0206b7.netlify.app/
Netlifyでデプロイしました。
めちゃくちゃ単純で、画面中央のボタンを押したら背景色がランダムに変わるだけのアプリ。
連続で押したら目がチカチカします。
ライブラリやフレームワークは使わずに、HTML、CSS、Vanilla JavaScriptで作成(リセットCSSだけ使ってます)。
ランダムな背景色の作成
0~255のランダムな整数を3つ取得して、RGB関数に値を渡してcontainerの背景色に適用しています。
const clickMe = document.getElementById('click-me')
clickMe.addEventListener('click', (e) => {
const container = document.querySelector('.container')
const red = Math.floor(Math.random() * 256)
const green = Math.floor(Math.random() * 256)
const blue = Math.floor(Math.random() * 256)
container.style.background = `rgb(${red}, ${green}, ${blue})`
})
参考にさせていただいたところ
JavaScriptの練習ネタ
25 Beginner JavaScript Project Ideas
今回投稿するにあたってアプリを公開しておきたいなーと思い、Netlifyというサービスを初めて利用しました(ねっとりふぁい?)
Netlifyで静的サイトのホスティングをする