Develop Reference

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.

JS function is running twice

I have a js function that should change the value of a html data attribute value based on the current value. So in other words it should act like a toggle between 0 and 1 onclick. Anyways as per logging the current state I have noticed that the state is logged twice times per click. I want that after checking and changing the current value the function should end.
const accordionTabs = Array.from(document.getElementsByClassName('custom-faq-accordion-button-wrapper'));
accordionTabs.forEach(accordionTab => {
accordionTab.addEventListener('click', function checkTabState() {
let state = accordionTab.getAttribute('data-State');
console.log(state);
if ( state == "1" ) {
accordionTab.setAttribute("data-State", "0");
} else {
accordionTab.setAttribute("data-State", "1");
}
});
});
#custom-faq-accordion {
display: flex;
justify-content: center;
align-items: center;
background-color: #FFF6E7;
padding: 60px 0 230px;
min-height: 75vh;
}
#custom-faq-accordion-wrapper {
width: 1200px;
}
#custom-faq-accordion-title {
padding-bottom: 60px;
}
.accordion input[name=panel] {
display: none;
}
.accordion label {
position: relative;
display: block;
padding: 0.2em 1em 0.5em 1.2em;
font-size: 1.5em;
color: black;
cursor: pointer;
transition: all 0.7s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}
.accordion label::after {
font-family:"obviously-wide";
font-size: 39px;
content: "+";
position: absolute;
right: 1em;
width: 1em;
height: 1em;
color: #000;
text-align: center;
border-radius: 50%;
padding-bottom: 5px;
padding-right: 0.5em;
display: flex;
justify-content: center;
align-items: center;
bottom: 0.8em;
}
.accordion label:hover {
color: black;
}
.accordion input:checked + label {
color: black;
}
.accordion input:checked + label:after {
font-family:"obviously-wide";
font-size: 39px;
content: "-";
line-height: 0.8em;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 5px;
}
.accordion .accordion__content {
overflow: hidden;
height: 0px;
position: relative;
padding: 0 2.5em 0 3em;
color: black ;
transition: height 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}
.accordion .accordion__content .accordion__header {
padding: 1em 0;
}
.accordion .accordion__content .accordion__body {
font-size: 0.825em;
line-height: 1.4em;
}
/*
* Size Variations
*/
input[name=panel]:checked ~ .accordion__content.accordion__content--small {
height: auto;
padding-bottom: 30px;
padding-left: 7em;
width: 95%;
}
input[name=panel]:checked ~ .accordion__content.accordion__content--med {
height: auto;
}
input[name=panel]:checked ~ .accordion__content.accordion__content--large {
height: auto;
}
.custom-faq-accordion-button-wrapper {
position: relative;
width: 100%;
}
.border-black {
box-shadow: 0 0 0 1px #000;
border-collapse: seperate;
border-spacing: 10px;
border-radius: 59px;
background-color: #fff6e7;
margin-top: 5px;
margin-bottom: 25px;
position: relative;
z-index: 2;
will-change: transform;
}
.border-black:hover {
animation: pressin 0.3s forwards;
}
.custom-faq-accordion-button-shadow.custom-faq-accordion-button-shadow.custom-faq-accordion-button-shadow {
position: absolute;
bottom: -6px;
height: 60px;
width: 100%;
border-radius: 110px;
background-color: #000;
z-index: 1;
display: block;
}
.border-black label {
font-family: vulfSans_bold;
color: black;
font-size: 20px;
line-height: 43px;
padding-top: 10px;
}
#keyframes pressin {
0% {transform: translateY(0px);}
100% {transform: translateY(6px);}
}
<section id="custom-faq-accordion">
<div id="custom-faq-accordion-wrapper">
<h3 id="custom-faq-accordion-title" class="obviously-wide-black-90">FAQ</h3>
<div class="accordion">
<div class="custom-faq-accordion-button-wrapper" data-State="0">
<div class="border-black">
<input type="checkbox" name="panel" id="panel-{{ block.settings.accordion_position }}">
<label for="panel-{{ block.settings.accordion_position }}">Titel</label>
<div class="accordion__content accordion__content--small">
<div class="accordion__body obviously-regular-25">lorem ipsum</div>
</div>
</div>
<div class="custom-faq-accordion-button-shadow"></div>
</div>
<div class="custom-faq-accordion-button-wrapper" data-State="0">
<div class="border-black">
<input type="checkbox" name="panel" id="panel-{{ block.settings.accordion_position }}">
<label for="panel-{{ block.settings.accordion_position }}">Titel</label>
<div class="accordion__content accordion__content--small">
<div class="accordion__body obviously-regular-25">lorem ipsum</div>
</div>
</div>
<div class="custom-faq-accordion-button-shadow"></div>
</div>
<div class="custom-faq-accordion-button-wrapper" data-State="0">
<div class="border-black">
<input type="checkbox" name="panel" id="panel-{{ block.settings.accordion_position }}">
<label for="panel-{{ block.settings.accordion_position }}">Titel</label>
<div class="accordion__content accordion__content--small">
<div class="accordion__body obviously-regular-25">lorem ipsum</div>
</div>
</div>
<div class="custom-faq-accordion-button-shadow"></div>
</div>
</div>
</div>
</section>

your code works fine
Probably the problem is in another part of the code
const accordionTabs = Array.from(document.getElementsByClassName('custom-faq-accordion-button-wrapper'));
accordionTabs.forEach(accordionTab => {
accordionTab.addEventListener('click', e => {
const state = e.target.getAttribute('data-State');
const nextState = (Number(state) + 1) % 2
console.log({
state,
nextState
})
e.target.setAttribute("data-State", nextState);
});
});
.custom-faq-accordion-button-wrapper {
cursor: pointer;
border: 1px solid black;
padding: 10px 5px;
margin-bottom: 5px;
}
<div class="custom-faq-accordion-button-wrapper" data-State="0">1</div>
<div class="custom-faq-accordion-button-wrapper" data-State="0">2</div>

How to change image url after upload

I simply created the Facebook posting section in react functional
after I upload a picture I want to preview it and its working fine check this:
after writing something on description and upload image when I click post button it creates post like This:
forget the profile picture its giving everything same but I want it to preview the original image so is there any way in JavaScript to change the local URL to some working URL so I can see image
I am a beginner in react so kindly give solution in JavaScript because image preview is also done with JS
I don't know if this can help you or not but this is the code everything is written in App.js file and its exporting in index.js
function like(e){
const element = e.target;
element.classList.toggle('changeColor');
const thumbsUp = e.target.childNodes[0];
if(thumbsUp.className === 'far fa-thumbs-up'){
thumbsUp.className = 'fas fa-thumbs-up';
}
else{
thumbsUp.className = 'far fa-thumbs-up';
}
}
var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
output.onload = function() {
URL.revokeObjectURL(output.src)
}
console.log(output.src);
};
function App(){
var count = 0;
var obj = [];
const Upload = ({profile}) => {
var [postDetail, settingPostDetail] = React.useState('');
var [postImage, setPostImage] = React.useState('');
function postBtn (){
var output = document.getElementById('output');
var imageUrl = output.src;
postImage = imageUrl;
var setObj = {
id : count,
postDetail,
postImage
}
count = count+1;
obj.push(setObj);
settingPostDetail('');
setPostImage('');
}
return (
<>
<div className="uploadContent">
<div className="comment">
<form id="commentForm">
<div>
<img src={profile}/>
</div>
<input type="text" placeholder="Whats on your mind..." onChange={(e) => settingPostDetail(e.target.value)} />
</form>
<div className="image-preview">
<img id="output"/>
</div>
<ul className="uploadIcons">
<li><i className="fas fa-video"></i>Live Video</li>
<li><i className="fas fa-file-image"></i><input type="file" className="custom-file-input" accept="image/*" onChange={loadFile}/></li>
<li><i className="far fa-laugh"></i>Feeling / Activities</li>
</ul>
<div className="postBtn">
<input type="button" value="post" onClick={postBtn}/>
</div>
</div>
</div>
<Post functionalPost={obj}/>
</>
)
}
function Post(props) {
// eslint-disable-next-line no-lone-blocks
return(
<div className="major_container">
{props.functionalPost.map((postDetails) => {
let {id, postDetail, postImage} = postDetails;
return (
<div id={id} className="post">
<div className="post_top_bar">
<div>
<img src={props.profile}/>
</div>
<div>
<span>Muhaymin</span>
<p>12-12-2020</p>
</div>
</div>
<div>
<p>{postDetail}</p>
<img src={postImage}/>
</div>
<div className="emoji">
<div className="bg_img"></div>
<div className="bg_img"></div>
<div className="bg_img"></div>
<div className="bg_img"></div>
<div className="bg_img"></div>
<div className="bg_img"></div>
<div className="bg_img"></div>
</div>
<div className="reactions">
<button onClick={like}><i className="far fa-thumbs-up"></i>Like</button>
<button><i className="far fa-comment-alt"></i>Comments</button>
<button><i className="fas fa-share"></i>Share</button>
</div>
<div className="comment">
<form id="commentForm">
<div>
<img src={props.profile}/>
</div>
<input type="text" placeholder="Write a comment..."/>
</form>
</div>
</div>
)
})}
</div>
)
}
return(
<div className="main_container">
<Upload profile="https://scontent.fkhi2-1.fna.fbcdn.net/v/t1.0-9/126435904_2740947029493468_1372746916749511118_o.jpg?_nc_cat=108&ccb=2&_nc_sid=09cbfe&_nc_ohc=eFGfxtrYKHQAX_XyVSw&_nc_ht=scontent.fkhi2-1.fna&oh=a019fbfa628a7885d3ae7483fa2d017d&oe=5FFFE5BB"/>
</div>
)
}
export default App;
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500;600;700;800;900&display=swap');
body{
font-family: 'Poppins', sans-serif;
padding: 0;
margin: 0;
background-color: #18191a;
}
/* upload post */
.uploadContent{
background-color: #252525;
width: 500px;
margin: 0 auto;
padding: 10px 0;
box-sizing: border-box;
border-radius: 10px;
margin: 20px auto 0;
}
.uploadContent .comment #commentForm{
margin-top: 0;
}
.uploadIcons{
display: flex;
list-style: none;
padding: 0;
margin: 0 20px 0;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
border-top: 1px solid rgb(95, 95, 95);
}
.image-preview{
padding: 20px;
box-sizing: border-box;
}
.image-preview img{
width: 100%;
}
.uploadIcons li:nth-child(2){
display: flex;
align-items: center;
width: 150px;
}
.uploadIcons li{
color: rgb(182, 182, 182);
font-size: 14px;
cursor: pointer;
padding: 10px;
box-sizing: border-box;
transition: .2s ease-in-out;
}
.uploadIcons li:hover{
background-color: #ffffff1a;
border-radius: 5px;
}
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Photo Upload';
display: inline-block;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-family: 'Poppins', sans-serif;
outline: none;
}
.custom-file-input:focus{
outline: none;
}
.custom-file-input:hover::before {
outline: none;
}
.custom-file-input:active::before {
outline: none;
}
.uploadIcons li i{
margin-right: 7px;
font-size: 22px;
}
.uploadIcons li:first-child i{
color: rgb(231, 56, 56);
}
.uploadIcons li:nth-child(2) i{
color: rgb(29, 134, 29);
}
.uploadIcons li:nth-child(3) i{
color: rgb(219, 176, 33);
}
.postBtn{
width: 100%;
padding: 7px 20px;
box-sizing: border-box;
}
.postBtn input{
width: 100%;
background-color: #3688ce;
border: none;
color: white;
height: 40px;
border-radius: 8px;
font-size: 17px;
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
outline: none;
cursor: pointer;
}
.post{
width: 500px;
height: auto;
background-color: #252525;
border-radius: 10px;
padding: 10px 0;
box-shadow: 5px 5px 15px rgb(31 31 31 / 80%);
margin: 20px auto 0;
}
.post .post_top_bar{
margin: 0 20px;
position: relative;
}
.post .post_top_bar div:nth-child(1),
.comment #commentForm div{
width: 45px;
height: 45px;
position: relative;
display: inline-block;
overflow: hidden;
border-radius: 50%;
}
.comment #commentForm div{
width: 40px;
height: 40px;
}
.post .post_top_bar::after,
.comment #commentForm::after{
content: '';
position: absolute;
background-color: #028302;
width: 10px;
height: 10px;
border-radius: 50%;
left: 32px;
bottom: 1px;
z-index: 9999;
}
.comment #commentForm::after{
left: 26px;
}
.post .post_top_bar div img,
.comment #commentForm div img{
display: inline;
margin: 0 auto;
height: 100%;
}
.post .post_top_bar{
display: flex;
}
.post .post_top_bar div:nth-child(2){
line-height: 1.2;
margin-left: 6px;
}
.post .post_top_bar div:nth-child(2) span{
font-weight: bold;
color: white;
font-size: 17px;
}
.post .post_top_bar div:nth-child(2) p{
margin: 2px 0 0;
color: rgb(187, 187, 187);
font-size: 11px;
}
.post div:nth-child(2) img{
width: 100%;
margin: 10px 0 0;
}
.post .emoji{
display: flex;
margin: 0 0 8px 20px;
}
.post .emoji .bg_img{
background: url("Facebook-Reactions-2020.png");
background-repeat: no-repeat;
background-size: cover;
width: 21px;
height: 18px;
text-align: center;
}
.post .emoji .bg_img:nth-child(1){
background-position: 0 0;
}
.post .emoji .bg_img:nth-child(2){
background-position: -21px 0;
}
.post .emoji .bg_img:nth-child(3){
background-position: -42px 0;
}
.post .emoji .bg_img:nth-child(4){
background-position: -63px 0;
}
.post .emoji .bg_img:nth-child(5){
background-position: -84px 0;
}
.post .emoji .bg_img:nth-child(6){
background-position: -105px 0;
}
.post .emoji .bg_img:nth-child(7){
background-position: -127px 0;
}
.post .reactions{
border-top: 1px solid rgb(95, 95, 95);
border-bottom: 1px solid rgb(95, 95, 95);
display: flex;
align-items: center;
justify-content: space-around;
margin: 0 20px;
position: relative;
}
.post .reactions button{
border: none;
background-color: transparent;
color: rgb(155, 155, 155);
font-family: 'Poppins', sans-serif;
margin: 4px 0 4px;
font-weight: 600;
outline: none;
cursor: pointer;
font-size: 15px;
padding: 4px 32px;
transition: .2s ease-in-out;
}
.post .reactions button i {
margin-right: 6px;
pointer-events: none;
}
.post .reactions button:hover{
background-color: #ffffff1a;
border-radius: 5px;
}
.post .reactions button.changeColor{
color:rgb(32, 120, 244);
transition: .2s ease-in-out;
}
.post .reactions button i.fas.fa-thumbs-up{
animation-name: jump;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
z-index: 10;
}
.comment #commentForm{
margin: 10px 20px 0;
display: flex;
align-items: center;
position: relative;
}
.comment #commentForm div{
margin-right: 10px;
}
.comment #commentForm input{
width: 100%;
background: #333333;
border: none;
border-radius: 20px;
height: 39px;
font-family: 'Poppins', sans-serif;
padding-left: 12px;
box-sizing: border-box;
font-size: 15px;
outline: none;
color: white;
}
#keyframes jump{
0%{
transform: scale(1) rotate(0deg);
}
50%{
transform: scale(1.4) rotate(-15deg);
}
100%{
transform: scale(1) rotate(0deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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)

How do add an animated button in my css and html

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>