We Keep Coding

I don't understand why my pop-up isn't working

So I am currently working on a personal project but cannot get my modal to appear in the browser. I've tried researching it but I'm getting the same answers back that I am currently applying.
const open1 = document.getElementById('open1');
const modal_container = document.getElementById('modal_container');
const close1 = document.getElementById('close1');
open1.addEventListener('click', () => {
modal_container.classList.add('show');
});
close1.addEventListener('click', () => {
modal_container.classList.remove('show');
});
div.modal-container {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.real45 {
background-color: #BC6C25;
border: 0;
border-radius: 25px;
color: #fff;
padding: 10px 25px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.real45:hover {
color: black;
}
.modal {
background-color: #fff;
width: 600px;
max-width: 100%;
padding: 30px;
border-style: solid;
border-radius: 25px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
text-align: center;
}
.modal h1 {
margin: 0;
}
.modal p {
opacity: 0.7;
}
.modal-container.show {
opacity: 1;
pointer-events: 1;
}
<button class="real45" id="open1"> Open Me </button>
<div class="modal-container" id="modal_container">
<div class="modal">
<h1> Modals are cool </h1>
<p> practice text </p>
<button class="real45" id="close1"> Close Me </button>
</div>
</div>
Please any and all suggestions are welcome I greatly appreciate it.

When you put pointer-events: none; on .modal-container, all child nodes will also inherit that property, which disables all pointer events (clicking, dragging, hovering, etc.).
So when you attempt to close the modal by clicking the button, nothing will happen.
I've added pointer-events: auto; to the .modal so that these events work for child nodes and you are able to close the modal.
const open1 = document.getElementById('open1');
const modal_container = document.getElementById('modal_container');
const close1 = document.getElementById('close1');
open1.addEventListener('click', () => {
modal_container.classList.add('show');
});
close1.addEventListener('click', () => {
modal_container.classList.remove('show');
});
div.modal-container {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.real45 {
background-color: #BC6C25;
border: 0;
border-radius: 25px;
color: #fff;
padding: 10px 25px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.real45:hover {
color: black;
}
.modal {
background-color: #fff;
width: 600px;
max-width: 100%;
padding: 30px;
border-style: solid;
border-radius: 25px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
text-align: center;
position: relative;
pointer-events: auto;
}
.modal h1 {
margin: 0;
}
.modal p {
opacity: 0.7;
}
.modal-container.show {
opacity: 1;
pointer-events: 1;
}
<button id="open1">open
</button>
<div class="modal-container" id="modal_container">
<div class="modal">
<h1> Modals are cool </h1>
<p> practice text </p>
<button class="real45" id="close1"> Close Me </button>
</div>
</div>

I needed to add my <script> below my <button> and <div> tags. This is the correct way to make it work in browser.
<button class="real45" id="open1"> Open Me </button>
<div class="modal-container" id="modal_container">
<div class="modal">
<h1> Modals are cool </h1>
<p> practice text </p>
<button class="real45" id="close1"> Exit </button>
</div>
</div>
<script>
const open1 = document.getElementById("open1");
const modal_container = document.getElementById("modal_container");
const close1 = document.getElementById("close1");
open1.addEventListener("click", () => {
modal_container.classList.add("show");
});
close1.addEventListener("click", () => {
modal_container.classList.remove("show");
});
</script>

How do I get different buttons to pop up separate pop up boxes?

// Get DOM Elements
const modal = document.querySelector('#my-modal');
const modalBtn = document.querySelector('#modal-btn');
const closeBtn = document.querySelector('.close');
const modal2 = document.querySelector('#my-modal2');
const modalBtn2 = document.querySelector('#modal-btn2');
const closeBtn2 = document.querySelector('.close');
// Events
modalBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);
modalBtn2.addEventListener('click', openModal);
closeBtn2.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);
// Open
function openModal() {
modal.style.display = 'block';
}
// Close
function closeModal() {
modal.style.display = 'none';
}
// Close If Outside Click
function outsideClick(e) {
if (e.target == modal) {
modal.style.display = 'none';
}
}
/**
{
margin: 0;
padding: 0;
font-family: Verdana,Geneva,sans-serif;
}*/
.team-section
{
background: #f1f2f6;
text-align: center;
}
.inner-width
{
max-width: 1200px;
margin: auto;
padding: 40px;
color: #333;
overflow: hidden;
}
.team-section h1
{
font-size: 20px;
text-transform: uppercase;
display: inline-block;
border-bottom: 4px solid;
padding-bottom: 10px;
}
.pe
{
float: left;
width: calc(100% / 3);
overflow: hidden;
padding: 40px 0;
transition: 0.4s;
}
.pe:hover
{
background: #dfe4ea;
}
.pe img
{
width:250px;
height: 250px;
border-radius: 50%;
}
.p-name
{
margin: 5px;
text-transform: uppercase;
color: #70AD47;
}
.p-des
{
font-style: italic;
color: #006600;
}
.p-sm
{
margin-top: 16px;
}
.p-sm a
{
margin: 0 4px;
display: inline-block;
width: 30px;
height: 30px;
transition: 0.4s;
}
.p-sm a:hover
{
transform: scale(1.3);
}
.p-sm a i
{
color: #333;
line-height: 30px;
}
#media screen and (max-width: 960px) {
.pe{
width: 45%;
}
}
#media screen and (max-width: 768px) {
.pe{
width: 50%;
}
}
#media screen and (max-width: 600px) {
.pe{
width: 100%;
}
}
:root {
--modal-duration: 1s;
--modal-color: #70AD47;
}
.button {
background: #006600;
padding: 1em 2em;
color: #fff;
border: 0;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
margin: 10% auto;
width: 60%;
box-shadow: 0 5px 8px 0 rgba(112, 173, 71), 0 7px 20px 0 rgba(112, 173, 71);
animation-name: modalopen;
animation-duration: var(--modal-duration);
}
.modal-header h2,
.modal-footer h3 {
margin: 0;
}
.modal-header {
background: var(--modal-color);
padding: 15px;
color: white;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.modal-body {
padding: 10px 20px;
background: #fff;
}
.modal-footer {
background: var(--modal-color);
padding: 10px;
color: #fff;
text-align: center;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.close {
color: #ccc;
float: right;
font-size: 30px;
color: #fff;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
#keyframes modalopen {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="team-section">
<div class="inner-width">
<div class="pers">
<div class="pe">
<img class="alignnone size-medium wp-image-763" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/David-full-colour-photo-2-253x300.jpg" alt="" width="253" height="300" />
<div class="p-name">David Small</div>
<div class="p-des">Director of Innovation and Strategy</div>
<p style="text-align: center;"><button id="modal-btn" class="button">Read More</button>
<div id="my-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>David Small</h2>
</div>
<div class="modal-body">
<p>David Small is the founder and Managing Director here at Patient Guard Group. David worked for the MHRA as a Higher Medical Device Specialist and with Industry in
QA, RA and Project Leader Roles, helping to develop Medical Devices and gain regulatory approval for them. In 2017 David spotted an opportunity in the market for a no nonsense approach to Medical Device consulting, reducing technical jargon and making QA and RA easy to understand to business owners and businesses who
manufacture, distribute or own label Medical Devices, and hence Patient Guard was born.</p>
<div class="modal-footer">
<h3></h3>
</div>
</div>
</div>
</div>
</div>
<div class="pe">
<img class="alignnone size-medium wp-image-757" src="https://www.patientguard.co.uk/wp-content/uploads/2021/10/Paul-full-colour-photo-2-267x300.jpg" alt="" width="267" height="300" />
<div class="p-name">Paul Mccann</div>
<div class="p-des">Finance Director</div>
<p style="text-align: center;"><button id="modal-btn2" class="button">Read More</button>
<div id="my-modal2" class="modal2">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Paul Mccann</h2>
</div>
<div class="modal-body">
<p>Paul is the finance director of Patient Guard Ltd.</p>
<div class="modal-footer">
<h3></h3>
</div>
</div>
</div>
</div>
</div>
I am new to JavaScript and think my code is incorrect. So my issue is I have a Meet The Team page on my website and below I have added read more buttons. When the user clicks on the read more buttons underneath each team member, a popup box will appear with text about each team member. However all the buttons share the same text from the first team member and I am unable to change this.
HTML for first team member
HTML
HTML for new team member
JavaScript
JavaScript
JavaScript

Strange behavior while adding DOM element using addEventListener() on a button

I'm trying to create a project card with user info when the user clicks on a button. When the user clicks the new project button, a modal form pops up that takes the user info and has a create button. The program should add a new project card whenever the user clicks the create button. To achieve this I added a click event listener to the Add new project button and another to Create button. I nested the create event listener inside the add new project event listener.
Here's the event listener.
addTileBtn.addEventListener("click", (e) => {
e.preventDefault();
modal.style.display = "block";
const titleField = document.querySelector("#title");
const descriptionField = document.querySelector("#description");
const create = document.querySelector("#create");
const close = document.querySelector("#close");
create.addEventListener("click", (e) => {
e.preventDefault();
title = titleField.value;
description = descriptionField.value;
function createProjectTile() {
const projectTile = document.createElement("div");
projectTile.classList.add("cards-grid__tile");
projectTile.textContent = title;
console.log(title, description);
return projectTile;
}
cardsGrid.appendChild(createProjectTile());
modal.style.display = "none";
});
close.addEventListener("click", (e) => {
e.preventDefault();
modal.style.display = "none";
});
});
The problem is that when I create the first card it works fine. But the second time, it creates two cards and 3 cards on the 3rd time and so on.
Here is the JSFiddle link for the full code.

I've edited your code, this should be what you wanted:
const logoutBtn = document.querySelector("#logout");
const addTileBtn = document.querySelector("#add-tile");
const cardsGrid = document.querySelector(".cards-grid");
const modal = document.querySelector(".modal");
const titleField = document.querySelector("#title");
const descriptionField = document.querySelector("#description");
const create = document.querySelector("#create");
const close = document.querySelector("#close");
addTileBtn.addEventListener("click", (e) => {
e.preventDefault();
modal.style.display = "block";
titleField.value = "";
descriptionField.value = "";
});
create.addEventListener("click", (e) => {
e.preventDefault();
title = titleField.value;
description = descriptionField.value;
function createProjectTile() {
const projectTile = document.createElement("div");
projectTile.classList.add("cards-grid__tile");
projectTile.textContent = title;
console.log(title, description);
return projectTile;
}
cardsGrid.appendChild(createProjectTile());
modal.style.display = "none";
});
close.addEventListener("click", (e) => {
e.preventDefault();
modal.style.display = "none";
});
:root {
--main-red: #be3144;
--main-white: #f0f0f0;
--main-gray: #303841;
--main-blue: #45567d;
--main-blue3: #1c262f;
--main-blue2: #27333d;
--main-blue1: #2e3d49;
--main-light-blue: #02b3e4;
--main-black: #000000;
--main-light-black: #3a3d40;
--main-dark-black: #181719;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
img {
display: block;
max-width: 100%;
height: auto;
}
body {
font-family: "Poppins", sans-serif;
font-size: 1.8rem;
font-weight: 400;
line-height: 1.4;
color: var(--main-white);
}
h1,
h2 {
font-family: "Raleway", sans-serif;
font-weight: 700;
text-align: center;
}
h1 {
font-size: 3.5rem;
}
h2 {
font-size: 2rem;
color: var(--main-blue);
display: block;
}
p {
font-size: 1.8rem;
font-weight: 200;
font-style: italic;
color: var(--main-white);
}
a {
text-decoration: none;
text-align: center;
display: block;
}
.main {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 100vh;
background-color: var(--main-white);
}
.box {
border: none;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
border-radius: 8px;
background-color: #fff;
}
.box__fields {
padding: 20px;
}
.box-field {
margin-bottom: 20px;
display: flex;
justify-content: center;
}
.icon {
position: absolute;
padding: 10px;
color: gray;
min-width: 50px;
text-align: center;
font-size: 20px;
top: 50%;
transform: translateY(-50%);
}
input,
textarea {
font-size: 17px;
padding: 14px 16px;
width: 300px;
cursor: text;
border: 1px solid var(--main-gray);
border-radius: 6px;
outline: none;
padding-left: 45px;
}
.box-btn {
border: none;
border-radius: 6px;
font-size: 20px;
line-height: 48px;
padding: 0 16px;
}
.app,
.main-content {
height: 100%;
}
.title-area {
background-color: var(--main-blue3);
width: 100%;
font-size: 18px;
min-height: 60px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
}
.title-area__item {
padding: 10px 30px;
}
.logout-btn {
border: none;
border-radius: 6px;
font-size: 20px;
line-height: 30px;
padding: 0 16px;
width: 100px;
cursor: pointer;
color: #fff;
background-color: var(--main-light-blue);
}
.logout-btn:hover {
background-color: #029be4;
}
.content-area {
margin-top: 60px;
width: 100%;
height: 100%;
overflow: auto;
background-color: var(--main-blue);
}
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 50px;
margin-bottom: 3rem;
padding: 5rem 3rem;
}
.cards-grid__tile {
background-color: var(--main-blue2);
max-width: 200px;
padding: 30px;
text-align: center;
font-size: 1.2rem;
}
.add-tile-btn {
border: none;
border-radius: 6px;
font-size: 15px;
line-height: 48px;
padding: 0 10px;
cursor: pointer;
color: #fff;
background-color: var(--main-light-blue);
}
.modal {
display: none;
width: 350px;
font-size: 1.2rem;
position: relative;
top: 10%;
left: 50%;
transform: translateX(-50%);
overflow: visible;
}
.box {
background-color: var(--main-blue1);
opacity: 0.95;
}
.box-field {
flex-direction: column;
}
input,
textarea {
padding: 5px 10px;
resize: none;
}
.wrapper {
position: relative;
text-align: center;
}
.create-btn {
width: 100px;
cursor: pointer;
color: #fff;
background-color: var(--main-light-blue);
}
.close {
cursor: pointer;
position: absolute;
top: 20px;
left: 290px;
}
#modal-form {
position: absolute;
}
.icon {
color: var(--main-blue3);
}
<div class="app">
<div class="nav-wrapper">
<nav id="nav" class="nav"></nav>
</div>
<div class="main-content">
<div class="title-area">
<div class="title-area__item">Menu</div>
<div class="title-area__item">Boards</div>
<div class="title-area__item">
<button id="logout" class="logout-btn btn">
Logout
</button>
</div>
</div>
<div class="content-area">
<div class="modal">
<form id="modal-form" class="box">
<a id="close" class="close">
<i class="fa fa-times icon">close</i>
</a>
<div class="box__fields">
<div class="box-field">
<label for="title"> Title </label>
<input
id="title"
type="text"
name="title"
required
autofocus
/>
</div>
<div class="box-field">
<label for="description">
Description
</label>
<textarea
id="description"
name="title"
rows="6"
cols="40"
></textarea>
</div>
<div class="box-field">
<div class="wrapper">
<button
id="create"
class="create-btn box-btn btn"
>
Create
</button>
</div>
</div>
</div>
</form>
</div>
<div class="cards-grid">
<div class="cards-grid__tile">
<button id="add-tile" class="add-tile-btn btn">
+ Add new project
</button>
</div>
</div>
</div>
</div>
</div>

Change the flex-direction on button click

I am trying to create an animation effect that moves two buttons when I click on them. I have the flex direction set up as a column in the container div and I essentially just want them to position as a flex row when I click on one of them (probably with a 1s animation). When I click on them currently nothing happens. Here is my code sample:
HTML
<header>
<div class="container">
<h1>Choose Your Allegiance</h1>
<div id="buttons">
<button class="fill"><img src="/assets/Jedi.png" alt="Jedi" /></button>
<button class="fill sith">
<img src="/assets/Sith.png" alt="Sith" />
</div>
</button>
</div>
</header>
CSS
.container {
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
}
.container.click {
flex-direction: row;
justify-content: space-around;
}
h1 {
margin-left: 5vw;
color: black;
font-family: "Poller One", cursive;
font-variant: small-caps;
font-size: 3rem;
margin-top: 6vh;
}
button {
color: white;
transition: 0.25s;
float: left;
margin: 2%;
}
button:hover,
button:focus {
border: 2px solid red;
color: black;
}
.fill {
height: 120px;
width: 150px;
background: transparent;
margin-top: 4vh;
outline: none;
border: none;
}
.fill:hover,
.fill:focus {
box-shadow: inset 0 0 0 4.5em #add8e6;
}
.sith:hover,
.sith:focus {
box-shadow: inset 0 0 0 4.5em black;
}
#buttons {
height: 100%;
width: 100vw;
padding-top: 10vh;
display: flex;
justify-content: center;
}
JS
document.querySelector("button").addEventListener("click", () => {
document.querySelector(".container").classList.toggle(".container.click");
});

There are a couple of changes you need to make to get this to work:
1. document.querySelector("button") is only selecting the first button. There are 2 you can add an event listener to the buttons
use document.querySelectorAll("button") to get all the buttons, and then you can loop through them adding an event Listener to each one:
document.querySelectorAll("button").forEach(function(button) {
button.addEventListener("click", () => {
document.querySelector(".container").classList.toggle("click");
});
});
A better way is to add an event listener to the buttons container - you can get the element using getElementById and then add the listener to it:
var buttons = document.getElementById("buttons");
buttons.addEventListener("click", (e) => {
document.querySelector(".container").classList.toggle("click");
});
2. You just use the class name when passing a class into toggle- you don't need the .. Also, you only need to toggle the click class as the container class will always apply. So what you need to use is .toggle("click");
Working Example (without your images):
var buttons = document.getElementById("buttons");
buttons.addEventListener("click", (e) => {
document.querySelector(".container").classList.toggle("click");
});
.container {
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
}
.container.click {
flex-direction: row;
justify-content: space-around;
}
h1 {
margin-left: 5vw;
color: black;
font-family: "Poller One", cursive;
font-variant: small-caps;
font-size: 3rem;
margin-top: 6vh;
}
button {
color: red;
transition: 0.25s;
float: left;
margin: 2%;
}
button:hover,
button:focus {
border: 2px solid red;
color: black;
}
.fill {
height: 120px;
width: 150px;
background: transparent;
margin-top: 4vh;
outline: none;
border: none;
}
.fill:hover,
.fill:focus {
box-shadow: inset 0 0 0 4.5em #add8e6;
}
.sith:hover,
.sith:focus {
box-shadow: inset 0 0 0 4.5em black;
}
#buttons {
height: 100%;
width: 100vw;
padding-top: 10vh;
display: flex;
justify-content: center;
}
<header>
<div class="container">
<h1>Choose Your Allegiance</h1>
<div id="buttons">
<button class="fill">Jedi</button>
<button class="fill sith">Sith</button>
</div>
</div>
</header>
As for animating this change, unfortunately CSS animations cannot be applied to flexbox direction property.

