Practical no-2
Name – Kshitij Banode
Batch – B2
Roll no -24
Q- Practical 2: Functional Component with State:
a) Problem definition 1: Create a React.js application that features a counter. Users
should be able to
increment, decrement, and reset the counter.
Tasks:
i) Set up a new React.js project.
ii) Create a functional component named Counter that displays the current count.
iii) Implement buttons within the Counter component for incrementing, decrementing,
and resetting the count.
iv) Use the useState hook to manage the state of the count.
v) Ensure that the count cannot go below zero when decrementing.
vi) Style the counter and buttons for a visually appealing user interface.
Code –
Counter.js:-
import React from 'react';
const Counter = ({ value }) => {
return (
<div>
<h1>COUNTER value: { value }</h1>
</div>
)
}
export default Counter;
Increase.js:-
import React from 'react';
const Increase = ( { onClick}) => {
return (
<button onClick={onClick}>
Increase
</button>
);
};
export default Increase;
Decrease.js:-
// components/DecreaseButton.js
import React from 'react';
const Decrease = ({ onClick }) => {
return (
<button onClick={onClick}>
Decrease
</button>
);
};
export default Decrease;
App.js:-
// src/App.js
import React from "react";
import "./App.css";
import Counter from "./components/Counter";
import Increase from "./components/Increase";
import Decrease from "./components/Decrease";
import ShoppingCart from "./components/ShoppingCart";
function App() {
const [counterValue, setCounterValue] = useState(0);
const increaseValue = () => {
setCounterValue(counterValue + 1);
};
const decreaseValue = () => {
setCounterValue(counterValue - 1);
};
return (
<div className="App">
<div className="parent">
<div className="child">
<div className="contents">
<Counter value={counterValue} />
<div className="buttn">
<div className="Increase">
<Increase onClick={increaseValue} />
</div>
<Decrease onClick={decreaseValue} />
</div>
</div>
<ShoppingCart />
</div>
</div>
</div>
);
}
export default App;
App.css:-
.App {
background-color: black;
background-repeat: none;
background-attachment: fixed;
}
.parent {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
z-index: 1;
}
.child {
text-align:center;
height: 600px;
width:600px;
z-index: 2;
background-color: rgba(255, 255, 255, 0.493);
opacity: 1;
border: 30px solid rgba(255, 255, 255, 0.094);
border-radius:50%;
color: red;
display: flex;
align-items: center;
justify-content: center;
transition: all 2s ease-in-out;
animation: bordera 15s infinite ease-in-out;
}
.child:hover {
box-shadow:0px 0px 50px 50px red;
height: 550px;
width:550px;
}
.button {
border: 2px black;
}
.contents {
padding: 20px;
text-shadow: 2px 2px 2px blue;
}
.buttn {
padding: 30px;
margin: 30px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
button {
height: 100px;
width: 100px;
margin-right: 60px;
margin-left: 60px;
border-radius: 50%;
background-color: rgb(0, 0, 0);
color: white;
box-shadow: 0px 0px 10px 10px aqua ;
animation: borders 10s infinite ease-in-out;
}
h1 {
font-size: 40px;
}
@keyframes bordera {
0%{
border-color:rgba(255, 0, 0, 0.489);
}
10% {
border-color: aqua
}
20% {
border-color: red;
}
20% {
border-color: red;
}
30% {
border-color: rgb(13, 211, 69);
}
40% {
border-color: rgb(207, 213, 19);
}
50% {
border-color: rgb(45, 45, 64);
}
60% {
border-color: rgba(9, 190, 124, 0.626);
}
70% {
border-color: rgb(122, 9, 179);
}
80% {
border-color: rgb(176, 83, 83);
}
90% {
border-color: rgb(5, 5, 90);
}
100% {
border-color: blue;
display: none;
}
}
@keyframes borders {
0%{
background-color:rgba(255, 0, 0, 0.489);
}
10% {
background-color: aqua;
}
20% {
background-color: red;
}
20% {
background-color: red;
}
30% {
background-color: rgb(13, 211, 69);
}
40% {
background-color: rgb(207, 213, 19);
}
50% {
background-color: rgb(45, 45, 64);
}
60% {
background-color: rgba(9, 190, 124, 0.626);
}
70% {
background-color: rgb(122, 9, 179);
}
80% {
background-color: rgb(176, 83, 83);
}
90% {
background-color: rgb(5, 5, 90);
}
100% {
background-color: blue;
display: none;
}
}
Output:
