From 35cc2f6cdbe9a1ce8e9eeb94e4097307d1f2af8a Mon Sep 17 00:00:00 2001
From: Priyatham-sai-chand <priyathamsaichand@gmail.com>
Date: Sat, 5 Dec 2020 23:42:25 +0530
Subject: [PATCH] relocation status

---
 package-lock.json           | 203 ++++++++++++++++++++++++++++++++++++
 package.json                |   1 +
 src/App.js                  |   3 +-
 src/components/NavBar.js    |   3 +-
 src/components/Options.js   |  75 ++++++-------
 src/components/Stepper.js   |  66 ++++++++++++
 src/components/Tracking.js  | 101 ++++++++++++++++--
 src/components/stepper.css  |  61 +++++++++++
 src/components/tracking.css | 120 +++++++++------------
 9 files changed, 513 insertions(+), 120 deletions(-)
 create mode 100644 src/components/Stepper.js
 create mode 100644 src/components/stepper.css

diff --git a/package-lock.json b/package-lock.json
index f99c1e2..22bacca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1168,6 +1168,11 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
     "@emotion/is-prop-valid": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
@@ -1803,6 +1808,88 @@
         }
       }
     },
+    "@material-ui/core": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.2.tgz",
+      "integrity": "sha512-/D1+AQQeYX/WhT/FUk78UCRj8ch/RCglsQLYujYTIqPSJlwZHKcvHidNeVhODXeApojeXjkl0tWdk5C9ofwOkQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/styles": "^4.11.2",
+        "@material-ui/system": "^4.11.2",
+        "@material-ui/types": "^5.1.0",
+        "@material-ui/utils": "^4.11.2",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.4",
+        "hoist-non-react-statics": "^3.3.2",
+        "popper.js": "1.16.1-lts",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0",
+        "react-transition-group": "^4.4.0"
+      }
+    },
+    "@material-ui/styles": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.2.tgz",
+      "integrity": "sha512-xbItf8zkfD3FuGoD9f2vlcyPf9jTEtj9YTJoNNV+NMWaSAHXgrW6geqRoo/IwBuMjqpwqsZhct13e2nUyU9Ljw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.8.0",
+        "@material-ui/types": "^5.1.0",
+        "@material-ui/utils": "^4.11.2",
+        "clsx": "^1.0.4",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.0.3",
+        "jss-plugin-camel-case": "^10.0.3",
+        "jss-plugin-default-unit": "^10.0.3",
+        "jss-plugin-global": "^10.0.3",
+        "jss-plugin-nested": "^10.0.3",
+        "jss-plugin-props-sort": "^10.0.3",
+        "jss-plugin-rule-value-function": "^10.0.3",
+        "jss-plugin-vendor-prefixer": "^10.0.3",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.14",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
+          "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
+        }
+      }
+    },
+    "@material-ui/system": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.11.2.tgz",
+      "integrity": "sha512-BELFJEel5E+5DMiZb6XXT3peWRn6UixRvBtKwSxqntmD0+zwbbfCij6jtGwwdJhN1qX/aXrKu10zX31GBaeR7A==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.11.2",
+        "csstype": "^2.5.2",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.14",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
+          "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
+        }
+      }
+    },
+    "@material-ui/types": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
+      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
+    },
+    "@material-ui/utils": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz",
+      "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@@ -4062,6 +4149,11 @@
         "shallow-clone": "^0.1.2"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -4580,6 +4672,15 @@
         }
       }
     },
+    "css-vendor": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.3",
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css-what": {
       "version": "3.4.2",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
@@ -7448,6 +7549,11 @@
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
       "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw=="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -7548,6 +7654,14 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
+    "indefinite-observable": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-2.0.1.tgz",
+      "integrity": "sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==",
+      "requires": {
+        "symbol-observable": "1.2.0"
+      }
+    },
     "indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
@@ -7848,6 +7962,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -9662,6 +9781,85 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.0.tgz",
+      "integrity": "sha512-B6151NvG+thUg3murLNHRPLxTLwQ13ep4SH5brj4d8qKtogOx/jupnpfkPGSHPqvcwKJaCLctpj2lEk+5yGwMw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^3.0.2",
+        "indefinite-observable": "^2.0.1",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.0.tgz",
+      "integrity": "sha512-GSjPL0adGAkuoqeYiXTgO7PlIrmjv5v8lA6TTBdfxbNYpxADOdGKJgIEkffhlyuIZHlPuuiFYTwUreLUmSn7rg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.5.0"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.0.tgz",
+      "integrity": "sha512-rsbTtZGCMrbcb9beiDd+TwL991NGmsAgVYH0hATrYJtue9e+LH/Gn4yFD1ENwE+3JzF3A+rPnM2JuD9L/SIIWw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.0"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.5.0.tgz",
+      "integrity": "sha512-FZd9+JE/3D7HMefEG54fEC0XiQ9rhGtDHAT/ols24y8sKQ1D5KIw6OyXEmIdKFmACgxZV2ARQ5pAUypxkk2IFQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.0"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.5.0.tgz",
+      "integrity": "sha512-ejPlCLNlEGgx8jmMiDk/zarsCZk+DV0YqXfddpgzbO9Toamo0HweCFuwJ3ZO40UFOfqKwfpKMVH/3HUXgxkTMg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.0.tgz",
+      "integrity": "sha512-kTLRvrOetFKz5vM88FAhLNeJIxfjhCepnvq65G7xsAQ/Wgy7HwO1BS/2wE5mx8iLaAWC6Rj5h16mhMk9sKdZxg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.0"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.0.tgz",
+      "integrity": "sha512-jXINGr8BSsB13JVuK274oEtk0LoooYSJqTBCGeBu2cG/VJ3+4FPs1gwLgsq24xTgKshtZ+WEQMVL34OprLidRA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.5.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.0.tgz",
+      "integrity": "sha512-rux3gmfwDdOKCLDx0IQjTwTm03IfBa+Rm/hs747cOw5Q7O3RaTUIMPKjtVfc31Xr/XI9Abz2XEupk1/oMQ7zRA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.8",
+        "jss": "10.5.0"
+      }
+    },
     "jsx-ast-utils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.1.0.tgz",
@@ -11091,6 +11289,11 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1-lts",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
+      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
diff --git a/package.json b/package.json
index 754b148..7f18558 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
diff --git a/src/App.js b/src/App.js
index b80c4b9..708e36c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,6 +7,7 @@ import { Router,BrowserRouter, Route, Switch } from 'react-router-dom';
 import UserContext from "./context/UserContext";
 import Tracking from "./components/Tracking";
 import Options from "./components/Options";
+import Stepper from './components/Stepper';
 
 export default function App() {
   const [userData, setUserData ] = useState({
@@ -50,7 +51,7 @@ export default function App() {
             <Route exact path="/" component={HomePage} />
             <Route path="/user" component={LogInContainer} />
             <Route path="/pricing" component={PricingPlan} />
-            <Route path="/track" component={Tracking} />
+            <Route path="/track" component={Stepper} />
             <Route path="/options" component={Options} />
           </Switch>
           </UserContext.Provider>
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 10ffe76..a2316f8 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -38,12 +38,13 @@ export default function NavBar() {
           <li><a href="#">About</a></li>
           <li><a href="#">Services</a></li>
           <li><a href="#">Contact us</a></li>
+          <li><a href="#" onClick={logout}>Log Out</a></li>
           {userData.user ? (
             <li><a href="#" onClick={logout}>Log Out</a></li>
           ) : (
               <React.Fragment>
               <li><a href="#" onclick={register}>Register</a></li>
-              <li><button type="button" onclick={login}>login</button></li>
+              <li><a  href="#" onclick={login}>login</a></li>
               </React.Fragment>
             )}
         </ul>
diff --git a/src/components/Options.js b/src/components/Options.js
index 1ed87bf..2385fa2 100644
--- a/src/components/Options.js
+++ b/src/components/Options.js
@@ -1,49 +1,52 @@
 import React from 'react';
-import "./options.css";
+import './options.css';
 
 export default function Options() {
 
-    const previousBtn = document.getElementById('previousBtn');
-    const nextBtn = document.getElementById('nextBtn');
-    const finishBtn = document.getElementById('finishBtn');
-    const content = document.getElementById('content');
-    const bullets = [...document.querySelectorAll('.bullet')];
+    document.addEventListener('DOMContentLoaded', () => {
+        const previousBtn = document.getElementById('previousBtn');
+        const nextBtn = document.getElementById('nextBtn');
+        const finishBtn = document.getElementById('finishBtn');
+        const content = document.getElementById('content');
+        const bullets = [...document.querySelectorAll('.bullet')];
 
-    const MAX_STEPS = 4;
-    let currentStep = 1;
-    if(nextBtn){
-    nextBtn.addEventListener('click', () => {
-        bullets[currentStep - 1].classList.add('completed');
-        currentStep += 1;
-        previousBtn.disabled = false;
-        if (currentStep === MAX_STEPS) {
-            nextBtn.disabled = true;
-            finishBtn.disabled = false;
+        const MAX_STEPS = 4;
+        let currentStep = 1;
+        if (nextBtn) {
+            nextBtn.addEventListener('click', () => {
+                bullets[currentStep - 1].classList.add('completed');
+                currentStep += 1;
+                previousBtn.disabled = false;
+                if (currentStep === MAX_STEPS) {
+                    nextBtn.disabled = true;
+                    finishBtn.disabled = false;
+                }
+                content.innerText = `Step Number ${currentStep}`;
+
+            });
         }
-        content.innerText = `Step Number ${currentStep}`;
-        
-    });
-}
 
 
-    if(previousBtn){
-    previousBtn.addEventListener('click', () => {
-        bullets[currentStep - 2].classList.remove('completed');
-        currentStep -= 1;
-        nextBtn.disabled = false;
-        finishBtn.disabled = true;
-        if (currentStep === 1) {
-            previousBtn.disabled = true;
+        if (previousBtn) {
+            previousBtn.addEventListener('click', () => {
+                bullets[currentStep - 2].classList.remove('completed');
+                currentStep -= 1;
+                nextBtn.disabled = false;
+                finishBtn.disabled = true;
+                if (currentStep === 1) {
+                    previousBtn.disabled = true;
+                }
+                content.innerText = `Step Number ${currentStep}`;
+            });
         }
-        content.innerText = `Step Number ${currentStep}`;
-    });
-}
 
-    if(finishBtn){
-    finishBtn.addEventListener('click', () => {
-        window.location.reload();
-    });
-}
+        if (finishBtn) {
+            finishBtn.addEventListener('click', () => {
+                window.location.reload();
+            });
+        }
+
+    })
 
     return (
 
diff --git a/src/components/Stepper.js b/src/components/Stepper.js
new file mode 100644
index 0000000..45f7478
--- /dev/null
+++ b/src/components/Stepper.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import './stepper.css';
+
+export default function Stepper() {
+
+  document.addEventListener('DOMContentLoaded', () => {
+    var list = document.getElementById('progress'),
+      next = document.getElementById('next'),
+      clear = document.getElementById('clear'),
+      children = list.children,
+      completed = 0;
+
+    // simulate activating a node
+    next.addEventListener('click', function () {
+
+      // count the number of completed nodes.
+      completed = (completed === 0) ? 1 : completed + 2;
+      if (completed > children.length) return;
+
+      // for each node that is completed, reflect the status
+      // and show a green color!
+      for (var i = 0; i < completed; i++) {
+        children[i].children[0].classList.remove('grey');
+        children[i].children[0].classList.add('green');
+
+        // if this child is a node and not divider, 
+        // make it shine a little more
+        if (i % 2 === 0) {
+          children[i].children[0].classList.add('activated');
+        }
+      }
+
+    }, false);
+
+    // clear the activated state of the markers
+    clear.addEventListener('click', function () {
+      for (var i = 0; i < children.length; i++) {
+        children[i].children[0].classList.remove('green');
+        children[i].children[0].classList.remove('activated');
+        children[i].children[0].classList.add('grey');
+      }
+      completed = 0;
+    }, false);
+  });
+
+  return (
+    <div class="container">
+      <h1>Relocation Status</h1>
+      <br />
+      <br />
+      <br />
+      <ul id="progress">
+        <li><div class="node green"></div><p>Transport tickets confirmed</p></li>
+        <li><div class="divider grey"></div></li>
+        <li><div class="node grey"></div><p>Packers & movers due to come in a day</p></li>
+        <li><div class="divider grey"></div></li>
+        <li><div class="node grey"></div><p>school admission being confirmed</p></li>
+        <li><div class="divider grey"></div></li>
+        <li><div class="node grey"></div><p>House is empty</p></li>
+      </ul>
+      <input type="button" value="Next" id="next" />
+      <input type="button" value="Clear" id="clear" />
+    </div>
+  )
+
+}
\ No newline at end of file
diff --git a/src/components/Tracking.js b/src/components/Tracking.js
index 8142dc2..fe66281 100644
--- a/src/components/Tracking.js
+++ b/src/components/Tracking.js
@@ -1,18 +1,101 @@
 import React from 'react';
-import "./tracking.css";
+import './tracking.css';
 
 export default function Tracking() {
+    document.addEventListener('DOMContentLoaded', () => {
+        const previousBtn = document.getElementById('previousBtn');
+        const nextBtn = document.getElementById('nextBtn');
+        const finishBtn = document.getElementById('finishBtn');
+        const content = document.getElementById('content');
+        const nodes = [...document.querySelectorAll('.node')];
+        const dividers = [...document.querySelectorAll('.divider')];
+
+        const MAX_STEPS = 4;
+        let currentStep = 1;
+        if (nextBtn) {
+            nextBtn.addEventListener('click', () => {
+                nodes[currentStep - 1].classList.add('completed');
+                currentStep += 1;
+                previousBtn.disabled = false;
+                if (currentStep === MAX_STEPS) {
+                    nextBtn.disabled = true;
+                    finishBtn.disabled = false;
+                }
+                content.innerText = `Step Number ${currentStep}`;
+                dividers[currentStep -1 ].classList.add('completed');
+
+
+            });
+        }
+
+
+        if (previousBtn) {
+            previousBtn.addEventListener('click', () => {
+                nodes[currentStep - 2].classList.remove('completed');
+                currentStep -= 1;
+                nextBtn.disabled = false;
+                finishBtn.disabled = true;
+                if (currentStep === 1) {
+                    previousBtn.disabled = true;
+                }
+                content.innerText = `Step Number ${currentStep}`;
+            });
+        }
+
+        if (finishBtn) {
+            finishBtn.addEventListener('click', () => {
+                window.location.reload();
+            });
+        }
+
+    })
     return (
         <div class="wrapper">
-            <ul class="StepProgress">
-                <li class="StepProgress-item is-done"><strong>Post a contest</strong></li>
-                <li class="StepProgress-item is-done"><strong>Award an entry</strong>
-    Got more entries that you love? Buy more entries anytime! Just hover on your favorite entry and click the Buy button
-  </li>
-                <li class="StepProgress-item current"><strong>Post a contest</strong></li>
-                <li class="StepProgress-item"><strong>Handover</strong></li>
-                <li class="StepProgress-item"><strong>Provide feedback</strong></li>
+            <ul class="StepProgressBar">
+                <li class="step">
+                    <p class="step-text">
+
+                    </p>
+                    <div class="node">
+                        1
+                    </div>
+                </li>
+                <li><div class="divider"></div></li>
+                <li class="step">
+                    <p class="step-text">
+
+                    </p>
+                    <div class="node">
+                        2
+                    </div>
+                </li>
+                <li><div class="divider"></div></li>
+                <li class="step">
+                    <p class="step-text">
+
+                    </p>
+                    <div class="node">
+                        3
+                    </div>
+                </li>
+                <li><div class="divider"></div></li>
+                <li class="step">
+                    <p class="step-text">
+
+                    </p>
+                    <div class="node">
+                        4
+                    </div>
+                </li>
+                <li><div class="divider"></div></li>
             </ul>
+            <div class="main">
+                <p id="content" class="text-center">Step Number 1</p>
+                <button id="previousBtn" >Previous</button>
+                <button id="nextBtn">Next</button>
+                <button id="finishBtn" >Finish</button>
+            </div>
         </div>
+
     )
 }
\ No newline at end of file
diff --git a/src/components/stepper.css b/src/components/stepper.css
new file mode 100644
index 0000000..3ecfe77
--- /dev/null
+++ b/src/components/stepper.css
@@ -0,0 +1,61 @@
+*, *:after, *:before { margin:0; padding:0; }
+body { 
+    padding: 15px; 
+    font-family: Helvetica, sans-serif;
+}
+
+input[type="button"] {
+    margin-top: 20px;
+}
+.container{
+    margin-left:0px;
+    max-width: 100vw;
+}
+h1{
+    font-family: Ubuntu;
+    text-align: left;
+    color: #66bfbf;
+    margin-top: 0px;
+}
+ul{
+    text-align: left;
+   
+
+}
+.node {
+    height: 12px;
+    width: 12px;
+    border-radius: 100%;
+    display:inline-block;
+    transition: all 1000ms ease;
+}
+
+.activated {
+    box-shadow: 0px 0px 0px 0px rgba(194, 255, 194, 0.8);
+}
+
+.divider {
+    height: 86px;
+    width: 2px;
+    margin-left: 4px;
+    transition: all 800ms ease;
+}
+p {
+    margin-bottom: 0rem;
+}
+
+li p {
+    display:inline-block;
+    margin-left: 25px;
+}
+
+li {
+    list-style: none;
+    line-height: 1px;
+}
+
+
+.blue { background-color: rgba(82, 165, 255, 1); }
+.green{ background-color: rgba(92, 184, 92, 1) }
+.red { background-color: rgba(255, 148, 148, 1); }
+.grey { background-color: rgba(201, 201, 201, 1); }
\ No newline at end of file
diff --git a/src/components/tracking.css b/src/components/tracking.css
index 08023e0..74b9bfd 100644
--- a/src/components/tracking.css
+++ b/src/components/tracking.css
@@ -1,79 +1,53 @@
-.wrapper {
-  width: 100vw;
-  font-family: 'Helvetica';
-  font-size: 14px;
-  border: 1px solid #CCC;
-  height: 100vh;
+*, *:after, *:before { margin:0; padding:0; }
+.wrapper{
+	max-width:  400px;
+	margin:  0  auto;
+	margin-top:  20px;
+	padding:  40px;
+
 }
-.StepProgress {
-  position: relative;
-  padding-left: 45px;
-  list-style: none;
+.stepProgressBar {
+	display:  flex;
+	justify-content:  space-between;
+	align-items:  flex-start;
+	width:  300px;
+	margin:  0  auto;
+  margin-bottom:  40px;
 }
-.StepProgress::before {
-  display: inline-block;
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 15px;
-  width: 10px;
-  height: 100%;
-  border-left: 2px solid #CCC;
+li{
+  list-style-type: none;
 }
-.StepProgress-item {
-  position: relative;
-  counter-increment: list;
+.node {
+	border: 1px solid #28a745;
+	height: 20px;
+	width: 20px;
+	border-radius: 100%;
+	color: #28a745;
+	display: inline-block;
+	position: relative;
+	transition: background-color 500ms;
+  line-height:20px;
 }
-.StepProgress-item:not(:last-child) {
-  padding-bottom: 20px;
+.node.completed  {
+	content: "";
+	color: white;
+	background-color:  #28a745;
 }
-.StepProgress-item::before {
-  display: inline-block;
-  content: '';
-  position: absolute;
-  left: -30px;
-  height: 100%;
-  width: 10px;
-}
-.StepProgress-item::after {
-  content: '';
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  left: -37px;
-  width: 12px;
-  height: 12px;
-  border: 2px solid #CCC;
-  border-radius: 50%;
-  background-color: #FFF;
-}
-.StepProgress-item.is-done::before {
-  border-left: 5px solid green;
-}
-.StepProgress-item.is-done::after {
-  content: "✔";
-  font-size: 10px;
-  color: #FFF;
-  text-align: center;
-  border: 10px solid green;
-  background-color: green;
-}
-.StepProgress-item.current::before {
-  border-left: 2px solid green;
-}
-.StepProgress-item.current::after {
-  content: counter(list);
-  padding-top: 1px;
-  width: 19px;
-  height: 18px;
-  top: -4px;
-  left: -40px;
-  font-size: 14px;
-  text-align: center;
-  color: green;
-  border: 2px solid green;
-  background-color: white;
-}
-.StepProgress strong {
-  display: block;
+
+.node.completed::after {
+	content: "";
+	position: absolute;
+	height: 1px;
+	width: 54px;
+	background-color: #28a745;
 }
+
+.divider.completed::after{
+    list-style-type: none;
+    background-color: grey;
+    position: relative;
+    height: 80px;
+    width: 2px;
+    margin-left: 134px;
+    transition: all 800ms ease;
+}
\ No newline at end of file