Source Code For Step Counter

Index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

Package.json

{
  "name": "react",
  "version": "1.0.0",
  "description": "React example starter project",
  "keywords": ["react", "starter"],
  "main": "src/index.js",
  "dependencies": {
    "react": "17.0.0",
    "react-dom": "17.0.0",
    "react-scripts": "3.4.3"
  },
  "devDependencies": {
    "typescript": "3.8.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
}

App.js

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

export default function App() {
  const [number, SetNumber] = useState(0);
  function Increment() {
    SetNumber(number + 1);
  }
  function Decrement() {
    SetNumber(number > 0 ? number - 1 : number);
  }
  return (
    <div className="App">
      <h1>It's showtime!</h1>
      <h2>{number}</h2>
      <button class="myButton" onClick={Increment}>
        +
      </button>
      <button class="myButton" onClick={Decrement}>
        -
      </button>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path
          fill="#0099ff"
          fill-opacity="1"
          d="M0,32L26.7,53.3C53.3,75,107,117,160,117.3C213.3,117,267,75,320,64C373.3,53,427,75,480,101.3C533.3,128,587,160,640,170.7C693.3,181,747,171,800,144C853.3,117,907,75,960,58.7C1013.3,43,1067,53,1120,74.7C1173.3,96,1227,128,1280,144C1333.3,160,1387,160,1413,160L1440,160L1440,320L1413.3,320C1386.7,320,1333,320,1280,320C1226.7,320,1173,320,1120,320C1066.7,320,1013,320,960,320C906.7,320,853,320,800,320C746.7,320,693,320,640,320C586.7,320,533,320,480,320C426.7,320,373,320,320,320C266.7,320,213,320,160,320C106.7,320,53,320,27,320L0,320Z"
        ></path>
      </svg>
    </div>
  );
}

Styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}
body {
  background-color: blanchedalmond;
}
h1 {
  color: red;
  font-size: 12vh;
}
.myButton {
  box-shadow: 3px 4px 0px 0px #d8ed39;
  background: linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
  background-color: #79bbff;
  border-radius: 5px;
  border: 1px solid #337bc4;
  display: inline-block;
  cursor: pointer;
  color: #f50000;
  font-family: Arial;
  font-size: 17px;
  font-weight: bold;
  padding: 12px 44px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #528ecc;
}
.myButton:hover {
  background: linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
  background-color: #378de5;
}
.myButton:active {
  position: relative;
  top: 1px;
}
h2 {
  font-size: 8vh;
  color: green;
  background: #d8ed39;
}