Project Details

## README.md

      
          Raw
        
        
              README.md
            
          
    Project Details
Write a script that automatically saves a user's form inputs as they type and reloads them into the form when they come back to the page. Clear the saved data when the form is submitted.
Considerations

Does each field need to be it's own entry in localStorage or can they all be saved as one item?
Should certain fields be excluded?
How can you structure the script so that you can add new fields without having to change your code?

Need help?
This project is part of the Browser Storage pocket guide and video course.

  
## 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>Form Saver</h1>

	<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="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>Form Saver</h1>

	<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="notes">Notes</label>
	<textarea id="notes"></textarea>
	</div>

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


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

	</body>
	</html>