I am getting refresh after executing submit button in login form

I am getting refresh after executing submit button in login form - javascript

I make a simple login page using html and css and javascripts.
But when i submit and in case of some javascript lines execution after few seconds the page refresh automatically.when i submit form it shows desiered output but is few seconds webpage refresh.
HTML code
<!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>intern.local</title>
<link rel="stylesheet"><link rel="stylesheet" href="./index.css">
<script src="./index.js"></script>
</head>
<body>
<div class="outer">
<div class="inner one"
id="box_one">
<h1 class="main">
Welcome to intern.local
</h1>
<h3 id='login_1'>
Enter details and login to continue.
</h3>
</div>
<div class="inner two"
id="box_two">
<div class="head">
<h1> Welcome</h1>
<h2>Please Login</h2>
<div class="error">
Please Enter valid Password.
</div>
<div id="login"
class="login">
<form class="login_form" onsubmit="validate()">
<input type="text"
pattern="^\w+([\.-]?\w+)*#docquity.com"
id="uname"
class="inp uname"
name="uname"
placeholder="Username" required><br>
<input type="password"
minlength="6"
id="pass"
class="inp pwd"
name="pass"
placeholder="Password" required>
<small id="pass_error"></small>
<input type="submit"
id="smt"
value="Submit"
class="btn sbmt">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
css code
body {
margin:0px;
height:100%;
border: none;
padding:0px;
}
.inner{
float:left;
width: 50%;
height: 100vh;
}
.one {
background-color:cornsilk;
}
.two{
/*background: rgb(63,94,251);*/
background: radial-gradient(circle, rgb(103, 126, 238) 0%, rgb(185, 74, 97) 150%);
padding: 0%;
border: 0%;
margin: 0%;
color: cornsilk;
}
.head{
height: auto;
padding-top: 15%;
}
.head h1 {
text-align: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 40px;
}
.head h2{
text-align: center;
}
form {
margin: 0 auto;
}
.login {
text-align: center;
}
.inp {
border: none;
background: none;
box-shadow: 0px 2px 0px 0px white;
width: 50%;
color:blanchedalmond;
font-size: 25px;
outline: none;
margin-left: 20%;
margin-right: 20%;
margin-top: 5%;
padding-left: 2%;
}
.inp:focus:invalid{
box-shadow: 0px 2px 0px 0px red;
}
small {
color: red;
font-weight: bold;
}
.pwd {
margin-bottom: 10%;
}
.uname::placeholder, .pwd::placeholder{
color: blanchedalmond;
}
.btn {
align-items: center;
background-color: #fff;
border-radius: 24px;
border-style: none;
box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
box-sizing: border-box;
color: #000102;
display: inline-flex;
height: 48px;
justify-content: center;
padding: 2px 24px;
width: 30%;
font-size: 25px;
}
.sbmt:hover{
background-color: darkslategray;
color: floralwhite;
}
.main {
margin-top: 20%;
text-align: center;
font-size: 60px;
background: -webkit-linear-gradient(rgb(171, 10, 185), rgb(209, 8, 42));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.one h3 {
text-align: center;
color:darkslategray;
}
.error_message{
background-color: red;
margin-left: 25%;
margin-right: 25%;
text-align: center;
}
.error {
display: none;
}
javascript code
function mail_velidate(mail){
var mail_pattern = /^\w+([\.-]?\w+)*#docquity.com/;
if(mail.match(mail_pattern))
{
return true;
}
else{
return false;
}
}
function password_check(pass){
var pass_regex = /^(?=.*[0-9])(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]{7,15}$/;
if (pass.match(pass_regex)){
return true;
}
else{
return false;
}
}
const mail = document.getElementById("uname");
document.addEventListener("DOMContentLoaded", function() {
var elements = document.getElementsByClassName("uname");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("Give valid docquity mail id");
}
};
elements[i].oninput = function(e) {
e.target.setCustomValidity("");
};
}
})
function validate(){
var user = document.getElementById("uname").value;
var pass = document.getElementById("pass").value;
if(password_check(pass)){
document.getElementById('login').innerHTML = "<h1>Logged In</h1>";
document.getElementById('login_1').innerHTML = '<h3>Logged In successfully</h3>';
document.getElementById('box_two').style.display = 'none';
document.getElementById('box_one').style.width = '100%';
}
else{
document.getElementsByClassName("error")[0].className = "error_message";
}
}
the line of code document.getElementsByClassName("error")[0].className = "error_message"; giving me problem.

On your HTML, you need to place event.preventDefault(); like this:
<form class="login_form" onsubmit="event.preventDefault(); validate();">
event.preventDefault() will stop any default behavior when submitting. In the case of submit, it is the page reload.
https://codepen.io/tunk/pen/tjGdp

Related

How to display values from form inside of a div

I am trying to create a Library and add information that is entered into my form (form is in popup window) to appear in a div (bookCard) within my grid. I was able to create an eventListener for the submit button and make my div (bookCard) appear. However, I am unable to display the input from my form on the bookCard div. How can I add to the function to make the inputs appear and display there when it is entered? Is there something I am missing within the addBookToLibrary function?
Thank you in advance for your help.
HTML
<!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">
<!----GitHub icon-->
<script
src="https://kit.fontawesome.com/4c536a6bd5.js"
crossorigin="anonymous"></script>
<!----------Font Below ---------------->
<link rel="stylesheet" href="https://use.typekit.net/jmq2vxa.css">
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="images/open-book.png"/>
<title>My Library</title>
</head>
<body>
<div class="head-box">
<h1>My Library</h1>
</div>
<main class ="main-container">
<div class="body-box">
<button id="addBook">Add Book</button>
</div>
<div class="books-grid" id="booksGrid">
<div class="library-container" id="library-container"></div>
</div>
</main>
<!-----Form information----->
<div class="form-popup">
<div class="form-content"
<form action="example.com/path" class="form-container" id="popUpForm">
<h3>add new book</h3>
<input class="input" type="text" id="title" placeholder="Title" required maxlength="100">
<input type="author" id="author" placeholder="Author" required maxlength="100">
<input type="number" id="pages" placeholder="Pages" required max="10000">
<div class="isRead">
<label for="readOption">Have you read it?</label>
<input type="checkbox" id="readOption" name="readOption">
</div>
<button class="btn submit" type="submit" id="submit">Submit</button>
</form>
</div>
</div>
<div id="overlay"></div>
<div id="invisibleDiv"></div>
</body>
</html>
CSS
/*CSS RESET*/
* {
margin:0;
padding:0;
}
h1 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 8vh;
color: #001D4A;
}
.head-box {
background-color: #9DD1F1;
display: flex;
align-items: center;
justify-content: center;
height: 20vh;
border-bottom: 2px solid #e0f3ff;
}
h2 {
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
font-size: 5vh;
color: #001D4A;
}
h3 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 4vh;
color: #001D4A;
}
button {
height: 10vh;
width: 20vh;
min-width: 20vh;
min-height: 10vh;
font-size: 3vh;
background-color: #27476E;
border-radius: 22px;
border-style: none;
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
color:#ffffff;
}
button:hover {
background-color: #192c44;
}
body {
min-height: 100vh;
background: linear-gradient(180deg,#d0edff,#9DD1F1) no-repeat;
}
.body-box {
margin: 3vh;
display: flex;
justify-content: center;
}
/* The pop up form - hidden by default */
.form-popup {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
}
.form-content {
text-align: center;
border-radius: 20px;
width: 30vh;
height: auto;
border: 3px solid #001D4A;
padding: 20px;
background-color: #9DD1F1;
gap: 10px;
}
.form-container {
min-width: 20vh;
min-height: 50vh;
}
.isRead{
display: flex;
height: 30px;
width: 100%;
margin: 2px;
align-items: center;
justify-content: center;
}
label {
font-family: poppins, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 2.5vh;
}
input {
border-radius: 10px;
height: 50px;
margin: 3px;
width: 100%;
padding: 4px;
background-color: #d0edff;
border: none;
font-family: poppins, sans-serif;
font-weight: 300;
font-size: 2.5vh;
}
#submit {
margin-top: 4px;
height: 20px;
width: 100%;
border-radius: 15px;
color: #ffffff;
border: none;
}
input[type=checkbox] {
width: 20px;
margin: 10px;
}
#invisibleDiv {
position: fixed;
height: 100%;
width: 100%;
}
#overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.books-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* BOOK CARD */
#library-container {
display: none;
height: 50vh;
width: 50vh;
border-radius: 15px;
border: 5px solid #ffffff;
background-color: #d0edff;
flex-direction: column;
justify-content: space-between;
margin: 28px;
}
JS
class book {
constructor(title, author, pages, read) {
this.title = form.title.value;
this.author = form.author.value;
this.pages = form.pages.value + 'pages';
this.read = form.read.checked;
}
}
//creates book from Book Constructor, adds to library
let myLibrary = [];
function addBookToLibrary(book) {
const bookTitle = document.getElementById('title').value;
const bookAuthor = document.getElementById('author').value;
const bookPages = document.getElementById('pages').value;
}
// User interface //
const popUpForm = document.querySelector('.form-popup');
const button = document.getElementById('addBook');
const overlay = document.getElementById('overlay');
const booksGrid = document.getElementById('booksGrid');
const bookCard = document.querySelector('.library-container');
const form = document.querySelector('.form-container');
const submitBtn = document.getElementById('submit');
// Form Pop Up function //
document.getElementById('invisibleDiv').onclick = function()
{
popUpForm.style.display = "none";
overlay.style.display = "none";
};
button.addEventListener("click", () => {
popUpForm.style.display = "block";
overlay.style.display = "block";
});
// Submit Button Event Listener (displays bookCard) //
submitBtn.addEventListener("click", () => {
bookCard.style.display = "block";
popUpForm.style.display = "none";
overlay.style.display = "none";
addBookToLibrary();
});

Check this out, it should help.
Good luck
<!-- https://codepen.io/bradtraversy/pen/OrmKWZ -->
OR
<!-- https://codepen.io/fun/pen/PPVwBY -->

