React is a JavaScript framework for creating interactive user interfaces (UIs) that is gaining popularity among developers all around the world. Upon learning React, how can I create a straightforward counter app?
The goal of this tutorial is to introduce developers to the React.js library.The reader should be familiar with the fundamental web development technologies, such as:
Video Tutorial :
Basics for HTML and CSS
Javascript
Basics of React.js in ES6
Important Note :
Download Design Assets Link
Step 1 : Packages to be installed
1.MUI : Link
1.Install React
npx create-react-app react-counter-app
Then jump to that folder eg. if your folder name is react-counter-app the type
Cd react-counter-app
2.CSS
.app {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
background-color: #FAF9FA;
border-radius: 8px;
padding: 3rem;
margin-top: 6rem;
}
.heading_text
{
font-size: 15px !important;
font-weight: 400;
}
.heading_two
{
padding-top: 5px;
}
.total_amount_card
{
height: 537px;
background-color: #D6FF58;
border-radius: 27px;
}
.right
{
float: right;
margin-top: -2rem;
}
.card_text {
padding-top: 40px;
}
.total_amount_heading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 60px;
font-weight: 800;
padding-top: 10rem;
}
.total_amount_para {
text-align: center;
font-size: 18px !important;
padding-top: 5px;
color: #4B4B4B;
}
.input_area
{
margin-top: 40px;
}
.input_field
{
margin-top: 30px;
width: 445px;
}
#outlined-basic {
width: 410px;
}
.button_collection
{
margin-top: 61px;
margin-bottom: 1rem;
}
.btn_one {
background-color: #F2F2F2 !important;
width: 200px;
height: 75px;
color: black !important;
font-weight: 600;
font-size: 20px !important;
}
.btn_two {
background-color: #F2F2F2 !important;
width: 200px;
height: 75px;
color: black !important;
font-size: 20px !important;
}
App .js
import './App.css';
import Box from '@mui/material/Box';
// import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import {useState} from 'react'
function App() {
const [counter, setCounter] = useState(0);
const handleClick1 = () => {
// Counter state is incremented
setCounter(counter + 1)
}
// Function is called everytime decrement button is clicked
const handleClick2 = () => {
// Counter state is decremented
if(counter === 0)
{
return 0;
}
else {
setCounter(counter - 1)
}
}
const handleClick3 = () => {
// Counter state is incremented
setCounter(counter == 0);
window.location.reload()
}
return (
<>
<Box
component="form"
sx={{
'& > :not(style)': { m: 1, width: '25ch' },
}}
noValidate
autoComplete="off"
></Box>
<div className="app">
<div className='container'>
<div className='total_amount_card' style={{ backgroundImage: `linear-gradient(to right, rgba(253, 230, 90, 100%), rgba(204, 254, 87, 100%))`}}>
<div className='right'>
<svg onClick={handleClick3} xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="17" height="17"><path d="M21.962,12.875A10.03,10.03,0,1,1,19.122,5H16a1,1,0,0,0-1,1h0a1,1,0,0,0,1,1h4.143A1.858,1.858,0,0,0,22,5.143V1a1,1,0,0,0-1-1h0a1,1,0,0,0-1,1V3.078A11.985,11.985,0,1,0,23.95,13.1a1.007,1.007,0,0,0-1-1.1h0A.982.982,0,0,0,21.962,12.875Z"/></svg>
</div>
<div className='card_text '>
<h3 className='total_amount_heading'>{counter}</h3>
</div>
</div>
<form >
<div className='button_collection'>
<Stack spacing={2} direction="row">
<Button onClick={handleClick1} variant="contained" className='btn_one'>+</Button>
<Button onClick={handleClick2} variant="contained" className='btn_two'>-</Button>
</Stack>
</div>
</form>
</div>
</div>
</>
);
}
export default App;
Output Counter app
Full Detail Article : https://bit.ly/3FLY1uE
People are also reading:
Simple interest calculator using React Hooks
React Router v6 in React Js With Complete Project Of 2022
Top comments (0)