Reactjs add/delete input fields with scrollable container

Reactjs add/delete input fields with scrollable container - javascript

I am a new reactJS developer and am looking to create a container that holds an input field where you can add/delete new fields. I want all of this to be in a scrollable container but instead, my code adds new inputs but moves the rest of the page and doesn't stay in the container. Below is the react and css. The css also has some fields I am going to include later
React
import React, { useState } from "react";
import './Dropdown.css'
function Dropdown() {
const [inputList, setInputList] = useState([{ courseName: "", courseRating: "" }]);
// handle input change
const handleInputChange = (e, index) => {
const { name, value } = e.target;
const list = [...inputList];
list[index][name] = value;
setInputList(list);
};
// handle click event of the Remove button
const handleRemoveClick = index => {
const list = [...inputList];
list.splice(index, 1);
setInputList(list);
};
// handle click event of the Add button
const handleAddClick = () => {
setInputList([...inputList, { courseName: "", courseRating: "" }]);
};
return (
<div className="base-container-drop">
<div className="content-drop">
{inputList.map((x, i) => {
return (
<div className="container-for-drop">
<div className="form-drop">
<div className="form-group-drop">
<label className="label-drop" htmlFor="courseName"></label>
<input className="input-drop"
name="courseName"
placeholder="Course Name"
value={x.firstName}
onChange={e => handleInputChange(e, i)}
/>
</div>
<div className="form-group-drop-rating">
<label className="label-drop" htmlFor="courseRating"></label>
<input className="input-drop"
type="number"
name="courseRating"
placeholder="0"
max='10'
min='0'
value={x.lastName}
onChange={e => handleInputChange(e, i)}
/>
</div>
<div className="btn-box">
{inputList.length !== 1 && <button
onClick={() => handleRemoveClick(i)}
className="Remove">
Remove
</button>}
<div className="sep"/>
{inputList.length - 1 === i && <button onClick={handleAddClick}
className="Add">
Add
</button>}
</div>
</div>
</div>
);
})}
</div>
</div>
);
}
export default Dropdown;
CSS
.base-comntainer-drop {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content-drop {
display: flex;
flex-direction: column;
}
.base-container-drop{
width:100%;
overflow-y:auto;
position:relative;
max-height: 30%;
}
.form-drop{
position: relative;
display: flex;
flex-direction: row;
margin-top: .5em;
margin: auto;
text-align: center;
display: flex;
align-items: center;
padding-bottom: .7%;
overflow-y: auto;
}
.form-group-drop{
display: flex;
position: relative;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin: 1%;
justify-content: center;
align-items: center;
}
.form-group-drop-rating{
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin: -25%;
justify-content: center;
align-items: center;
}
.form-group-drop .input-drop {
justify-content: center;
align-items: center;
width: 100%;
}
.label-drop {
text-align: center;
font-size: 20px;
}
.form-group-drop .input-drop{
position: relative;
max-width: 200%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
}
.form-group-drop-rating .input-drop{
position: relative;
max-width: 30%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
}
.input-drop :focus{
outline: none;
box-shadow: 0px 6px 12px .8px #0e81ce96;
}
.btn-box {
display: flex;
flex-direction: row;
margin: auto;
}
.Add{
position: relative;
justify-content: center;
align-items: center;
display: flex;
width: fit-content;
margin-top: 2px;
height: 30px;
padding: 8px 10px;
padding-left: 8px;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
margin: 0;
color: #fff;
}
.Remove {
position: relative;
width: fit-content;
display: flex;
margin-right: 5%;
height: 30px;
padding: 7px 10px;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
color: #fff;
}
.Add:hover{
background-color: #fff;
color: #6568F4;
}
.Remove:hover{
background-color: #fff;
color: #6568F4;
}
#media screen and (max-width: 960px) {
.base-comntainer-drop {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content-drop {
display: flex;
flex-direction: column;
}
.form-drop{
position: relative;
display: flex;
flex-direction: row;
margin-top: .5em;
margin: auto;
text-align: center;
display: flex;
align-items: center;
padding-bottom: .7%;
overflow-y: auto;
}
.form-group-drop{
display: flex;
position: relative;
flex-direction: column;
align-items: flex-start;
width: 60%;
margin: 1%;
justify-content: center;
align-items: center;
}
.form-group-drop-rating{
display: flex;
flex-direction: column;
align-items: flex-start;
width: 50%;
margin: -25%;
justify-content: center;
align-items: center;
padding-left: 13%;
}
.form-group-drop .input-drop {
justify-content: center;
align-items: center;
width: 100%;
}
.label-drop {
text-align: center;
font-size: 20px;
}
.form-group-drop .input-drop{
position: relative;
max-width: 200%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
opacity: 75%;
}
.form-group-drop-rating .input-drop{
position: relative;
max-width: 30%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
opacity: 75% ;
}
.input-drop :focus{
outline: none;
box-shadow: 0px 6px 12px .8px #0e81ce96;
}
.btn-box {
display: flex;
flex-direction: column;
padding-left: 15%;
margin: auto;
justify-content: center;
align-items: center;
}
.btn-box .sep {
margin-top: 5%;
}
.Add{
position: relative;
justify-content: center;
align-items: center;
display: flex;
width: fit-content;
margin-top: 2px;
height: 30px;
padding: 7px 10px;
padding-left: 5px;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
margin: 0;
color: #fff;
}
.Remove {
position: relative;
width: fit-content;
display: flex;
margin-right: 5%;
height: 30px;
padding: 7px 10px;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
color: #fff;
}
.Add:hover{
background-color: #fff;
color: #6568F4;
}
.Remove:hover{
background-color: #fff;
color: #6568F4;
}
}

I extended off you a bit and created a ScrollableContainer. The idea is to make it modular and reusable so you can put anything into it, your Dropdown or anything else. By default the height is 20% but you can set height='yourNumber' to set your own limit.
I also removed the 30% off your container on the dropdown for this to be effective.
Here is the updated:
JS
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function Dropdown() {
const [inputList, setInputList] = useState([
{ courseName: "", courseRating: "" }
]);
// handle input change
const handleInputChange = (e, index) => {
const { name, value } = e.target;
const list = [...inputList];
list[index][name] = value;
setInputList(list);
};
// handle click event of the Remove button
const handleRemoveClick = (index) => {
const list = [...inputList];
list.splice(index, 1);
setInputList(list);
};
// handle click event of the Add busutton
const handleAddClick = () => {
setInputList([...inputList, { courseName: "", courseRating: "" }]);
};
return (
<div className="base-container-drop">
<div className="content-drop">
{inputList.map((x, i) => {
return (
<div className="container-for-drop">
<div className="form-drop">
<div className="form-group-drop">
<label className="label-drop" htmlFor="courseName"></label>
<input
className="input-drop"
name="courseName"
placeholder="Course Name"
value={x.firstName}
onChange={(e) => handleInputChange(e, i)}
/>
</div>
<div className="form-group-drop-rating">
<label className="label-drop" htmlFor="courseRating"></label>
<input
className="input-drop"
type="number"
name="courseRating"
placeholder="0"
max="10"
min="0"
value={x.lastName}
onChange={(e) => handleInputChange(e, i)}
/>
</div>
<div className="btn-box">
{inputList.length !== 1 && (
<button
onClick={() => handleRemoveClick(i)}
className="Remove"
>
Remove
</button>
)}
<div className="sep" />
{inputList.length - 1 === i && (
<button onClick={handleAddClick} className="Add">
Add
</button>
)}
</div>
</div>
</div>
);
})}
</div>
</div>
);
}
function ScrollableContainer(props) {
const height = props.height || "20%";
return (
<div
className="scrollable-container"
style={{
height
}}
>
{props.children}
</div>
);
}
function App(props) {
return (
<ScrollableContainer height="200px">
<Dropdown />
</ScrollableContainer>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
CSS
.scrollable-container {
overflow: auto;
}
.base-comntainer-drop {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content-drop {
display: flex;
flex-direction: column;
}
.base-container-drop {
width: 100%;
overflow-y: auto;
position: relative;
/* max-height: 30%; */
}
.form-drop {
position: relative;
display: flex;
flex-direction: row;
margin-top: 0.5em;
margin: auto;
text-align: center;
display: flex;
align-items: center;
padding-bottom: 0.7%;
overflow-y: auto;
}
.form-group-drop {
display: flex;
position: relative;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin: 1%;
justify-content: center;
align-items: center;
}
.form-group-drop-rating {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin: -25%;
justify-content: center;
align-items: center;
}
.form-group-drop .input-drop {
justify-content: center;
align-items: center;
width: 100%;
}
.label-drop {
text-align: center;
font-size: 20px;
}
.form-group-drop .input-drop {
position: relative;
max-width: 200%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: "Open Sans", sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
}
.form-group-drop-rating .input-drop {
position: relative;
max-width: 30%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: "Open Sans", sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
}
.input-drop :focus {
outline: none;
box-shadow: 0px 6px 12px 0.8px #0e81ce96;
}
.btn-box {
display: flex;
flex-direction: row;
margin: auto;
}
.Add {
position: relative;
justify-content: center;
align-items: center;
display: flex;
width: fit-content;
margin-top: 2px;
height: 30px;
padding: 8px 10px;
padding-left: 8px;
font-size: 12px;
font-family: "Open Sans", sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
margin: 0;
color: #fff;
}
.Remove {
position: relative;
width: fit-content;
display: flex;
margin-right: 5%;
height: 30px;
padding: 7px 10px;
font-size: 12px;
font-family: "Open Sans", sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
color: #fff;
}
.Add:hover {
background-color: #fff;
color: #6568f4;
}
.Remove:hover {
background-color: #fff;
color: #6568f4;
}
#media screen and (max-width: 960px) {
.base-comntainer-drop {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content-drop {
display: flex;
flex-direction: column;
}
.form-drop {
position: relative;
display: flex;
flex-direction: row;
margin-top: 0.5em;
margin: auto;
text-align: center;
display: flex;
align-items: center;
padding-bottom: 0.7%;
overflow-y: auto;
}
.form-group-drop {
display: flex;
position: relative;
flex-direction: column;
align-items: flex-start;
width: 60%;
margin: 1%;
justify-content: center;
align-items: center;
}
.form-group-drop-rating {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 50%;
margin: -25%;
justify-content: center;
align-items: center;
padding-left: 13%;
}
.form-group-drop .input-drop {
justify-content: center;
align-items: center;
width: 100%;
}
.label-drop {
text-align: center;
font-size: 20px;
}
.form-group-drop .input-drop {
position: relative;
max-width: 200%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: "Open Sans", sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
opacity: 75%;
}
.form-group-drop-rating .input-drop {
position: relative;
max-width: 30%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: "Open Sans", sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
opacity: 75%;
}
.input-drop :focus {
outline: none;
box-shadow: 0px 6px 12px 0.8px #0e81ce96;
}
.btn-box {
display: flex;
flex-direction: column;
padding-left: 15%;
margin: auto;
justify-content: center;
align-items: center;
}
.btn-box .sep {
margin-top: 5%;
}
.Add {
position: relative;
justify-content: center;
align-items: center;
display: flex;
width: fit-content;
margin-top: 2px;
height: 30px;
padding: 7px 10px;
padding-left: 5px;
font-size: 12px;
font-family: "Open Sans", sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
margin: 0;
color: #fff;
}
.Remove {
position: relative;
width: fit-content;
display: flex;
margin-right: 5%;
height: 30px;
padding: 7px 10px;
font-size: 12px;
font-family: "Open Sans", sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
color: #fff;
}
.Add:hover {
background-color: #fff;
color: #6568f4;
}
.Remove:hover {
background-color: #fff;
color: #6568f4;
}
}
Updated code sandbox for preview. Just a note I set a height to 200px on ScrollableContainer, for sake of demo. But you can remove it and it will become 20% as the default: https://codesandbox.io/s/react-hooks-usestate-forked-h1iqr

Related

Responsive navigation bar could not be displayed (hamburger menu)

I am trying to make the so-called "Hambuger menu" which appears very well but when I click it nothing happens.
I have an event listener to listen for any click on that button and then according it would toggle the class to show or hide the ul elements.
I can't find the mistake myself. Is there even a simpler way?
const bar = document.getElementById('bar');
const nav = document.getElementById('navbar');
const close = document.getElementById('close');
if (bar){
bar.addEventListener("click", () => {
nav.classList.toggle("active");
})
}
if (close) {
close.addEventListener("click", () => {
nav.classList.remove("active")
})
}
#import url('https://fonts.googleapis.com/css2?family=Spartan:wght#100;200;300;400;500;600; 700; 800; 900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Spartan', sans-serif;
}
h1 {
font-size: 50px;
line-height: 64px;
color: #222;
}
h2{
font-size: 46px;
line-height: 54px;
color: #222;
}
h4 {
font-size: 20px;
color: #222;
}
h6 {
font-weight: 700;
font-size: 12px;
}
p {
font-size: 16px;
color: #465b52;
margin: 15px 0 20px 0;
}
.section-p1 {
padding: 40px 80px;
}
.section-m1 {
margin: 40px 0;
}
body {
width: 100%;
}
/*Header Start*/
#header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 80px;
background: #E3E6F3;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.06);
z-index: 999;
position: sticky;
top: 0;
left: 0;
}
#navbar {
display: flex;
align-items: center;
justify-content: center;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
transition: 0.3s ease;
}
#navbar li a:hover,
#navbar li a.active {
color: #088178;
}
#navbar li a.active::after,
#navbar li a:hover::after {
content: "";
width: 20%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}
#mobile {
display: none;
align-items: center;
}
/*Home Page*/
#hero{
background-image: url("Web images/img/hero4.png");
height: 99vh;
width: 100%;
background-size: cover;
background-position: top 25% right 0;
padding: 0 80px;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
}
#hero h4{
padding-bottom: 15px;
}
#hero h1{
color: #088178;
}
#hero button {
background-image: url("Web images/img/button.png");
background-color: transparent;
color: #088178;
border: 0;
padding: 14px 80px 14px 65px;
background-repeat: no-repeat;
cursor: pointer;
font-weight: 700;
font-size: 15px;
}
#hero button:hover {
color: #46bff7;
}
#Feature {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#Feature .fe-box {
width: 180px;
text-align: center;
padding: 25px 15px;
box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
border: 1px solid #cce7d0;
border-radius: 4px;
margin: 15px 0;
}
#Feature .fe-box:hover {
box-shadow: 10px 10px 54px rgba(70, 62, 221, 0.1);
}
#Feature .fe-box img {
width: 100%;
margin-bottom: 10px;
}
#Feature .fe-box h6 {
display: inline-block;
padding: 9px 8px 6px 8px;
line-height: 1;
border-radius: 4px;
color: #088178;
background-color: #fddde4;
}
#Feature .fe-box:nth-child(2) h6 {
background-color: #cdebbc;
}
#Feature .fe-box:nth-child(3) h6{
background-color: #d1e8f2;
}
#Feature .fe-box:nth-child(4) h6 {
background-color: #cdd4f8;
}
#Feature .fe-box:nth-child(5) h6 {
background-color: #f6dbf6;
}
#Feature .fe-box:nth-child(6) h6{
background-color: #fff2e5;
}
#product1 {
text-align: center;
}
#product1 .pro-container{
display: flex;
justify-content: space-between;
padding-top: 20px;
flex-wrap: wrap;
}
#product1 .pro {
width: 23%;
min-width: 250px;
padding: 10px 12px;
border: 1px solid #cce7d0;
border-radius: 25px;
cursor: pointer;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
margin: 15px 0;
transition: 0.2s ease;
position: relative;
}
#product1 .pro:hover {
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.06);
}
#product1 .pro img {
width: 100%;
border-radius: 20px;
}
#product1 .pro .des {
text-align: start;
padding: 10px 0;
}
#product1 .pro .des span {
color: #606063;
font-size: 12px;
}
#product1 .pro .des h5 {
padding-top: 7px;
color: #1a1a1a;
font-size: 13.7px;
}
#product1 .pro .des i {
font-size: 12px;
color: rgb(241, 186, 7);
}
#product1 .pro .des h4 {
padding-top: 7px;
font-size: 15px;
font-weight: 700;
color: #088178;
}
#product1 .pro .cart {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50px;
background-color: #cce7d0;
font-weight: 500;
color: #088178;
border: 1px solid #cce7d0;
position: absolute;
bottom: 20px;
right: 10px;
}
#banner {
display: flex;
flex-direction: column;
align-items: center;
background-image: url("Web images/img/banner/b2.jpg") ;
height: 40vh;
width: 100%;
background-position: center;
justify-content: center;
background-size:cover;
text-align: center;
}
#banner h4 {
color: white;
font-size: 18px;
font-weight: 600;
}
#banner h2 {
color: white;
padding: 10px 0;
}
#banner h2 span{
color: red;
}
#banner button {
border: none;
font-size: 15px;
font-weight: 400;
background-color: white;
padding: 15px 20px ;
border-radius: 10px;
cursor: pointer;
outline: none;
transition: 0.3s ease;
}
#banner button:hover {
background: #088178;
color: #fff;
}
#sm-banner{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#sm-banner .banner-box {
display: flex;
flex-direction: column;
align-items: flex-start;
background-image: url("Web images/img/banner/b17.jpg");
border-radius: 2px;
height: 50vh;
width: 48%;
background-position: center;
justify-content: center;
background-size:cover;
text-align: center;
padding: 30px;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.2);
}
#sm-banner .BB2 {
background-image: url("Web images/img/banner/b10.jpg");
}
#sm-banner .banner-box h4 {
color: #fff;
}
#sm-banner .banner-box h2 {
color: #fff;
font-size: 33px;
}
#sm-banner .banner-box span {
color: #fff;
font-size: 15px;
}
#sm-banner .banner-box .cont {
color: #fff;
font-size: 15px;
padding-bottom: 10px;
}
#sm-banner .banner-box button {
border: 1px solid;
font-size: 15px;
font-weight: 400;
background-color: transparent;
color: #fff;
padding: 10px 26px ;
border-radius: 2px;
cursor: pointer;
outline: none;
transition: 0.3s ease;
}
#sm-banner .banner-box:hover button {
color: #fff;
border: 1px solid #088178;
background-color: #088178;
}
#banner-lil {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 80px;
}
#banner-lil .banner-box {
display: flex;
flex-direction: column;
align-items: flex-start;
background-image: url("Web images/img/banner/b18.jpg");
border-radius: 2px;
min-height: 30%;
height: 30vh;
width: 30%;
background-position: center;
justify-content: center;
background-size:cover;
text-align: center;
padding: 20px;
margin-bottom: 20px;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.09);
cursor: pointer;
}
#banner-lil .BB3 {
background-image: url("Web images/img/banner/b4.jpg");
}
#banner-lil .BB4 {
background-image: url("Web images/img/banner/b7.jpg");
}
#banner-lil .BB4 h4 {
font-size: 18px;
text-align: left;
}
#banner-lil h4 {
color: #fff;
font-weight: 900;
font-size: 20px;
text-align: left;
}
#banner-lil h3 {
color: #d41515;
font-weight: 800;
font-size: 14px;
}
#newsletter {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-image: url("Web images/img/banner/b14.png") ;
background-repeat: no-repeat;
background-position: center;
background-color: #041e42;
background-position: 20% 30%;
justify-content: center;
align-items: center;
justify-content: space-between;
}
#newsletter h4 {
font-size: 22px;
font-weight: 700;
color: #fff;
}
#newsletter p {
font-size: 15px;
font-weight: 600;
color: #818ea0;
}
#newsletter span {
color: #f38c05;
}
#newsletter .form {
display: flex;
flex-direction: row;
width: 40%;
}
#newsletter input {
height: 3.125em;
padding: 0 1.25em;
font-size: 14px;
width: 100%;
border: 1px solid transparent;
border-radius: 4px;
outline: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
#newsletter button {
border: none;
font-size: 15px;
font-weight: 600;
background-color:#088178;
white-space: nowrap;
color: #fff;
padding: 12px 20px ;
border-radius: 3px;
cursor: pointer;
outline: none;
transition: 0.3s ease;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
footer .col {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
}
footer .logo {
margin-bottom: 30px;
}
footer h4 {
font-size: 14px;
padding-bottom: 20px;
}
footer p {
font-size: 13px;
margin: 0 0 8px 0;
}
footer a {
font-size: 13px;
text-decoration: none;
color: #222;
margin-bottom: 10px;
}
footer .follow {
margin-top: 20px;
}
footer .follow i {
color: #3b5998;
padding-right: 4px;
cursor: pointer;
}
footer .follow i:nth-child(2) {
color: #00acee;
}
footer .follow i:nth-child(3) {
color: #8a3ab9;
#E60023
}
footer .follow i:nth-child(4) {
color: #E60023;
}
footer .install .row img {
border: 1px solid #088178;
border-radius: 6px;
cursor: pointer;
}
footer .install img {
margin: 10px 0 15px 0;
}
footer a:hover{
color: #088178;
}
footer .copyright {
width: 100%;
text-align: center;
}
/*Shop Page*/
/*Single Product*/
/*Blog Page*/
/*About Page*/
/*Cart Page*/
/*Start Media Query*/
#media (max-width:799px) {
#navbar {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
position: fixed;
top: 0;
right: -300px;
height: 100vh;
width: 300px;
background-color: #E3E6F3;
box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
padding: 80px 0 0 10px;
transition: 0.3s;
}
#navbar.active {
right: 0px;
}
#navbar li {
margin-bottom: 25px
}
#mobile {
display: flex;
align-items: center;
}
#mobile i {
color: #1a1a1a;
font-size: 24px;
padding: 20px;
}
#close {
position: absolute;
top: 30px;
left: 30px;
color: #222;
font-size: 24px;
}
}
<script src="https://kit.fontawesome.com/8848882185.js"></script>
<section id="header">
<img src="C:\Website Projects\Second Project=E-Commerce\Web images\logotxt.png" class="logo" alt="E-commerce logo">
<div>
<ul id="navbar">
<li><a class="active" href="index.html">Home</a></li>
<li>Shop</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li><i class="fa-solid fa-cart-shopping"></i></li>
<li>Log In</li>
<i class="fa-solid fa-xmark"></i>
</ul>
</div>
<div id="mobile">
<i class="fa-solid fa-cart-shopping"></i>
<i id="bar "class="fa-solid fa-bars active"></i></a>
</div>
</section>

