Älä käytä prompt():ia tai alert():ia

index.html

@@ -7,6 +7,19 @@
 			.testit-epäonnistunut {
 				background-color: #e77;
 			}
+			.virhe {
+				background-color: #fbb;
+				margin-right: 0.5em;
+			}
+			.luokka-aste-lomake {
+				display: inline;
+			}
+			.piilotettu {
+				display: none;
+			}
+			.luokka-aste-kenttä {
+				width: 3em;
+			}
 			#luokka-asteet {
 				list-style-type: none;
 			}

käyttöliittymä.js

@@ -59,27 +59,45 @@ function luoLuokkaAsteListassa(aste) {
 
 	luokkaAsteListassa.appendChild(luoLuokkaLista(aste));
 
-	luokkaAsteListassa.appendChild(luoPainike('✎', () => {
-		// TODO: Älä käytä prompt():ia ja alert():ia
-		let vastaus = prompt('Uusi luokka-aste');
-		if (vastaus === null) {
-			// Käytääjä painoi 'Peruuta'
-			return;
+	let muokkausVirhe = document.createElement('span');
+	muokkausVirhe.classList.add('virhe');
+	muokkausVirhe.classList.add('piilotettu');
+	muokkausVirhe.appendChild(document.createTextNode(''));
+	luokkaAsteListassa.appendChild(muokkausVirhe);
+
+	// Luo muokkauspainike ja -lomake, joista vain yksi on näkyvillä kerralla
+	let muokkausLomake = document.createElement('form');
+	muokkausLomake.classList.add('piilotettu');
+	muokkausLomake.classList.add('luokka-aste-lomake');
+	let asteValitsin = document.createElement('input');
+	asteValitsin.classList.add('luokka-aste-kenttä');
+	asteValitsin.type = 'number';
+	asteValitsin.min = 1;
+	asteValitsin.value = aste;
+	muokkausLomake.append(asteValitsin);
+	let muokkausLomakePainike = document.createElement('input');
+	muokkausLomakePainike.type = 'submit';
+	muokkausLomakePainike.value = '✓';
+	muokkausLomake.appendChild(muokkausLomakePainike);
+	muokkausLomake.addEventListener('submit', (tapahtuma) => {
+		tapahtuma.preventDefault();
+		let uusiAste = parseInt(asteValitsin.value);
+		if (luokkaAsteet.asteet[uusiAste] === undefined || aste === uusiAste) {
+			suorita(tapahtumaTyypit.muutaAste, aste, uusiAste);
+			piirräLuokat();
+		} else {
+			muokkausVirhe.firstChild.textContent =
+				`Luokka-aste ${uusiAste} on jo olemassa.`;
+			muokkausVirhe.classList.remove('piilotettu');
 		}
-		vastaus = parseInt(vastaus, 10);
-		if (vastaus === NaN) {
-			// Ei numero
-			alert('Luokka-asteen pitää olla numero');
-			return;
-		}
-		if (vastaus < 1) {
-			// Luokka-aste alkaa 1:stä
-			alert('Luokka-asteeen pitää olla vähintään 1');
-			return;
-		}
-		suorita(tapahtumaTyypit.muutaAste, aste, vastaus);
-		piirräLuokat();
-	}));
+	});
+	luokkaAsteListassa.appendChild(muokkausLomake);
+
+	let muokkausPainike = luoPainike('✎', () => {
+		muokkausLomake.classList.remove('piilotettu');
+		muokkausPainike.classList.add('piilotettu');
+	});
+	luokkaAsteListassa.appendChild(muokkausPainike);
 
 	return luokkaAsteListassa;
 }