Instantly share code, notes, and snippets.

Embed
What would you like to do?
Progress bar project template from https://learnvanillajs.com.

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?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment