From 26a0b380f2c4f7e4c551c13e4f2813b54e1132c5 Mon Sep 17 00:00:00 2001 From: murtuza Date: Mon, 28 Feb 2022 21:41:41 +0530 Subject: [PATCH 1/2] added new play --- src/meta/play-meta.js | 14 ++++++- src/plays/Counter/Counter.js | 28 ++++++++++++++ src/plays/Counter/CounterApp.js | 27 ++++++++++++++ src/plays/Counter/counter.css | 66 +++++++++++++++++++++++++++++++++ src/plays/index.js | 1 + 5 files changed, 135 insertions(+), 1 deletion(-) create mode 100644 src/plays/Counter/Counter.js create mode 100644 src/plays/Counter/CounterApp.js create mode 100644 src/plays/Counter/counter.css diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js index ba9c6f0cc7..a96201bbe0 100644 --- a/src/meta/play-meta.js +++ b/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,17 @@ const plays = [ level: 'Intermediate', tags: 'Recursion, Tree', github: 'green-roots' + }, { + id: 'pl-counter', + name: 'Counter', + description: 'A simple counter', + component: () => {return }, + path: '/plays/Counter', + level: 'Beginner', + tags: 'JSX, State, Props', + github: 'murtuzaalisurti', + blog: 'https://syntackle.vercel.app', + video: '' }, //replace new play item here ]; diff --git a/src/plays/Counter/Counter.js b/src/plays/Counter/Counter.js new file mode 100644 index 0000000000..7b07eeba62 --- /dev/null +++ b/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 ( +
+ + +
+ ) +} +export default Counter; \ No newline at end of file diff --git a/src/plays/Counter/CounterApp.js b/src/plays/Counter/CounterApp.js new file mode 100644 index 0000000000..1c24e27f93 --- /dev/null +++ b/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 ( +
+

Counter

+

A simple counter

+

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.

+
+ setInput(e.target.value)} className="no_of_times" type="text" /> + +
+ +
+ ); +} + +export default CounterApp; \ No newline at end of file diff --git a/src/plays/Counter/counter.css b/src/plays/Counter/counter.css new file mode 100644 index 0000000000..f91ff6a9ee --- /dev/null +++ b/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; +} diff --git a/src/plays/index.js b/src/plays/index.js index 3fdaee9ff5..057ecf87c4 100644 --- a/src/plays/index.js +++ b/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 From 8d0e3d4feea06bb09dfa60945ede8faf37ac7325 Mon Sep 17 00:00:00 2001 From: Murtuzaali Surti <68743212+murtuzaalisurti@users.noreply.github.com> Date: Tue, 1 Mar 2022 10:01:06 +0530 Subject: [PATCH 2/2] removed blog from the play 'Counter' --- src/meta/play-meta.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js index a96201bbe0..18851abcb5 100644 --- a/src/meta/play-meta.js +++ b/src/meta/play-meta.js @@ -62,14 +62,12 @@ const plays = [ }, { id: 'pl-counter', name: 'Counter', - description: 'A simple counter', + description: 'A simple counter which increments the value upto a certain limit!', component: () => {return }, path: '/plays/Counter', level: 'Beginner', tags: 'JSX, State, Props', - github: 'murtuzaalisurti', - blog: 'https://syntackle.vercel.app', - video: '' + github: 'murtuzaalisurti' }, //replace new play item here ];