timwco/index.html

## 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>

## 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 --------

## 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
}
	<!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>
	// 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 --------
	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
	}