Display solution once game is complete

index.css

@@ -23,6 +23,14 @@ body.wide {
 	gap: 2em;
 }
 
+.solution {
+	text-align: center;
+	width: inherit;
+	display: block;
+	font-size: x-large;
+	display: none;
+}
+
 .row {
 	margin-top: 0;
 	margin-bottom: 0;

index.js

@@ -55,9 +55,13 @@ const MAX_GUESSES = 9;
 const guessed = [];
 let input = "";
 const data = [];
+const solutions = [];
 const done = [false, false, false, false];
 
 function gameOver() {
+	for (const el of solutions) {
+		el.style.display = "block";
+	}
 	const NUMBERS = "0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣";
 	const ANY = "⬜";
 	const POSITION = "🟨";
@@ -321,16 +325,21 @@ for (let i = 0; i < 3; i++) {
 
 function createGameGrid(container) {
 	for (let pos = 0; pos < 4; pos++) {
-		container.appendChild(createWordle());
+		container.appendChild(createWordle(chosenWords[pos]));
 	}
 }
-function createWordle() {
+function createWordle(word) {
 	const x = document.createElement("div");
 	x.className = "wordle";
 
 	for (let i = 0; i < MAX_GUESSES; i++) {
 		x.appendChild(createRow(data));
 	}
+	const solution = document.createElement("span");
+	solution.className = "solution";
+	solution.innerText = word;
+	x.appendChild(solution);
+	solutions.push(solution);
 
 	return x;
 }