Design Animated Students Contact Details | HTML CSS JS
1. index.html
<!DOCTYPE html>
<html>
<head>
<title>Animated Dynamic Form</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<style>
html,body{
height: 100%;
margin: 0;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(149,199,20,1) 0%, rgba(0,212,255,1) 96%);
}
.myForm{
background-color: rgba(0,0,0,0.5) !important;
padding: 1px !important;
border-radius: 1px !important;
color: white;
}
input{
border-radius:0 1px 1px 0 !important;
}
input:focus{
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}
.br-15{
border-radius: 1px 0 0 1px !important;
}
#add_more{
color: white !important;
background-color: #fa8231 !important;
border-radius: 1px !important;
border: 0 !important;
}
#remove_more{
color: white !important;
background-color: #fc5c65 !important;
border-radius: 1px !important;
border: 0 !important;
display: none;
}
.submit_btn{
border-radius: 1px !important;
background-color: #95c714 !important;
border: 0 !important;
}
</style>
<dvi class="container h-100">
<div class="d-flex justify-content-center">
<div class="card mt-5 col-md-4 animated bounceInDown myForm">
<div class="card-header">
<h4>Students Contact Details</h4>
</div>
<form>
<div class="card-body">
<div id="dynamic_container">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-user-graduate"></i></span>
</div>
<input type="text" placeholder="Student Name" class="form-control"/>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-phone-square"></i></span>
</div>
<input type="text" placeholder="Student Phone" class="form-control"/>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-at"></i></span>
</div>
<input type="email" placeholder="Student Email" class="form-control"/>
</div>
</div>
</div>
<div class="card-footer">
<a class="btn btn-secondary btn-sm" id="add_more"><i class="fas fa-plus-circle"></i> Add</a>
<a class="btn btn-secondary btn-sm" id="remove_more"><i class="fas fa-trash-alt"></i> Remove</a>
<button class="btn btn-success btn-sm float-right submit_btn"><i class="fas fa-arrow-alt-circle-right"></i> Submit</button>
</div>
</form>
</div>
</div>
</dvi>
<script>
var i=0;
$(document).ready(function()
{
$('#add_more').on('click', function(){
var colorR = Math.floor((Math.random() * 256));
var colorG = Math.floor((Math.random() * 256));
var colorB = Math.floor((Math.random() * 256));
i++;
var html ='<div id="append_no_'+i+'" class="animated bounceInLeft">'+
'<div class="input-group mt-3">'+
'<div class="input-group-prepend">'+
'<span class="input-group-text br-15" style="color:rgb('+colorR+','+colorG+','+colorB+'">'+
'<i class="fas fa-user-graduate"></i></span>'+
'</div>'+
'<input type="text" placeholder="Student Name" class="form-control"/>'+
'</div>'+
'<div class="input-group mt-3">'+
'<div class="input-group-prepend">'+
'<span class="input-group-text br-15" style="color:rgb('+colorR+','+colorG+','+colorB+'">'+
'<i class="fas fa-phone-square"></i></span>'+
'</div>'+
'<input type="text" placeholder="Student Phone" class="form-control"/>'+
'</div>'+
'<div class="input-group mt-3">'+
'<div class="input-group-prepend">'+
'<span class="input-group-text br-15" style="color:rgb('+colorR+','+colorG+','+colorB+'">'+
'<i class="fas fa-at"></i></span>'+
'</div>'+
'<input type="email" placeholder="Student Email" class="form-control"/>'+
'</div></div>';
$('#dynamic_container').append(html);
$('#remove_more').fadeIn(function()
{
$(this).show();
});
});
$('#remove_more').on('click', function()
{
$('#append_no_'+i).removeClass('bounceInLeft').addClass('bounceOutRight')
.fadeOut(function()
{
$(this).remove();
});
i--;
if(i==0)
{
$('#remove_more').fadeOut(function(){
$(this).hide()
});;
}
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Animated Dynamic Form</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<style>
html,body{
height: 100%;
margin: 0;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(149,199,20,1) 0%, rgba(0,212,255,1) 96%);
}
.myForm{
background-color: rgba(0,0,0,0.5) !important;
padding: 1px !important;
border-radius: 1px !important;
color: white;
}
input{
border-radius:0 1px 1px 0 !important;
}
input:focus{
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}
.br-15{
border-radius: 1px 0 0 1px !important;
}
#add_more{
color: white !important;
background-color: #fa8231 !important;
border-radius: 1px !important;
border: 0 !important;
}
#remove_more{
color: white !important;
background-color: #fc5c65 !important;
border-radius: 1px !important;
border: 0 !important;
display: none;
}
.submit_btn{
border-radius: 1px !important;
background-color: #95c714 !important;
border: 0 !important;
}
</style>
<dvi class="container h-100">
<div class="d-flex justify-content-center">
<div class="card mt-5 col-md-4 animated bounceInDown myForm">
<div class="card-header">
<h4>Students Contact Details</h4>
</div>
<form>
<div class="card-body">
<div id="dynamic_container">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-user-graduate"></i></span>
</div>
<input type="text" placeholder="Student Name" class="form-control"/>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-phone-square"></i></span>
</div>
<input type="text" placeholder="Student Phone" class="form-control"/>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-at"></i></span>
</div>
<input type="email" placeholder="Student Email" class="form-control"/>
</div>
</div>
</div>
<div class="card-footer">
<a class="btn btn-secondary btn-sm" id="add_more"><i class="fas fa-plus-circle"></i> Add</a>
<a class="btn btn-secondary btn-sm" id="remove_more"><i class="fas fa-trash-alt"></i> Remove</a>
<button class="btn btn-success btn-sm float-right submit_btn"><i class="fas fa-arrow-alt-circle-right"></i> Submit</button>
</div>
</form>
</div>
</div>
</dvi>
<script>
var i=0;
$(document).ready(function()
{
$('#add_more').on('click', function(){
var colorR = Math.floor((Math.random() * 256));
var colorG = Math.floor((Math.random() * 256));
var colorB = Math.floor((Math.random() * 256));
i++;
var html ='<div id="append_no_'+i+'" class="animated bounceInLeft">'+
'<div class="input-group mt-3">'+
'<div class="input-group-prepend">'+
'<span class="input-group-text br-15" style="color:rgb('+colorR+','+colorG+','+colorB+'">'+
'<i class="fas fa-user-graduate"></i></span>'+
'</div>'+
'<input type="text" placeholder="Student Name" class="form-control"/>'+
'</div>'+
'<div class="input-group mt-3">'+
'<div class="input-group-prepend">'+
'<span class="input-group-text br-15" style="color:rgb('+colorR+','+colorG+','+colorB+'">'+
'<i class="fas fa-phone-square"></i></span>'+
'</div>'+
'<input type="text" placeholder="Student Phone" class="form-control"/>'+
'</div>'+
'<div class="input-group mt-3">'+
'<div class="input-group-prepend">'+
'<span class="input-group-text br-15" style="color:rgb('+colorR+','+colorG+','+colorB+'">'+
'<i class="fas fa-at"></i></span>'+
'</div>'+
'<input type="email" placeholder="Student Email" class="form-control"/>'+
'</div></div>';
$('#dynamic_container').append(html);
$('#remove_more').fadeIn(function()
{
$(this).show();
});
});
$('#remove_more').on('click', function()
{
$('#append_no_'+i).removeClass('bounceInLeft').addClass('bounceOutRight')
.fadeOut(function()
{
$(this).remove();
});
i--;
if(i==0)
{
$('#remove_more').fadeOut(function(){
$(this).hide()
});;
}
});
});
</script>
</body>
</html>
0 Comments
CAN FEEDBACK
Emoji