//app.js import React, { useState } from 'react'; import './App.css'; function App() { const [firstDieResult, setFirstDieResult] = useState(1); const [secondDieResult, setSecondDieResult] = useState(6); //OR //const [diceResult, setDiceResult] = useState({ //firstDieResult: 1, //secondDieResult: 6, //}); const firstDieImage = require(`./assets/${firstDieResult}.png`); const secondDieImage = require(`./assets/${secondDieResult}.png`); function rollDice() { setFirstDieResult(Math.floor(Math.random() * 6) + 1); setSecondDieResult(Math.floor(Math.random() * 6) + 1); } return ( <div className="App"> <header className="App-header"> <div style={{ display: 'flex', margin: 20 }}> <img src={firstDieImage} className="die" alt="Die one" /> <img src={secondDieImage} className="die" alt="Die two" /> </div> <span>{firstDieResult + secondDieResult}</span> <button className="button" onClick={rollDice}>Roll</button> </header> </div> ); } export default App; //css .App { text-align: center; } .App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(16px + 2vmin); color: white; } .die { width: 50px; height: 50px; margin: 10px; } .button { margin-top: 20px; outline: none; animation: button-gradient 25s ease infinite; background-image: -webkit-linear-gradient(65deg,#21d4fd,#b721ff 50%,#017eff); background-image: linear-gradient(25deg,#21d4fd,#b721ff 50%,#017eff); background-size: 500%; border: none; border-radius: 3px; box-shadow: 0 3px 0 0 #5664a7; color: #fff; font-size: 14px; font-weight: 600; height: 40px; width: 150px; } .button:hover { box-shadow: 0 2px 0 0 #5664a7; } .button:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.05); } // get images => https://upmostly.com/wp-content/uploads/react-dice-assets.zip
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter