diff --git a/src/components/Register.js b/src/components/Register.js
index 0c7d3f5..4d439d9 100644
--- a/src/components/Register.js
+++ b/src/components/Register.js
@@ -1,4 +1,4 @@
-import React, { Component, useState, useContext } from "react";
+import React, { useState, useContext } from "react";
import { useHistory } from "react-router-dom";
import UserContext from "../context/UserContext";
import Axios from "axios";
@@ -87,7 +87,7 @@ import ErrorNotice from "./ErrorNotice";
diff --git a/src/components/Stepper.js b/src/components/Stepper.js
index c576917..5388a3d 100644
--- a/src/components/Stepper.js
+++ b/src/components/Stepper.js
@@ -1,51 +1,46 @@
-import React, {useState} from 'react';
-import styles from '../stepper.module.css';
-import classNames from 'classnames';
+import React from 'react';
+import '../stepper.css';
export default function Stepper() {
- const[next,setNext] = useState(false);
- const[clear,setClear] = useState(false);
-
document.addEventListener('DOMContentLoaded', () => {
var list = document.getElementById('progress'),
- next = document.getElementById('next'),
- clear = document.getElementById('clear'),
- children = [...document.querySelectorAll('ele')],
- completed = 0;
- console.log(children);
-
- // simulate activating a node
- if(next === true){
-
- // 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].classNameList.remove(styles['grey']);
- children[i].children[0].classNameList.add(styles['green']);
+ 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].classNameList.add('activated');
+ children[i].children[0].classList.add('activated');
}
- }
-
}
+
+}, false);
- // clear the activated state of the markers
- if(clear === true){
- for (var i = 0; i < children.length; i++) {
- children[i].children[0].classNameList.remove('green');
- children[i].children[0].classNameList.remove('activated');
- children[i].children[0].classNameList.add('grey');
- }
- completed = 0;
+// 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 (
@@ -55,16 +50,16 @@ export default function Stepper() {