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;
}