95 lines
3.2 KiB
JavaScript
95 lines
3.2 KiB
JavaScript
import React from 'react';
|
|
import '../options.css';
|
|
import Card from './HouseCard';
|
|
import styled from 'styled-components';
|
|
|
|
const CardList = styled.div`
|
|
z-index: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
`;
|
|
export default function Options() {
|
|
|
|
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].classNameList.add('completed');
|
|
currentStep += 1;
|
|
previousBtn.disabled = false;
|
|
if (currentStep === MAX_STEPS) {
|
|
nextBtn.disabled = true;
|
|
finishBtn.disabled = false;
|
|
}
|
|
content.innerText = `Step Number ${currentStep}`;
|
|
|
|
});
|
|
}
|
|
|
|
|
|
if (previousBtn) {
|
|
previousBtn.addEventListener('click', () => {
|
|
bullets[currentStep - 2].classNameList.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 className="container">
|
|
<div id="stepProgressBar">
|
|
<div className="step">
|
|
<p className="step-text">About</p>
|
|
<div className="bullet">1</div>
|
|
</div>
|
|
<div className="step">
|
|
<p className="step-text">Contact</p>
|
|
<div className="bullet">2</div>
|
|
</div>
|
|
<div className="step">
|
|
<p className="step-text">Step 3</p>
|
|
<div className="bullet">3</div>
|
|
</div>
|
|
<div className="step">
|
|
<p className="step-text">Step 4</p>
|
|
<div className="bullet ">4</div>
|
|
</div>
|
|
</div>
|
|
<CardList>
|
|
<Card img="https://i.redd.it/b3esnz5ra34y.jpg" />
|
|
<Card img="https://i.redd.it/b3esnz5ra34y.jpg" />
|
|
</CardList>
|
|
<div id="main">
|
|
<p id="content" className="text-center">Step Number 1</p>
|
|
<button id="previousBtn" >Previous</button>
|
|
<button id="nextBtn">Next</button>
|
|
<button id="finishBtn" >Finish</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
|
|
} |