you have so little mistake that you unable to see it. be careful next time.your a tag in doesn't have an opener and also has space in your id
<i id="bar "class="fa-solid fa-bars active"></i></a>
thus your
const bar = document.getElementById("bar");
is null
change it to
<a><i id="bar"class="fa-solid fa-bars active"></i></a>
everything else looks fine.
const bar = document.getElementById("bar");
const nav = document.getElementById("navbar");
const close = document.getElementById("close");
if (bar) {
bar.addEventListener("click", () => {
console.log("bar click event");
nav.classList.toggle("active");
});
}
if (close) {
close.addEventListener("click", () => {
nav.classList.remove("active");
});
}
#import url('https://fonts.googleapis.com/css2?family=Spartan:wght#100;200;300;400;500;600; 700; 800; 900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Spartan', sans-serif;
}
h1 {
font-size: 50px;
line-height: 64px;
color: #222;
}
h2{
font-size: 46px;
line-height: 54px;
color: #222;
}
h4 {
font-size: 20px;
color: #222;
}
h6 {
font-weight: 700;
font-size: 12px;
}
p {
font-size: 16px;
color: #465b52;
margin: 15px 0 20px 0;
}
.section-p1 {
padding: 40px 80px;
}
.section-m1 {
margin: 40px 0;
}
body {
width: 100%;
}
/*Header Start*/
#header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 80px;
background: #E3E6F3;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.06);
z-index: 999;
position: sticky;
top: 0;
left: 0;
}
#navbar {
display: flex;
align-items: center;
justify-content: center;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
transition: 0.3s ease;
}
#navbar li a:hover,
#navbar li a.active {
color: #088178;
}
#navbar li a.active::after,
#navbar li a:hover::after {
content: "";
width: 20%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}
#mobile {
display: none;
align-items: center;
}
/*Home Page*/
#hero{
background-image: url("Web images/img/hero4.png");
height: 99vh;
width: 100%;
background-size: cover;
background-position: top 25% right 0;
padding: 0 80px;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
}
#hero h4{
padding-bottom: 15px;
}
#hero h1{
color: #088178;
}
#hero button {
background-image: url("Web images/img/button.png");
background-color: transparent;
color: #088178;
border: 0;
padding: 14px 80px 14px 65px;
background-repeat: no-repeat;
cursor: pointer;
font-weight: 700;
font-size: 15px;
}
#hero button:hover {
color: #46bff7;
}
#Feature {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#Feature .fe-box {
width: 180px;
text-align: center;
padding: 25px 15px;
box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
border: 1px solid #cce7d0;
border-radius: 4px;
margin: 15px 0;
}
#Feature .fe-box:hover {
box-shadow: 10px 10px 54px rgba(70, 62, 221, 0.1);
}
#Feature .fe-box img {
width: 100%;
margin-bottom: 10px;
}
#Feature .fe-box h6 {
display: inline-block;
padding: 9px 8px 6px 8px;
line-height: 1;
border-radius: 4px;
color: #088178;
background-color: #fddde4;
}
#Feature .fe-box:nth-child(2) h6 {
background-color: #cdebbc;
}
#Feature .fe-box:nth-child(3) h6{
background-color: #d1e8f2;
}
#Feature .fe-box:nth-child(4) h6 {
background-color: #cdd4f8;
}
#Feature .fe-box:nth-child(5) h6 {
background-color: #f6dbf6;
}
#Feature .fe-box:nth-child(6) h6{
background-color: #fff2e5;
}
#product1 {
text-align: center;
}
#product1 .pro-container{
display: flex;
justify-content: space-between;
padding-top: 20px;
flex-wrap: wrap;
}
#product1 .pro {
width: 23%;
min-width: 250px;
padding: 10px 12px;
border: 1px solid #cce7d0;
border-radius: 25px;
cursor: pointer;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
margin: 15px 0;
transition: 0.2s ease;
position: relative;
}
#product1 .pro:hover {
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.06);
}
#product1 .pro img {
width: 100%;
border-radius: 20px;
}
#product1 .pro .des {
text-align: start;
padding: 10px 0;
}
#product1 .pro .des span {
color: #606063;
font-size: 12px;
}
#product1 .pro .des h5 {
padding-top: 7px;
color: #1a1a1a;
font-size: 13.7px;
}
#product1 .pro .des i {
font-size: 12px;
color: rgb(241, 186, 7);
}
#product1 .pro .des h4 {
padding-top: 7px;
font-size: 15px;
font-weight: 700;
color: #088178;
}
#product1 .pro .cart {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50px;
background-color: #cce7d0;
font-weight: 500;
color: #088178;
border: 1px solid #cce7d0;
position: absolute;
bottom: 20px;
right: 10px;
}
#banner {
display: flex;
flex-direction: column;
align-items: center;
background-image: url("Web images/img/banner/b2.jpg") ;
height: 40vh;
width: 100%;
background-position: center;
justify-content: center;
background-size:cover;
text-align: center;
}
#banner h4 {
color: white;
font-size: 18px;
font-weight: 600;
}
#banner h2 {
color: white;
padding: 10px 0;
}
#banner h2 span{
color: red;
}
#banner button {
border: none;
font-size: 15px;
font-weight: 400;
background-color: white;
padding: 15px 20px ;
border-radius: 10px;
cursor: pointer;
outline: none;
transition: 0.3s ease;
}
#banner button:hover {
background: #088178;
color: #fff;
}
#sm-banner{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#sm-banner .banner-box {
display: flex;
flex-direction: column;
align-items: flex-start;
background-image: url("Web images/img/banner/b17.jpg");
border-radius: 2px;
height: 50vh;
width: 48%;
background-position: center;
justify-content: center;
background-size:cover;
text-align: center;
padding: 30px;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.2);
}
#sm-banner .BB2 {
background-image: url("Web images/img/banner/b10.jpg");
}
#sm-banner .banner-box h4 {
color: #fff;
}
#sm-banner .banner-box h2 {
color: #fff;
font-size: 33px;
}
#sm-banner .banner-box span {
color: #fff;
font-size: 15px;
}
#sm-banner .banner-box .cont {
color: #fff;
font-size: 15px;
padding-bottom: 10px;
}
#sm-banner .banner-box button {
border: 1px solid;
font-size: 15px;
font-weight: 400;
background-color: transparent;
color: #fff;
padding: 10px 26px ;
border-radius: 2px;
cursor: pointer;
outline: none;
transition: 0.3s ease;
}
#sm-banner .banner-box:hover button {
color: #fff;
border: 1px solid #088178;
background-color: #088178;
}
#banner-lil {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 80px;
}
#banner-lil .banner-box {
display: flex;
flex-direction: column;
align-items: flex-start;
background-image: url("Web images/img/banner/b18.jpg");
border-radius: 2px;
min-height: 30%;
height: 30vh;
width: 30%;
background-position: center;
justify-content: center;
background-size:cover;
text-align: center;
padding: 20px;
margin-bottom: 20px;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.09);
cursor: pointer;
}
#banner-lil .BB3 {
background-image: url("Web images/img/banner/b4.jpg");
}
#banner-lil .BB4 {
background-image: url("Web images/img/banner/b7.jpg");
}
#banner-lil .BB4 h4 {
font-size: 18px;
text-align: left;
}
#banner-lil h4 {
color: #fff;
font-weight: 900;
font-size: 20px;
text-align: left;
}
#banner-lil h3 {
color: #d41515;
font-weight: 800;
font-size: 14px;
}
#newsletter {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-image: url("Web images/img/banner/b14.png") ;
background-repeat: no-repeat;
background-position: center;
background-color: #041e42;
background-position: 20% 30%;
justify-content: center;
align-items: center;
justify-content: space-between;
}
#newsletter h4 {
font-size: 22px;
font-weight: 700;
color: #fff;
}
#newsletter p {
font-size: 15px;
font-weight: 600;
color: #818ea0;
}
#newsletter span {
color: #f38c05;
}
#newsletter .form {
display: flex;
flex-direction: row;
width: 40%;
}
#newsletter input {
height: 3.125em;
padding: 0 1.25em;
font-size: 14px;
width: 100%;
border: 1px solid transparent;
border-radius: 4px;
outline: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
#newsletter button {
border: none;
font-size: 15px;
font-weight: 600;
background-color:#088178;
white-space: nowrap;
color: #fff;
padding: 12px 20px ;
border-radius: 3px;
cursor: pointer;
outline: none;
transition: 0.3s ease;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
footer .col {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
}
footer .logo {
margin-bottom: 30px;
}
footer h4 {
font-size: 14px;
padding-bottom: 20px;
}
footer p {
font-size: 13px;
margin: 0 0 8px 0;
}
footer a {
font-size: 13px;
text-decoration: none;
color: #222;
margin-bottom: 10px;
}
footer .follow {
margin-top: 20px;
}
footer .follow i {
color: #3b5998;
padding-right: 4px;
cursor: pointer;
}
footer .follow i:nth-child(2) {
color: #00acee;
}
footer .follow i:nth-child(3) {
color: #8a3ab9;
}
footer .follow i:nth-child(4) {
color: #E60023;
}
footer .install .row img {
border: 1px solid #088178;
border-radius: 6px;
cursor: pointer;
}
footer .install img {
margin: 10px 0 15px 0;
}
footer a:hover{
color: #088178;
}
footer .copyright {
width: 100%;
text-align: center;
}
/*Shop Page*/
/*Single Product*/
/*Blog Page*/
/*About Page*/
/*Cart Page*/
/*Start Media Query*/
#media (max-width:799px) {
#navbar {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
position: fixed;
top: 0;
right: -300px;
height: 100vh;
width: 300px;
background-color: #E3E6F3;
box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
padding: 80px 0 0 10px;
transition: 0.3s;
}
#navbar.active {
right: 0px;
}
#navbar li {
margin-bottom: 25px
}
#mobile {
display: flex;
align-items: center;
}
#mobile i {
color: #1a1a1a;
font-size: 24px;
padding: 20px;
}
#close {
position: absolute;
top: 30px;
left: 30px;
color: #222;
font-size: 24px;
}
}
<script src="https://kit.fontawesome.com/8848882185.js"></script>
<section id="header">
<a href="#"
><img
src="C:\Website Projects\Second Project=E-Commerce\Web images\logotxt.png"
class="logo"
alt="E-commerce logo"
/></a>
<div>
<ul id="navbar">
<li><a class="active" href="index.html">Home</a></li>
<li>Shop</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li>
<i class="fa-solid fa-cart-shopping"></i>
</li>
<li>Log In</li>
<i class="fa-solid fa-xmark"></i>
</ul>
</div>
<div id="mobile">
<i class="fa-solid fa-cart-shopping"></i>
<i id="bar" class="fa-solid fa-bars active"></i>
</div>
</section>

