I am struggling to figure out how to refactor my JS for form validation. I figured out how to target each element using there ID, I just feel there has to be a better way to clean up this code using an array though. Any help would be appreciated. The commented out JS was my attempt at beginning to refactor.
"use strict"
//clunky code for error-img:
const fNameInput = document.getElementById("first-input");
const lNameInput = document.getElementById("last-input");
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
fNameInput.addEventListener("blur", function(){
const errorImg1 = document.getElementById("error-img1");
if(!fNameInput.value){
errorImg1.classList.add("visible");
} else{
errorImg1.classList.remove("visible");
}
});
lNameInput.addEventListener("blur", function(){
const errorImg2 = document.getElementById("error-img2");
if(!lNameInput.value){
errorImg2.classList.add("visible");
} else{
errorImg2.classList.remove("visible");
}
});
emailInput.addEventListener("blur", function(){
const errorImg3 = document.getElementById("error-img3");
if(!emailInput.value){
errorImg3.classList.add("visible");
} else{
errorImg3.classList.remove("visible");
}
});
passwordInput.addEventListener("blur", function(){
const errorImg4 = document.getElementById("error-img4");
if(!passwordInput.value){
errorImg4.classList.add("visible");
} else{
errorImg4.classList.remove("visible");
}
});
// attempt at making clean code that applies to all inputs:
// const inputs = document.getElementsByTagName("input");
// const errorImgs = document.getElementsByClassName("error-img");
// //learn forEach loop:
// inputs[i].addEventListener("blur", () => {
// inputs.forEach(element => {
// if(!element.value){
// }
// });
// });
#import url(https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap);
body{
margin: 0;
background-image: url(images/bg-intro-desktop.png);
background-color: rgba(255, 0, 0, .5);
font-family: 'Poppins', sans-serif;
}
.container{
margin: 6rem auto;
height: auto;
width: 70%;
display: grid;
grid-template-areas:
"left right"
"left right";
grid-auto-columns: minmax(0, 32rem);
}
.left-container{
grid-area: left;
}
.left-heading{
color: white;
font-size: 2.7rem;
line-height: 3rem;
font-weight: 700;
position: relative;
top: 30%;
}
.left-content{
color: white;
font-size: .9rem;
font-weight: 400;
position: relative;
top: 29%;
}
.right-container{
grid-area: right;
}
.right-top-container{
background-color: hsl(248, 32%, 49%);
border-radius: .5rem;
height: 11.5%;
margin: auto auto 1.5rem auto;
box-shadow: 0px 6px 1px rgba(0, 0, 0, .2);
}
.top-text-special{
color: white;
font-weight: 600;
font-size: .85rem;
position: relative;
top: 50%;
left: 72%;
transform: translate(-50%, -50%);
}
.top-text{
color: white;
font-weight: 400;
}
.right-form{
background-color: white;
height: 23rem;
border-radius: .5rem;
padding: 1.5rem;
padding-top: 2.5rem;
box-shadow: 0 7px 1px rgba(0, 0, 0, .15);
display: grid;
grid-template-areas:
"fname"
"lname"
"email"
"password"
"submit-btn"
"bottom-text";
}
input{
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: .8rem;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 0 0 1.5rem;
height: 3rem;
width: 90%;
border: solid;
border-width: .09rem;
border-radius: .4rem;
border-color: hsl(246, 25%, 77%);
}
.first-name-div{
grid-area: fname;
position: relative;
}
.last-name-div{
grid-area: lname;
position: relative;
}
.email-div{
grid-area: email;
position: relative;
}
.password-div{
grid-area: password;
position: relative;
}
.submit-btn-div{
grid-area: submit-btn;
}
#submit-btn{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 97.1%;
height: 3rem;
border-radius: .4rem;
background-color: hsl(154, 59%, 51%);
border: none;
color: white;
box-shadow: 0 2px .5px rgba(0, 0, 0, .4);
cursor: pointer;
}
.right-footer-text{
grid-area: bottom-text;
}
.footer-text{
position: relative;
top: 1%;
left: 58%;
transform: translate(-50%, -50%);
color: grey;
font-size: .7rem;
font-weight: 600;
}
.footer-span{
color: hsl(0, 100%, 74%);
}
.error-img{
display: none;
position: absolute;
bottom: 75%;
right: 5%;
}
.visible{
display: block;
}
<!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>FrontEndMentor#3</title>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="images/favicon-32x32.png" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="left-container">
<h1 class="left-heading">Learn to code by <br>
watching others</h1>
<p class="left-content">See how experienced developers solve problems in real-time. <br>
Watching scripted tutorials is great, but understanding how <br>
developers think is invaluable.</p>
</div>
<div class="right-container">
<div class="right-top-container">
<p class="top-text-special">Try it free 7 days <span class="top-text">then $20/mo. thereafter</span></p>
</div>
<div class="right-form">
<form action="#" class="form">
<div class="first-name-div">
<input type="text" name="fname" id="first-input" placeholder="First Name">
<span><img class="error-img" id="error-img1" src="images/icon-error.svg" alt=""></span>
</div>
<div class="last-name-div">
<input type="text" name="lname" id="last-input" placeholder="Last Name">
<span><img class="error-img" id="error-img2" src="images/icon-error.svg" alt=""></span>
</div>
<div class="email-div">
<input type="email" name="email-address" id="email" placeholder="example#email.com">
<span><img class="error-img" id="error-img3" src="images/icon-error.svg" alt=""></span>
</div>
<div class="password-div">
<input type="password" name="password" id="password" placeholder="Password">
<span><img class="error-img" id="error-img4" src="images/icon-error.svg" alt=""></span>
</div>
<div class="submit-btn-div">
<button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>
</div>
</form>
</div>
<div class="right-footer-text">
<p class="footer-text">By clicking the button, you are agreeing to our <span class="footer-span">Terms and Services</span></p>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
(Not all styling is complete, will do when JS is cleaned up)
To improve your JS logic you can apply the 'Don't Repeat Yourself' principle, or DRY. This means that you should avoid code repetition by genericising the logic as much as possible. The corollary effect of this is that the code can be made to work for an infinite number of form fields, so long as the HTML structure around them is consistent.
Here's an example of this for your use case. Note the use of a single class applied to all the fields to be validated, and also how DOM traversal is used to find the error img related to the current field only.
"use strict"
const fields = document.querySelectorAll('.to-validate').forEach(el => {
el.addEventListener('blur', e => {
let field = e.target;
field.closest('div').querySelector('.error-img').classList.toggle('visible', !field.value.trim().length);
});
});
#import url(https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap);
body {
margin: 0;
background-image: url(images/bg-intro-desktop.png);
background-color: rgba(255, 0, 0, .5);
font-family: 'Poppins', sans-serif;
}
.container {
margin: 6rem auto;
height: auto;
width: 70%;
display: grid;
grid-template-areas: "left right" "left right";
grid-auto-columns: minmax(0, 32rem);
}
.left-container {
grid-area: left;
}
.left-heading {
color: white;
font-size: 2.7rem;
line-height: 3rem;
font-weight: 700;
position: relative;
top: 30%;
}
.left-content {
color: white;
font-size: .9rem;
font-weight: 400;
position: relative;
top: 29%;
}
.right-container {
grid-area: right;
}
.right-top-container {
background-color: hsl(248, 32%, 49%);
border-radius: .5rem;
height: 11.5%;
margin: auto auto 1.5rem auto;
box-shadow: 0px 6px 1px rgba(0, 0, 0, .2);
}
.top-text-special {
color: white;
font-weight: 600;
font-size: .85rem;
position: relative;
top: 50%;
left: 72%;
transform: translate(-50%, -50%);
}
.top-text {
color: white;
font-weight: 400;
}
.right-form {
background-color: white;
height: 23rem;
border-radius: .5rem;
padding: 1.5rem;
padding-top: 2.5rem;
box-shadow: 0 7px 1px rgba(0, 0, 0, .15);
display: grid;
grid-template-areas: "fname" "lname" "email" "password" "submit-btn" "bottom-text";
}
input {
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: .8rem;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 0 0 1.5rem;
height: 3rem;
width: 90%;
border: solid;
border-width: .09rem;
border-radius: .4rem;
border-color: hsl(246, 25%, 77%);
}
.first-name-div {
grid-area: fname;
position: relative;
}
.last-name-div {
grid-area: lname;
position: relative;
}
.email-div {
grid-area: email;
position: relative;
}
.password-div {
grid-area: password;
position: relative;
}
.submit-btn-div {
grid-area: submit-btn;
}
#submit-btn {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 97.1%;
height: 3rem;
border-radius: .4rem;
background-color: hsl(154, 59%, 51%);
border: none;
color: white;
box-shadow: 0 2px .5px rgba(0, 0, 0, .4);
cursor: pointer;
}
.right-footer-text {
grid-area: bottom-text;
}
.footer-text {
position: relative;
top: 1%;
left: 58%;
transform: translate(-50%, -50%);
color: grey;
font-size: .7rem;
font-weight: 600;
}
.footer-span {
color: hsl(0, 100%, 74%);
}
.error-img {
display: none;
position: absolute;
bottom: 75%;
right: 5%;
/* following rules only for this demo */
width: 20px;
height: 20px;
background-color: #C00;
}
.visible {
display: block;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap" rel="stylesheet">
<div class="container">
<div class="left-container">
<h1 class="left-heading">Learn to code by <br> watching others</h1>
<p class="left-content">See how experienced developers solve problems in real-time. <br> Watching scripted tutorials is great, but understanding how <br> developers think is invaluable.</p>
</div>
<div class="right-container">
<div class="right-top-container">
<p class="top-text-special">Try it free 7 days <span class="top-text">then $20/mo. thereafter</span></p>
</div>
<div class="right-form">
<form action="#" class="form">
<div class="first-name-div">
<input type="text" name="fname" id="first-input" placeholder="First Name" class="to-validate" />
<span><img class="error-img" src="images/icon-error.svg" alt=""></span>
</div>
<div class="last-name-div">
<input type="text" name="lname" id="last-input" placeholder="Last Name" class="to-validate" />
<span><img class="error-img" src="images/icon-error.svg" alt=""></span>
</div>
<div class="email-div">
<input type="email" name="email-address" id="email" placeholder="example#email.com" class="to-validate" />
<span><img class="error-img" src="images/icon-error.svg" alt=""></span>
</div>
<div class="password-div">
<input type="password" name="password" id="password" placeholder="Password" class="to-validate" />
<span><img class="error-img" src="images/icon-error.svg" alt=""></span>
</div>
<div class="submit-btn-div">
<button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>
</div>
</form>
</div>
<div class="right-footer-text">
<p class="footer-text">By clicking the button, you are agreeing to our <span class="footer-span">Terms and Services</span></p>
</div>
</div>
</div>
It's worth noting, though, that what you're doing can be achieved simply by adding the required attribute to your input elements. Then there's no JS required at all.
You can do this with required attribute and css invalid selector. No need to code anything. But by default the error will show up.
input + span{
display: none;
color: red;
}
input:invalid + span{
display: inline-block;
}
<form action="#" class="form">
<div class="first-name-div">
<input type="text" name="fname" id="first-input" placeholder="First Name" required>
<span>X</span>
</div>
<div class="last-name-div">
<input type="text" name="lname" id="last-input" placeholder="Last Name" required>
<span>X</span>
</div>
<div class="email-div">
<input type="email" name="email-address" id="email" placeholder="example#email.com" required>
<span>X</span>
</div>
<div class="password-div">
<input type="password" name="password" id="password" placeholder="Password" required>
<span>X</span>
</div>
<div class="submit-btn-div">
<button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>
</div>
</form>
Now if you want it to show up, you would have to do what you are doing with blur and add a class it it was interacted with. Using foucsout with event delegation you just have to add one event listener to the form.
document.querySelector("form").addEventListener("focusout", function (e) {
const input = e.target.closest('input');
if (input) input.classList.add('touched');
});
input + span{
display: none;
color: red;
}
input.touched:invalid + span{
display: inline-block;
}
<form action="#" class="form">
<div class="first-name-div">
<input type="text" name="fname" id="first-input" placeholder="First Name" required>
<span>X</span>
</div>
<div class="last-name-div">
<input type="text" name="lname" id="last-input" placeholder="Last Name" required>
<span>X</span>
</div>
<div class="email-div">
<input type="email" name="email-address" id="email" placeholder="example#email.com" required>
<span>X</span>
</div>
<div class="password-div">
<input type="password" name="password" id="password" placeholder="Password" required>
<span>X</span>
</div>
<div class="submit-btn-div">
<button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>
</div>
</form>
So I am trying to do this thing where a legend tag shows when the input box is being clicked. The idea is there is that the input box is inside a fieldset and the legend as a hidden class first. If the input box is on focus or clicked, the hidden class will be removed and it will show like this
I also added a part wherein if was left blank the legend tag will disappear by re-adding the removed
hidden class. However, it also leaves awkward whitespace in a place where it is formerly was like this
Did I do something wrong? Is there something I must do first?
The code is here:
$(function() {
$(".next").click(function() {
var div = $(this).closest('.wrapper');
var next = $(this).closest('.wrapper').next();
div.addClass('hidden');
next.removeClass('hidden');
})
})
$(function() {
$('input').click(function() {
$('input').each(function(index) {
const legend = $(this).closest('fieldset').children('legend');
if (($(this).val() == "" || $(this).val() == " ") && $(this).is(":focus") == false) {
if (legend.hasClass('hidden') == false) {
legend.addClass('hidden');
$(this).css("margin-top", "10px");
}
} else {
legend.removeClass('hidden');
$(this).css("margin-top", "-150%");
}
})
})
})
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#700&display=swap');
html {
font-family: "Poppins", sans-serif;
margin: 0px;
padding: 0px;
background: #EDE9E8;
}
.cover {
width: 100%;
height: 100%;
position: absolute;
}
form {
/*border: 3px solid red;/**/
width: 57%;
height: 100%;
margin: 0 auto;
}
.child {
width: 50%;
}
.wrapper {
background: white;
width: 95%;
height: 65%;
padding: 3%;
margin-top: 8%;
border-radius: 50px;
display: flex;
}
.border_none {
border: none;
}
.border_black {
border: 2px solid black;
}
.with_image {
text-align: center;
margin-top: 15%;
}
.with_image img {
width: 40%;
}
.input_box {
height: 40px;
width: 70%;
}
.wrapper h1 {
margin-top: 10%;
}
.wrapper label {
font-size: 150%;
}
legend {
font-size: 12px;
/*border: 2px solid black;/**/
}
.wrapper fieldset input[type="text"],
.wrapper fieldset input[type="email"],
.wrapper input[type="password"],
input[type="number"] {
width: 100 %;
height: 100 %;
margin - top: 10 px;
border: none;
/**/
}
.wrapper fieldset input[type="text"]: focus,
.wrapper input[type="email"]: focus,
.wrapper input[type="password"]: focus,
input[type="number"]: focus {
outline: none;
}
.child fieldset {
overflow: hidden;
border - radius: 20 px;
}
.wrapper select {
margin - left: 14 %;
height: 40 px;
}
.wrapper.next {
background: #2c54db;
width: 15%;
height: 8%;
border: white;
color: white;
float: right;
border-radius: 40px;
font-weight: bold;
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cover">
<form method="post" action="">
<fieldset class="wrapper border_none">
<div class="child">
<h1>Identity</h1>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">First Name</legend>
<input class="input_inner" type="text" name="fname" placeholder="First Name">
</fieldset><br>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">Last Name</legend>
<input class="input_inner" type="text" name="lname" placeholder="Last Name">
</fieldset><br>
<label>Civil Status</label>
<select name="civil_status" id="cv_stat">
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Widowed">Widowed</option>
<option value="Annulled">Anulled</option>
</select><br><br>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">Email</legend><input type="email" name="email" placeholder="Email">
</fieldset>
<button type="button" class="next">
Next
</button>
</div>
<div class="child with_image">
<img src="../images/registration/user_folder_125px.png">
</div>
</fieldset>
<fieldset class="wrapper hidden">
<div class="child">
<h1>Password</h1>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">Password</legend>
<input type="password" name="password" placeholder="Password">
</fieldset>
<br>
<fieldset class="input_box" class="input_outer">
<legend class="input_tag hidden">Confirm Password</legend>
<input type="password" name="cpassword" placeholder="Confirm Password">
</fieldset>
<button type="button" class="next">
Next
</button>
</div>
</div>
<div class="child">
</fieldset>
</form>
</div>
Thank you in advance!
I'm fairly new to coding less than 6 months and am working on my first paid website and I've run into an issue i'm really not sure how to fix. thanks for the help. I've already tried setting margins but CSS is tricky so maybe i'm not doing enough i'm really not sure how to fix
This is what the page looks like when down sized
This is what the page looks like at regular size
.login-page{
width: 360px;
padding: 10% 0 0;
margin: auto;
}
.form{
position: relative;
z-index: 1;
background: rgba(0,0,0,0.5);
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
border-radius: 25px;
}
.header-logo{
width: 100%;
max-width: 300px;
height: auto;
}
.header{
text-align: right;
float: right
}
ul {
list-style-type: none;
margin: 15px;
padding: 0;
width: 300px;
background-color: rgba(160, 143, 70, 0.4);
font-family: "Roboto", sans-serif;
border-radius: 25px;
text-align: center;
font-size: 20px;
}
li a {
display: block;
color: #ffffff;
padding: 8px 16px;
text-decoration: none;
}
<body>
<div class="header">
<img src="header-logo.png" class="header-logo">
<ul>
<li>Home</li>
<br>
<li>Store</li>
<br>
<li>Contact</li>
<br>
<li>About</li>
</ul>
</div>
<div class="login-page">
<div class="form">
<form class="register-form">
<h1 class="register-header">Register</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Email">
<input type="text" placeholder="Password">
<button>Create</button>
<p class="message">Already Registered? Log-in</p>
</form>
<form class=:login-form>
<h1 class="login-header">Log-In</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Password">
<button>Log-in</button>
<p class="message">Not Registered? Register</p>
</form>
</div>
</div>
You can make it clear:both for login div in mobile mode. It is due to div .login-page where you gave margin:auto to make it centralized.
.login-page{
width: 360px;
padding: 10% 0 0;
margin: auto;
}
.form{
position: relative;
z-index: 1;
background: rgba(0,0,0,0.5);
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
border-radius: 25px;
}
.header-logo{
width: 100%;
max-width: 300px;
height: auto;
}
.header{
text-align: right;
float: right
}
ul {
list-style-type: none;
margin: 15px;
padding: 0;
width: 300px;
background-color: rgba(160, 143, 70, 0.4);
font-family: "Roboto", sans-serif;
border-radius: 25px;
text-align: center;
font-size: 20px;
}
li a {
display: block;
color: #ffffff;
padding: 8px 16px;
text-decoration: none;
}
#media(max-width:767px){
.login-page{
clear: both;
}
}
<div class="header">
<img src="header-logo.png" class="header-logo">
<ul>
<li>Home</li>
<br>
<li>Store</li>
<br>
<li>Contact</li>
<br>
<li>About</li>
</ul>
</div>
<div class="login-page">
<div class="form">
<form class="register-form">
<h1 class="register-header">Register</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Email">
<input type="text" placeholder="Password">
<button>Create</button>
<p class="message">Already Registered? Log-in</p>
</form>
<form class=:login-form>
<h1 class="login-header">Log-In</h1>
<input type="text" placeholder="Username">
<input type="text" placeholder="Password">
<button>Log-in</button>
<p class="message">Not Registered? Register</p>
</form>
</div>
</div>
I made this log-in and register form in which an onclick submit button of the form its display which form is submitted, left or right to implement it. I have used onclick property and passed a function to it fun() which has one parameter of the type no. So I used two functions fun(0) and fun(1) used to display a message which forms submitted by the user but it does not display the message.
And also I have a problem with the CSS it's not scaling according to the screen size as I used bootstrap for CSS and try the width, position property scale in % but then also it's not working.
function fun(Number n) {
if (n === 1) {
document.getElementsByClassName('m1').style.display = 'none';
} else {
document.getElementsByClassName('m2').style.display = 'none';
}
document.getElementsByClassName('modal').style.display = 'flex';
}
body {
background: linear-gradient(45deg, #fff722, #ff26f9);
font-weight: bold;
letter-spacing: 2px;
font-family: open sans, helvetica neue, Helvetica, Arial, sans-serif;
text-align: center;
}
input[type=radio] {
width: 9%;
}
input, #e {
width: 100%;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.row {
position: relative;
}
form {
font-size: 20px;
border-bottom: solid 5px #dedfe0;
border-right: solid 5px #dedfe0;
padding: 5px;
width: 500px;
margin: 80px;
}
label {
font-family: arial;
color: #0000ff;
}
#log {
position: absolute;
top: 20px;
right: 20px;
transform: translate(50, 50);
}
button:hover {
opacity: 0.8;
}
.modal, .modal1 {
display: none;
justify-content: center;
align-items: center;
border-radius: 6px;
z-index: 1;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
}
.modal-content {
width: 500px;
height: 300px;
background: linear-gradient(45deg, #fff722, #ff26f9);
position: absolute;
text-align: center;
padding: 2%;
justify-content: center;
align-items: center;
border: solid 5px rgba(100, 0, 50, 0.5);
left: 500px;
top: 180px;
}
.close {
position: absolute;
right: 25px;
top: 0;
color: black;
font-size: 50px;
font-weight: bold;
}
.close:hover, .close:focus {
color: red;
cursor: pointer;
}
.animate {
animation: zoom 10000;
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(2)
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<form class="jumbotron" class="column" id="register">
<h1 class="container " style="border: solid 3px grey; color:magenta;
"><b>REGISTER<b></b></h1><br>
<label>First Name:</label><input type="text"><br>
<label>Last Name:</label> <input type="text"><br>
<label>D.O.B:</label> <input type="date"><br>
<label>City:</label> <input type="text"><br>
<label>Mobile No.: </label>
<select style=" width: 20%;">
<option>+91</option>
<option>+92</option>
<option>+93</option>
<option>+94</option>
<option>+95</option>
</select> <input type="text"><br>
<label>Gender:</label>
<div style=" "> <input type="radio" value="Male" name="Gender">Male
<input type="radio" value="Female" name="Gender">Female
<input type="radio" value="Other" name="Gender">Other<br></div>
<label>Employment Status:</label>
<select id="e">
<option>Employed</option>
<option>Unemployed</option>
</select><br><br><br>
<input type="submit" onclick="fun(0)" class="btn-info btn-lg" value=Register>
<input type="reset" class="btn-info btn-lg" value=Reset>
</form>
<div class="column" id="log">
<form class="jumbotron">
<h1 style="border: solid 3px grey; color:magenta;"><b>LOG-IN</b></h1><br>
<label>Email-Id:</label><input type="email"><br>
<label>Username:</label><input type="text"><br>
<label>Password:</label><input type="Password" min,="5"></br><br><br>
<input type="submit" class="btn btn-info btn-lg " onclick="fun(1)" value="LOG-IN">
</form>
</div>
</div>
<nav class="modal">
<div class="modal-content">
<span onclick="document.querySelector('.modal').style.display='none'" class="close">×</span>
<div style="border:solid 5px #dedfe0" class="container">
<h3 class='m1'>Left form submited</h3>
<h3 class='m2'>Right form submited</h3>
</div>
</div>
</nav>
</body>
<script type="text/javascript">
</script>
</html>
In this I want to make appear a window when I click an image. The image is the address book one and it is supposed to appear an address book in the div id="janela2". I want it to be draggable and resizable but what is the most important here is to make it work because I believe the js code is correct but when I click on the image the address book doesn't appear.
The js code that is not running are the two first functions of the js and I don't know why. I only put the address book code so that you can see if it still works with the problem fixed. What is going on? How to solve it?
Check the codepen since the snippet is not working
The first part of it is solved. Now the windows shows up uppon clicking but now the address book doesn't work. https://codepen.io/Fropis/pen/mYydYd There's the new code but now the address book won't work. Why?
https://codepen.io/Fropis/pen/XwJWjg
/**************************************** Contactos **********************************************************/
function openAB(){
document.getElementById("janela2").innerHTML = document.getElementById("mydiv").innerHTML;
}
function fechar(){
document.getElementById("janela2").innerHTML = "";
}
/*****************************THE ONE THAT MATTERS IS ABOVE****************/
html, body {
width: 3779.527559055px;
height: 100%;
font-family: "Helvetica Neue", Helvetica, sans-serif;
color: #444;
-webkit-font-smoothing: antialiased;
background-image: url("https://images4.alphacoders.com/111/111298.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: 350% 100%;
font-family: Arial, Helvetica, sans-serif;
}
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
background-color: none;
left: 30%;
position: absolute;
bottom: 0;
height: 500px;
width: 1500px;
margin-left: auto;
margin-right: auto;
padding-left: 10%;
padding-right: 10%;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
text-align: center;
overflow: hidden;
}
#NetImg, #Home, #contact{
width: 400px;
height: 400px;
padding:20px;
background: none;
}
.panel {
background: #fafafa;
padding: 1em;
width: 92.5%;
margin: auto;
max-width: 30em;
}
input {
width: 100%;
box-sizing: border-box;
font-size: 1em;
margin-top: 0.5em;
padding: 0.5em;
}
input:focus {
outline: none;
}
input::after {
width: 100%;
height: 10px;
background: red;
}
.nav-list {
width: 92.5%;
max-width: 30em;
text-align: center;
margin: auto;
}
.nav-list li {
list-style: none;
display: inline-block;
background: white;
padding: 0.7em;
margin: 0 0.1em;
}
.nav-list .active {
background-color: black;
}
#janela2{
position: absolute;
width:1900px;
height:1500px;
left:1500px;
top:550px;
border-radius:20px black solid;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cale.css">
</head>
<body>
<div id="janela2">OLA</div>
<div id="mydiv" style="display:none;">
<div id="navigation">
<ul class="nav-list">
<li id="js-show-all">Mostrar Todos</li>
<li id="js-search">Procurar</li>
<li id="js-add-new">Adicionar Contacto</li>
</ul>
</div>
<div id="search-panel" class="panel">
<h1>Procurar Contacto</h1>
<form id="search" action="#">
<div id="results"></div>
<div>
<label>
<input type="text" name="search" id="search" placeholder="Insira nome do contacto" />
</label>
</div>
<input type="submit" value="Procurar"/>
</form>
</div>
<div id="contact-panel" class="panel">
<form id="contact" action="#">
<h1>Adicionar Novo Contacto</h1>
<div>
<label>
<input type="text" name="person" id="name" placeholder="José Bigodes" required/>
</label>
<label>
<input type="text" name="phone" id="name" placeholder="912942923" maxlength="9" pattern=".{9,}" required title="Insira 9 caracteres"/>
</label>
<label>
<input type="email" name="email" id="name" placeholder="nome#desk.com" pattern="+#desk.com" required/>
</label>
</div>
<div>
<input type="submit" value="Adicionar" />
</div>
</form>
</div>
<div id = "show-panel" class="panel">
</div>
</div>
<div class="navbar">
<a><img onclick="openAb()" src="http://downloadicons.net/sites/default/files/address-book-icon-62889.png" id="contact"></a>
</div>
</body>
<script src=cale.js></script>
</html>
openAb has a typo in html vs openAB function in js . Replace with
<img onclick="openAB()" ....
Your function name is openAB but you are calling openAb
<img onclick="openAB()" src="http://downloadicons.net/sites/default/files/address-book-icon-62889.png" id="contact">