Triangle classifier SPA updated

mesfinassres · mesfinassres · commit 6446f8722505 · 2025-05-13T21:30:23.000+02:00
diff --git a/jdk_21_maven/cs/web/triangle-spa/src/main/resources/static/index.html b/jdk_21_maven/cs/web/triangle-spa/src/main/resources/static/index.html
@@ -1,27 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8" />
-    <title>Triangle Classifier</title>
-    <link rel="stylesheet" href="style.css" />
+    <meta charset="UTF-8">
+    <title>Triangle Classifier SPA</title>
+    <link rel="stylesheet" href="style.css">
 </head>
 <body>
-
 <h1>Triangle Classifier SPA</h1>
 
-<form id="triangleForm">
-    <label for="a">Side A:</label>
-    <input type="number" id="a" name="a" required><br>
-    <label for="b">Side B:</label>
-    <input type="number" id="b" name="b" required><br>
-    <label for="c">Side C:</label>
-    <input type="number" id="c" name="c" required><br>
-    <button type="submit">Classify</button>
-</form>
+<div id="main-view">
+    <form id="triangleForm">
+        <label for="a">Side A:</label>
+        <input type="number" id="a" name="a" required><br>
 
-<div class="result" id="result"></div>
+        <label for="b">Side B:</label>
+        <input type="number" id="b" name="b" required><br>
 
-<script src="script.js"></script>
+        <label for="c">Side C:</label>
+        <input type="number" id="c" name="c" required><br>
+
+        <button type="submit">Classify</button>
+    </form>
 
+    <div id="result" class="hidden result"></div>
+</div>
+
+<script src="script.js"></script>
 </body>
 </html>
diff --git a/jdk_21_maven/cs/web/triangle-spa/src/main/resources/static/script.js b/jdk_21_maven/cs/web/triangle-spa/src/main/resources/static/script.js
@@ -4,22 +4,41 @@ function classifyTriangle(a, b, c) {
     c = Number(c);
 
     if (a <= 0 || b <= 0 || c <= 0 || a + b <= c || a + c <= b || b + c <= a) {
-        return "Not a triangle";
+        return "not-a-triangle";
     } else if (a === b && b === c) {
-        return "Equilateral triangle";
+        return "equilateral";
     } else if (a === b || b === c || a === c) {
-        return "Isosceles triangle";
+        return "isosceles";
     } else {
-        return "Scalene triangle";
+        return "scalene";
     }
 }
 
 document.getElementById("triangleForm").addEventListener("submit", function (event) {
     event.preventDefault();
+
     const a = document.getElementById("a").value;
     const b = document.getElementById("b").value;
     const c = document.getElementById("c").value;
 
-    const result = classifyTriangle(a, b, c);
-    document.getElementById("result").textContent = `Result: ${result}`;
+    const resultType = classifyTriangle(a, b, c);
+    const resultText = `Result: ${resultType.replace(/-/g, " ")}`;
+
+    // Update URL and show result
+    history.pushState({ a, b, c }, "", `/${resultType}`);
+    const resultEl = document.getElementById("result");
+    resultEl.textContent = resultText;
+    resultEl.classList.remove("hidden");
 });
+
+// Handle back/forward navigation
+window.onpopstate = function () {
+    const resultEl = document.getElementById("result");
+    if (location.pathname === "/") {
+        resultEl.classList.add("hidden");
+    } else {
+        const text = location.pathname.slice(1).replace(/-/g, " ");
+        resultEl.textContent = `Result: ${text}`;
+        resultEl.classList.remove("hidden");
+    }
+};
diff --git a/jdk_21_maven/cs/web/triangle-spa/src/main/resources/static/style.css b/jdk_21_maven/cs/web/triangle-spa/src/main/resources/static/style.css
@@ -3,26 +3,36 @@ body {
     padding: 30px;
     background-color: #f9f9f9;
 }
+
 h1 {
     color: #333;
 }
+
 form {
     margin-bottom: 20px;
 }
+
 label {
     margin-right: 10px;
 }
+
 input {
     margin-bottom: 10px;
     padding: 5px;
     width: 60px;
 }
+
 button {
     padding: 6px 12px;
     cursor: pointer;
 }
+
 .result {
     margin-top: 20px;
     font-weight: bold;
     color: #00529B;
 }
+
+.hidden {
+    display: none;
+}

Original file line number	Diff line number	Diff line change
`@@ -3,26 +3,36 @@ body {`
`3`	`3`	`padding: 30px;`
`4`	`4`	`background-color: #f9f9f9;`
`5`	`5`	`}`
	`6`	`+`
`6`	`7`	`h1 {`
`7`	`8`	`color: #333;`
`8`	`9`	`}`
	`10`	`+`
`9`	`11`	`form {`
`10`	`12`	`margin-bottom: 20px;`
`11`	`13`	`}`
	`14`	`+`
`12`	`15`	`label {`
`13`	`16`	`margin-right: 10px;`
`14`	`17`	`}`
	`18`	`+`
`15`	`19`	`input {`
`16`	`20`	`margin-bottom: 10px;`
`17`	`21`	`padding: 5px;`
`18`	`22`	`width: 60px;`
`19`	`23`	`}`
	`24`	`+`
`20`	`25`	`button {`
`21`	`26`	`padding: 6px 12px;`
`22`	`27`	`cursor: pointer;`
`23`	`28`	`}`
	`29`	`+`
`24`	`30`	`.result {`
`25`	`31`	`margin-top: 20px;`
`26`	`32`	`font-weight: bold;`
`27`	`33`	`color: #00529B;`
`28`	`34`	`}`
	`35`	`+`
	`36`	`+.hidden {`
	`37`	`+ display: none;`
	`38`	`+}`