3 files changed, 32 insertions, 14 deletions
diff --git a/card/card.css b/card/card.css
index b37234c..8c2b0d0 100644
--- a/card/card.css
+++ b/card/card.css
@@ -15,13 +15,19 @@ hr {
 hr { background-color: black; }
 .nightMode hr { background-color: white; }
 
-.card.front .target-word-reading,
-.card.front .target-word-translation,
-.card.front .sentence-translation,
+.card.front #target-word-reading,
+.card.front #target-word-translation,
+.card.front #sentence-translation,
 .card.front hr,
 .card.front ruby rt.hidden {
 	display: none;
 }
 
-.sentence-translation { margin-top: 1em; }
+#sentence-translation { margin-top: 1em; }
 
+.spoiler {
+	transition: filter 300ms;
+	cursor: pointer;
+}
+.spoiler.hidden { filter: blur(0.3rem); }
+.spoiler.visible { filter: blur(0rem); }
diff --git a/card/card.html b/card/card.html
index 908be68..71ca300 100644
--- a/card/card.html
+++ b/card/card.html
@@ -9,11 +9,11 @@
 <body>
 
 <div class="card back">
-<span class="parse sentence foreign">[俺](おれ)の[目](め)の[前](まえ)に{全}(ぜん)[裸](はだか)のアリスが*[立](た)っていた*。\n\*escape\* (<i>test</i>)</span>
+<span id="sentence" class="parse foreign">[俺](おれ)の[目](め)の[前](まえ)に{全}(ぜん)[裸](はだか)のアリスが*[立](た)っていた*。\n\*escape\* (<i>test</i>)</span>
 <hr class="split">
-<span class="target-word-reading foreign">立つ【た・つ】</span>
-<span class="target-word-translation native">To stand</span>
-<span class="sentence-translation native">Before my eyes stood Alice, butt-naked.</span>
+<span id="target-word-reading" class="foreign">立つ【た・つ】</span>
+<span id="target-word-translation" class="native">To stand</span>
+<span id="sentence-translation" class="native spoiler hidden">Before my eyes stood Alice, butt-naked.</span>
 </div>
 
 <button onclick="document.getElementsByClassName('card')[0].classList.toggle('back'); document.getElementsByClassName('card')[0].classList.toggle('front')">toggle view</button>
diff --git a/card/card.js b/card/card.js
index 347a44c..0509c3e 100644
--- a/card/card.js
+++ b/card/card.js
@@ -44,14 +44,26 @@ function parseSentence(input) {
 }
 
 function run() {
-	var input = document.getElementsByClassName("parse");
-
-	for (var el of input) {
-		if (el.classList.contains("parsed")) continue;
-		el.innerHTML = parseSentence(el.innerHTML);
-		el.classList.remove("parse");
+	// parse all elements with class parse
+	for (var el of document.getElementsByClassName("parse")) {
+		if (el.classList.contains("parsed")) continue; // ignore already parsed elements
+		el.innerHTML = parseSentence(el.innerHTML); // parse
+		el.classList.remove("parse"); // mark as parsed
 		el.classList.add("parsed");
 	}
+
+	// toggle spoiler by clicking
+	for (var el of document.getElementsByClassName("spoiler")) {
+		el.onclick = function () {
+			this.classList.toggle("hidden");
+			this.classList.toggle("visible");
+		};
+	}
+
+	// remove spoiler from sentence translation if word reading field is empty
+	if(document.getElementById("target-word-reading").innerText.length == 0) {
+		document.getElementById("sentence-translation").classList.remove("hidden");
+	}
 }
 
 run();