cferdinandi/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Project Details

Write a script that displays and updates a progress bar into the #progress element as the user completes fields in a form.
Considerations


When should a field be considered complete?
What happens if a user clears data from an input?


## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Project Template</title>

	<style type="text/css">
		body {
			margin-left: auto;
			margin-right: auto;
			max-width: 40em;
			width: 88%;
		}

		label,
		input,
		textarea {
			width: 100%;
		}

		label {
			font-weight: bold;
		}

		input,
		textarea {
			margin-bottom: 2em;
		}

		textarea {
			height: 12em;
		}
	</style>
</head>
<body>

	<h1>Progress Bar</h1>

	<!-- Show form progress here -->
	<div id="progress"></div>

	<form id="autosave">
		<div>
			<label for="name">Name</label>
			<input type="text" id="name">
		</div>

		<div>
			<label for="email">Email Address</label>
			<input type="email" id="email">
		</div>

		<div>
			<label for="phone">Phone</label>
			<input type="tel" id="phone">
		</div>

		<div>
			<label for="website">Website</label>
			<input type="url" id="website">
		</div>

		<div>
			<label for="notes">Notes</label>
			<textarea id="notes"></textarea>
		</div>

		<button>Submit</button>
	</form>


	<script>
		// Project code...
	</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Project Template</title>

	<style type="text/css">
	body {
	margin-left: auto;
	margin-right: auto;
	max-width: 40em;
	width: 88%;
	}

	label,
	input,
	textarea {
	width: 100%;
	}

	label {
	font-weight: bold;
	}

	input,
	textarea {
	margin-bottom: 2em;
	}

	textarea {
	height: 12em;
	}
	</style>
	</head>
	<body>

	<h1>Progress Bar</h1>

	<!-- Show form progress here -->
	<div id="progress"></div>

	<form id="autosave">
	<div>
	<label for="name">Name</label>
	<input type="text" id="name">
	</div>

	<div>
	<label for="email">Email Address</label>
	<input type="email" id="email">
	</div>

	<div>
	<label for="phone">Phone</label>
	<input type="tel" id="phone">
	</div>

	<div>
	<label for="website">Website</label>
	<input type="url" id="website">
	</div>

	<div>
	<label for="notes">Notes</label>
	<textarea id="notes"></textarea>
	</div>

	<button>Submit</button>
	</form>


	<script>
	// Project code...
	</script>

	</body>
	</html>