This is on-going, unfinish answer. The code in the question is put into live mode for investigation purposes.
Any reader may try to edit/run to get a solution.
class book {
constructor(title, author, pages, read) {
this.title = form.title.value;
this.author = form.author.value;
this.pages = form.pages.value + 'pages';
this.read = form.read.checked;
}
}
//creates book from Book Constructor, adds to library
let myLibrary = [];
function addBookToLibrary(book) {
const bookTitle = document.getElementById('title').value;
const bookAuthor = document.getElementById('author').value;
const bookPages = document.getElementById('pages').value;
}
// User interface //
const popUpForm = document.querySelector('.form-popup');
const button = document.getElementById('addBook');
const overlay = document.getElementById('overlay');
const booksGrid = document.getElementById('booksGrid');
const bookCard = document.querySelector('.library-container');
const form = document.querySelector('.form-container');
const submitBtn = document.getElementById('submit');
// Form Pop Up function //
document.getElementById('invisibleDiv').onclick = function()
{
popUpForm.style.display = "none";
overlay.style.display = "none";
};
button.addEventListener("click", () => {
popUpForm.style.display = "block";
overlay.style.display = "block";
});
// Submit Button Event Listener (displays bookCard) //
submitBtn.addEventListener("click", () => {
bookCard.style.display = "block";
popUpForm.style.display = "none";
overlay.style.display = "none";
addBookToLibrary();
});
/*CSS RESET*/
* {
margin:0;
padding:0;
}
h1 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 8vh;
color: #001D4A;
}
.head-box {
background-color: #9DD1F1;
display: flex;
align-items: center;
justify-content: center;
height: 20vh;
border-bottom: 2px solid #e0f3ff;
}
h2 {
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
font-size: 5vh;
color: #001D4A;
}
h3 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 4vh;
color: #001D4A;
}
button {
height: 10vh;
width: 20vh;
min-width: 20vh;
min-height: 10vh;
font-size: 3vh;
background-color: #27476E;
border-radius: 22px;
border-style: none;
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
color:#ffffff;
}
button:hover {
background-color: #192c44;
}
body {
min-height: 100vh;
background: linear-gradient(180deg,#d0edff,#9DD1F1) no-repeat;
}
.body-box {
margin: 3vh;
display: flex;
justify-content: center;
}
/* The pop up form - hidden by default */
.form-popup {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
}
.form-content {
text-align: center;
border-radius: 20px;
width: 30vh;
height: auto;
border: 3px solid #001D4A;
padding: 20px;
background-color: #9DD1F1;
gap: 10px;
}
.form-container {
min-width: 20vh;
min-height: 50vh;
}
.isRead{
display: flex;
height: 30px;
width: 100%;
margin: 2px;
align-items: center;
justify-content: center;
}
label {
font-family: poppins, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 2.5vh;
}
input {
border-radius: 10px;
height: 50px;
margin: 3px;
width: 100%;
padding: 4px;
background-color: #d0edff;
border: none;
font-family: poppins, sans-serif;
font-weight: 300;
font-size: 2.5vh;
}
#submit {
margin-top: 4px;
height: 20px;
width: 100%;
border-radius: 15px;
color: #ffffff;
border: none;
}
input[type=checkbox] {
width: 20px;
margin: 10px;
}
#invisibleDiv {
position: fixed;
height: 100%;
width: 100%;
}
#overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.books-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* BOOK CARD */
#library-container {
display: none;
height: 50vh;
width: 50vh;
border-radius: 15px;
border: 5px solid #ffffff;
background-color: #d0edff;
flex-direction: column;
justify-content: space-between;
margin: 28px;
}
<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">
<!----GitHub icon-->
<script
src="https://kit.fontawesome.com/4c536a6bd5.js"
crossorigin="anonymous"></script>
<!----------Font Below ---------------->
<link rel="stylesheet" href="https://use.typekit.net/jmq2vxa.css">
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="images/open-book.png"/>
<title>My Library</title>
</head>
<body>
<div class="head-box">
<h1>My Library</h1>
</div>
<main class ="main-container">
<div class="body-box">
<button id="addBook">Add Book</button>
</div>
<div class="books-grid" id="booksGrid">
<div class="library-container" id="library-container"></div>
</div>
</main>
<!-----Form information----->
<div class="form-popup">
<div class="form-content"
<form action="example.com/path" class="form-container" id="popUpForm">
<h3>add new book</h3>
<input class="input" type="text" id="title" placeholder="Title" required maxlength="100">
<input type="author" id="author" placeholder="Author" required maxlength="100">
<input type="number" id="pages" placeholder="Pages" required max="10000">
<div class="isRead">
<label for="readOption">Have you read it?</label>
<input type="checkbox" id="readOption" name="readOption">
</div>
<button class="btn submit" type="submit" id="submit">Submit</button>
</form>
</div>
</div>
<div id="overlay"></div>
<div id="invisibleDiv"></div>
</body>
</html>

QR Code generator only generate the QR code for the first input

