Highlight output box upon submit

wimpyprogrammer · wimpyprogrammer · commit cd880fe62aca · 2018-09-11T17:50:25.000-05:00
diff --git a/demo/styles.css b/demo/styles.css
@@ -22,6 +22,9 @@
 
 #output {
 	height: 5em;
+
+	border-width: 4px;
+	transition: border-color 0.6s ease-out;
 }
 
 @media (min-width: 992px) {
diff --git a/src/demo.ts b/src/demo.ts
@@ -22,8 +22,18 @@ function generatePattern(
 	return pattern;
 }
 
+let clearSuccessIndicatorHandle: number;
 function displayPattern(pattern: string) {
 	$output.value = pattern;
+
+	// Temporarily style the output box as valid
+	$output.classList.add('is-valid');
+
+	clearTimeout(clearSuccessIndicatorHandle);
+	clearSuccessIndicatorHandle = setTimeout(
+		() => $output.classList.remove('is-valid'),
+		1000
+	);
 }
 
 function onClickGenerate() {

Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,9 @@`
`22`	`22`
`23`	`23`	`#output {`
`24`	`24`	`height: 5em;`
	`25`	`+`
	`26`	`+ border-width: 4px;`
	`27`	`+ transition: border-color 0.6s ease-out;`
`25`	`28`	`}`
`26`	`29`
`27`	`30`	`@media (min-width: 992px) {`