Index.html has been added to use through a

graphical interface
slali87 · Aug 18, 2024 · 05af9ba · 05af9ba
1 parent 33244f4
commit 05af9ba
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,12 +1,14 @@
 # SummingMicroservice
-A Go microservice that computes and returns the sum of two numbers.
+A Go microservice that computes and returns the sum of two numbers.  
+The repository also includes an index.html file so that the API can be used through a graphical interface.
 
 ### **Commands of local use (dev version):**
 ```
 make build
 make run
 curl "127.0.0.1:8081/sum?a=1&b=4"               # For testing
 google-chrome "127.0.0.1:8081/sum?a=1&b=4"      # For testing
+google-chrome "127.0.0.1:8081"                  # For testing (GUI)
 ```
 
 ### **Commands of local Docker use (dev version):**
@@ -15,6 +17,7 @@ make local-docker-build
 make local-docker-run
 curl "0.0.0.0:8081/sum?a=1&b=4"             # For testing
 google-chrome "0.0.0.0:8081/sum?a=1&b=4"    # For testing
+google-chrome "0.0.0.0:8081"                # For testing (GUI)
 ```
 
 ### **Commands of GCloud use (staging version):**
@@ -26,12 +29,14 @@ make gcloud-docker-build
 make gcloud-docker-push                          # This pushes the docker image into the GCloud's Container Registry
 make gcloud-run-deploy                           # This deployes the pushed docker image into the GCloud's Cloud Run
 google-chrome "https://<LINK PROVIDED BY GCLOUD'S CLOUD RUN>/sum?a=1&b=4"   # For testing
+google-chrome "https://<LINK PROVIDED BY GCLOUD'S CLOUD RUN>"               # For testing (GUI)
 ```
 
 ### **Commands of GCloud use (production version):**
 ```
 git push origin main    # This delivers the changes to GitHub main and the GitHub Actions builds, pushes and deployes it to GCloud.
 google-chrome "https://<LINK PROVIDED BY GCLOUD'S CLOUD RUN>/sum?a=1&b=4"   # For testing
+google-chrome "https://<LINK PROVIDED BY GCLOUD'S CLOUD RUN>"               # For testing (GUI)
 ```
 
 Based on https://github.com/SanFranciscobolJottem/penguin-api
diff --git a/cmd/SummingMicroservice/main.go b/cmd/SummingMicroservice/main.go
@@ -29,6 +29,10 @@ func runService() {
 	fullAddress := fmt.Sprintf("%s:%d", address, port)
 
 	fmt.Printf("\nServer is running on %s", fullAddress)
+
+	// Add index.html file as GUI
+	fileserver := http.FileServer(http.Dir("./html"))
+	http.Handle("/", fileserver)
 
 	http.HandleFunc("/sum", handlers.MyHandler)
 	http.ListenAndServe(fullAddress, nil)

diff --git a/html/index.css b/html/index.css
@@ -0,0 +1,45 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f9f9f9;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+.summing {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+.summing h1 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+.summing input[type="number"] {
+    width: 100%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-sizing: border-box;
+}
+.summing button {
+    width: 100%;
+    padding: 10px;
+    background-color: #28a745;
+    border: none;
+    border-radius: 5px;
+    color: #fff;
+    font-size: 16px;
+    cursor: pointer;
+}
+.summing button:hover {
+    background-color: #218838;
+}
+.summing .result {
+    margin-top: 20px;
+    text-align: center;
+    font-size: 18px;
+}
diff --git a/html/index.html b/html/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Summing GUI</title>
+    <link href="index.css" rel="stylesheet">
+</head>
+<body>
+<div class="summing">
+    <h1>Summing</h1>
+    <input type="number" id="num1" placeholder="Enter first number">
+    <input type="number" id="num2" placeholder="Enter second number">
+    <button onclick="calculate()">Calculate</button>
+    <div class="result" id="result"></div>
+</div>
+<script src="index.js"></script>
+</body>
+</html>
diff --git a/html/index.js b/html/index.js
@@ -0,0 +1,28 @@
+function calculate() {
+    let num1 = document.getElementById('num1').value;
+    let num2 = document.getElementById('num2').value;
+
+    // Check if both numbers are entered
+    if (num1 === '' || num2 === '') {
+        document.getElementById('result').innerText = 'Please enter both numbers.';
+        return;
+    }
+
+    // API endpoint with query parameters
+    let apiUrl = `/sum?a=${num1}&b=${num2}`;
+
+    // Fetch API call
+    fetch(apiUrl)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`Network response was not ok: ${response.statusText}`);
+            }
+            return response.text();  // Assuming the API returns a plain text string
+        })
+        .then(data => {
+            document.getElementById('result').innerText = 'Result: ' + data;
+        })
+        .catch(error => {
+            document.getElementById('result').innerText = 'Error: ' + error.message;
+        });
+}