Visually replace div when clicking outside

function replace( hide, show ) {
document.getElementById(hide).style.display="none";
document.getElementById(show).style.display="flex";
}
#import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Bebas+Neue&family=Inter:wght#100;200;300;400;600;700;800&family=Roboto:wght#300;400;700&family=VT323&display=swap');
body {
margin: 0;
padding: 0;
}
.all_guidebook {
width: 100%;
position: absolute;
min-height: 1000px;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.title_guidebook {
position: relative;
top: 50px;
justify-content: center;
}
.disposition_guidebook {
width: 1100px;
display: flex;
position: relative;
align-items: flex-start;
top: 55px;
}
.navigation {
width: 286px;
background: var(--bleu);
position: relative;
height: auto;
padding-bottom: 30px;
border-radius: 35px;
margin-right: 15px;
}
.navigation .all_links {
position: relative;
top: 15px;
}
.navigation h1 {
color: white;
font: 45px 'Bebas Neue';
margin: 0;
text-align: center;
position: relative;
top: 15px;
}
.navigation h2 {
color: white;
font: 34px 'Bebas Neue';
position: relative;
background: var(--fushia);
display: flex;
border-radius: 15px;
height: 45px;
padding-top: 2px;
margin-bottom: 26px !important;
width: 247px;
box-sizing: border-box;
top: 20px;
margin: auto;
justify-content: center;
}
.navigation .menu_deroul, #regl {
display: flex;
background: blue;
width: 300px;
}
#reglhover {
display: flex;
background: blue;
width: 300px;
}
#reglhover img, #staffcredshover img, #ctxhover img, #grphover img, #pvrhover img, #syst1hover img, #syst2hover img, #pihover img, #exphover img, #foirehover img {
transform: rotate(135deg);
top: 5px;
position: relative;
left: 7px;
}
.navigation .menu_deroul img {
float: left;
left: 7px;
position: relative;
cursor: pointer;
}
.navigation span {
color: var(--fushiapp);
margin-right: 3px;
font: 20px 'Bebas Neue';
}
.navigation h3 {
color: var(--white);
font: 20px 'Bebas Neue';
}
.wrap_deroul {
display: flex;
flex-direction: column;
position: relative;
top: -18px;
align-items: flex-end;
}
.ancres_deroul {
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-end;
height: 30px;
padding: 0;
color: white;
top: -16px;
font-weight: 200!important;
right: 16px;
font: 16px 'Bebas Neue';
position: relative;
}
.ancres_deroul ul {
margin: 0;
display: flex;
cursor: pointer;
list-style: none;
align-items: flex-end;
flex-direction: column;
}
.ancres_deroul li {transition: .5s;}
.ancres_deroul li a {
text-decoration: none!important;
color: black;
}
.ancres_deroul li:hover {
letter-spacing: .5px;
transition: .5s;
}
<div class="menu_deroul" id="regl" style="display:flex" >
<img src="https://i.ibb.co/cvhdX78/image.png" height="21" width="21" onclick="replace('regl','reglhover')" />
<div class="titre_deroul">
<span>001.</span>
<h3 class="tablinks" onclick="openCity(event, 'reglement')" id="defaultOpen">Règlement</h3>
</div>
</div>
<div id="reglhover" style="display:none">
<img src="https://i.ibb.co/cvhdX78/image.png" height="21" width="21" style="cursor:pointer; transform: rotate(135deg); transition: .5s; transition-duration: 2s;" onclick="replace('reglhover','regl')" />
<div class="wrap_deroul">
<div class="titre_deroul">
<span>001.</span>
<h3 class="tablinks" onclick="openCity(event, 'reglement')">Règlement</h3>
</div>
<div class="ancres_deroul">
<ul>
<li><a onclick="scrollWin()">Inscription & RP</a></li>
<li style="margin-top: -5px;">Discord</li>
</ul>
</div>
</div>
</div>
I have this code, it replaces a div by another when clicking on a button.
I want it to close the showed div when clicking outside the div. For example, if the div "reglhover" is showed, I want it to be replaced by the "hide" status (replaced by "regl") when clicking outside the "reglhover" div. And i want it to work for every occurrence (because i use tabs)... But I can't figure out how to do it. Can someone help me? :(

