body {
background-color: #c1cce0;
font-family: 'Jost',sans-serif;
color: #fff;
}
h1 {
text-align: center;
font-size: 48px;
color: #232c3d;
}
.container {
width: 400px;
margin: 40px auto;
padding: 10px;
border-radius: 5px;
background: white;
box-shadow: 0px 10px 40px 0px rgba(47,47,47,.1);
}
input[type="text"]{
padding: 10px;
margin: 10px auto;
display: block;
border-radius: 5px;
border: 1px solid lightgrey;
background: none;
width: 274px;
color: black;
}
input[type="text"]:focus {
outline: none;
}
input[type="Submit"]{
margin: 10px auto;
display: block;
width: 40%;
height: 40px;
border: 1px solid;
border-radius: 25px;
font-size: 18px;
cursor: pointer;
}
input[type="Submit"]:hover{
background: #2691d9;
color: #e9f4fb;
transition: .5s;
}
.controls {
width: 294px;
margin: 15px auto;
}
.add {
padding: 5px;
border: 1px solid;
border-radius: 25px;
cursor: pointer;
}
.remove {
float: right;
padding: 5px;
border: 1px solid;
border-radius: 25px;
cursor: pointer;
}
.controls button i{
margin-right: 5px;
}
.remove:hover, .add:hover{
background: #2691d9;
color: #e9f4fb;
transition: .5s;
}
var formfield = document.getElementById('formfield');
function add(){
var newField = document.createElement('input');
newField.setAttribute('type','text');
newField.setAttribute('name','text');
newField.setAttribute('class','text');
newField.setAttribute('siz',50);
newField.setAttribute('placeholder','Optional Field');
formfield.appendChild(newField);
}
function remove(){
var input_tags = formfield.getElementsByTagName('input');
if(input_tags.length > 2) {
formfield.removeChild(input_tags[(input_tags.length) - 1]);
}
}