added new play - Counter

src/meta/play-meta.js

@@ -4,7 +4,8 @@ import {
   CurrentTimer,
   MovieContainer,
   WhyReact,
-  //import play here
+  CounterApp,
+//import play here
 } from "plays";
 
 const plays = [
@@ -58,6 +59,15 @@ const plays = [
     level: 'Intermediate',
     tags: 'Recursion, Tree',
     github: 'green-roots'
+  }, {
+    id: 'pl-counter', 
+    name: 'Counter', 
+    description: 'A simple counter which increments the value upto a certain limit!',
+    component: () => {return <CounterApp />},
+    path: '/plays/Counter',
+    level: 'Beginner',
+    tags: 'JSX, State, Props',
+    github: 'murtuzaalisurti'
   }, //replace new play item here
 ];
 

src/plays/Counter/Counter.js

@@ -0,0 +1,28 @@
+import { useState } from "react";
+
+const Counter = (props) => {
+
+    const [times, setTimes] = useState(0);
+
+    function increase() {
+        setTimes((prev) => {
+            if (prev === props.times) {
+                return 0;
+            } else {
+                return prev + 1;
+            }
+        })
+    }
+
+    function reset(){
+        setTimes(0);
+    }
+
+    return (
+        <div className="counter">
+            <button title="Click to increment" className="counter_btn" onClick={increase}>{times}</button>
+            <button className="reset_btn" onClick={reset}>Reset</button>
+        </div>
+    )
+}
+export default Counter;

src/plays/Counter/CounterApp.js

@@ -0,0 +1,27 @@
+import {useState} from 'react';
+import Counter from './Counter';
+import './counter.css';
+function CounterApp() {
+  const [input, setInput] = useState("");
+  const [times, setTimes] = useState(33);
+  function register(){
+    let no_times = Number(input);
+    console.log(no_times)
+    setTimes(no_times);
+    setInput("");
+  }
+  return (
+    <div class="counter-container">
+      <h1>Counter</h1>
+      <p>A simple counter</p>
+      <p class="counter-desc">Specify the limit and click the circle below to increment the value until the limit has been reached. After that it will reset to zero.</p>
+      <div className="input_field">
+        <input value={input} onChange={e => setInput(e.target.value)} className="no_of_times" type="text" />
+        <button onClick={register}>Submit</button>
+      </div>
+      <Counter times={times}/>
+    </div>
+  );
+}
+
+export default CounterApp;

src/plays/Counter/counter.css

@@ -0,0 +1,66 @@
+.counter-container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100vw;
+}
+.counter-desc{
+    text-align: center;
+}
+button:hover{
+    cursor: pointer;
+}
+.input_field {
+    display: flex;
+    justify-content: center;
+    margin-top: 1rem;
+    width: 90%;
+    margin: 0 1rem;
+}
+.input_field input {
+    width: 100%;
+    max-width: 15rem;
+    outline: none;
+    border: 3px solid rgb(220, 182, 255);
+    border-radius: 0.6rem;
+    padding: 0.5rem;
+    text-align: center;
+}
+.input_field button,
+.reset_btn {
+    background-color: rgb(111, 78, 138);
+    margin-left: 1rem;
+    outline: none;
+    color: white;
+    border: none;
+    border-radius: 0.5rem;
+    padding: 0 0.5rem;
+}
+.reset_btn {
+    margin: 0;
+    padding: 0.5rem 1rem;
+}
+.counter {
+    margin-top: 2.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.reset_btn {
+    margin-top: 0.5rem;
+}
+.counter_btn {
+    height: 7rem;
+    width: 7rem;
+    background-color: rgb(199, 139, 255);
+    border-radius: 50%;
+    border: none;
+    font-size: 2.5rem;
+    transition: border 0.01s ease-in;
+}
+.counter_btn:active {
+    border: 3px solid rgb(73, 0, 141);
+}
+.counter_btn::selection {
+    background-color: transparent;
+}

src/plays/index.js

@@ -5,4 +5,5 @@ export { default as CdTimerComp } from 'plays/date-time-counter/CdTimerComp';
 export { default as BasicTree } from 'plays/family-tree/BasicTree';
 export { default as MovieContainer } from 'plays/movies/MovieContainer';
 export { default as WhyReact } from 'plays/why-react/WhyReact';
+export { default as CounterApp } from 'plays/Counter/CounterApp';
 //add export here