css modules
This commit is contained in:
parent
35cc2f6cdb
commit
f5542b610e
|
@ -0,0 +1,17 @@
|
||||||
|
{
|
||||||
|
// Use IntelliSense to learn about possible attributes.
|
||||||
|
// Hover to view descriptions of existing attributes.
|
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
|
||||||
|
|
||||||
|
{
|
||||||
|
"type": "pwa-chrome",
|
||||||
|
"request": "launch",
|
||||||
|
"name": "Launch Chrome against localhost",
|
||||||
|
"url": "http://localhost:8080",
|
||||||
|
"webRoot": "${workspaceFolder}"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
|
@ -5,6 +5,14 @@ const auth = require("../middleware/auth");
|
||||||
const User = require("../schemas/User");
|
const User = require("../schemas/User");
|
||||||
const config = require("config");
|
const config = require("config");
|
||||||
|
|
||||||
|
router.get("/", async(req,res) => {
|
||||||
|
|
||||||
|
console.log(config.get('jwtSecret'));
|
||||||
|
return "<h1>asdf<h1/>";
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
router.post("/register", async (req, res) => {
|
router.post("/register", async (req, res) => {
|
||||||
try {
|
try {
|
||||||
let { username,email,phonenumber,password} = req.body;
|
let { username,email,phonenumber,password} = req.body;
|
||||||
|
@ -60,6 +68,7 @@ router.post("/login", async (req, res) => {
|
||||||
if (!isMatch) return res.status(400).json({ msg: "Invalid credentials." });
|
if (!isMatch) return res.status(400).json({ msg: "Invalid credentials." });
|
||||||
|
|
||||||
const token = jwt.sign({ id: user._id },config.get('jwtSecret'));
|
const token = jwt.sign({ id: user._id },config.get('jwtSecret'));
|
||||||
|
if(token) return res.json
|
||||||
res.json({
|
res.json({
|
||||||
token,
|
token,
|
||||||
user: {
|
user: {
|
||||||
|
@ -84,13 +93,14 @@ router.delete("/delete", auth, async (req, res) => {
|
||||||
router.post("/tokenIsValid", async (req, res) => {
|
router.post("/tokenIsValid", async (req, res) => {
|
||||||
try {
|
try {
|
||||||
const token = req.header("x-auth-token");
|
const token = req.header("x-auth-token");
|
||||||
if (!token) return res.json(false);
|
if (!token) return res.json({error: qwer});
|
||||||
|
|
||||||
const verified = jwt.verify(token, process.env.JWT_SECRET);
|
const verified = jwt.verify(token, config.get("jwtSecret"));
|
||||||
if (!verified) return res.json(false);
|
|
||||||
|
if (!verified) return res.json({error: asdf});
|
||||||
|
|
||||||
const user = await User.findById(verified.id);
|
const user = await User.findById(verified.id);
|
||||||
if (!user) return res.json(false);
|
if (!user) return res.json({error: zxcv});
|
||||||
|
|
||||||
return res.json(true);
|
return res.json(true);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
[1206/101249.288:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
|
|
@ -7781,6 +7781,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"install": {
|
||||||
|
"version": "0.13.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/install/-/install-0.13.0.tgz",
|
||||||
|
"integrity": "sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA=="
|
||||||
|
},
|
||||||
"internal-ip": {
|
"internal-ip": {
|
||||||
"version": "4.3.0",
|
"version": "4.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
|
||||||
|
|
|
@ -9,6 +9,8 @@
|
||||||
"@testing-library/user-event": "^12.1.10",
|
"@testing-library/user-event": "^12.1.10",
|
||||||
"axios": "^0.21.0",
|
"axios": "^0.21.0",
|
||||||
"bootstrap": "^4.5.3",
|
"bootstrap": "^4.5.3",
|
||||||
|
"classnames": "^2.2.6",
|
||||||
|
"install": "^0.13.0",
|
||||||
"react": "^17.0.1",
|
"react": "^17.0.1",
|
||||||
"react-bootstrap": "^1.4.0",
|
"react-bootstrap": "^1.4.0",
|
||||||
"react-dom": "^17.0.1",
|
"react-dom": "^17.0.1",
|
||||||
|
|
|
@ -5,7 +5,6 @@ import PricingPlan from "./components/PricingPlan";
|
||||||
import LogInContainer from "./components/LogInContainer";
|
import LogInContainer from "./components/LogInContainer";
|
||||||
import { Router,BrowserRouter, Route, Switch } from 'react-router-dom';
|
import { Router,BrowserRouter, Route, Switch } from 'react-router-dom';
|
||||||
import UserContext from "./context/UserContext";
|
import UserContext from "./context/UserContext";
|
||||||
import Tracking from "./components/Tracking";
|
|
||||||
import Options from "./components/Options";
|
import Options from "./components/Options";
|
||||||
import Stepper from './components/Stepper';
|
import Stepper from './components/Stepper';
|
||||||
|
|
||||||
|
|
|
@ -7,57 +7,53 @@ import NavBar from './NavBar';
|
||||||
|
|
||||||
|
|
||||||
class HomePage extends Component {
|
class HomePage extends Component {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
render(){
|
render(){
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<div className="HomePage">
|
<div className="HomePage">
|
||||||
< NavBar />
|
< NavBar />
|
||||||
|
|
||||||
<section class="colored-section" id="title">
|
<section className="colored-section" id="title">
|
||||||
|
|
||||||
<div class="container-fluid">
|
<div className="container-fluid">
|
||||||
|
|
||||||
<div className="row">
|
<div className="row">
|
||||||
|
|
||||||
<div className="col-lg-6">
|
<div className="col-lg-6">
|
||||||
<h1 class="big-heading">Adapt to a new place easy peasy.</h1>
|
<h1 className="big-heading">Adapt to a new place easy peasy.</h1>
|
||||||
<button type="button" class = "btn btn-info login mr-1">Log In</button>
|
<button type="button" className = "btn btn-info login mr-1">Log In</button>
|
||||||
|
|
||||||
<button type="button" class="btn btn-info loginb" >Sign Up</button>
|
<button type="button" className="btn btn-info loginb" >Sign Up</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-6">
|
<div className="col-lg-6">
|
||||||
<img class="title-image" src="/locaft.png" alt="locaft-mockup" />
|
<img className="title-image" src="/locaft.png" alt="locaft-mockup" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="white-section" id="features">
|
<section className="white-section" id="features">
|
||||||
|
|
||||||
<div class="container-fluid">
|
<div className="container-fluid">
|
||||||
|
|
||||||
<div class="row">
|
<div className="row">
|
||||||
<div class="feature-box col-lg-4">
|
<div className="feature-box col-lg-4">
|
||||||
<i class="icon fas fa-check-circle fa-4x"></i>
|
<i className="icon fas fa-check-circle fa-4x"></i>
|
||||||
<h3 class="feature-title">Easy to use.</h3>
|
<h3 className="feature-title">Easy to use.</h3>
|
||||||
<p>Get relocated.We'll take care of everything.</p>
|
<p>Get relocated.We'll take care of everything.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="feature-box col-lg-4">
|
<div className="feature-box col-lg-4">
|
||||||
<i class="icon fas fa-bullseye fa-4x"></i>
|
<i className="icon fas fa-bullseye fa-4x"></i>
|
||||||
<h3 class="feature-title">Efficient</h3>
|
<h3 className="feature-title">Efficient</h3>
|
||||||
<p>Get highest number of services for lowest cost possible.</p>
|
<p>Get highest number of services for lowest cost possible.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="feature-box col-lg-4">
|
<div className="feature-box col-lg-4">
|
||||||
<i class="icon fas fa-heart fa-4x"></i>
|
<i className="icon fas fa-heart fa-4x"></i>
|
||||||
<h3 class="feature-title">Relax</h3>
|
<h3 className="feature-title">Relax</h3>
|
||||||
<p>Sit back , we'll do the dirty work.</p>
|
<p>Sit back , we'll do the dirty work.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -65,57 +61,57 @@ class HomePage extends Component {
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="colored-section" id="testimonials">
|
<section className="colored-section" id="testimonials">
|
||||||
|
|
||||||
<div id="testimonial-carousel" class="carousel slide" data-ride="false">
|
<div id="testimonial-carousel" className="carousel slide" data-ride="false">
|
||||||
<div class="carousel-inner">
|
<div className="carousel-inner">
|
||||||
<div class="carousel-item active container-fluid">
|
<div className="carousel-item active container-fluid">
|
||||||
<h2 class="testimonial-text">I had to shift from Bangalore to Hyderabad. Thanks to Locaft , it was easy to know about this place.</h2>
|
<h2 className="testimonial-text">I had to shift from Bangalore to Hyderabad. Thanks to Locaft , it was easy to know about this place.</h2>
|
||||||
<img class="testimonial-image" src="Images/WhatsApp Image 2020-09-18 at 5.38.53 PM.jpeg" alt="mc-profile" />
|
<img className="testimonial-image" src="Images/WhatsApp Image 2020-09-18 at 5.38.53 PM.jpeg" alt="mc-profile" />
|
||||||
<em>Mani , Hyderabad</em>
|
<em>Mani , Hyderabad</em>
|
||||||
</div>
|
</div>
|
||||||
<div class="carousel-item container-fluid">
|
<div className="carousel-item container-fluid">
|
||||||
<h2 class="testimonial-text">Relocation took me 3 months previously , but thanks to Locaft , everything was done within 3 days.</h2>
|
<h2 className="testimonial-text">Relocation took me 3 months previously , but thanks to Locaft , everything was done within 3 days.</h2>
|
||||||
<img class="testimonial-image" src="Images/WhatsApp Image 2020-09-18 at 5.38.39 PM.jpeg" alt="nishi-profile" />
|
<img className="testimonial-image" src="Images/WhatsApp Image 2020-09-18 at 5.38.39 PM.jpeg" alt="nishi-profile" />
|
||||||
<em>Nishanth , Bangalore</em>
|
<em>Nishanth , Bangalore</em>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev">
|
<a className="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev">
|
||||||
<span class="carousel-control-prev-icon"></span>
|
<span className="carousel-control-prev-icon"></span>
|
||||||
</a>
|
</a>
|
||||||
<a class="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next">
|
<a className="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next">
|
||||||
<span class="carousel-control-next-icon"></span>
|
<span className="carousel-control-next-icon"></span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
<section class="colored-section" id="press">
|
<section className="colored-section" id="press">
|
||||||
<img class="press-logo" src="/indigo.png" alt="indigo-logo" />
|
<img className="press-logo" src="/indigo.png" alt="indigo-logo" />
|
||||||
<img class="press-logo" src="/avasa.jpg" alt="avasa-logo" />
|
<img className="press-logo" src="/avasa.jpg" alt="avasa-logo" />
|
||||||
<img class="press-logo" src="/vrl.jpg" alt="vrl-logo" />
|
<img className="press-logo" src="/vrl.jpg" alt="vrl-logo" />
|
||||||
<img class="press-logo" src="/nobroker.png" alt="nobroker-logo" />
|
<img className="press-logo" src="/nobroker.png" alt="nobroker-logo" />
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
<section class="white-section" id="about-us">
|
<section className="white-section" id="about-us">
|
||||||
|
|
||||||
<div class="container-fluid">
|
<div className="container-fluid">
|
||||||
|
|
||||||
<div class="row">
|
<div className="row">
|
||||||
<div class="feature-box col-lg-4">
|
<div className="feature-box col-lg-4">
|
||||||
<i class="icon fas fa-address-card fa-4x"></i>
|
<i className="icon fas fa-address-card fa-4x"></i>
|
||||||
<h2 class="feature-title">About Us</h2>
|
<h2 className="feature-title">About Us</h2>
|
||||||
<p>Adapting to a new place is always hard in any phase of life. We aim to make it easy. </p>
|
<p>Adapting to a new place is always hard in any phase of life. We aim to make it easy. </p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="feature-box col-lg-4">
|
<div className="feature-box col-lg-4">
|
||||||
<i class="icon fas fa-bullseye fa-4x"></i>
|
<i className="icon fas fa-bullseye fa-4x"></i>
|
||||||
<h2 class="feature-title">Vision</h2>
|
<h2 className="feature-title">Vision</h2>
|
||||||
<p>Bringing all the basic amenities to the new place before your arrival.</p>
|
<p>Bringing all the basic amenities to the new place before your arrival.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="feature-box col-lg-4">
|
<div className="feature-box col-lg-4">
|
||||||
<i class="icon fas fa-chart-line fa-4x"></i>
|
<i className="icon fas fa-chart-line fa-4x"></i>
|
||||||
<h2 class="feature-title">Mission</h2>
|
<h2 className="feature-title">Mission</h2>
|
||||||
<p>Getting adapted and familiar to the new place made easy.</p>
|
<p>Getting adapted and familiar to the new place made easy.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -124,16 +120,16 @@ class HomePage extends Component {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<section class="colored-section" id="cta">
|
<section className="colored-section" id="cta">
|
||||||
|
|
||||||
<div class="container-fluid">
|
<div className="container-fluid">
|
||||||
|
|
||||||
<h3 class="big-heading">Recommend us to your friends !</h3>
|
<h3 className="big-heading">Recommend us to your friends !</h3>
|
||||||
<button class="download-button btn btn-lg btn-dark" type="button"><i class="fab fa-apple"></i> Download</button>
|
<button className="download-button btn btn-lg btn-dark" type="button"><i className="fab fa-apple"></i> Download</button>
|
||||||
<button class="download-button btn btn-lg brn-light" type="button"><i class="fab fa-google-play"></i> Download</button>
|
<button className="download-button btn btn-lg brn-light" type="button"><i className="fab fa-google-play"></i> Download</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container-fluid">
|
<div className="container-fluid">
|
||||||
<h2>Any comments ?</h2>
|
<h2>Any comments ?</h2>
|
||||||
<p>Your comments are what help us improve.</p>
|
<p>Your comments are what help us improve.</p>
|
||||||
|
|
||||||
|
@ -141,12 +137,12 @@ class HomePage extends Component {
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<footer class="white-section" id="footer">
|
<footer className="white-section" id="footer">
|
||||||
<div class="container-fluid">
|
<div className="container-fluid">
|
||||||
<i class="social-icon fab fa-facebook-f"></i>
|
<i className="social-icon fab fa-facebook-f"></i>
|
||||||
<i class="social-icon fab fa-twitter"></i>
|
<i className="social-icon fab fa-twitter"></i>
|
||||||
<i class="social-icon fab fa-instagram"></i>
|
<i className="social-icon fab fa-instagram"></i>
|
||||||
<i class="social-icon fas fa-envelope"></i>
|
<i className="social-icon fas fa-envelope"></i>
|
||||||
<p>© Copyright 2020 Locaft</p>
|
<p>© Copyright 2020 Locaft</p>
|
||||||
<p><a href="/tc">Terms and Conditions</a></p>
|
<p><a href="/tc">Terms and Conditions</a></p>
|
||||||
<p><a href="/pp">Privacy Policy</a></p>
|
<p><a href="/pp">Privacy Policy</a></p>
|
||||||
|
|
|
@ -8,11 +8,12 @@ import ErrorNotice from "./ErrorNotice";
|
||||||
|
|
||||||
const Login = () => {
|
const Login = () => {
|
||||||
|
|
||||||
const [email, setEmail] = useState();
|
const [email, setEmail] = useState();
|
||||||
const [password, setPassword] = useState();
|
const [password, setPassword] = useState();
|
||||||
const [error, setError] = useState();
|
const [error, setError] = useState();
|
||||||
|
|
||||||
const { setUserData } = useContext(UserContext);
|
const { setUserData } = useContext(UserContext);
|
||||||
|
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
|
|
||||||
const submit = async (e) => {
|
const submit = async (e) => {
|
||||||
|
@ -23,12 +24,13 @@ const Login = () => {
|
||||||
"http://localhost:5000/users/login",
|
"http://localhost:5000/users/login",
|
||||||
loginUser
|
loginUser
|
||||||
);
|
);
|
||||||
|
console.log(loginRes);
|
||||||
setUserData({
|
setUserData({
|
||||||
token: loginRes.data.token,
|
token: loginRes.data.token,
|
||||||
user: loginRes.data.user,
|
user: loginRes.data.user,
|
||||||
});
|
});
|
||||||
localStorage.setItem("auth-token", loginRes.data.token);
|
localStorage.setItem("auth-token", loginRes.data.token);
|
||||||
history.push("/");
|
history.push("/register");
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
err.response.data.msg && setError(err.response.data.msg);
|
err.response.data.msg && setError(err.response.data.msg);
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,28 +23,28 @@ export default function NavBar() {
|
||||||
header.classList.toggle("sticky", window.scrollY > 0);
|
header.classList.toggle("sticky", window.scrollY > 0);
|
||||||
|
|
||||||
})
|
})
|
||||||
|
console.log(userData);
|
||||||
return (
|
return (
|
||||||
<div class="navbar">
|
<div className="navbar">
|
||||||
<header>
|
<header>
|
||||||
<input type="checkbox" id="check" />
|
<input type="checkbox" id="check" />
|
||||||
<label for="check" class="checkbtn">
|
<label htmlFor="check" className="checkbtn">
|
||||||
<i class="fas fa-bars" id="btn"></i>
|
<i className="fas fa-bars" id="btn"></i>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
|
||||||
<a href="/home" class="logo">locaft</a>
|
<a href="/home" className="logo">locaft</a>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#">Home</a></li>
|
<li><a href="#">Home</a></li>
|
||||||
<li><a href="#">About</a></li>
|
<li><a href="#">About</a></li>
|
||||||
<li><a href="#">Services</a></li>
|
<li><a href="#">Services</a></li>
|
||||||
<li><a href="#">Contact us</a></li>
|
<li><a href="#">Contact us</a></li>
|
||||||
<li><a href="#" onClick={logout}>Log Out</a></li>
|
|
||||||
{userData.user ? (
|
{userData.user ? (
|
||||||
<li><a href="#" onClick={logout}>Log Out</a></li>
|
<li><a href="#" onClick={logout}>Log Out</a></li>
|
||||||
) : (
|
) : (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<li><a href="#" onclick={register}>Register</a></li>
|
<li><a href="#" onClick={register}>Register</a></li>
|
||||||
<li><a href="#" onclick={login}>login</a></li>
|
<li><a href="#" onClick={login}>login</a></li>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import './options.css';
|
import '../options.css';
|
||||||
|
|
||||||
export default function Options() {
|
export default function Options() {
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import './pricing-plan.css';
|
import '../pricing-plan.css';
|
||||||
import NavBar from './NavBar';
|
import NavBar from './NavBar';
|
||||||
|
|
||||||
class PricingPlan extends Component {
|
class PricingPlan extends Component {
|
||||||
|
|
|
@ -1,17 +1,22 @@
|
||||||
import React from 'react';
|
import React, {useState} from 'react';
|
||||||
import './stepper.css';
|
import styles from '../stepper.module.css';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
export default function Stepper() {
|
export default function Stepper() {
|
||||||
|
|
||||||
|
const[next,setNext] = useState(false);
|
||||||
|
const[clear,setClear] = useState(false);
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
var list = document.getElementById('progress'),
|
var list = document.getElementById('progress'),
|
||||||
next = document.getElementById('next'),
|
next = document.getElementById('next'),
|
||||||
clear = document.getElementById('clear'),
|
clear = document.getElementById('clear'),
|
||||||
children = list.children,
|
children = [...document.querySelectorAll('ele')],
|
||||||
completed = 0;
|
completed = 0;
|
||||||
|
console.log(children);
|
||||||
|
|
||||||
// simulate activating a node
|
// simulate activating a node
|
||||||
next.addEventListener('click', function () {
|
if(next === true){
|
||||||
|
|
||||||
// count the number of completed nodes.
|
// count the number of completed nodes.
|
||||||
completed = (completed === 0) ? 1 : completed + 2;
|
completed = (completed === 0) ? 1 : completed + 2;
|
||||||
|
@ -20,46 +25,46 @@ export default function Stepper() {
|
||||||
// for each node that is completed, reflect the status
|
// for each node that is completed, reflect the status
|
||||||
// and show a green color!
|
// and show a green color!
|
||||||
for (var i = 0; i < completed; i++) {
|
for (var i = 0; i < completed; i++) {
|
||||||
children[i].children[0].classList.remove('grey');
|
children[i].children[0].classNameList.remove(styles['grey']);
|
||||||
children[i].children[0].classList.add('green');
|
children[i].children[0].classNameList.add(styles['green']);
|
||||||
|
|
||||||
// if this child is a node and not divider,
|
// if this child is a node and not divider,
|
||||||
// make it shine a little more
|
// make it shine a little more
|
||||||
if (i % 2 === 0) {
|
if (i % 2 === 0) {
|
||||||
children[i].children[0].classList.add('activated');
|
children[i].children[0].classNameList.add('activated');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}, false);
|
}
|
||||||
|
|
||||||
// clear the activated state of the markers
|
// clear the activated state of the markers
|
||||||
clear.addEventListener('click', function () {
|
if(clear === true){
|
||||||
for (var i = 0; i < children.length; i++) {
|
for (var i = 0; i < children.length; i++) {
|
||||||
children[i].children[0].classList.remove('green');
|
children[i].children[0].classNameList.remove('green');
|
||||||
children[i].children[0].classList.remove('activated');
|
children[i].children[0].classNameList.remove('activated');
|
||||||
children[i].children[0].classList.add('grey');
|
children[i].children[0].classNameList.add('grey');
|
||||||
}
|
}
|
||||||
completed = 0;
|
completed = 0;
|
||||||
}, false);
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="container">
|
<div className="container">
|
||||||
<h1>Relocation Status</h1>
|
<h1>Relocation Status</h1>
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
<ul id="progress">
|
<ul id="progress">
|
||||||
<li><div class="node green"></div><p>Transport tickets confirmed</p></li>
|
<li className="ele"><div className={classNames({'node':true,'grey': true })}></div><p>Transport tickets confirmed</p></li>
|
||||||
<li><div class="divider grey"></div></li>
|
<li className="ele" ><div className={classNames({'divider':true, 'grey':true})}></div></li>
|
||||||
<li><div class="node grey"></div><p>Packers & movers due to come in a day</p></li>
|
<li className="ele" ><div className="node grey"></div><p>Packers & movers due to come in a day</p></li>
|
||||||
<li><div class="divider grey"></div></li>
|
<li className="ele"><div className="divider grey"></div></li>
|
||||||
<li><div class="node grey"></div><p>school admission being confirmed</p></li>
|
<li className="ele"><div className="node grey"></div><p>school admission being confirmed</p></li>
|
||||||
<li><div class="divider grey"></div></li>
|
<li className = "ele"><div className="divider grey"></div></li>
|
||||||
<li><div class="node grey"></div><p>House is empty</p></li>
|
<li className = "ele"><div className="node grey"></div><p>House is empty</p></li>
|
||||||
</ul>
|
</ul>
|
||||||
<input type="button" value="Next" id="next" />
|
<input type="button" onClick={() => setNext(true)} value="Next" id="next" />
|
||||||
<input type="button" value="Clear" id="clear" />
|
<input type="button" onClick={ () => setNext(true)} value="Clear" id="clear" />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import './tracking.css';
|
import '../tracking.css';
|
||||||
|
|
||||||
export default function Tracking() {
|
export default function Tracking() {
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
|
|
@ -98,46 +98,4 @@ header.sticky ul li a{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1118px){
|
|
||||||
header .logo{
|
|
||||||
left: 8%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 944px){
|
|
||||||
header .logo{
|
|
||||||
left: 6%;
|
|
||||||
top: 20px;
|
|
||||||
width: 1030px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 860px){
|
|
||||||
label #btn{
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
background: #66bfbf;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
header ul li{
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
margin: 50px 0;
|
|
||||||
line-height: 30px;
|
|
||||||
|
|
||||||
}
|
|
||||||
nav ul li a{
|
|
||||||
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
label #check:checked ~ ul{
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
Loading…
Reference in New Issue