Merge pull request Haimantika#7 from jagdishpatil02/main

added new save functionality to save generated roast
Asin-Junior-Honore · Jun 20, 2024 · 8d5ae73 · 8d5ae73
2 parents 93d2001 + ccabeed
commit 8d5ae73
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 17 deletions.
diff --git a/public/app.js b/public/app.js
@@ -1,19 +1,27 @@
 async function getRoast() {
-    const username = document.getElementById('username').value;
-    if (!username) {
-      alert('Please enter a GitHub username.');
-      return;
-    }
-
-    try {
-      const response = await fetch(`/roast/${username}`);
-      const data = await response.json();
-      document.getElementById('roastOutput').textContent = data.roast || 'No roast available.';
-    } catch (error) {
-      console.error('Failed to fetch roast:', error);
-      document.getElementById('roastOutput').textContent = 'Failed to fetch roast. Please try again.';
-    }
+  const username = document.getElementById("username").value;
+  if (!username) {
+    alert("Please enter a GitHub username.");
+    return;
   }
-
 
-
+  try {
+    const response = await fetch(`/roast/${username}`);
+    const data = await response.json();
+    document.getElementById("roastOutput").textContent =
+      data.roast || "No roast available.";
+  } catch (error) {
+    console.error("Failed to fetch roast:", error);
+    document.getElementById("roastOutput").textContent =
+      "Failed to fetch roast. Please try again.";
+  }
+}
+
+function saveRoast() {
+  html2canvas(document.getElementById("roastWrapper")).then(function (canvas) {
+    var link = document.createElement("a");
+    link.href = canvas.toDataURL("image/png");
+    link.download = "roast.png";
+    link.click();
+  });
+}
diff --git a/public/home.html b/public/home.html
@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>GitHub Roast App</title>
     <link rel="stylesheet" href="style.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+
 </head>
 <body>
     <div class="container">
@@ -13,7 +15,13 @@ <h1>Roast my GitHub profile!</h1>
             <input type="text" id="username" placeholder="Enter GitHub Username" aria-label="GitHub Username">
             <button onclick="getRoast()" class="btn">Roast!</button>
         </div>
-        <p id="roastOutput" class="roast-output"></p>
+        <div id="roastWrapper">
+            <p id="roastOutput" class="roast-output"></p>
+            <p class="createdby">created by https://github-roast.up.railway.app</p>
+        </div>
+
+        <button onclick="saveRoast()" class="btn">Save</button>
+
     </div>
     <script src="app.js"></script>
 </body>

diff --git a/public/style.css b/public/style.css
@@ -45,8 +45,18 @@ input[type="text"] {
     border-radius: 4px;
     cursor: pointer;
     font-size: 16px;
+    margin: 10px 0px 0px 0px;
 }
 
+#roastWrapper{
+    padding: 10px;
+    color: #007bff;
+    text-align: right;
+}
+
+.createdby{
+    text-align: right;
+}
 .btn:hover {
     background-color: #0056b3;
 }