try
const regl = document.getElementById("regl")
const reglhover = document.getElementById("reglhover")
document.addEventListener("click", (e) => {
if (reglhover.style.display === "flex" && e.target.id != "reglhover") {
reglhover.style.display = "none"
regl.style.display = "flex"
}
})

Unexpected freezeing with a Boostrap Modal

I'm developing a simple frontend page written in native HTML, CSS using Boostrap framework.
I'm getting some problem related with opening of a modal, after it is opened I'm no longer able to interact with any element of the page.
Here's the interested piece of code:
<!DOCTYPE html>
<head>
<title>3DFlix - Home</title>
<link href="images/Materiale Sito web/IconaSito.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
<div class="header-navbar">
<div class="header-navbar-start">
<div class="header-navbar-logo">
<a href="index.html"><img width="228" height="58" class="logo"
src="images/Materiale Sito web/HEADER_Tavola disegno 1.png"></a>
</div>
</div>
<div class="header-navbar-middle">
<ul class="header-menu">
<li>Maker/Stampanti <! Fare pagina Maker/Stampanti> </li>
<li>Blog <! Fare pagina Blog> </li>
<li>Chi Siamo <! Fare pagina Chi Siamo> </li>
</ul>
</div>
<div class="header-navbar-end">
<div>
<button style="padding-right: 20px; background-color: transparent;
border-color: transparent; color: black; font-size: 20px;"
id="loginButton" class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false"> Accedi
</button>
<div class="dropdown-menu">
<input type="text" name="username" placeholder="Username" required><br><br>
<input type="password" name="password" placeholder="Password" required><br><br>
<input type="submit" value="Login">
</div>
<button style="background-color: transparent;
border-color: transparent; color: black; font-size: 20px;"
id="siginButton" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#siginModal"
aria-expanded="false"> Registrati
</button>
<!-- Modal -->
<div class="modal fade" id="siginModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Registrati</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
....
....
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous">
</script>
<script src="script.js"></script>
</body>
</html>
When "Registrati" button is pressed I'm not able to do anything more, such as filling forms, closing modal or clicking on buttons, I can just reload the page.
UPDATE:
This is the style.css file:
body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}
a {text-decoration: none; color: black;}
a:hover {color: black;}
.header {
position: relative;
box-sizing: inherit;
z-index: 10;
padding: 1rem 1rem;
}
.header-navbar {
position: relative;
display: flex;
justify-content: space-between;
}
.header-navbar-start {
padding-right: 1rem;
margin-right: 0;
flex: 1;
position: relative;
z-index: 2;
display: flex;
align-items: center;
}
.header-navbar-logo {
box-sizing: inherit;
display: block;
}
.logo{
display: block;
max-width: 100%;
height: auto;
}
.header-navbar-middle {
position: relative;
z-index: 2;
display: flex;
align-items: center;
}
.header-menu {
justify-content: center;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
margin-block-start: 1rem;
margin-block-end: 1rem;
padding-inline-start: 40px;
gap: 70px;
font-size: 20px;
}
.header-navbar-end {
padding-left: 1 rem;
flex: 1;
position: relative;
z-index: 2;
justify-content: flex-end;
display: flex;
align-items: center;
font-size: 20px;
}
.background {
position: absolute;
right: 0; left: 0; top: 0;
overflow: hidden;
width: 100%; height: 800px;
background-size: cover;
background-repeat: no-repeat;
display: flex;
}
.wrapper {
justify-content: flex-start;
box-sizing: border-box;
display: flex;
width: 100%;
max-width: 1200px;
padding-left: 6vw;
padding-right: 6vw;
position: relative;
}
.wrapper-content {padding-top: 400px;}
.title {
font-size: 40px;
font-weight: normal;
pointer-events: none;
}
.subtitle {
font-size: 25px;
font-weight: normal;
pointer-events: none;
padding-bottom: 10px;
}
.wrapper-button {
padding: 10px 15px 10px 15px;
white-space: nowrap;
text-align: center;
display: inline-block;
cursor: pointer;
border: none;
position: relative;
align-items: flex-start;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 18px;
background-color: #eef138b6;
border-radius: 20px;
justify-content: flex-start;
margin-left: 20px;
box-sizing: content-box;
}
.home-page {
background-color: #f4f4f4;
display: block;
margin-top: 9.8rem;
}
.section-one {
background-color: white;
width: 85%; height: 390px;
margin: auto; display: block; position: relative;
align-content: center;
padding: 4rem;
}
.section-columns {
margin-bottom: 2rem;
flex-wrap: nowrap;
display: flex;
box-sizing: border-box;
justify-content: center;
}
.section-one-content {
flex-basis: 0;
flex-grow: 1;
}
.section-two-content {
flex-basis: 0;
flex-grow: 1;
}
.section-three-content {
flex-basis: 0;
flex-grow: 1;
}
.section-one-img {
margin: 0 0 1rem;
margin-bottom: 2rem;
box-sizing: inherit;
display: block;
}
.section-two-img {
margin: 0 0 1rem;
margin-bottom: 2rem;
box-sizing: inherit;
display: block;
}
.section-three-img {
margin: 0 0 1rem;
margin-bottom: 2rem;
box-sizing: inherit;
display: block;
}
.one-img {
margin-left: auto;
margin-right: auto;
display: table;
align-content: center;
}
.two-img {
margin-left: auto;
margin-right: auto;
display: table;
align-content: center;
}
.three-img {
margin-left: auto;
margin-right: auto;
display: table;
align-content: center;
}
.section-h {
margin-bottom: 1rem;
font-weight: 400;
font-style: normal;
text-align: center;
}
.stamp-list {
padding-top: 2rem;
margin: auto;
display: block;
position: relative;
width: 85%;
align-content: center;
box-sizing: border-box;
}
.stamp-list-row {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-direction: normal;
flex-direction: row;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
justify-content: space-between;
}
.list-row-element {
margin-bottom: 2rem;
}
.element-block {
border-radius: 5px;
box-shadow: 0 5px 30px rgb(7 6 36 86 / 8%);
background-color: white;
transition: transform 0.25s;
}
.element-header {
margin-bottom: 0;
position: relative;
}
.element-img {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
display: block;
width: 100%;
height: auto;
}
.element-content {
margin-bottom: 0;
padding: 1.5rem;
position: relative;
z-index: 1;
}
.content-topbar {
border-radius: 5px;
box-shadow: 0 5px 30px rgb(7 6 36 86 / 8%);
background-color: white;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
margin: -3.25rem 0 1.25rem;
padding: 0.625rem 1rem;
}
.vendor-info {
display: flex;
align-items: center;
}
.vendor-info-img {
flex: 0 0 2.1875rem;
margin-right: 0.75rem;
}
.vendor-img {
display: block;
width: 100%;
height: auto;
border-radius: 50%;
}
.vendor-name {
font-size: 0.875rem;
white-space: nowrap;
margin: 0;
word-wrap: break-word;
}
.content-middle {
margin: 0;
word-wrap: break-word;
}
.content-footer {
padding: 1rem 1.5rem;
border-top: 1px solid rgba(7, 36, 86, 0.075rem);
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-attributes-primary {
margin-right: 1rem;
min-width: 0;
display: flex;
align-items: center;
}
.attribute-provincia {
font-size: 1.25rem;
min-width: 0;
word-wrap: break-word;
}
.footer-attributes-secondary {
display: flex;
align-items: center;
}
.attribute-message {
display: none;
width: 380px;
}
.section-newsletter {
background-color: rgb(204, 204, 204);
width: 85%; height: 320px;
display: block;
position: relative;
align-content: center;
margin: auto;
margin-top: 2rem;
}
.newsletter-container {
padding-top: 3rem;
padding-bottom: 3rem;
box-sizing: inherit;
padding-left: 3rem;
padding-right: 3rem;
}
.newsletter-columns {
margin-bottom: 0;
flex-wrap: nowrap;
display: flex;
box-sizing: border-box;
}
.newsletter-column1 {
flex-basis: 0;
flex-grow: 1;
}
.newsletter-column2 {
flex-basis: 0;
flex-grow: 1;
}
.column-h {
margin-bottom: 1rem;
margin-top: 0;
text-align: center;
font-size: 30px;
}
.column-p {
padding-top: 1rem;
text-align: center;
font-weight: 400;
}
.newsletter-form {
padding: 0.3rem 0.5rem;
border-radius: 5px;
border: thin;
}
.checkmark-form {
margin-right: 0.7rem;
width: 15px; height: 15px;
}
.button-form {
background-color: orange;
border-radius: 20px;
padding: 0.3rem 0.5rem;
width: 7rem;
border-style: groove;
}
.footer {
flex-wrap: nowrap;
padding: 1.5rem 0;
box-sizing: inherit;
display: flex;
position: relative;
padding-right: 2rem;
padding-left: 2rem;
width: 100%;
}
.footer-navbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 70px;
width: 100%;
}
.footer-navbar-logo {
box-sizing: inherit;
display: block;
}
.footer-menu {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 50px;
}
.social-icons {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 30px;
}

