CREATE SLOT MACHINE GAME ON REACT

Syed Sikandar Shah May 28, 2023

CREATE SLOT MACHINE GAME ON REACT

CREATE SLOT MACHINE GAME ON REACT
CREATE SLOT MACHINE GAME ON REACT


This SLOT MACHINE GAME ON REACT game is created on React JS. try it yourself, and set all components in the right way

 HTML PART

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />  
    <link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Konkhmer+Sleokchher&family=Nunito:wght@200&display=swap" rel="stylesheet">
    <title>React App</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet">
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

CSS PART



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: rgb(228, 240, 240);
}


.heading_style
{
    padding: 30px 0;
    text-align: center;
    text-transform: uppercase;
    font-family: "Ralway", sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 500;
    background: #fff;
    font-size: 1.5rem;
    margin-bottom: 30px;
}


.slot_inner
{
   
    text-align: center;
}

.slot_inner h1
{
    font-size: 13px;
    font-weight: 500;
    font-size: 1.5rem;
    margin-bottom: 5px;
   
}

.Fe_style{
    margin-bottom: 30px;
}

.slot_machine
{

   
    width: 30%;
    height: 60vh;
    background: rgb(251, 251, 250);
    border: 4px solid wheat;
    border-radius: 3rem;
    box-shadow: 2px 2px 2px black;
    overflow: hidden;
    margin:0px auto
}

App.jsx PART

import React from "react";

const SlotM = (props) =>
{
    // let x = "😄";
    // let y = "😄";
    // let z = '😄';

let x = props.x;
let y = props.y;
let z = props.z;
    if ((props.x === props.y) && (props.y === props.z))
    {
        return(
            <>
                <div className="slot_inner">
                <h1> {" "}
                {x} {y} {z} {" "}
                 </h1>
                 <h1 className="Fe_style">This is Matching</h1>
                 <hr/>
                </div>
            </>
        );
    }else
    {
        return(
            <>
                <div className="slot_inner">
                <h1> {" "}
                {x} {y} {z} {" "}
                 </h1>
                 <h1 className="Fe_style">This is Not Matching</h1>
                 <hr/>
                </div>
            </>
        );
    }
}

const App = () =>
{


    return (
        <>
            <h1 className="heading_style"> 🎰 Welcome to <span  style={{fontWeight : "bold"}}> Slot machine game </span> 🎰 {" "} </h1>
       
        <div className="slot_machine">
        <SlotM
            x = "😄"
            y = "😄"
            z = "😄"
           
        />
        <SlotM
              x = "😄"
            y = '😠'
            z = '😄'
        />
        <SlotM
              x = '🍎'
            y = '🍌'
            z = '🍎'
        />
         <SlotM
              x = '💑'
            y =  '💑'
            z =  '💑'
        />
        </div>
        </>
    )

}


export default App;






Index.js PART

import React from "react";
import  ReactDOM from "react-dom";
import App from "./App.jsx";
import './App.css';

ReactDOM.render(


    <>
        <App/>
    </>,document.getElementById('root')
)




Tags:

Post a Comment

0 Comments