You are using classList.toggle wrong. You'll need to do this instead:
const container = document.querySelector(".container");
container.classList.toggle("click");
Documentation on Element.classList here.

Display none and block does not work via JavaScript

I am developing a single-page-website because it's cheaper at firebase to host. My problem is that I must manage different screens at the single HTML file. So I must make screens disappear and appear again. I want to do this with main_dashboard_page.style.display = 'none'; and main_dashboard_page.style.display = 'block';.
Here is my HTML code:
<!-- _______________________________________________________________________________________________________________________________________ -->
<!-- L O G I N P A G E -->
<!-- _______________________________________________________________________________________________________________________________________ -->
<div class="login_page" id="login_page">
<div class="card_view">
<div class="login_container" id="login_container">
<div class="wrap_login">
<div class="login_form validate-form">
<span class="login_form_title p-b-26">
Login
</span>
<div>
<label for="email_field">E-Mail</label>
<input type="text" id="email_field" name="email_field" placeholder="E-Mail">
<label for="password_field">Passwort</label>
<input type="password" id="password_field" name="password_field" placeholder="Passwort">
<input type="submit" value="Einloggen" onclick="login()">
</div>
<div class="center_text_container p-t-115">
<span class="txt1">
Du hast noch keinen Account?
</span>
<a class="txt2" onclick="goToSignUp()">
Registrieren
</a>
</div>
<div class="modal">
<div class="modal-content">
<h1 id="msg_title"><h1>
<p id="msg_content"></p>
<div id="lds-ellipsis" class="lds-ellipsis" style="display: none;"><div></div><div></div><div></div><div></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- _______________________________________________________________________________________________________________________________________ -->
<!-- M A I N P A G E -->
<!-- _______________________________________________________________________________________________________________________________________ -->
<div class="html_side_main" id="html_side_main">
<div class="toolbar">
<div class="centered_toolbar">
<img src="../images/logo.png" width="200px" height="auto" style="position: absolute; left: 0px; margin-left: 30px;"></img>
<ul>
<li class="active"></i>Dashboard</li>
<li></i>Notenliste</li>
</ul>
<i class="logout"></i>Logout
</div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class='main'>
<div class='main_padding'>
<div class='noten_stats'>
<p class="noten_stats_title">alpha_version: 1.0</p>
<div class="punkte_container">
<span class="punkte"></span>
<span class="punkte_text">Willkommen zur alpha version von kaffboard! Der Support ist rund um die Uhr erreichbar: raycroud#gmail.com</span>
</div>
</div>
</div>
</div>
</div>
As you can see I have two screens, which are represented as the divs:
1) ID: login_page
2) ID: html_side_main
Now the login_page should disapear and the html_side_main should appear, when user is logged in. I chek it with firebase as you could see in js:
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
changePage();
}
else {
var main_dashboard_page = document.getElementById("html_side_main");
main_dashboard_page.style.display = 'none';
}
});
function changePage() {
if (document.readyState === "complete") {
var login_page = document.getElementById("login_page");
var register_page = document.getElementById("register_page");
var main_dashboard_page = document.getElementById("html_side_main");
login_page.style.display = 'none';
main_dashboard_page.style.display = 'block';
}
As I heared that the css has a higher priority in the display of elements I would post the CSS here too:
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* F O N T */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
#font-face {
font-family: Poppins-Regular;
src: url('../public/fonts/poppins/Poppins-Regular.ttf');
}
#font-face {
font-family: Poppins-Medium;
src: url('../public/fonts/poppins/Poppins-Medium.ttf');
}
#font-face {
font-family: Poppins-Bold;
src: url('../public/fonts/poppins/Poppins-Bold.ttf');
}
#font-face {
font-family: Poppins-SemiBold;
src: url('../public/fonts/poppins/Poppins-SemiBold.ttf');
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
}
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* L O G I N P A G E */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
a {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
}
a:focus {
outline: none !important;
}
a:hover {
text-decoration: none;
color: #6a7dfe;
color: -webkit-linear-gradient(left, #21d4fd, #b721ff);
color: -o-linear-gradient(left, #21d4fd, #b721ff);
color: -moz-linear-gradient(left, #21d4fd, #b721ff);
color: linear-gradient(left, #21d4fd, #b721ff);
}
/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
margin: 0px;
}
label {
color: #fff;
}
p {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
}
ul, li {
margin: 0px;
list-style-type: none;
}
/*---------------------------------------------*/
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
}
textarea:focus, input:focus {
border-color: transparent !important;
}
button {
outline: none !important;
border: none;
background: transparent;
}
button:hover {
cursor: pointer;
}
iframe {
border: none !important;
}
.card_view {
width: 100%;
margin: 0 auto;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 9px; /* 5px rounded corners */
}
.login_container {
width: 100%;
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 15px;
background-color: rgba(38, 38, 38, 1);
}
.wrap_login {
width: 390px;
background-color: rgba(48, 48, 48, 1);
border-radius: 10px;
overflow: hidden;
padding: 77px 55px 33px 55px;
box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
}
/* Add rounded corners to the top left and the top right corner of the image */
img {
border-radius: 9px 9px 0 0;
}
.container {
padding: 2px 16px;
}
/*------------------------------------------------------------------
[ Form ]*/
.login_form {
width: 100%;
}
.login_form_title {
display: block;
font-family: Poppins-Bold;
font-size: 30px;
color: #fff;
line-height: 1.2;
text-align: center;
}
.login_form_title i {
font-size: 60px;
}
input, select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid rgba(48, 48, 48, 1);
border-radius: 4px;
box-sizing: border-box;
background-color: rgba(38, 38, 38, 1);
}
input[type=submit] {
background-color: rgba(6, 132, 134, 255);
font-family: Poppins-Medium;
}
input[type=submit]:hover {
background-color: rgba(8, 160, 163, 255);
cursor: pointer;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: rgba(92, 92, 92, 1);
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: rgba(92, 92, 92, 1);
}
::-ms-input-placeholder { /* Microsoft Edge */
color: rgba(92, 92, 92, 1);
}
input, select, textarea{
color: #fff;
}
/*//////////////////////////////////////////////////////////////////
[ Utility ]*/
.txt1 {
font-family: Poppins-Regular;
font-size: 13px;
color: #666666;
line-height: 1.5;
}
.txt2 {
font-family: Poppins-Regular;
font-size: 13px;
color: #fff;
line-height: 1.5;
cursor: pointer;
}
.txt2:hover {
color: rgba(6, 132, 134, 255);
}
.center_text_container {
text-align: center;
vertical-align: middle;
line-height: 50px;
}
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* M A I N P A G E */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
.html_side_main {
float: left;
height: auto;
width: 100%;
}
.html_side_main {
height: 100%;
}
/*TOOLBAR*/
.html_side_main .toolbar {
list-style-type: none;
height: 90px;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(48, 48, 48, 1);
}
.html_side_main .centered_toolbar {
display: flex;
align-items: center;
justify-content: center;
}
.html_side_main ul {
list-style-type: none;
list-style: none;
}
.html_side_main li {
float: left;
}
.html_side_main a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.html_side_main a:hover {
color: #cccccc;
}
/* MAIN */
.html_side_main .main_padding {
padding: 15px;
width: 100%;
}
.html_side_main .noten_stats {
height: 200px;
background: #cc2b5e;
background: -webkit-linear-gradient(to right, #753a88, #cc2b5e);
background: linear-gradient(to right, #753a88, #cc2b5e);
border-radius: 5px;
box-shadow: 1px 1px 5px #ddd;
}
.html_side_main .noten_stats_title {
color: #ffffff;
padding: 20px;
font-family: Montserrat-Medium;
}
.html_side_main .punkte_container{
height: 80%;
margin: auto;
width: 50%;
display: flex;
justify-content: center;
align-items: baseline;
}
.html_side_main .punkte {
color: #ffffff;
font-size: 50px;
font-family: Montserrat-Bold;
}
.html_side_main .punkte_text {
color: #ffffff;
font-family: Montserrat-Medium;
}
PROBLEM:
To set the display option in js does not work. First both of the divs are shown and when user logged in both of them disapear. I don't know why, but please can you help me to fix this this problem? Because the website is basicly finished, and I only have to convert it to a one html file.
Thanks in advance.

In isolation of a codepen, this works:
function setStyle(propValue){
console.log(propValue)
var main_dashboard_page = document.getElementById("html_side_main");
main_dashboard_page.style.display = propValue
}
Thus it is not a js⇄css problem. (as your title suggests)
Look deeper into your firebase events, add some console.log() into the code to verify, things actually get called, when you expect them to.
Generally, try to isolate your problem further and further (remove all unrelated clutter, i.e. your inner and unrelated html) as long as the problem persists...
As I heared that the css has a higher priority in the display of elements
Not true. Precedence is from lowest to highest:
Browser default
External style sheet (like yours)
Internal style sheet (commonly in <head>)
Inline style
...javascript runtime changes of CSS properties are a 4., they change the inline styles (at runtime, after DOM construction, so they are also higher than pre-exisiting inline styles), as you can also inspect with your browser's dev tools.
Your problem is much more trivial. Your #login_page is a parent of your #html_side_main, thus hiding it hides all. You are one closing </div> short. If your intend is to have two neighbouring (not nested) elements, probably meant to be somewhere around line :63.
(This is, why isolation aka damping down is good :-)

I would recommend to not use .style on a DOM node. Instead, I would recommend to create a class in css like:
.display-none {
display: none;
}
and then add the class via javascript:
login_page.className += " display-none";
That way you will have all your styles in your css and not in your javascript