I am new to stackoverflow and i wanted to create a QR code generator that translate the 2 inputs into a QR code, however the code only translate the first input into a QR code and does not include the information for the second input.
I also try using querySelectorAll but it doesnt change anything I hope good sirs would be so kind to teach me where I'm wrong at.
here is the code for HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>PracticeQRProgram</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<header>
<h1>QR CODE GENERATOR</h1>
</header>
<div class="form">
<input class="form" type="text" spellcheck="false" placeholder="Enter Full Name">
<input class="form" type="text" spellcheck="false" placeholder="Enter ID no.">
<button>Submit</button>
</div>
<div class="qr-code">
<img src="" alt="qr-code">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
here is the code for javascript
var wrapper = document.querySelector(".wrapper"),
qrInput = wrapper.querySelector(".form input");
generateBtn = wrapper.querySelector(".form button");
qrImg = wrapper.querySelector(".qr-code img");
let preValue;
generateBtn.addEventListener("click", () => {
let qrValue = qrInput.value.trim();
if(!qrValue || preValue === qrValue) return;
preValue = qrValue;
generateBtn.innerText = "Submitting...";
qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`;
qrImg.addEventListener("load", () => {
wrapper.classList.add("active");
generateBtn.innerText = "QR Code";
});
});
qrInput.addEventListener("keyup", () => {
if(!qrInput.value.trim()) {
wrapper.classList.remove("active");
preValue = "";
}
});
and here is for the style.css
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
padding: 0 10px;
min-height: 100vh;
align-items: center;
background-image: url("ICpEP.jpg");
background-color: #cccccc;
justify-content: center;
}
.wrapper{
height: 650px;
max-width: 410px;
background: #fff;
border-radius: 7px;
padding: 20px 25px 0;
transition: height 0.2s ease;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.wrapper.active{
height: 650px;
}
header h1{
font-size: 21px;
font-weight: 500;
}
header p{
margin-top: 5px;
color: #575757;
font-size: 16px;
}
.wrapper .form{
margin: 20px 0 25px;
}
.form :where(input, button){
width: 100%;
height: 55px;
border: none;
outline: none;
border-radius: 5px;
transition: 0.1s ease;
}
.form input{
font-size: 18px;
padding: 0 17px;
border: 1px solid #999;
}
.form input :focus{
box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
.form input::placeholder{
color: #999;
}
.form button{
color: #fff;
cursor: pointer;
margin-top: 20px;
font-size: 17px;
background: #3498DB;
}
.qr-code{
opacity: 0;
display: flex;
padding: 33px 0;
border-radius: 5px;
align-items: center;
pointer-events: none;
justify-content: center;
border: 1px solid #ccc;
}
.wrapper.active .qr-code{
opacity: 1;
pointer-events: auto;
transition: opacity 0.5s 0.05s ease;
}
.qr-code img{
width: 170px;
}
#media (max-width: 430px){
.wrapper{
height: 650px;
padding: 16px 20px;
}
.wrapper.active{
height: 650px;
}
header p{
color: #696969;
}
.form :where(input, button){
height: 52px;
}
.qr-code img{
width: 160px;
}
}

In this line:
qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`;
You are only sending the qrValue to the api. You will have to read and send both the id and name info to the api if you want both encoded.
That being said I would adjust the code a bit to make it easier to reason about.
Firstly I would add unique id's to each of the input elements eg:
<input id="name-input" class="form" type="text" spellcheck="false" placeholder="Enter Full Name">
<input id="id-input" class="form" type="text" spellcheck="false" placeholder="Enter ID no.">
Next I would select these elements directly using:
var qrNameInput = document.getElementById("name-input");
var qrIdInput = document.getElementById("id-input");
Then in your event listener I would read these values:
var name = qrNameInput.value.trim();
var id = qrIdInput.value.trim();
And finally send both of these information on to the api:
qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data="name:${name},id:${id}"`;

querySelectorAll() is the way to do this !
but you have to change some of your code, because it returns a NodeList, so you'll have to iterate on the result to find your values, like this :
const qrInputs = wrapper.querySelectorAll('.form input');
generateBtn.addEventListener('click', () => {
let qrValue = getQrValue();
//[...]
}
function getQrValue() {
//To use array function, you have to cast the NodeList to an Array
const inputsArray = Array.from(qrInputs)
//getting an array of values from inputs
const values = inputsArray.map((input) => input.value);
// return a signle string with all values separated with '_'
return values.join('_');
}
And with qrInput.addEventListener("keyup", [...]) you can just set the listener on the form instead (events are bubbling up)

CSS backdrop effect - blur background of search bar

I'm trying to make the background (only the search bar) to be a backdrop blur background without blurring the whole background image behind it.
I've tried webkit filter: blur & filter: blur, but they both blur the whole body and not just make the transparent background of the search bar blurred.
Note: I'm not using a background image in the code below because I'll embed this code in an iframe, which the background before it will be an image.
EDIT: I have removed the domain name in the ORIGINAL code so it doesn't conflict in search results for that domain name. Thanks everyone for helping me fix this issue! You're amazing!
<html>
<head>
<base target="_blank" />
<base target="_blank" />
<script type="text/javascript">
function submitSearch() {
var siteSearchUrl = "https://*DOMAIN_NAME*/_/search?query="; // Replace with your site's search URL
var query = document.getElementById("search-query-input").value;
var url = siteSearchUrl + query;
if (typeof IE_fix != "undefined") {
// IE8 and lower fix to pass the http referer
var referLink = document.createElement("a");
referLink.href = url;
document.body.appendChild(referLink);
referLink.click();
} else {
window.open(url, "_blank");
} // All other browsers
}
function searchKeyPress(e) {
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13) {
document.getElementById("search-icon").click();
return false;
}
return true;
}
</script>
<link
rel="stylesheet"
type="text/css"
href="https://ssl.gstatic.com/docs/script/css/add-ons.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
rel="stylesheet"
/>
<style>
body {
margin: 0;
padding: 14px 6px 0 6px;
background-color: transparent;
font-family: "Roboto", sans-serif;
overflow: hidden;
}
#search-icon {
margin: 4px 4px 4px 10px;
padding: 8px;
height: 24px;
vertical-align: middle;
cursor: pointer;
}
#search-icon:hover {
background: rgba(155, 153, 176, 0.2);
border-radius: 100px;
}
#search-query {
background: inherit;
}
body:before {
background: inherit;
}
#search-query:before {
box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.5);
filter: blur(10px);
}
#search-query {
width: max-content;
margin: 0 auto;
overflow: hidden;
border: 0;
border-radius: 14px;
color: #212121;
font-size: 16px;
line-height: 24px;
transition: 0.4s;
}
#search-query:hover {
color: #212121;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
font-size: 16px;
line-height: 24px;
}
#search-query-input {
width: 60vw;
height: 24px;
font-size: 16px;
font-stretch: normal;
letter-spacing: normal;
line-height: 24px;
border: 0;
color: #000;
background-color: transparent;
cursor: text;
margin-left: -5px;
text-align: start;
vertical-align: middle;
}
#media (max-width: 500px) {
#search-query-input {
width: 80vw;
}
}
#media (min-width: 900px) {
#search-query-input {
width: 60vw;
}
}
</style>
</head>
<body>
<!-- <input type="text" id="query" />
<button id="search" onclick="submitSearch()">Search</button> -->
<div id="search-query">
<img
id="search-icon"
alt="Search"
onclick="submitSearch();"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAADAklEQVR4AezZA6xcQRSA4b92g9q2/VRuw9puVLcxake13Zh1G9W2bds2T42ZzNPeO7Pb5H5/zD17PUMgEAgEAoFAIGxFGMRMlrGTi7zjFZfZwTJmMohCRLkajOMYkkRHGUdNolI8B5EUdpB4okpJViOpbDXFiArpGMcHJIzeMY50RFgB9iIe2ksBIiiGR4jHHhFDhHTlI+JDH+lKBMQmceY/YhZNqExBMn+rAJUIMZMnCOY+EItjxRP9OetoTQZMMtCadYixJ5TAoQyYH1cbiCE5CWxADB0jA85MNp7JHUipnsbTbwqO1OWL4RSIIzUSDKfgF+riQBrOIFrPKENqleEZonWGNFjX0vDPNSUcTQ1HsiXWbUO0hhOu4YjWViwri2gdwYvDiFZ5rJqIaMXgRRyiNRGr7iBKa/BqDaJ0G4vKIVqN8Kqxy5OoL6L0mDR4lUZ/o2UA1sxHlBbhh8WI0jys2Y4odcUPXRCl7VhzDVFqgB8aIErXsUZ/fylr5dnyGGv0R38O/JADUfqMNfpLcHb8kF1/Mf/fT6HnWHMdUWqIHxoiSjexZiui1A0/dEWUtmHNPERpsZUH2WJ3rxKPSIdX6XiMKPXGmvKIVgivQohWJSx6YP11+g5WTUK04vAiBtGaBeDyJDqMF0cQrVpYthnRGkq4hiJau7GuhW/LKiHDskpzrEvDKV8WtkobFrZ24UQ9H5YW44xLi7VwZIpxcbcbKdXNuDUyG2cychQxtJ4YkhPPOsTQJXLiUMmwNjhasQUx9obyOBafzBZTiMoUIguZKUhlQszSRtYHaI5z+pnsT6NxKI5HiMee8xlRGoJDhdiNeOg6ZWmNRHKEdIzlXZj7w/PIDYBEdgQoxmokla2nNL9J5EeAeI4iKWwPXfiXRMcIUJPxHEOS6CTDKYVuTGRH0BViEDNZyk4u8gpBeMMuJtKegujcj2DN1/bnmAgAEIBhIJIZGZHOWAEslPsoyCMgIHxPmAgICAjXIQRQSsh+JSH7vYQ1StvZryW8vy9JkiQdHsFQT60Y7OcAAAAASUVORK5CYII="
/>
<input
type="text"
id="search-query-input"
placeholder="Search"
enterkeyhint="go"
onkeypress="return searchKeyPress(event);"
style="box-shadow: none"
;=""
/>
</div>
</body>
</html>

* {
padding: 0;
margin: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.sections {
background-image: url(https://images.pexels.com/photos/3293148/pexels-photo-3293148.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size:100vw;
background-size:cover;
background-repeat:no-repeat;
height: 100vh;
padding-top: 15vh;
}
.search-bar {
border: 1px solid transparent;
width: 300px;
align-items: center;
display: flex;
margin: 0 auto;
padding-left: 2vh;
border-radius: 10px;
transition: 0.5s;
}
.search-bar:hover {
border: 1px solid rgb(142, 141, 141);
backdrop-filter: blur(5px);
}
.search-text {
padding: 4vh 8vh;
background: transparent;
border: none;
height: 100%;
width: 100%;
border-radius: 50px;
font-size: 18px;
color: #424242;
font-weight: 500;
}
.search-text:focus {
outline: none;
}
.fa-search {
color: #fff;
}
<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" />
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/2dba9f6187.js" crossorigin="anonymous"></script>
<title>Blur Background Project</title>
</head>
<body>
<header>
<div class="center">
<div class="sections">
<div class="search-bar">
<i class="fas fa-search"></i>
<input type="text" placeholder="Search" class="search-text" />
</div>
</div>
</div>
</header>
</body>

function submitSearch(){
var siteSearchUrl = 'https://support.yssf.ml/_/search?query='; // Replace with your site's search URL
var query = document.getElementById("search-query-input").value;
var url = siteSearchUrl + query
if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
{
var referLink = document.createElement("a");
referLink.href = url;
document.body.appendChild(referLink);
referLink.click();
}
else { window.open(url,'_blank'); } // All other browsers
}
function searchKeyPress(e){
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13)
{
document.getElementById('search-icon').click();
return false;
}
return true;
}
body {
margin:0;
padding:14px 6px 0 6px;
background-color:transparent;
font-family: 'Roboto', sans-serif;
overflow:hidden;
background: url('https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
background-size:100vw;
background-size:cover;
background-repeat:no-repeat;
}
#search-query{
background: transparent;
width:max-content;
margin:0 auto;
overflow:hidden;
border:0;
border-radius:14px;
color: #212121;
font-size:16px;
line-height:24px;
transition:0.4s;
}
#search-query::before {
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
filter: blur(10px);
}
#search-query:hover {
color: #212121;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
0 3px 1px -2px rgba(0,0,0,0.12),
0 1px 5px 0 rgba(0,0,0,0.2);
font-size:16px;
line-height:24px;
backdrop-filter:blur(3px);
}
#search-query-input {
width:60vw;
height:24px;
font-size:16px;
font-stretch: normal;
letter-spacing: normal;
line-height:24px;
border:0;
color:#000;
background-color:transparent;
cursor:text;
margin-left:-5px;
text-align:start;
vertical-align:middle;
}
#search-query-input:hover{
color:white;
}
#search-icon {
margin: 4px 4px 4px 10px;
padding:8px;
height:24px;
vertical-align:middle;
cursor:pointer;
}
#search-icon:hover {
background: rgba(155,153,176, 0.2);
border-radius: 100px;
}
#search-query-input:hover::placeholder{
color:white;
}
#media (max-width:500px) {
#search-query-input {
width:80vw;
}
}
#media (min-width:900px) {
#search-query-input {
width:60vw;
}
}
<html>
<head>
<base target="_blank">
<base target="_blank">
<link rel="stylesheet" type="text/css" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
</head>
<body>
<!-- <input type="text" id="query" />
<button id="search" onclick="submitSearch()">Search</button> -->
<div id="search-query">
<img id="search-icon" alt="Search" onclick="submitSearch();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAADAklEQVR4AezZA6xcQRSA4b92g9q2/VRuw9puVLcxake13Zh1G9W2bds2T42ZzNPeO7Pb5H5/zD17PUMgEAgEAoFAIGxFGMRMlrGTi7zjFZfZwTJmMohCRLkajOMYkkRHGUdNolI8B5EUdpB4okpJViOpbDXFiArpGMcHJIzeMY50RFgB9iIe2ksBIiiGR4jHHhFDhHTlI+JDH+lKBMQmceY/YhZNqExBMn+rAJUIMZMnCOY+EItjxRP9OetoTQZMMtCadYixJ5TAoQyYH1cbiCE5CWxADB0jA85MNp7JHUipnsbTbwqO1OWL4RSIIzUSDKfgF+riQBrOIFrPKENqleEZonWGNFjX0vDPNSUcTQ1HsiXWbUO0hhOu4YjWViwri2gdwYvDiFZ5rJqIaMXgRRyiNRGr7iBKa/BqDaJ0G4vKIVqN8Kqxy5OoL6L0mDR4lUZ/o2UA1sxHlBbhh8WI0jys2Y4odcUPXRCl7VhzDVFqgB8aIErXsUZ/fylr5dnyGGv0R38O/JADUfqMNfpLcHb8kF1/Mf/fT6HnWHMdUWqIHxoiSjexZiui1A0/dEWUtmHNPERpsZUH2WJ3rxKPSIdX6XiMKPXGmvKIVgivQohWJSx6YP11+g5WTUK04vAiBtGaBeDyJDqMF0cQrVpYthnRGkq4hiJau7GuhW/LKiHDskpzrEvDKV8WtkobFrZ24UQ9H5YW44xLi7VwZIpxcbcbKdXNuDUyG2cychQxtJ4YkhPPOsTQJXLiUMmwNjhasQUx9obyOBafzBZTiMoUIguZKUhlQszSRtYHaI5z+pnsT6NxKI5HiMee8xlRGoJDhdiNeOg6ZWmNRHKEdIzlXZj7w/PIDYBEdgQoxmokla2nNL9J5EeAeI4iKWwPXfiXRMcIUJPxHEOS6CTDKYVuTGRH0BViEDNZyk4u8gpBeMMuJtKegujcj2DN1/bnmAgAEIBhIJIZGZHOWAEslPsoyCMgIHxPmAgICAjXIQRQSsh+JSH7vYQ1StvZryW8vy9JkiQdHsFQT60Y7OcAAAAASUVORK5CYII=">
<input type="text" id="search-query-input" placeholder="Search" enterkeyhint="go" onkeypress="return searchKeyPress(event);" style="box-shadow:none" ;="">
</div>
</body>

Use CSS filter on any page element. This may require you to duplicate the existing background into the #search-query Div (so that there is an image present to be blurred, it then appears like a blur of the original image behind it) but also try it with no background as a test. It's been a while since I used it but you may find that the blur applies to everything behind it regardless.
#search-query{
filter: blur(10px);
}

How to I add error messages as per the error in HTML

Currently the Error message that is displayed is common for all the errors . But i want to display different error messages for different errors. Like for Invalid password it should display invalid password. Whereas for invalid username it should display invalid username.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
display: grid;
justify-items: center;
align-items: center;
background-color: #d39090;
}
#main-holder {
width: 50%;
height: 70%;
display: grid;
justify-items: center;
align-items: center;
background-color: white;
border-radius: 7px;
box-shadow: 0px 0px 5px 2px black;
}
#signup-error-msg-holder {
width: 100%;
height: 100%;
display: grid;
justify-items: center;
align-items: center;
}
#signup-error-msg {
width: 23%;
text-align: center;
margin: 0;
padding: 5px;
font-size: 16px;
font-weight: bold;
color: #8a0000;
border: 1px solid #8a0000;
background-color: #e58f8f;
opacity: 0;
}
#error-msg-second-line {
display: block;
}
#signup-form {
align-self: flex-start;
display: grid;
justify-items: center;
align-items: center;
}
.signup-form-field::placeholder {
color: #2e4136;
}
.signup-form-field {
border: none;
border-bottom: 1px solid #755ddf;
margin-bottom: 10px;
border-radius: 3px;
outline: none;
padding: 0px 0px 5px 5px;
}
#signup-form-submit {
width: 100%;
margin-top: 20px;
padding: 10px;
border: none;
border-radius: 5px;
color: white;
font-weight: bold;
background-color: #43509b;
cursor: pointer;
outline: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Page</title>
<link rel="stylesheet" href="interlog.css">
</head>
<body>
<main id="main-holder">
<h1 id="signup-header"><b>Sign Up</b></h1>
<div id="signup-error-msg-holder">
<p id="signup-error-msg">Invalid username <span id="error-msg-second-line">and/or password</span></p>
</div>
<form id="signup-form">
<input type="text" name="username" id="username-field" class="signup-form-field" placeholder="Username">
<input type="password" name="password" id="password-field" class="signup-form-field" placeholder="Password">
<input type="submit" value="submit" id="signup-form-submit">
</form>
</main>
<script>
const signupForm = document.getElementById("signup-form");
const signupButton = document.getElementById("signup-form-submit");
const signupErrorMsg = document.getElementById("signup-error-msg");
signupButton.addEventListener("click", (e) => {
e.preventDefault();
const username = signupForm.username.value;
const password = signupForm.password.value;
if (username === "admin" && password === "password") {
alert("You have successfully logged in.");
location.reload();
} else {
signupErrorMsg.style.opacity = 1;
}
})
</script>
</body>
</html>
Can someone Please tell me How should i do that. I tried adding another message at and making the necessary changes in javascript, but it would display both messages simultaneously.
`<div id="signup-error-msg-holder">
<p id="signup-error-msg1">Invalid password</p>
</div>
<div id="signup-error-msg-holder">
<p id="signup-error-msg2">Invalid username </p>
</div>
`
const signupErrorMsg1 = document.getElementById("signup-error-msg1");
const signupErrorMsg2 = document.getElementById("signup-error-msg2");
signupButton.addEventListener("click", (e) => {
e.preventDefault();
const username = signupForm.username.value;
const password = signupForm.password.value;
if (username === "admin" && password === "password") {
alert("You have successfully logged in.");
location.reload();
} else if (username === "admin" && password !== "password") {
signupErrorMsg1.style.opacity = 1;
} else if (username !== "admin" && password === "password") {
signupErrorMsg2.style.opacity = 1;
}
})
`
Any help would be appreciated .

Test each and push to an error array. If the array has zero length the tests passed
const signupForm = document.getElementById("signup-form");
const signupButton = document.getElementById("signup-form-submit");
const signupErrorMsg = document.getElementById("signup-error-msg");
signupButton.addEventListener("click", (e) => {
e.preventDefault();
const username = signupForm.username.value;
const password = signupForm.password.value;
const msg = []
if (username !== "admin") msg.push("username")
if (password !== "password") msg.push("password")
if (msg.length === 0) {
alert("You have successfully logged in.");
location.reload();
return;
}
signupErrorMsg.textContent = "Invalid " + msg.join(" and ");
signupErrorMsg.style.opacity = 1;
})
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
display: grid;
justify-items: center;
align-items: center;
background-color: #d39090;
}
#main-holder {
width: 50%;
height: 70%;
display: grid;
justify-items: center;
align-items: center;
background-color: white;
border-radius: 7px;
box-shadow: 0px 0px 5px 2px black;
}
#signup-error-msg-holder {
width: 100%;
height: 100%;
display: grid;
justify-items: center;
align-items: center;
}
#signup-error-msg {
width: 23%;
text-align: center;
margin: 0;
padding: 5px;
font-size: 16px;
font-weight: bold;
color: #8a0000;
border: 1px solid #8a0000;
background-color: #e58f8f;
opacity: 0;
}
#error-msg-second-line {
display: block;
}
#signup-form {
align-self: flex-start;
display: grid;
justify-items: center;
align-items: center;
}
.signup-form-field::placeholder {
color: #2e4136;
}
.signup-form-field {
border: none;
border-bottom: 1px solid #755ddf;
margin-bottom: 10px;
border-radius: 3px;
outline: none;
padding: 0px 0px 5px 5px;
}
#signup-form-submit {
width: 100%;
margin-top: 20px;
padding: 10px;
border: none;
border-radius: 5px;
color: white;
font-weight: bold;
background-color: #43509b;
cursor: pointer;
outline: none;
}
<main id="main-holder">
<h1 id="signup-header"><b>Sign Up</b></h1>
<div id="signup-error-msg-holder">
<p id="signup-error-msg"></p>
</div>
<form id="signup-form">
<input type="text" name="username" id="username-field" class="signup-form-field" placeholder="Username">
<input type="password" name="password" id="password-field" class="signup-form-field" placeholder="Password">
<input type="submit" value="submit" id="signup-form-submit">
</form>
</main>

HTML Form getting disappear when i am clicking on tab?

I am trying to create a container that contains two forms.I want to show only one form at a time. Each form can be accessed when clicking on their respective tab and hide the other form.
But when i tried doing this i ended up in a situation where when i am clicking on the other tab to access the 2nd form then both of my form disappeared and only tabs remains their on the screen.
The desired output will be i should be able to toggle between the form.
I Had tried to debug but didn't got where i am going wrong.
Here is my javascript, HTML and CSS code:
const tabs = document.querySelectorAll(".tab");
const forms = document.querySelectorAll(".form-div");
const removeActiveTab = () =>{
tabs.forEach(tab => tab.classList.remove("active"));
};
const removeActiveForm = () => {
forms.forEach(form => form.classList.remove("current"));
};
function setActiveForm(tab){
removeActiveForm();
forms.forEach(form => {
if (tab.classList.contains(form.dataset['form'])){
form.classList.add('current')
}
});
}
function setActiveTab(tab){
if(!tab.classList.contains("active")){
removeActiveTab();
tab.classList.add("active");
}
}
tabs.forEach(tab => {
tab.addEventListener("click", () =>{
setActiveTab(tab);
setActiveForm(tab);
});
});
*{
margin : 0;
padding: 0;
box-sizing: border-box;
}
html,
body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #e6eeff;
}
.main-div{
background-color:#1a2a4d;
padding: 3rem;
width: 700px;
}
.tabs{
display: flex;
}
.tab{
flex: 1;
text-align: center;
color: #fff;
cursor: pointer;
border: 2px solid #02a1fd;
transition: background 300ms;
}
.tab:hover{
background-color: #02a1fd;
}
.tab:nth-child(1){
border-radius: 25px 0 0 25px;
}
.tab:nth-child(2){
border-radius: 0 25px 25px 0;
}
.tab h2{
padding: .5rem 1rem;
}
.active{
background-color: #02a1fd;
}
.form-div{
display: none;
opacity: 0;
}
.current{
display: block;
animation: fadeIn 500ms ease-in forwards;
}
.form-div h1{
text-align: center;
color: #fff;
padding: 1rem 0;
}
.input{
padding: .5rem 1rem;
}
.input label{
padding: 0.3rem 0.6rem;
font-size: 1.3rem;
color: #fff;
}
.req{
color: #02a1fd;
}
.input input{
width: 100%;
padding: .3rem;
font-size: 1.3rem;
background-color: transparent;
color: #fff;
border: 1px solid #fff;
outline: 0;
}
.input input:focus{
border: 1px solid #02a1fd;
}
.form-submit{
padding: .5rem 1rem;
}
.form-submit input{
padding: 1rem;
width: 100%;
font-size: 1.5rem;
background-color: #02a1fd;
border: 0;
color: #fff;
}
.form-submit input:hover{
background-color: #02886d;
}
#keyframes fadeIn{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="main-div">
<div class="tabs">
<div class="tab encryption active"><h2>Encryption</h2></div>
<div class="tab decryption"><h2>Decryption</h2></div>
</div>
<div class="form-div current" data-form="Encryption">
<h1>Encryption</h1>
<form action="#">
<div class="input">
<label for="plaintext">Enter Plain text </label>
<input type="text" id="plaintext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="form-submit">
<input type="submit" value="encryption">
</div>
</form>
</div>
<div class="form-div" data-form="Decryption">
<h1>Decryption</h1>
<form action="#">
<div class="input">
<label for="decryptiontext">Enter Encrypted text </label>
<input type="text" id="decryptiontext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="input">
<label for="key">Enter key </label>
<input type="number" id="key">
</div>
<div class="form-submit">
<input type="submit" value="decryption">
</div>
</form>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
Thanks in advance

The problem is in the below line -
if (tab.classList.contains(form.dataset['form'])){
Here you are checking if class list in the tab has the data-form value.
But the classes are in lower case (decryption, encryption), but data-form value is in capitals (Decryption, Encryption). That's the reason the condition never matches and the current class is never added to form.
You can either change the case, so that it matches or convert case to lower while matching as below -
if (tab.classList.contains(form.dataset['form'].toLowerCase())) {
Final Code -
const tabs = document.querySelectorAll(".tab");
const forms = document.querySelectorAll(".form-div");
const removeActiveTab = () => {
tabs.forEach(tab => tab.classList.remove("active"));
};
const removeActiveForm = () => {
forms.forEach(form => form.classList.remove("current"));
};
function setActiveForm(tab) {
removeActiveForm();
forms.forEach(form => {
if (tab.classList.contains(form.dataset['form'].toLowerCase())) {
form.classList.add('current')
}
});
}
function setActiveTab(tab) {
if (!tab.classList.contains("active")) {
removeActiveTab();
tab.classList.add("active");
}
}
tabs.forEach(tab => {
tab.addEventListener("click", () => {
debugger;
setActiveTab(tab);
setActiveForm(tab);
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #e6eeff;
}
.main-div {
background-color: #1a2a4d;
padding: 3rem;
width: 700px;
}
.tabs {
display: flex;
}
.tab {
flex: 1;
text-align: center;
color: #fff;
cursor: pointer;
border: 2px solid #02a1fd;
transition: background 300ms;
}
.tab:hover {
background-color: #02a1fd;
}
.tab:nth-child(1) {
border-radius: 25px 0 0 25px;
}
.tab:nth-child(2) {
border-radius: 0 25px 25px 0;
}
.tab h2 {
padding: .5rem 1rem;
}
.active {
background-color: #02a1fd;
}
.form-div {
display: none;
opacity: 0;
}
.current {
display: block;
animation: fadeIn 500ms ease-in forwards;
}
.form-div h1 {
text-align: center;
color: #fff;
padding: 1rem 0;
}
.input {
padding: .5rem 1rem;
}
.input label {
padding: 0.3rem 0.6rem;
font-size: 1.3rem;
color: #fff;
}
.req {
color: #02a1fd;
}
.input input {
width: 100%;
padding: .3rem;
font-size: 1.3rem;
background-color: transparent;
color: #fff;
border: 1px solid #fff;
outline: 0;
}
.input input:focus {
border: 1px solid #02a1fd;
}
.form-submit {
padding: .5rem 1rem;
}
.form-submit input {
padding: 1rem;
width: 100%;
font-size: 1.5rem;
background-color: #02a1fd;
border: 0;
color: #fff;
}
.form-submit input:hover {
background-color: #02886d;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="main-div">
<div class="tabs">
<div class="tab encryption active">
<h2>Encryption</h2>
</div>
<div class="tab decryption">
<h2>Decryption</h2>
</div>
</div>
<div class="form-div current" data-form="Encryption">
<h1>Encryption</h1>
<form action="#">
<div class="input">
<label for="plaintext">Enter Plain text </label>
<input type="text" id="plaintext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="form-submit">
<input type="submit" value="encryption">
</div>
</form>
</div>
<div class="form-div" data-form="Decryption">
<h1>Decryption</h1>
<form action="#">
<div class="input">
<label for="decryptiontext">Enter Encrypted text </label>
<input type="text" id="decryptiontext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="input">
<label for="key">Enter key </label>
<input type="number" id="key">
</div>
<div class="form-submit">
<input type="submit" value="decryption">
</div>
</form>
</div>
</div>
</body>
</html>

An alternative way to do the job - just set the style display from block to none (and vice versa) :
$("#enx").click(function(){
document.getElementById("eny").style.display = "block";
document.getElementById("dey").style.display = "none";
});
$("#dex").click(function(){
document.getElementById("eny").style.display = "none";
document.getElementById("dey").style.display = "block";
});
*{
margin : 0;
padding: 0;
box-sizing: border-box;
}
html,
body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #e6eeff;
}
.main-div{
background-color:#1a2a4d;
padding: 3rem;
width: 700px;
}
.tabs{
display: flex;
}
.tab{
flex: 1;
text-align: center;
color: #fff;
cursor: pointer;
border: 2px solid #02a1fd;
transition: background 300ms;
}
.tab:hover{
background-color: #02a1fd;
}
.tab:nth-child(1){
border-radius: 25px 0 0 25px;
}
.tab:nth-child(2){
border-radius: 0 25px 25px 0;
}
.tab h2{
padding: .5rem 1rem;
}
.active{
background-color: #02a1fd;
}
.form-div{
display: none;
opacity: 0;
}
.current{
display: block;
animation: fadeIn 500ms ease-in forwards;
}
.form-div h1{
text-align: center;
color: #fff;
padding: 1rem 0;
}
.input{
padding: .5rem 1rem;
}
.input label{
padding: 0.3rem 0.6rem;
font-size: 1.3rem;
color: #fff;
}
.req{
color: #02a1fd;
}
.input input{
width: 100%;
padding: .3rem;
font-size: 1.3rem;
background-color: transparent;
color: #fff;
border: 1px solid #fff;
outline: 0;
}
.input input:focus{
border: 1px solid #02a1fd;
}
.form-submit{
padding: .5rem 1rem;
}
.form-submit input{
padding: 1rem;
width: 100%;
font-size: 1.5rem;
background-color: #02a1fd;
border: 0;
color: #fff;
}
.form-submit input:hover{
background-color: #02886d;
}
#keyframes fadeIn{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="main-div">
<div class="tabs">
<div id=enx class="tab encryption active"><h2>Encryption</h2></div>
<div id=dex class="tab decryption"><h2>Decryption</h2></div>
</div>
<div id=eny class="form-div current" data-form="Encryption">
<h1>Encryption</h1>
<form action="#">
<div class="input">
<label for="plaintext">Enter Plain text </label>
<input type="text" id="plaintext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="form-submit">
<input type="submit" value="encryption">
</div>
</form>
</div>
<div id=dey class="form-div current" style="display:none;" data-form="Decryption">
<h1>Decryption</h1>
<form action="#">
<div class="input">
<label for="decryptiontext">Enter Encrypted text </label>
<input type="text" id="decryptiontext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="input">
<label for="key">Enter key </label>
<input type="number" id="key">
</div>
<div class="form-submit">
<input type="submit" value="decryption">
</div>
</form>
</div>
</div>
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

I am getting refresh after executing submit button in login form - javascript

On your HTML, you need to place event.preventDefault(); like this: <form class="login_form" onsubmit="event.preventDefault(); validate();"> event.preventDefault() will stop any default behavior when submitting. In the case of submit, it is the page reload. https://codepen.io/tunk/pen/tjGdp

Related

How to display values from form inside of a div

QR Code generator only generate the QR code for the first input

CSS backdrop effect - blur background of search bar

How to I add error messages as per the error in HTML

HTML Form getting disappear when i am clicking on tab?

Categories

Resources