Aight now we know that it's a css problem.
First you should try to make your css file clearer... It's not easy to read a 500 lines css file so try to organize it by creating many css files that matches with a html component.
Exemple: a css file named header.css for your header, a css file named modal.css to custumize your modal, a css file named hero.css to custumize your hero section etc.
Second you should try to understand what is bootstrap doing by inspecting elements. You'll see that Bootstrap creates a div element with "modal-backdrop" class to create a "background" to your modal. The problem is you made something that changed the z-index and hide your modal.
So you can try to organize your css code and try to find the specific css line or just add this line to your css that will specify a correct z-index.
.modal-backdrop {
z-index: 1;
}

your code is working well here. I think you should show us these files content: "script.js" and "style.css"

CSS flexgrid styling

I am just trying to get the grid row to look the way I want and I have a large CSS and can't seem to get the column with three rows of the text right. There's the photo to indicate where the obvious entry should read from.
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,
code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0;padding:0;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{ vertical-align:baseline;}/* vertical align baseline */
.vertical-top{ vertical-align:top;}/* vertical align top */
.underline{ padding-bottom:5px; border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
body {
background-image: url(https://i.imgur.com/sCfeeeY.png) ;
background-position: top 1em right 1em, bottom 1em left 1em;
background-repeat: no-repeat;
}
.row {
flex: 2 auto;
grid-column: 1 30em;
display: flex;
margin: auto;
}
.active {
margin: 1em;
}
.fullwebpage .section {
display: grid;
grid-gap: .4rem;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
/* grid-template-columns: repeat(auto-fit, minmax(40em, ifr)); */
grid-column: 1;
flex: 0 1 28em;
}
.box {
display: flex;
align-items:center;
grid-column: 4;
flex: 3 auto;
width: 100%;
padding-top:1.5em;
padding-left: 2em;
}
.sectionheader {
display: flex;
flex: 8 auto;
grid-row: auto 1;
width: 100%;
margin: 1em;
/* padding-left: 3em; */
margin-right: 3em;
}
.sectionfirst {
margin-left: 5em;
/*margin-right:2em;
height:39em; */
padding-top: 1em;
}
.head_bg {
padding-top:1.5em;
padding-left: 2em;
}
.section_bg .head_bg a:active {
color: black;
}
.header {
padding-left: 2em;
padding-right:3em;
}
.logo {
margin-left: 3em;
margin-right: 2em;
}
.links {
padding-bottom:1em;
}
.links li a {
color: white;
}
.footer a:active {
color: white;
}
.promo_slogan_mid {
font-weight: bold;
font-size: 40px;
align-items: start;
text-align: start;
}
.promo_slogan_mid p {
font-size: 1vw;
font-weight: normal;
}
.promo_slogan {
font-weight: bold;
font-size: 3vw;
align-items: center;
word-wrap: break-word;
}
.promo_slogan p {
font-size: 1vw;
font-weight: normal;
}
.nav_menu {
float: left;
/* margin-left: 0em;*/
margin-right: 1.5em;
justify-content: space-around;
text-decoration: none;
font-family: Verdana;
font-weight: bold;
display: flex;
z-index: 1;
}
.nav_menu a {
margin: .3em 1.3em;
}
.updateinput#gsbutton {
float: right;
text-decoration: none;
/* display: inline-block; */
z-index: 1;
}
.gsbutton:hover .gsbutton:active {
border: none;
outline: none;
}
.wrap {
display: inline-flex;
width:100%;
margin-top:1em;
}
.wrap a {
display: flex;
flex: 3 auto;
flex-flow: row;
grid-row: 1;
float: start;
color: black;
text-decoration: none;
font-size: 17px;
}
.footerbanner {
display: flex;
justify-content: space-between;
}
.container1 {
width: 100%;
display: flex;
}
.col-xs {
width:20%;
}
.sectionsecond {
padding-top: 2em;
display: grid;
grid-template-columns: 3;
align-items: center;
text-align: center;
width: 100%;
padding-top: 1em;
/* display: flex;
flex: 3 auto;
grid-row: auto 1;
width: 100%; */
margin: 1em;
height:39em;
margin-right: 3em;
}
.mycolumn_header .row_header {
margin-bottom: 2em;
display: block;
text-align: center;
}
.foot-row h1 {
display: flex;
/* height: 8em; */
padding-top: 2.1em;
padding-bottom: 0em;
margin: 1em 2em;
width: 100%;
z-index:1;
}
.updateinput#email_validate {
text-align: end;
padding-top: 2.1em;
margin: 1em 2em;
}
.updateinput {
font-weight: bold;
font-size: 20px;
padding-bottom: 0em;
}
.topfooterbanner div {
font-weight: bold;
font-size: 20px;
height: 12em;
}
.modal-content {
border-radius: 1rem
}
.modal-content:hover {
box-shadow: 2px 2px 2px black
}
.btn:hover a:active {
border: none;
}
.btn {
text-decoration: none;
}
.fa {
color: #2b84be;
font-size: 90px;
padding: 30px 0px
}
.form {
display: grid;
place-items: center;
width: 100%;
height: 100vh;
background-image: linear-gradient(to bottom right, rgb(10, 153, 209), rgb(5, 76, 122));
text-align: center;
font-size: 16px;
}
.b1 {
background-color: #2b84be;
box-shadow: 0px 4px #337095;
font-size: 17px
}
.r3 {
color: #c1c1c1;
font-weight: 500
}
.topfooterbanner {
text-decoration: none;
width: 100%;
}
.row_header h1 {
/* vertical-align: bottom; */
font-size: 3em;
font-weight:bold;
/* padding-bottom: 0; */
}
.foot-row h1 {
/* vertical-align: bottom; */
font-size: 3em;
font-weight:bold;
/* padding-bottom: 0; */
}
.foot-row {
/* padding-top: 2.6em; */
text-align: end;
background-color: #F97419;
display: flex;
}
.foot-row::before {
position: absolute;
width: 100%;
}
.statementnews {
width: 300px;
height: 300px;
padding-top: 1em;
padding-left: 30px;
box-shadow: 0 0 10px;
border-radius: 10px;
margin: 10px;
overflow: hidden;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.statementnews p {
text-align: wrap;
margin-left: 1em;
margin-right: 1em;
background-color: #f0f0f0;
}
.statementnews:hover {
transform: rotate(360deg);
}
.col {
min-width:15vw;
min-height: 60vh;
}
.mycolumn2 {
display: flex;
flex: 4 auto;
grid-row: 1 2;
width: 100%;
padding-left: 4em;
margin: 1em;
}
.sectionthird#gsbutton_3 {
align-items: center;
}
.sectionthird {
padding-top: 8em;
display: flex;
/* grid-row: auto 3; */
}
.col-md-6#sidebar1 {
width:60%;
padding-top: 0em;
padding-left: 0em;
padding-right: 0em;
align-items: center;
}
.middle_id_img {
padding-left:1em;
}
.col-md-4 {
font-weight: bold;
font-size: 40px;
align-items: start;
text-align: start;
/* font-size: 1vw; */
/* font-weight: normal; */
}
.col-md-6 {
height: 8em;
width: 45%;
display: flex;
/* justify-content: space-between; */
margin-left: 2em;
/* padding-left: 5em; */
padding-top: 2em;
}
.table-row {
padding-top: 2em;
display: flex;
text-align: center;
}
.table-row#content {
height: 14em;
}
.mycolumn_header {
font-weight: bold;
font-size: 45px;
}
.sectionthird {
padding-top: 2em;
display: grid;
grid-template-columns: 3;
align-items: center;
text-align: center;
width: 100%;
}
.mycolumn#userresponse {
font-size: 8em;
font-weight: bold;
}
.mycolumn#content_gsbutton {
font-size: .4em;
align-items: center;
margin-bottom: 0;
}
.mycolumn {
height: 8em;
align-items:center;
text-align: start;
display: table-cell;
margin-left: 2em;
padding-left: 1em;
padding-top: 2em;
}
#sidebar {
height: 9em;
box-shadow: -.4em 1em #888888;
width:30%;
}
#align_bottom {
padding-top: 10em;
padding-left: 40em;
margin: 0;
font-size: 1vh;
font-family: Verdana;
font-weight: normal;
}
.footer_column ul {
padding-top: 1em;
display: block;
text-align: center;
}
.gsbutton_footer {
position: center;
}
.footer_column {
display: inline-block;
width: 100%;
color: white;
font-size: 1.7vh;
font-family: Verdana;
font-weight: bold;
padding-left: 19em;
margin: 0em 1em;
}
.sectiontopfooter {
margin-top: 15em;
}
.sectionfooter {
width: 100%;
display: flex;
background-color: black;
}
.sectionfooter li {
padding-top: 1em;
vertical-align: bottom;
}
.wrap-row#middle_id_img {
width: 20%;
}
.wrap-row {
padding-top: 2em;
display: flex;
text-align: center;
}
.wrap-row#sidebar_col {
display: grid;
grid-template-columns: 3;
padding-top: 8em;
}
.wrap-row#box-md-3 {
padding-top: 8em;
width: 100%;
display: flex;
}
<section class="sectionsecond">
<div class="wrap-row">
<div class="box" id="box-md-3">
<div class="col-md-6 " id="table-element1">
<div class="promo_slogan_mid" id="sidebar_col">
<h1> What’s different about Manage?</h1>
<br>
<p>Manage provides all the functionality your team needs, without the complexity. Our software is tailor-made for modern digital product teams.</p>
</div>
</div>
<div class="col-xs" id="middle_id_img">
<img src="https://i.imgur.com/99FIu0U.png" alt="">
</div>
<div class="col-md-6 col-md-4 promo_slogan" id="feedback_slogan">
<h2>Track company-wide progress</h2>
<p class="text_slogan">See how your day-to-day tasks fit into the wider vision. Go from
tracking progress at the milestone level all the way done to the
smallest of details. Never lose sight of the bigger picture again.</p>
<br>
<h2>Advanced built-in reports</h2>
<p class="text_slogan">Set internal delivery estimates and track progress toward company
goals. Our customizable dashboard helps you build out the reports
you need to keep key stakeholders informed.</p>
<br>
<h2> Everything you need in one place</h2>
<p class="text_slogan"> Stop jumping from one service to another to communicate, store files,
track tasks and share documents. Manage offers an all-in-one team
productivity solution.</p>
</div>
</div>
</div>
</section>
I'd really like to have the transition animation from CSS slide the row onload() but I can't seem to get that

Why can't I call a class for an onclick event?

So it looks like my javascript onclick events are only functioning with ID's but when i call the class "listButton" only the first list item (All Rewards) closes the dropdown div.
When i click on any other list item (Food Rewards, Beverage Rewards, Holiday Rewards, Classes Rewards, TBA) it does not close my dropdown div.
I'm unsure why this is so. Is there another method to complete this? I must use vanilla JS.
var overlay2 = document.getElementById("overlay2");
var dropdown = document.getElementById("rewardsDropdown");
var listButton = document.querySelectorAll(".listButton");
document.getElementById("dropdownButton").onclick = function() {
dropdown.classList.add("open");
overlay2.classList.add("open");
};
function removeOpenRewards() {
dropdown.classList.remove("open");
overlay2.classList.remove("open");
};
for (i = 0; i < listButton.length; i++) {
listButton[i].addEventListener("click", removeOpenRewards);
}
overlay2.addEventListener("click", removeOpenRewards);
document.getElementById("close").addEventListener("click", removeOpenRewards);
#container #activeRewards #mobileDropdown #overlay2 {
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
z-index: 999;
display: none;
}
#container #activeRewards #mobileDropdown #overlay2.open {
display: block;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont {
width: 100%;
height: 59px;
margin: 15px 0 20px 0;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button {
width: 100%;
height: 100%;
background-color: #FAFAFA;
border: 0;
outline: 0;
border-radius: 10px;
color: #696969;
font-size: 18px;
font-family: 'Lato', sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20px;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button:focus {
background-color: #F0F0F0;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button:after {
border-style: solid;
border-width: 2px 2px 0 0;
content: '';
display: inline-block;
width: 5px;
height: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
color: #C7C7C7;
position: absolute;
right: 40px;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button span {
color: #EDAFBD;
font-size: 12px;
margin-left: 15px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown {
width: 100%;
display: none;
}
#container #activeRewards #mobileDropdown #rewardsDropdown.open {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: fixed;
z-index: 1000;
background-color: #FFFFFF;
left: 0;
bottom: 0;
padding-bottom: 30px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close {
color: #D63A5E;
background-color: #FFFFFF;
border-radius: 20px;
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
font-size: 20px;
position: absolute;
left: 20px;
top: -45px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 15px;
width: 15px;
padding: 5px 5px 7px 6px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close:hover {
background-color: #D63A5E;
color: #FFFFFF;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close:focus {
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
background-color: #AF2B49;
}
#container #activeRewards #mobileDropdown #rewardsDropdown h4 {
color: #505050;
text-align: center;
font-size: 18px;
font-weight: bolder;
margin: 30px 0;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList {
height: 360px;
overflow: scroll;
width: 95%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList::-webkit-scrollbar {
background-color: transparent;
width: 5px;
margin-left: 5px;
padding-left: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList::-webkit-scrollbar-thumb {
background-color: #E0E0E0;
border-radius: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div {
width: 95%;
height: 59px;
margin-top: 5px;
padding-right: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button {
width: 100%;
height: 100%;
background-color: #FAFAFA;
border: 0;
outline: 0;
border-radius: 10px;
color: #696969;
font-size: 18px;
font-family: 'Lato', sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button:focus {
background-color: #D63A5E;
color: #FFFFFF;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button span {
color: #EDAFBD;
font-size: 12px;
margin-left: 15px;
}
<div id="container">
<div id="activeRewards">
<div id="mobileDropdown">
<div id="dropdownButtonCont">
<button id="dropdownButton">All Rewards
<span>(5)</span>
</button>
</div>
<div id="overlay2"></div>
<div id="rewardsDropdown">
<span id="close">×</span>
<h4>Reward Categories</h4>
<div id="dropdownList">
<div>
<button class="listButton">All Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Food Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Beverage Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Holiday Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Classes Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">TBA
<span>(5)</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>

The Document method querySelector() returns the first Element within
the document that matches the specified selector, or group of
selectors. If no matches are found, null is returned.
So replace:
document.querySelector(".listButton").addEventListener("click", removeOpenRewards);
with:
var listButtons= document.querySelectorAll(".listbutton");
listButtons.forEach(function(listButton) {
listButton.addEventListener("click", removeOpenRewards);
});

Develop Reference

JavaScript is the programming language of the Web.

Reactjs add/delete input fields with scrollable container - javascript

Related

Responsive navigation bar could not be displayed (hamburger menu)

Visually replace div when clicking outside

Unexpected freezeing with a Boostrap Modal

CSS flexgrid styling

Why can't I call a class for an onclick event?

Categories

Resources