Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Progress bar project template from

Project Details

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


  • When should a field be considered complete?
  • What happens if a user clears data from an input?
<!DOCTYPE html>
<title>Project Template</title>
<style type="text/css">
body {
margin-left: auto;
margin-right: auto;
max-width: 40em;
width: 88%;
textarea {
width: 100%;
label {
font-weight: bold;
textarea {
margin-bottom: 2em;
textarea {
height: 12em;
<h1>Progress Bar</h1>
<!-- Show form progress here -->
<div id="progress"></div>
<form id="autosave">
<label for="name">Name</label>
<input type="text" id="name">
<label for="email">Email Address</label>
<input type="email" id="email">
<label for="phone">Phone</label>
<input type="tel" id="phone">
<label for="website">Website</label>
<input type="url" id="website">
<label for="notes">Notes</label>
<textarea id="notes"></textarea>
// Project code...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment