How do add an animated button in my css and html - javascript

I am new to CSS and downloaded a pre-made login page online.
I wanted to customize and add some effects when the user clicks the button and after 2 days of research but I got nothing.
It would be great if could get some tips on how do I set up.
this is the animation I am trying to achieve: "https://codemyui.com/submit-button-loading-animation-click/"
here's my HTML.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css'>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container" id="container">
<div class="form-container sign-up-container">
<form id="signup-form">
<h1>Create Account</h1>
<span><br>Use your Email for Registration</span>
<input type="text" placeholder="Name" id="up_name" />
<input type="email" placeholder="Email" id="up_email"/>
<input type="password" placeholder="Password" id="up_password"/>
<button id="signUpBtn">Sign Up</button>
</form>
</div>
<div class="form-container sign-in-container">
<form id="signin-form">
<h1>Sign in</h1>
<span><br>Use your Email Account to Login</span>
<input type="email" placeholder="Email" id="in_email"/>
<input type="password" placeholder="Password" id="in_password"/>
<button id="signInBtn">Sign In</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>To keep connected with us please login with your personal info</p>
<button class="ghost" id="gotoSignIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start journey with us</p>
<button class="ghost" id="gotoSignUp">Sign Up</button>
</div>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-analytics.js"></script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyBCmpcDvnsftFfAIIodb5IgGUdpsiSAjwQ",
authDomain: "feb-ekka.firebaseapp.com",
databaseURL: "https://feb-ekka.firebaseio.com",
projectId: "feb-ekka",
appId: "1:454540852080:web:0285ef92b9a933b28dedb5",
measurementId: "G-Z8MLYNTN54"
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();
const auth = firebase.auth();
const db = firebase.firestore();
</script>
<script src="script.js"></script>
<script src="authen.js"></script>
</body>
</html>
here's my CSS.
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
* {
box-sizing: border-box;
}
body {
background: #f6f5f7;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Montserrat', sans-serif;
height: 100vh;
margin: 0px;
}
h1 {
font-weight: bold;
margin: 0;
}
h2 {
text-align: center;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button {
border-radius: 20px;
border: 1px solid #FF4B2B;
background-color: #FF4B2B;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #FFFFFF;
}
form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 100%;
max-width: 100%;
min-height: 100%;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
#keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay {
background: #FF416C;
background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
background: linear-gradient(to right, #FF4B2B, #FF416C);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #DDDDDD;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
footer {
background-color: #222;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
}
footer p {
margin: 10px 0;
}
footer i {
color: red;
}
footer a {
color: #3c97bf;
text-decoration: none;
}
my Script.js
const gotoSignUpButton = document.getElementById('gotoSignUp');
const gotoSignInButton = document.getElementById('gotoSignIn');
const container = document.getElementById('container');
gotoSignUpButton.addEventListener('click', () => {
container.classList.add("right-panel-active");
});
gotoSignInButton.addEventListener('click', () => {
container.classList.remove("right-panel-active");
});
and my authen.js (which I think isn't needed)
//listen for auth status changes
auth.onAuthStateChanged(user => {
if(user != null){
JavascriptInterface.toast("Login Successful!!");
JavascriptInterface.openMain(user.uid);
}
})
////logout
//const logout = document.querySelector('#lgout');
//logout.addEventListener('click',(e) => {
// e.preventDefault();
// auth.signOut();
//});
//signup
const signupForm = document.querySelector('#signup-form');
const signinForm = document.querySelector('#signin-form');
signupForm.addEventListener('submit',(e) => {
e.preventDefault();
//get user Info
const name = signupForm['up_name'].value;
const email = signupForm['up_email'].value;
const password = signupForm['up_password'].value;
//signup the user
auth.createUserWithEmailAndPassword(email,password).then(cred => {
return db.collection('users').doc(cred.user.uid).set({
name: signupForm['up_name'].value,
email: signupForm['up_email'].value,
password: signupForm['up_password'].value
})
}).then(() => {
signupForm.reset();
container.classList.remove("right-panel-active");
});
});
signinForm.addEventListener('submit',(e) => {
e.preventDefault();
//get user Info
const email = signinForm['in_email'].value;
const password = signinForm['in_password'].value;
//signin the user
auth.signInWithEmailAndPassword(email,password).then(cred => {
signinForm.reset();
});
});
auth.setPersistence(firebase.auth.Auth.Persistence.NONE)
Well Thanks in advance :)


Something like this?
You can just change the styling and make it more appealing.
var button = document.getElementById("button");
button.addEventListener('click', function(){
button.innerHTML = "Wait...";
button.classList.add("loading");
button.classList.remove("submit");
setTimeout(function()
{
if(button.classList.contains("loading"))
{
button.classList.remove("loading");
button.innerHTML = "Success";
button.classList.add("success");
}
}, 3000);
});
#keyframes rotate{
from{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(360deg);
}
}
.container{
width: 180px;
}
div#button{
box-sizing: border-box;
width: 100%;
margin: 0 auto;
}
.loading{
max-width: 50px;
height: 50px;
border-width: 5px;
border-color: transparent #27a80c transparent #27a80c;
border-style: solid;
border-radius: 25px;
background-color: transparent;
font-size: 10px;
text-align: center;
line-height: 40px;
color: #27a80c;
animation: rotate 1s infinite;
}
.submit, .success{
text-align: center;
max-width: 120px;
padding: 15px;
border: thin solid transparent;
background-color: white;
transition: background-color color .25s ease;
border-radius: 5px;
cursor: pointer;
height: 50px;
}
.submit{
border-color: red;
color: red;
}
.success{
border-color: #27a80c;
color: white;
background-color: #27a80c;
}
.submit:hover{
background-color: red;
color: white;
}
<div class="container">
<div class="submit" id="button">
Submit
</div>
</div>

Related

Problema de transición

I have a problem when it comes to making a transition for a design that I am taking as a basis for a project.
The problem is that, when I press the register button, it should show the registration section by means of a scroll to the left and it does not do so.
I want to know how I could fix the problem and know if it is any error in the id .
const signUpButton = document.getElementById('signUp');
const logInButton = document.getElementById('logIn');
const container = document.getElementById('container');
signUpButton.addEventListener('click',()=>{
container.classList.add('right-panel-active');
});
logInButton.addEventListener('click', ()=>{
container.classList.remove('right-panel-active');
});
#import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
*{
box-sizing: border-box;
}
body{
background: #0E1119;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Lobster',cursive;
height: 100vh;
margin: -20px 0 50px;
}
h1{
font-weight: bold;
margin: 0;
}
h2{
text-align: center;
}
p{
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 1px;
margin: 20px 0 30px;
}
span{
font-size: 12px;
}
a{
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button{
border-radius: 20px;
border: none;
background-color: #3F2EFF;
color: white;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active{
transform: scale(0.95);
}
button:focus{
outline: none;
}
button.ghost{
background-color: transparent;
border: 1px solid white;
transition: 0.5s;
}
button.ghost:hover{
background-color: white;
color: #0E1119;
cursor: pointer;
}
form{
background-color: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
input{
background: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container{
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container{
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.log-in-container{
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active.log-in-container{
transform: translateX(100%);
}
.sign-up-container{
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active.sign-up-container{
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
#keyframes show {
0%,
49.99%{
opacity: 0;
z-index: 1;
}
50%,
100%{
opacity: 1;
z-index: 5;
}
}
.overlay-container{
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active.overlay-container{
transform: translateX(-100%);
}
.overlay{
background: #FF416C;
background: linear-gradient(142.18deg, #37ff48 0%, #36fef7 98.85%);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #000000;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active.overlay{
transform: translateX(50%);
}
.overlay-panel{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left{
transform: translateX(-20%);
}
.container.right-panel-active.overlay-left{
transform: translateX(0);
}
.overlay-right{
right: 0;
transform: translateX(0);
}
.container.right-panel-active.overlay-right{
transform: translateX(20%);
}
.social-container{
margin: 20px 0;
}
.social-container a{
border: 1px solid #1a9889;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="styLogin.css">
</head>
<body>
<div class="container" id="container">
<div class="form-container sign-up-container">
<form action="#">
<h1>Crear cuenta</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>Usa tu correo para registrarte</span>
<input type="text" placeholder="Nombre"/>
<input type="email" placeholder="Correo"/>
<input type="password" placeholder="Contraseña"/>
<button id="btnR">Registrarme</button>
</form>
</div>
<div class="form-container log-in-container">
<form action="#">
<h1>Iniciar Sesión</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>Usar cuenta</span>
<input type="email" placeholder="Correo"/>
<input type="password" placeholder="Contraseña"/>
¿Olvidaste tu contraseña?
<button>Iniciar sesión</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>¡Bienvenido de nuevo!</h1>
<p>¿Ya tienes una cuenta? Inicia sesión</p>
<button class="ghost" id="logIn">Iniciar sesión</button>
</div>
<div class="overlay-panel overlay-right">
<h1>¡Ey hola!</h1>
<p>¿No tienes una cuenta? ¡Crea una gratis!</p>
<button class="ghost" id="signUp">Registrarme</button>
</div>
</div>
</div>
</div>
<script src="log.js"></script>
</body>
</html>

const signUpButton = document.getElementById('signUp');
const logInButton = document.getElementById('logIn');
const container = document.getElementById('container');
signUpButton.addEventListener('click',()=>{
container.classList.add('right-panel-active');
});
logInButton.addEventListener('click', ()=>{
container.classList.remove('right-panel-active');
});
#import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
*{
box-sizing: border-box;
}
body{
background: #0E1119;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Lobster',cursive;
height: 100vh;
margin: -20px 0 50px;
}
h1{
font-weight: bold;
margin: 0;
}
h2{
text-align: center;
}
p{
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 1px;
margin: 20px 0 30px;
}
span{
font-size: 12px;
}
a{
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button{
border-radius: 20px;
border: none;
background-color: #3F2EFF;
color: white;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active{
transform: scale(0.95);
}
button:focus{
outline: none;
}
button.ghost{
background-color: transparent;
border: 1px solid white;
transition: 0.5s;
}
button.ghost:hover{
background-color: white;
color: #0E1119;
cursor: pointer;
}
form{
background-color: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
input{
background: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container{
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container{
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.log-in-container{
left: 0;
width: 50%;
z-index: 2;
}
.right-panel-active .log-in-container{
transform: translateX(100%);
}
.sign-up-container{
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.right-panel-active .sign-up-container{
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
#keyframes show {
0%,
49.99%{
opacity: 0;
z-index: 1;
}
50%,
100%{
opacity: 1;
z-index: 5;
}
}
.overlay-container{
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay{
background: #FF416C;
background: linear-gradient(142.18deg, #37ff48 0%, #36fef7 98.85%);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #000000;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.right-panel-active .overlay{
transform: translateX(50%);
}
.overlay-panel{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left{
transform: translateX(-20%);
}
.right-panel-active .overlay-left{
transform: translateX(0);
}
.overlay-right{
right: 0;
transform: translateX(0);
}
.right-panel-active .overlay-right{
transform: translateX(20%);
}
.social-container{
margin: 20px 0;
}
.social-container a{
border: 1px solid #1a9889;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="styLogin.css">
</head>
<body>
<div class="container" id="container">
<div class="form-container sign-up-container">
<form action="#">
<h1>Crear cuenta</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>Usa tu correo para registrarte</span>
<input type="text" placeholder="Nombre"/>
<input type="email" placeholder="Correo"/>
<input type="password" placeholder="Contraseña"/>
<button id="btnR">Registrarme</button>
</form>
</div>
<div class="form-container log-in-container">
<form action="#">
<h1>Iniciar Sesión</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>Usar cuenta</span>
<input type="email" placeholder="Correo"/>
<input type="password" placeholder="Contraseña"/>
¿Olvidaste tu contraseña?
<button>Iniciar sesión</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>¡Bienvenido de nuevo!</h1>
<p>¿Ya tienes una cuenta? Inicia sesión</p>
<button class="ghost" id="logIn">Iniciar sesión</button>
</div>
<div class="overlay-panel overlay-right">
<h1>¡Ey hola!</h1>
<p>¿No tienes una cuenta? ¡Crea una gratis!</p>
<button class="ghost" id="signUp">Registrarme</button>
</div>
</div>
</div>
</div>
<script src="log.js"></script>
</body>
</html>
I edited in CSS.

Toggle text inside a button

I want the text to change whenever I toggle the open contact btn to "close contact" and when I click on it, It reverts back to "open contact" and continues that way.
Should I give it an id and then use the arrow function and add eventListener, Or should I just use plain onclick?
const btn = document.getElementById("click_contact")
const form = document.getElementById("message_form")
btn.addEventListener('click', () => {
form.classList.toggle('open')
})
<div class="cta_btn_contact">
<button id="click_contact" class="btn3 cta-btn3">open contact</button>
</div>

The easiest way to to just add a line that toggle the Text with textContent between 2 defined text as below:
const btn = document.getElementById("click_contact")
const form = document.getElementById("message_form")
btn.addEventListener('click', () => {
let text = btn.textContent;
btn.textContent = text == 'OPEN CONTACT' ? 'CLOSE CONTACT' : 'OPEN CONTACT';
})
* {
margin: 0;
padding: 0;
font-family: "poppins";
box-sizing: border-box;
}
.btn_sub {
margin: 10px 35%;
border-radius: 3px;
}
.btn3 {
position: relative;
background: transparent;
border-top: 1px solid var(--maincolor);
border-bottom: 1px solid var(--maincolor);
border-left: none;
border-right: none;
padding: 6px 12px;
text-transform: uppercase;
font-size: 1rem;
font-weight: 500;
letter-spacing: 1px;
color: black;
overflow: hidden;
transition: 0.5s ease all;
cursor: pointer;
z-index: 12;
}
.btn3:hover {
color: var(--primarycolor);
}
.btn3::before {
content: '';
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
width: 100%;
cursor: pointer;
height: 100%;
background-color: var(--maincolor);
transition: 0.5s ease all;
}
.cta-btn3 {
color: black;
}
.cta-btn3::before {
transform: translate(-50%, -50%) rotate(45deg);
width: 100%;
height: 0;
z-index: -1;
}
.cta-btn3:hover::before {
height: 500%;
width: 100%;
transition: 0.5s ease all;
}
.cta_btn_contact {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
<div class="cta_btn_contact">
<button id="click_contact" class="btn3 cta-btn3">open contact</button>
</div>

You can use ternary operator to change the textContent of the button based on its present content.
const btn = document.getElementById("click_contact")
//const form = document.getElementById("message_form")
const div = document.getElementById("testDiv")
btn.addEventListener('click', () => {
btn.textContent = btn.textContent === "open contact" ? "close contact" : "open contact";
div.classList.toggle('open')
})
* {
margin: 0;
padding: 0;
font-family: "poppins";
box-sizing: border-box;
}
.btn_sub {
margin: 10px 35%;
border-radius: 3px;
}
.btn3 {
position: relative;
background: transparent;
border-top: 1px solid var(--maincolor);
border-bottom: 1px solid var(--maincolor);
border-left: none;
border-right: none;
padding: 6px 12px;
text-transform: uppercase;
font-size: 1rem;
font-weight: 500;
letter-spacing: 1px;
color: black;
overflow: hidden;
transition: 0.5s ease all;
cursor: pointer;
z-index: 12;
}
.btn3:hover {
color: var(--primarycolor);
}
.btn3::before {
content: '';
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
width: 100%;
cursor: pointer;
height: 100%;
background-color: var(--maincolor);
transition: 0.5s ease all;
}
.cta-btn3 {
color: black;
}
.cta-btn3::before {
transform: translate(-50%, -50%) rotate(45deg);
width: 100%;
height: 0;
z-index: -1;
}
.cta-btn3:hover::before {
height: 500%;
width: 100%;
transition: 0.5s ease all;
}
.cta_btn_contact {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#testDiv{
width: 50px;
height: 50px;
background: yellow;
}
#testDiv.open {
background: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- CONTACT -->
<div class="cta_btn_contact">
<button id="click_contact" class="btn3 cta-btn3">open contact</button>
</div>
<div id="testDiv"></div>
</body>
</html>

Signup page only allows the test email and password

I couldn't connect to firebase at all and make let the users create accounts with the signup functions and I had asked my friend for help.. He did some and it connected to firebase but now it only says the email you used is already in use.. I want it to let users type in their own email and be able to create an account..
<h2>Make an account with us or log in</h2>
<div class="container" id="container">
<div class="form-container sign-up-container">
<form action="#">
<h1>Create Account</h1>
<span>or use your email for registration</span>
<input type="text" placeholder="Name" id="signupName" >
<input type="email" placeholder="Email" id="signupEmail" />
<input type="password" placeholder="Password" id="signupPassword" />
<input type="button" id="signup" value= "signup" onclick="signUp()"/>
<button onsubmit="signup()">signUp</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Sign in</h1>
<span>or use your account</span>
<input type="email" placeholder="Email" id="loginEmail" />
<input type="password" placeholder="Password" id="loginPassword" />
Forgot your password?
<button>Sign In</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>To keep connected with us please login with your personal info</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start journey with us</p>
<button class="ghost" id="signUp">Sign Up</button>
</div>
</div>
</div>
</div>
here's the CSS
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
* {
box-sizing: border-box;
}
body {
background:white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Montserrat', sans-serif;
height: 100vh;
margin: -20px 0 50px;
}
h1 {
font-weight: bold;
margin: 0;
}
h2 {
text-align: center;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button {
border-radius: 20px;
border: 1px solid #FF4B2B;
background-color: #FF4B2B;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #FFFFFF;
}
form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
#keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay {
background: #FF416C;
background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
background: linear-gradient(to right, #FF4B2B, #FF416C);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #DDDDDD;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
footer {
background-color: #222;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
}
footer p {
margin: 10px 0;
}
footer i {
color: red;
}
footer a {
color: #3c97bf;
text-decoration: none;
}
and the actual js that my friend did
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-analytics.js";
import { initializeAuth, getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.5.0/firebase-auth.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "",
authDomain: "firebear-34281.firebaseapp.com",
databaseURL: "https://firebear-34281-default-rtdb.firebaseio.com",
projectId: "firebear-34281",
storageBucket: "firebear-34281.appspot.com",
messagingSenderId: "642455892026",
appId: "",
measurementId: "G-ZHVQEHH0FQ"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const auth = getAuth();
createUserWithEmailAndPassword(auth, 'test#test.com', 'password')
.then((userCredential) => {
// Signed in
const user = userCredential.user;
alert('Signed in');
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
alert(error)
// ..
});

Contact form sending message to specified address

I was wondering how would I be able to send the message entered from the form box above, to a specific email address, while using the users entered email as the sending address? Is this possible to accomplish through html or would I have to use some sort of JavaScript to accomplish this? Anything helps and thanks in advance!
<script>
const inputs = document.querySelectorAll(".input");
function focusFunc() {
let parent = this.parentNode;
parent.classList.add("focus");
}
function blurFunc() {
let parent = this.parentNode;
if (this.value == "") {
parent.classList.remove("focus");
}
}
inputs.forEach((input) => {
input.addEventListener("focus", focusFunc);
input.addEventListener("blur", blurFunc);
});
</script>
<style>
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#200;300;400;500;600;700&display=swap');
#font-face { font-family: Raleway; src: url('https://fonts.googleapis.com/css2?family=Raleway:wght#200;300;400;500;600;700&display=swap');}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
input,
textarea {
font-family: Raleway;
}
.container {
position: relative;
width: 100%;
min-height: 100vh;
padding: 2rem;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.form {
width: 100%;
max-width: 820px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
z-index: 1000;
overflow: hidden;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.contact-form {
background-color: #3A81B4;
position: relative;
}
.circle {
border-radius: 50%;
background: linear-gradient(135deg, transparent 20%, #2d6a96);
position: absolute;
}
.circle.one {
width: 130px;
height: 130px;
top: 130px;
right: -40px;
}
.circle.two {
width: 80px;
height: 80px;
top: 10px;
right: 30px;
}
.contact-form:before {
content: "";
position: absolute;
width: 26px;
height: 26px;
background-color: #3A81B4;
transform: rotate(45deg);
top: 50px;
left: -13px;
}
form {
padding: 2.3rem 2.2rem;
z-index: 10;
overflow: hidden;
position: relative;
}
.title {
color: #fff;
font-weight: 500;
font-size: 1.5rem;
line-height: 1;
margin-bottom: 0.7rem;
}
.input-container {
position: relative;
margin: 1rem 0;
}
.input {
width: 100%;
outline: none;
border: 2px solid #fafafa;
background: none;
padding: 0.6rem 1.2rem;
color: #fff;
font-weight: 500;
font-size: 0.95rem;
letter-spacing: 0.5px;
border-radius: 7px;
transition: 0.3s;
}
textarea.input {
padding: 0.8rem 1.2rem;
min-height: 150px;
border-radius: 7px;
resize: none;
overflow-y: auto;
}
.input-container label {
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
padding: 0 0.4rem;
color: #fafafa;
font-size: 0.9rem;
font-weight: 400;
pointer-events: none;
z-index: 1000;
transition: 0.5s;
}
.input-container.textarea label {
top: 1rem;
transform: translateY(0);
}
.btn {
padding: 0.6rem 1.3rem;
background-color: #fff;
border: 2px solid #fafafa;
font-size: 0.95rem;
color: #1880c9;
line-height: 1;
border-radius: 25px;
outline: none;
cursor: pointer;
transition: 0.3s;
margin: 0;
}
.btn:hover {
background-color: transparent;
color: #fff;
}
.input-container span {
position: absolute;
top: 0;
left: 25px;
transform: translateY(-50%);
font-size: 0.8rem;
padding: 0 0.4rem;
color: transparent;
pointer-events: none;
z-index: 500;
}
.input-container span:before,
.input-container span:after {
content: "";
position: absolute;
width: 10%;
opacity: 0;
transition: 0.3s;
height: 5px;
background-color: #3A81B4;
top: 50%;
transform: translateY(-50%);
}
.input-container span:before {
left: 50%;
}
.input-container span:after {
right: 50%;
}
.input-container.focus label {
top: 0;
transform: translateY(-50%);
left: 25px;
font-size: 0.8rem;
}
.input-container.focus span:before,
.input-container.focus span:after {
width: 50%;
opacity: 1;
}
.contact-info {
padding: 2.3rem 2.2rem;
position: relative;
}
.contact-info .title {
color: #1880c9;
}
.text {
color: #333;
margin: 1.5rem 0 2rem 0;
}
.information {
display: flex;
color: #555;
margin: 0.7rem 0;
align-items: center;
font-size: 0.95rem;
}
.icon {
width: 28px;
margin-right: 0.7rem;
}
.social-media {
padding: 2rem 0 0 0;
}
.social-media p {
color: #333;
}
.social-icons {
display: flex;
margin-top: 0.5rem;
}
.social-icons a {
width: 35px;
height: 35px;
border-radius: 5px;
background: linear-gradient(45deg, #3A81B4, #2d6a96);
color: #fff;
text-align: center;
line-height: 35px;
margin-right: 0.5rem;
transition: 0.3s;
}
.social-icons a:hover {
transform: scale(1.05);
}
.square {
position: absolute;
height: 400px;
top: 50%;
left: 50%;
transform: translate(181%, 11%);
opacity: 0.2;
}
#media (max-width: 850px) {
.form {
grid-template-columns: 1fr;
}
.contact-info:before {
bottom: initial;
top: -75px;
right: 65px;
transform: scale(0.95);
}
.contact-form:before {
top: -13px;
left: initial;
right: 70px;
}
.square {
transform: translate(140%, 43%);
height: 350px;
}
.big-circle {
bottom: 75%;
transform: scale(0.9) translate(-40%, 30%);
right: 50%;
}
.text {
margin: 1rem 0 1.5rem 0;
}
.social-media {
padding: 1.5rem 0 0 0;
}
}
#media (max-width: 480px) {
.container {
padding: 1.5rem;
}
.contact-info:before {
display: none;
}
.square,
.big-circle {
display: none;
}
form,
.contact-info {
padding: 1.7rem 1.6rem;
}
.text,
.information,
.social-media p {
font-size: 0.8rem;
}
.title {
font-size: 1.15rem;
}
.social-icons a {
width: 30px;
height: 30px;
line-height: 30px;
}
.icon {
width: 23px;
}
.input {
padding: 0.45rem 1.2rem;
}
.btn {
padding: 0.45rem 1.2rem;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Form</title>
</head>
<body>
<div class="container">
<span class="big-circle"></span>
<img class="square" alt="" />
<div class="form">
<div class="contact-info">
<h3 class="title">Let's get <b>in touch</b></h3>
<p class="text">
Feel free to send us an email with any inquiries; one of our receptionists will reach out to you as sson as possible.
</p>
<div class="info">
<div class="information">
<img src="https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/master/img/location.png " class="icon" alt="" />
<p></p>
</div>
<div class="information">
<img src="https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/master/img/email.png" class="icon" alt="" />
<p></p>
</div>
<div class="information">
<img src="https://raw.githubusercontent.com/sefyudem/Contact-Form-HTML-CSS/master/img/phone.png" class="icon" alt="" />
<p></p>
</div>
</div>
<div class="social-media">
<p>Connect with us :</p>
<div class="social-icons">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#">
<i class="fab fa-twitter"></i>
</a>
<a href="#">
<i class="fab fa-instagram"></i>
</a>
<a href="#">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
<div class="contact-form">
<span class="circle one"></span>
<span class="circle two"></span>
<form action="index.html" autocomplete="off">
<h3 class="title">Contact us</h3>
<div class="input-container">
<input type="text" name="name" class="input" />
<label for="">Username</label>
<span>Username</span>
</div>
<div class="input-container">
<input type="email" name="email" class="input" />
<label for="">Email</label>
<span>Email</span>
</div>
<div class="input-container">
<input type="tel" name="phone" class="input" />
<label for="">Phone</label>
<span>Phone</span>
</div>
<div class="input-container textarea">
<textarea name="message" class="input"></textarea>
<label for="">Message</label>
<span>Message</span>
</div>
<input type="submit" value="Send" class="btn" />
</form>
</div>
</div>
</div>
</body>
</html>

yes just use some link like this for in html to send an email:
<a id="email-link" href="mailto:email#example.com?cc=secondemail#example.com, anotheremail#example.com, &bcc=lastemail#example.com&subject=Mail from our Website&body=Some body text here">Send Email</a>
and you can make it change when user change the box message:
function changeLinkHref(){
let message_content = document.getElementById("message-text-area").value;
let name = document.getElementById("name-input").value;
document.getElementById("email-link").href = "mailto:yourmail#yourdomain.zone?&subject=subject&body=" + name + "%0A" + message_content ;
}
and call the function when text-area and text input get changed.
in a tag href attribute body section you can append your email text with htmlEncodedNewLine (%0A)

HTML + CSS | Issue with main content not overlapping with nav bar

I have a main content area, which I want to be centered in the page both vertically and horizontally.
I added a css nav bar, but now the page has scroll bars both vertically and horizontally, and the main div is no longer centered. It appears to be moved to the right and down by the nav bar. I'm trying to have the main sit centrally, and then the nav "overlay" everything else so it doesn't affect the main div's positioning.
I think it has something to do with z-index but changing those values doesn't seem to achieve anything. Could anyone direct me to a resource to learn about the right way to fix this?
Thank you.
(It's all pretty scrappy as I'm just beginning to learn!)
const textElement = document.getElementById('text')
const optionButtonsElement = document.getElementById('option-buttons')
let state = {}
function startGame() {
state = {};
showTextNode(1);
}
function showTextNode(textNodeIndex) {
const textNode = textNodes.find(textNode => textNode.id === textNodeIndex);
textElement.innerText = textNode.text;
while(optionButtonsElement.firstChild) {
optionButtonsElement.removeChild(optionButtonsElement.firstChild);
}
document.getElementById('image').style.display = "block"
textNode.imageLink ? document.getElementById('image').style.backgroundImage = `url(${textNode.imageLink})` : document.getElementById('image').style.display = "none";
textNode.options.forEach(option => {
if(showOption(option)) {
const button = document.createElement('button');
button.innerText = option.text;
button.classList.add('btn')
button.addEventListener('click', () => selectOption(option));
optionButtonsElement.appendChild(button);
}
})
}
function showOption(){
return true;
}
function selectOption(option) {
const nextTextNodeId = option.nextText;
state = Object.assign(state, option.setState)
showTextNode(nextTextNodeId)
}
const textNodes = [
{
id: 1,
text: 'Case Study: BioPharma Expansion',
options: [
{
text: 'Start',
setState: {},
nextText: 2
}
]
},
{
id: 2,
text: 'Your client is BioPharma, a multinational healthcare company headquartered in the Netherlands',
options: [
{
text: "I'd like to know more about BioPharma's revenue",
setState: {},
nextText: 3
},
{
text: "I'd like to know more about BioPharma's cost structure",
setState: {},
nextText: 3
}
]
},
{
id: 3,
text: "BioPharma's revenue has increased year on year by 12% since 2014",
options: [
{
text: "What about costs?",
setState: {},
nextText: 4
}
]
},
{
id: 4,
text: "BioPharma's cost structure is shown below in Figure 1",
imageLink: "figure1a.png",
options: [
{
text: "Here is some stuff",
}
]
}
]
startGame();
*, *::before, *::after {
box-sizing: border-box;
}
.nav {
z-index: 1;
}
body {
z-index: 0;
background-color: black;
width: 100vw;
height: 100vh;
}
.main {
z-index: 0;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
font-family: 'Times New Roman', Times, serif;
}
#menuToggle {
display: block;
position: absolute;
top: 40px;
left: 40px;
z-index: 2;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a {
text-decoration: none;
color: white;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: tomato;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 3;
-webkit-touch-callout: none;
}
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: white;
border-radius: 3px;
z-index: 2;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#menuToggle input:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: none;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menuToggle input:checked ~ ul
{
transform: none;
}
.container {
width: 1000px;
height: 90%;
max-width: 80%;
background-color: white;
border-radius: 7px;
box-shadow: 0 0 10px 2px;
display: grid;
grid-template-rows: 60% 40%;
}
.container-lower {
border-top: 10px solid rgba(0,0,0,1);
position: relative;
}
.container-upper {
position: relative;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(1, auto);
gap: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.btn {
background-color: white;
border: 2px solid black;
border-radius: 5px;
padding: 10px 10px;
width: 400px;
color: black;
outline: none;
font-size: 25px;
font-family: 'Times New Roman', Times, serif;
}
.btn:hover {
border-color: grey;
color: grey;
}
#text {
font-size: 30px;
text-align: center;
}
#image {
width: 650px;
height: 150px;
background-repeat: no-repeat;
margin: 40px auto 0px auto;
background-size: 650px 150px;
}
.wrapper {
width: 70%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<script defer src="game.js"></script>
<title>Case Study 1</title>
</head>
<body>
<div class="nav">
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>About</li>
</a>
<a href="#">
<li>Info</li>
</a>
<a href="#">
<li>Contact</li>
</a>
</ul>
</div>
</div>
<div class="main">
<div class="container">
<div class="container-upper">
<div class="wrapper">
<div id="text" class="text">Text</div>
<div id="image"></div>
</div>
</div>
<div class="container-lower">
<div id="option-buttons" class="btn-grid">
<button class="btn">Option 1</button>
<button class="btn">Option 2</button>
<button class="btn">Option 3</button>
</div>
</div>
</div>
</div>
</body>

you can set the body padding & margin to 0,
body {
z-index: 0;
background-color: black;
width: 100vw;
height: 100vh;
padding: 0;
margin: 0
}
this solves your current problem, but may get the same problem again in other divs, what I usually do is to set all paddings and margins to zero. like this
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
You need to learn how to debug your css: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS

The problem is not with your navbar but with the body of your webpage. Just add margin: 0 and padding: 0 to your body and the scrollbars should disappear.
Check and run the following Code Snippet or this CodePen for a practical example of your webpage with the margin: 0 property added:
const textElement = document.getElementById('text')
const optionButtonsElement = document.getElementById('option-buttons')
let state = {}
function startGame() {
state = {};
showTextNode(1);
}
function showTextNode(textNodeIndex) {
const textNode = textNodes.find(textNode => textNode.id === textNodeIndex);
textElement.innerText = textNode.text;
while(optionButtonsElement.firstChild) {
optionButtonsElement.removeChild(optionButtonsElement.firstChild);
}
document.getElementById('image').style.display = "block"
textNode.imageLink ? document.getElementById('image').style.backgroundImage = `url(${textNode.imageLink})` : document.getElementById('image').style.display = "none";
textNode.options.forEach(option => {
if(showOption(option)) {
const button = document.createElement('button');
button.innerText = option.text;
button.classList.add('btn')
button.addEventListener('click', () => selectOption(option));
optionButtonsElement.appendChild(button);
}
})
}
function showOption(){
return true;
}
function selectOption(option) {
const nextTextNodeId = option.nextText;
state = Object.assign(state, option.setState)
showTextNode(nextTextNodeId)
}
const textNodes = [
{
id: 1,
text: 'Case Study: BioPharma Expansion',
options: [
{
text: 'Start',
setState: {},
nextText: 2
}
]
},
{
id: 2,
text: 'Your client is BioPharma, a multinational healthcare company headquartered in the Netherlands',
options: [
{
text: "I'd like to know more about BioPharma's revenue",
setState: {},
nextText: 3
},
{
text: "I'd like to know more about BioPharma's cost structure",
setState: {},
nextText: 3
}
]
},
{
id: 3,
text: "BioPharma's revenue has increased year on year by 12% since 2014",
options: [
{
text: "What about costs?",
setState: {},
nextText: 4
}
]
},
{
id: 4,
text: "BioPharma's cost structure is shown below in Figure 1",
imageLink: "figure1a.png",
options: [
{
text: "Here is some stuff",
}
]
}
]
startGame();
*, *::before, *::after {
box-sizing: border-box;
}
.nav {
}
body {
z-index: 0;
background-color: black;
width: 100vw;
height: 100vh;
margin: 0px;
padding: 0px;
}
.main {
z-index: 0;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
font-family: 'Times New Roman', Times, serif;
}
#menuToggle {
display: block;
position: absolute;
top: 40px;
left: 40px;
z-index: 2;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a {
text-decoration: none;
color: white;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: tomato;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 3;
-webkit-touch-callout: none;
}
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: white;
border-radius: 3px;
z-index: 2;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#menuToggle input:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: none;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menuToggle input:checked ~ ul
{
transform: none;
}
.container {
width: 1000px;
height: 90%;
max-width: 80%;
background-color: white;
border-radius: 7px;
box-shadow: 0 0 10px 2px;
display: grid;
grid-template-rows: 60% 40%;
}
.container-lower {
border-top: 10px solid rgba(0,0,0,1);
position: relative;
}
.container-upper {
position: relative;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(1, auto);
gap: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.btn {
background-color: white;
border: 2px solid black;
border-radius: 5px;
padding: 10px 10px;
width: 400px;
color: black;
outline: none;
font-size: 25px;
font-family: 'Times New Roman', Times, serif;
}
.btn:hover {
border-color: grey;
color: grey;
}
#text {
font-size: 30px;
text-align: center;
}
#image {
width: 650px;
height: 150px;
background-repeat: no-repeat;
margin: 40px auto 0px auto;
background-size: 650px 150px;
}
.wrapper {
width: 70%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
<div class="nav">
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>About</li>
</a>
<a href="#">
<li>Info</li>
</a>
<a href="#">
<li>Contact</li>
</a>
</ul>
</div>
</div>
<div class="main">
<div class="container">
<div class="container-upper">
<div class="wrapper">
<div id="text" class="text">Text</div>
<div id="image"></div>
</div>
</div>
<div class="container-lower">
<div id="option-buttons" class="btn-grid">
<button class="btn">Option 1</button>
<button class="btn">Option 2</button>
<button class="btn">Option 3</button>
</div>
</div>
</div>
</div>
According to the accepted answer on this other SO thread, the reason why margin and padding are not 0 by default is because browsers have different default style-sheets.

Change your css body attributes to the following:
body {
z-index: 0;
background-color: black;
width: 100vw;
height: 100vh;
padding: 0px;
margin: 0px;
}
By setting the padding and margin to 0px for the body, you'll get rid of the scrollbars both vertically and horizontally :)

Categories

Resources