indicator legend added

peterchinman · Dec 25, 2024 · 3f56411 · 3f56411
1 parent 00f35c3
commit 3f56411
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 58 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 .DS_Store
 .vscode
+/todo.md
diff --git a/css/style.css b/css/style.css
@@ -104,9 +104,6 @@ main {
 }
 
 
-
-
-
 #meter-validator {
 
 	details {
@@ -431,61 +428,8 @@ main {
 			align-items: center;
 		}
 
-		.indicator{
-			width: 10px;
-			height: 10px;
-			border-radius: 50%;
-			top: 1.2rem;
-			left: .4rem;
-			background-color: var(--unknown);
-		}
-
-		.meter-indicator {
-
-			&.exception {
-				background-color: var(--unknown);
-			}
-			&.good {
-				background-color: var(--good);
-				border: 2px solid black;
-			}
-			&.bad {
-				background-color: var(--bad-meter);
-				/* position: absolute; */
-
-			}
-		}
 
 
-		.rhyme-indicator {
-			&.exception {
-				background-color: var(--unknown);
-			}
-			&.good {
-				background-color: var(--good);
-				border: 2px solid black;
-			}
-			&.bad {
-				background-color: var(--bad-rhyme);
-			}
-		}
-
-		.syllable-indicator {
-			&.exception {
-				background-color: var(--unknown);
-			}
-			&.good {
-				background-color: var(--good);
-				border: 2px solid black;
-
-			}
-			&.bad {
-				background-color: var(--bad-syllable);
-				/* position: absolute; */
-
-			}
-		}
-
 
 	}
 
@@ -494,6 +438,85 @@ main {
 
 }
 
+.indicator-legend {
+	display: flex;
+	/* flex-direction: column; */
+	gap: 1rem;
+
+	.legend-item {
+		display: flex;
+		gap: .6rem;
+		align-items: center;
+
+		.legend {
+			width: 1lh;
+			height: 1lh;
+			border-radius: 50%;
+		}
+	}
+}
+
+
+.indicators {
+	display: flex;
+	gap: 8px;
+
+	.indicator{
+		width: 10px;
+		height: 10px;
+		border-radius: 50%;
+		top: 1.2rem;
+		left: .4rem;
+		/* background-color: var(--unknown); */
+	}
+}
+
+.meter-indicator {
+
+	&.exception {
+		background-color: var(--unknown);
+	}
+	&.good {
+		background-color: var(--good);
+		border: 2px solid black;
+	}
+	&.bad {
+		background-color: var(--bad-meter);
+		/* position: absolute; */
+
+	}
+}
+
+
+.rhyme-indicator {
+	&.exception {
+		background-color: var(--unknown);
+	}
+	&.good {
+		background-color: var(--good);
+		border: 2px solid black;
+	}
+	&.bad {
+		background-color: var(--bad-rhyme);
+	}
+}
+
+.syllable-indicator {
+	&.exception {
+		background-color: var(--unknown);
+	}
+	&.good {
+		background-color: var(--good);
+		border: 2px solid black;
+
+	}
+	&.bad {
+		background-color: var(--bad-syllable);
+		/* position: absolute; */
+
+	}
+}
+
 
 
 

diff --git a/index.html b/index.html
@@ -178,10 +178,24 @@ <h1 class="loud-voice">Define a Poetic Form</h1>
 	<section class="composing-section">
 		<inner-column>
 			<h1 class="loud-voice">Compose</h1>
+			<ul class="indicator-legend">
+				<li class="legend-item">
+					<div class="legend rhyme-indicator bad"></div>
+					<div>rhyme</div>
+				</li>
+				<li class="legend-item">
+					<div class="legend meter-indicator bad"></div>
+					<div>meter</div>
+				</li>
+				<li class="legend-item">
+					<div class="legend syllable-indicator bad"></div>
+					<div>syllable</div>
+				</li>
+			</ul>
 			<p>Start writing, press enter to validate a line.</p>
 			<div id="compose">
 				<div class="input-group" id="line-0-group">
-					<label for="line-0"></label>
+					<label for="line-0" class="indicators"></label>
 					<input id="line-0" name="line-0" type="text" class="compose-input">
 				</div>
 			</div>

diff --git a/static/compose.js b/static/compose.js
@@ -30,11 +30,12 @@ function addIndicator(label, type){
 }
 
 // receives a poetic form, which it uses to generate the correct Indicators for Rhmye, Meter, and Syllable checking
-// this should be run whenever there is input on the form THAT REQUIRES it
+// this should be run whenever there is input on the form that *might* change rhyme, meter, and/or syllable, but we don't know which in particular to run.
 //    i.e. Rhmye Meter or Syllable inputs
 // ALSO should be run whenever we create a new input
 function createAndPlaceInputGroupIndicators(form, lineNumber) {
    console.log(form);
+
       // first let's clear current indicators
       const label = document.querySelector('label[for="line-' + lineNumber + '"]');
       const indicators = label.querySelectorAll('.indicator')
@@ -93,6 +94,7 @@ function createNewInputGroup() {
 
    let $label = document.createElement('label');
    $label.setAttribute("for", id);
+   $label.classList.add('indicators');
 
    let $input = document.createElement('input')
    $input.id = id;