diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index 27af13b7..b0cc2b35 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -5,4 +5,9 @@ https://github.com/vaibhav-26199
Swara Bhatt
-https://github.com/webmobtechnologies
\ No newline at end of file
+https://github.com/webmobtechnologies
+
+
+Raj Dutta
+
+https://github.com/rajprogrammerbd
\ No newline at end of file
diff --git a/web-timer/.gitignore b/web-timer/.gitignore
new file mode 100644
index 00000000..4d29575d
--- /dev/null
+++ b/web-timer/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/web-timer/README.md b/web-timer/README.md
new file mode 100644
index 00000000..54ef0943
--- /dev/null
+++ b/web-timer/README.md
@@ -0,0 +1,68 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.React App
+
+
+ You need to enable JavaScript to run this app.
+
+
+
+
diff --git a/web-timer/public/logo192.png b/web-timer/public/logo192.png
new file mode 100644
index 00000000..fc44b0a3
Binary files /dev/null and b/web-timer/public/logo192.png differ
diff --git a/web-timer/public/logo512.png b/web-timer/public/logo512.png
new file mode 100644
index 00000000..a4e47a65
Binary files /dev/null and b/web-timer/public/logo512.png differ
diff --git a/web-timer/public/manifest.json b/web-timer/public/manifest.json
new file mode 100644
index 00000000..080d6c77
--- /dev/null
+++ b/web-timer/public/manifest.json
@@ -0,0 +1,25 @@
+{
+ "short_name": "React App",
+ "name": "Create React App Sample",
+ "icons": [
+ {
+ "src": "favicon.ico",
+ "sizes": "64x64 32x32 24x24 16x16",
+ "type": "image/x-icon"
+ },
+ {
+ "src": "logo192.png",
+ "type": "image/png",
+ "sizes": "192x192"
+ },
+ {
+ "src": "logo512.png",
+ "type": "image/png",
+ "sizes": "512x512"
+ }
+ ],
+ "start_url": ".",
+ "display": "standalone",
+ "theme_color": "#000000",
+ "background_color": "#ffffff"
+}
diff --git a/web-timer/public/robots.txt b/web-timer/public/robots.txt
new file mode 100644
index 00000000..e9e57dc4
--- /dev/null
+++ b/web-timer/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/web-timer/src/App.js b/web-timer/src/App.js
new file mode 100644
index 00000000..f6c7d47e
--- /dev/null
+++ b/web-timer/src/App.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import Header from './components/header';
+import Main from './components/main';
+import "./components/main.scss";
+
+function App() {
+ return (
+
+
+
+ );
+}
+
+export default App;
diff --git a/web-timer/src/App.test.js b/web-timer/src/App.test.js
new file mode 100644
index 00000000..4db7ebc2
--- /dev/null
+++ b/web-timer/src/App.test.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+ const { getByText } = render(
+ { ( state ) ? (
+ ) : null }
+
+ ,
+ document.getElementById("root")
+ );
+}
+
+export default Error;
\ No newline at end of file
diff --git a/web-timer/src/components/header.jsx b/web-timer/src/components/header.jsx
new file mode 100644
index 00000000..272952e0
--- /dev/null
+++ b/web-timer/src/components/header.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+function Header() {
+ return (
+
+
+
+ );
+}
+
+export default Header;
\ No newline at end of file
diff --git a/web-timer/src/components/main.jsx b/web-timer/src/components/main.jsx
new file mode 100644
index 00000000..7cffe72d
--- /dev/null
+++ b/web-timer/src/components/main.jsx
@@ -0,0 +1,183 @@
+import React, { useReducer, useRef } from 'react';
+import Success from './success';
+import Error from './error';
+
+function Main() {
+ const initialState = {
+ timer: {
+ hours: 0,
+ minutes: 0,
+ seconds: 0
+ },
+ start: false,
+ ui: false,
+ setTimer: {
+ hours: 0,
+ minutes: 0,
+ seconds: 0
+ },
+ successUI: false,
+ error: { status: false, message: null }
+ };
+
+ const intervalRef = useRef();
+
+ const convertMiliseconds = ( h, m, s ) => {
+ let result = 0;
+ if ( h > 0 ) {
+ result += (h * 3600000);
+ }
+
+ if ( m > 0 ) {
+ result += (m * 60000);
+ }
+
+ if ( s > 0 ) {
+ result += (s * 1000);
+ }
+
+ return result;
+ }
+
+ const reducer = ( state, action ) => {
+ switch ( action.type ) {
+ case 'addedInterval':
+ return { ...state, timer: { hours: Math.floor(action.value / 3600), minutes: Math.floor(action.value / 60), seconds: (state.timer.seconds + action.custom === 60) ? 0 : state.timer.seconds + action.custom } };
+ case 'setStart':
+ return { ...state, start: action.value };
+ case 'changeSetHours':
+ return { ...state, setTimer: { ...state.setTimer, hours: action.value } };
+ case 'changeSetMinutes':
+ return { ...state, setTimer: { ...state.setTimer, minutes: action.value } };
+ case 'changeSetSeconds':
+ return { ...state, setTimer: { ...state.setTimer, seconds: action.value } };
+ case 'changeUI':
+ return { ...state, ui: action.value };
+ case 'setDefaultTimer':
+ return { ...state, timer: { hours: 0, minutes: 0, seconds: 0 } };
+ case 'successUI':
+ return { ...state, successUI: action.value };
+ case 'successAll':
+ return { ...state, successUI: false, ui: false };
+ case 'setError':
+ return { ...state, error: { status: action.status, message: action.message } };
+ case 'defaultError':
+ return { ...state, error: { status: false, message: null } };
+ case 'successUIOff':
+ return { ...state, successUI: false };
+ default:
+ throw new Error("This is a Default Error");
+ }
+ }
+
+ const count = { count: 0 };
+
+
+ const intervalFunction = () => {
+ count.count = count.count + 1;
+ dispatch({ type: 'addedInterval', value: count.count, custom: 1 });
+ }
+
+ const [ state, dispatch ] = useReducer(reducer, initialState);
+
+ const editButton = () => {
+ if ( !state.start ) {
+ if ( state.ui ) {
+ dispatch({ type: 'changeUI', value: !state.ui });
+ dispatch({ type: 'successUIOff', value: false });
+ } else {
+ dispatch({ type: 'setError', status: true, message: "Timer isn't started" });
+ // throw new Error("Timer isn't started");
+ }
+ } else {
+ dispatch({ type: 'setError', status: true, message: "Timer haven't stopped" });
+ }// throw new Error("Running Timer first stopped it then try");
+ }
+
+ const start = () => {
+ intervalRef.current = window.setInterval(intervalFunction, 1000);
+
+ window.setTimeout(() => {
+ window.clearInterval(intervalRef.current);
+ dispatch({ type: 'setStart', value: false });
+ dispatch({ type: 'successUI', value:true });
+ }, convertMiliseconds(state.setTimer.hours, state.setTimer.minutes, state.setTimer.seconds));
+ dispatch({ type: 'setStart', value: !state.start });
+ }
+
+ const end = () => {
+ window.clearInterval(intervalRef.current);
+ dispatch({ type: 'setStart', value: false });
+ dispatch({ type: 'successUI', value:true });
+ }
+
+ const hourChanged = e => {
+ if ( Number(e.target.value) || Number(e.target.value) === 0 ) {
+ // console.log(Number(e.target.value));
+ if ( Number(e.target.value) >= 0 && Number(e.target.value) <= 12 ) {
+ dispatch({ type: 'changeSetHours', value: Number(e.target.value) });
+ } else {
+ throw new Error("Hours is Invalid");
+ }
+
+ } else throw new Error("Typeof is String");
+ }
+
+ const minutesChanged = e => {
+ if ( Number(e.target.value) || Number(e.target.value) === 0 ) {
+ if ( Number(e.target.value) >= 0 && Number(e.target.value) <= 60 ) {
+ dispatch({ type: 'changeSetMinutes', value: Number(e.target.value) });
+ } else throw new Error("Minutes invalid");
+
+ } else throw new Error("Typeof is String");
+ }
+
+ const secondChanged = e => {
+ if ( Number(e.target.value) || Number(e.target.value) === 0 ) {
+ if ( Number(e.target.value) >= 0 && Number(e.target.value) <= 60 ) {
+ dispatch({ type: 'changeSetSeconds', value: Number(e.target.value) });
+ } else throw new Error("Seconds Invalid");
+
+ } else throw new Error("Typeof is String");
+ }
+
+ const setStarted = () => {
+ dispatch({ type: 'changeUI', value: !state.ui });
+ dispatch({ type: 'setDefaultTimer' });
+ start();
+ }
+
+ const last = () => {
+ dispatch({ type: 'successAll' });
+ }
+
+ const setDisableAnimation = () => {
+ dispatch({ type: "defaultError" });
+ }
+
+ return (
+
+
+
+
Edit
+ { (state.ui) ? (
{(state.timer.hours > 9) ? state.timer.hours : '0' + state.timer.hours}: {(state.timer.minutes > 9) ? state.timer.minutes : '0' + state.timer.minutes}: {(state.timer.seconds > 9) ? state.timer.seconds : '0' + state.timer.seconds} ) : (
+
+
+
) }
+
+
+ { (state.ui) ? (End ) : (Start ) }
+
+ { (state.successUI) ?
+
+ );
+}
+
+export default Main;
\ No newline at end of file
diff --git a/web-timer/src/components/main.scss b/web-timer/src/components/main.scss
new file mode 100644
index 00000000..dc9767ea
--- /dev/null
+++ b/web-timer/src/components/main.scss
@@ -0,0 +1,264 @@
+// Imports fonts
+@import url('https://fonts.googleapis.com/css2?family=Piazzolla:wght@400;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
+
+// Variables
+$body-bg-color: #fff;
+$header-title-font: 'Piazzolla', serif;
+$timer-fonts: 'Barlow', sans-serif;
+$success_title: 'Staatliches', cursive;
+
+
+// Basic Typography
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html, body {
+ height: 100%;
+}
+
+// Main Stylesheet
+
+body > #root {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ .error {
+ position: fixed;
+ top: 31px;
+ right: 30px;
+ width: auto;
+ z-index: 100;
+ background: red;
+ color: #fff;
+ cursor: pointer;
+
+ h2 {
+ font-size: 12px;
+ padding: 10px 34px;
+ }
+
+ div.counts {
+ width: 0px;
+ height: 4px;
+ background: blue;
+ float: right;
+ }
+ }
+
+ & > header {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ box-shadow: 0px 0px 9px 9px #0000001a;
+ position: fixed;
+ top: 0;
+
+ & > .container {
+ width: 960px;
+ height: auto;
+ background-color: #fff;
+ margin: 0 auto;
+ padding: 10px 0px;
+
+ @media screen and ( max-width: 1045px ) {
+ width: 90%;
+ }
+
+ & > #header > h2.title {
+ display: block;
+
+ & > a {
+ text-decoration: none;
+ font-family: $header-title-font;
+ font-weight: 600;
+ color: #774747;
+ font-size: 17px;
+ text-shadow: 1px 1px 1px #afafaf;
+ }
+ }
+ }
+ }
+
+ & > main {
+ position: relative;
+ width: 60%;
+ height: 155px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ .main-top {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 11px;
+
+ & > h2.timer {
+ font-size: 80px;
+ font-family: $timer-fonts;
+ font-weight: bold;
+ color: #a54a4a;
+
+ @media screen and ( max-width: 631px ) {
+ font-size: 60px;
+ }
+
+ @media screen and ( max-width: 567px ) {
+ font-size: 40px;
+ }
+ }
+
+ & > .input-items {
+ width: auto;
+
+ form {
+ display: inline;
+
+ @media screen and ( max-width: 513px ) {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ input[type="text"] {
+ outline: 0;
+ padding: 6px 10px;
+ margin-right: 20px;
+ width: 29%;
+ border: 1px solid #bababa;
+ border-radius: 5px;
+
+ @media screen and ( max-width: 513px ) {
+ margin-bottom: 6px;
+ width: 100%;
+ margin-right: 0;
+ }
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ }
+ }
+
+ small {
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ right: 0;
+ text-decoration: underline;
+ font-size: 12px;
+ color: #774747;
+ }
+ }
+
+ .main-bottom {
+ & > button.start-button {
+ color: white;
+ padding: 7px 21px;
+ font-size: 15px;
+ font-family: $header-title-font;
+ font-weight: bold;
+ outline: 0;
+ background-color: #ffb9b9;
+ border: none;
+ cursor: pointer;
+ transform: scale(1);
+ transition: all 0.1s ease-in-out;
+
+ &:active {
+ transform: scale(1.10);
+ }
+
+ &:disabled {
+ background-color: #ffb9b982;
+ }
+ }
+
+ & > .endButton {
+ color: white;
+ padding: 7px 21px;
+ font-size: 15px;
+ font-family: "Piazzolla", serif;
+ font-weight: bold;
+ outline: 0;
+ background-color: #ffb9b9;
+ border: none;
+ cursor: pointer;
+ transform: scale(1);
+ transition: all 0.1s ease-in-out;
+
+ &:active {
+ transform: scale(1.10);
+ }
+
+ &:disabled {
+ background-color: #ffb9b982;
+ }
+ }
+ }
+
+ .success {
+ width: 80%;
+ height: 100%;
+ background: #ededed;
+ color: #565656;
+ position: absolute;
+ top: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ h2.success-title {
+ font-family: $success_title;
+ letter-spacing: 2px;
+ margin-bottom: 5px;
+
+ @media screen and ( max-width: 762px ) {
+ font-size: 15px;
+ }
+
+ @media screen and ( max-width: 530px ) {
+ width: 125px;
+ text-align: center;
+ }
+ }
+
+ h3 {
+ font-family: $timer-fonts;
+ margin-bottom: 10px;
+
+ @media screen and ( max-width: 762px ) {
+ font-size: 14px;
+ }
+ }
+
+ button {
+ color: white;
+ padding: 7px 21px;
+ font-size: 15px;
+ font-family: "Piazzolla", serif;
+ font-weight: bold;
+ outline: 0;
+ background-color: #ffb9b9;
+ border: none;
+ cursor: pointer;
+ transform: scale(1);
+ transition: all 0.1s ease-in-out;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web-timer/src/components/success.jsx b/web-timer/src/components/success.jsx
new file mode 100644
index 00000000..d6a67b57
--- /dev/null
+++ b/web-timer/src/components/success.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+function Success({ timer, last }) {
+ return (
+
+
+
Successfully Timer Completed
+ {(timer.hours > 9) ? timer.hours : '0' + timer.hours}: {(timer.minutes > 9) ? timer.minutes : '0' + timer.minutes}: {(timer.seconds > 9) ? timer.seconds : '0' + timer.seconds}
+ OK
+
+
+ );
+}
+
+export default Success;
\ No newline at end of file
diff --git a/web-timer/src/index.js b/web-timer/src/index.js
new file mode 100644
index 00000000..82c1a6b6
--- /dev/null
+++ b/web-timer/src/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(
+
+
+
diff --git a/web-timer/src/serviceWorker.js b/web-timer/src/serviceWorker.js
new file mode 100644
index 00000000..b04b771a
--- /dev/null
+++ b/web-timer/src/serviceWorker.js
@@ -0,0 +1,141 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+ window.location.hostname === 'localhost' ||
+ // [::1] is the IPv6 localhost address.
+ window.location.hostname === '[::1]' ||
+ // 127.0.0.0/8 are considered localhost for IPv4.
+ window.location.hostname.match(
+ /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+ )
+);
+
+export function register(config) {
+ if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+ // The URL constructor is available in all browsers that support SW.
+ const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+ if (publicUrl.origin !== window.location.origin) {
+ // Our service worker won't work if PUBLIC_URL is on a different origin
+ // from what our page is served on. This might happen if a CDN is used to
+ // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+ return;
+ }
+
+ window.addEventListener('load', () => {
+ const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+ if (isLocalhost) {
+ // This is running on localhost. Let's check if a service worker still exists or not.
+ checkValidServiceWorker(swUrl, config);
+
+ // Add some additional logging to localhost, pointing developers to the
+ // service worker/PWA documentation.
+ navigator.serviceWorker.ready.then(() => {
+ console.log(
+ 'This web app is being served cache-first by a service ' +
+ 'worker. To learn more, visit https://bit.ly/CRA-PWA'
+ );
+ });
+ } else {
+ // Is not localhost. Just register service worker
+ registerValidSW(swUrl, config);
+ }
+ });
+ }
+}
+
+function registerValidSW(swUrl, config) {
+ navigator.serviceWorker
+ .register(swUrl)
+ .then(registration => {
+ registration.onupdatefound = () => {
+ const installingWorker = registration.installing;
+ if (installingWorker == null) {
+ return;
+ }
+ installingWorker.onstatechange = () => {
+ if (installingWorker.state === 'installed') {
+ if (navigator.serviceWorker.controller) {
+ // At this point, the updated precached content has been fetched,
+ // but the previous service worker will still serve the older
+ // content until all client tabs are closed.
+ console.log(
+ 'New content is available and will be used when all ' +
+ 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+ );
+
+ // Execute callback
+ if (config && config.onUpdate) {
+ config.onUpdate(registration);
+ }
+ } else {
+ // At this point, everything has been precached.
+ // It's the perfect time to display a
+ // "Content is cached for offline use." message.
+ console.log('Content is cached for offline use.');
+
+ // Execute callback
+ if (config && config.onSuccess) {
+ config.onSuccess(registration);
+ }
+ }
+ }
+ };
+ };
+ })
+ .catch(error => {
+ console.error('Error during service worker registration:', error);
+ });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+ // Check if the service worker can be found. If it can't reload the page.
+ fetch(swUrl, {
+ headers: { 'Service-Worker': 'script' },
+ })
+ .then(response => {
+ // Ensure service worker exists, and that we really are getting a JS file.
+ const contentType = response.headers.get('content-type');
+ if (
+ response.status === 404 ||
+ (contentType != null && contentType.indexOf('javascript') === -1)
+ ) {
+ // No service worker found. Probably a different app. Reload the page.
+ navigator.serviceWorker.ready.then(registration => {
+ registration.unregister().then(() => {
+ window.location.reload();
+ });
+ });
+ } else {
+ // Service worker found. Proceed as normal.
+ registerValidSW(swUrl, config);
+ }
+ })
+ .catch(() => {
+ console.log(
+ 'No internet connection found. App is running in offline mode.'
+ );
+ });
+}
+
+export function unregister() {
+ if ('serviceWorker' in navigator) {
+ navigator.serviceWorker.ready
+ .then(registration => {
+ registration.unregister();
+ })
+ .catch(error => {
+ console.error(error.message);
+ });
+ }
+}
diff --git a/web-timer/src/setupTests.js b/web-timer/src/setupTests.js
new file mode 100644
index 00000000..74b1a275
--- /dev/null
+++ b/web-timer/src/setupTests.js
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';