Skip to content

Instantly share code, notes, and snippets.

@timwco

timwco/index.html

Created June 8, 2017 19:50
Show Gist options
  • Save timwco/e16b8f210ca8c1fccf56e185c79f4ad7 to your computer and use it in GitHub Desktop.
Save timwco/e16b8f210ca8c1fccf56e185c79f4ad7 to your computer and use it in GitHub Desktop.
Download ZIP
Form Builder
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Form Builder</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<form>
<div class="header">
<span class="title">Sign Up For My Web App</span>
</div>
<div class="container">
<!-- Form Data Appended Here -->
</div>
<div class="footer">
<button>Submit Form</button>
</div>
</form>
</div>
<script src="main.js"></script>
</body>
</html>
Raw
main.js
// The Form Data
// Write your code below this array
let formData = [
{
"type": "text",
"label": "First Name",
"id": "user-first-name",
"icon": "fa-user",
"options": []
},
{
"type": "text",
"label": "Last Name",
"id": "user-last-name",
"icon": "fa-user",
"options": []
},
{
"type": "email",
"label": "Email Address",
"id": "user-email",
"icon": "fa-envelope",
"options": []
},
{
"type": "text",
"label": "Current website url",
"id": "user-website",
"icon": "fa-globe",
"options": []
},
{
"type": "select",
"label": "Select Language",
"id": "user-language",
"icon": "",
"options": [
{
"label": "English",
"value": "EN"
},
{
"label": "French",
"value": "FR"
},
{
"label": "Spanish",
"value": "SP"
},
{
"label": "Chinese",
"value": "CH"
},
{
"label": "Japanese",
"value": "JP"
}
]
},
{
"type": "textarea",
"label": "Your Comment",
"id": "user-comment",
"icon": "fa-comments",
"options": []
},
{
"type": "tel",
"label": "Mobil Number",
"id": "user-mobile",
"icon": "fa-mobile-phone",
"options": []
},
{
"type": "tel",
"label": "Home Number",
"id": "user-phone",
"icon": "fa-phone",
"options": []
}
];
// Hints
// Accessing specific properties.
formData[0].label // this will give us "First Name"
// as you can see we access the first element in the array
// with [0] and then grab the property "label" using the "." character
// Proper Styling
// If you want to have the CSS pick up your styling properly, wrap every
// element in a <div class="field"></div> element.
// Looping
// Sample of how to loop over the formData
for(let i=0; i<formData.length; i++){
// Check your dev tools console for what the items in formData have
console.log(formData[i])
}
// -------- Your Code Goes Here --------
Raw
styles.css
body .wrapper {
border-radius: 3px;
border: 2px solid #C1C1C1;
box-shadow: 0 1px 4px #C1C1C1;
width: 675px;
margin: 50px auto;
}
body .wrapper .header {
width: 100%;
height: 100px;
background-color: #3E8ACC;
color: #fff;
font-size: 30px;
font-family: sans-serif
}
body .wrapper .header .title {
display: inline-block;
margin-top: 30px;
padding-left: 20px
}
body .wrapper .container #user-comment {
min-height: 100px
}
body .wrapper .container #user-comment input {
float: left;
display: inline-block
}
body .wrapper .container .field {
text-align: center
}
body .wrapper .container .field input {
padding-left: 15px;
width: 600px;
height: 35px;
border: 2px solid #CCD1D4;
border-radius: 3px;
margin: 10px
}
body .wrapper .container select {
margin: 30px;
border-image-width: 100%;
width: 605px
}
body .wrapper .footer {
background-color: #C8DEF1;
height: 100px
}
body .wrapper .footer button {
background-color: #3E8ACC;
width: 120px;
height: 50px;
color: #fff;
border: 1px solid #267BC5;
border-radius: 3px;
margin-left: 15px;
margin-top: 15px
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment