Dice Roll Challenge

1. The component should have a button labeled "Roll
   Dice"

   Let’s have our button with label “ Roll Dice”

    import React from "react";
    import './styles.css'
   
    function DiceRoller() {
        return (
            <div>
                <button>Roll Dice </button>
            </div>
        );
    }
   
    export default DiceRoller;
   

2. Clicking the button should generate a random number between 1 and 6.

let’s break this task into 2 parts :

a. clicking button should do something ( hmmm… onClick( ) I will call function)

import React from "react";
import './styles.css'

function DiceRoller() {

//Defining Function at top level
    function rollDice() {

    }

    return (
        <div>
            <button onClick={rollDice}>Roll Dice </button> //onClick function will call
        </div>
    );
}

export default DiceRoller;

b. now let’s generate 1 to 6 in to function

Math.random( ) in JS will give me number between 0 to 0.99999999

Math.random() //0.8473085324273706

But we need from 1 to 6 ok so I will multiply by 6 will give me :

0 to 5.9999999999

Math.random() //0.8473085324273706

Math.random() * 6 // 0.45242029280651996

Now we will add +1 will set everything → 1 to 6.99999999

Math.random() //0.8473085324273706

Math.random() * 6 // 0.45242029280651996

1 + (Math.random() *6 ) // 4.753819766133755

I will take floor value so it will remove decimal

Math.random() //0.8473085324273706

Math.random() * 6 // 0.45242029280651996

1 + (Math.random() *6 ) // 4.753819766133755

Math.floor(1 + (Math.random()* 6) ) //5

now its time to save value !

  const diceValue = Math.floor(1 + (Math.random() * 6))

2. The rolled number should be displayed on the screen with text =" diceValue".

import React from "react";
import './styles.css'

function DiceRoller() {

//Defining Function at top level
    function rollDice() {
          const diceValue = Math.floor(1 + (Math.random() * 6))
    }

    return (
        <div>
            //adding dice value 
            <h1>{dicevalue}</h1>
            <button onClick={rollDice}>Roll Dice </button> //onClick function will call
        </div>
    );
}

export default DiceRoller;

But we need to update UI and React is control freak so we need maintain state using state hook

hook is nothing just a special function. so we call it like this useState(//initial value) and it will return an array with 2 values. We will destructure it on the fly.

import React, { useState } from 'react'; //importing hook so we can use it
import './styles.css'

function DiceRoller() {
    //state should be at top
    const [value, setValue] = useState("Click to roll!") // initial value 
    const rollDice = () => {

        const randomDice = "🎲 " + Math.floor(Math.random() * 6 + 1)

    }
    return (
        <div className="dice-container">
            <h1>Dice Roller</h1>
            <button className="btn" onClick={rollDice}>Roll Dice</button>
            <p className="dice-value">{value}</p>
            {/* Implement Dice Roller logic here */}
        </div>
    );
}

export default DiceRoller;

Almost there,

Now whenever user will click button it will give you new value ( which is again UI update)

we need to re-initialize our state using setter function

import React, { useState } from 'react';
import './styles.css'

function DiceRoller() {

    const [value, setValue] = useState("Click to roll!")
    const rollDice = () => {

        const randomDice = "🎲 " + Math.floor(Math.random() * 6 + 1)
        setValue(randomDice) // updating state everytime on click
    }
    return (
        <div className="dice-container">
            <h1>Dice Roller</h1>
            <button className="btn" onClick={rollDice}>Roll Dice</button>
            <p className="dice-value">{value}</p>
            {/* Implement Dice Roller logic here */}
        </div>
    );
}

export default DiceRoller;

🥳 You did it ! May the code with you 👩🏾‍💻