********LOTTERY GAME *********

 HERE, WE GENERATE A LOTTERY TICKET THAT CONSISTS OF 3 DIGITS , IF THE SUM OF THESE DIGITS IS = 15. THEN THE USER WINS.

A RANDOM 3 DIGIT NUMBER SHOULD BE GENERATED.

HERE, EACH DIGIT IS TREATED SEPERATELY, AND STORED IN AN ARRAY OF SIZE 3.

  let [ticket, setTicket] = useState(genTicket(3));

IT INCLUDES A BUTTON buy new ticket , WHEN CLICKED GENERATES A NEW TICKET.

      <button onClick={buyTicket}>Buy new Ticket</button>

BEFORE, DESIGNING A COMPONENT, WE SHOULD CONSIDER 3 THINGS,

PROPS

STATE

EVENTS

IN THIS CASE, WE DONT NEED ANY PROPS.

HERE, ARRAY IS THE STATE ( AS IT CHANGES TO GENERATE NEW TICKET)

EVENT IS THE BUTTON(BUY NEW TICKET)

TO GENERATE NEW NUMBER WE USE A HELPER FUNCTION,

function genTicket(n) {

  let arr = new Array(n);

  for (let i = 0; i < n; i++) {

    arr[i] = Math.floor(Math.random() * 10);

  }

  return arr;

}

TO FIND THE SUM OF DIGITS, WE USE REDUCE METHOD OF ARRAY.

function sum(arr){

    let sum=arr.reduce((res,el)=>{

        return res+el;

    })

    return sum;

}

LOTTERY.JSX

import { useState } from "react";

import { genTicket, sum } from "./helper";

export default function Lottery() {

  let [ticket, setTicket] = useState(genTicket(3));

  let isWinning = sum(ticket) === 15;

  let buyTicket = () => {

    setTicket(genTicket(3));

  };

  return (

    <>

      <h1>Lottery Game!</h1>

      <h5>

        Lottery ticket:&nbsp;

        <span>{ticket[0]}</span>

        <span>{ticket[1]}</span>

        <span>{ticket[2]}</span>

      </h5>

      {isWinning ? <h3>Congratulations!! you won!</h3> : ""}

      <button onClick={buyTicket}>Buy new Ticket</button>

    </>

  );

}

HELPER.JSX

function genTicket(n) {

  let arr = new Array(n);

  for (let i = 0; i < n; i++) {

    arr[i] = Math.floor(Math.random() * 10);

  }

  return arr;

}

function sum(arr){

    let sum=arr.reduce((res,el)=>{

        return res+el;

    })

    return sum;

}

export { genTicket,sum };