added frontend

2025-06-09 18:36:17 +02:00
parent 4719ebee83
commit f04d7b9d1b
7 changed files with 58 additions and 2 deletions
--- a/frontend/addRecipe/addRecipe.html
+++ b/frontend/addRecipe/addRecipe.html
@@ -8,6 +8,16 @@
    <script src="addRecipe.js"></script>
 </head>
 <body>
-    
+    <div class="addRecipe">
+        <label for="title">Recipe title:</label>
+        <input type="text" id="title">
+
+        <label for="recipe">Here you can write your recipe:</label>
+        <textarea name="recipe" placeholder="You can use markdown!" id="recipe"></textarea>
+
+        <button id="saveBtn" onclick="saveRecipe()">Save</button>
+    </div>
+
+    <a href="../index.html"><button>Go back to recipes</button></a>
 </body>
 </html>
--- a/frontend/addRecipe/addRecipe.js
+++ b/frontend/addRecipe/addRecipe.js
@@ -0,0 +1,36 @@
+function saveRecipe() {
+  const title = document.getElementById("title").value;
+  const recipe = document.getElementById("recipe").value;
+
+  if (title && recipe) {
+    const data = {
+      title: title,
+      recipe: recipe,
+    };
+
+    const jsonString = JSON.stringify(data, null, 2);
+    const blob = new Blob([jsonString], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+
+    const errorMsg = document.getElementById("errMsg");
+    if (errorMsg) errorMsg.remove();
+
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = title;
+    a.click();
+
+    URL.revokeObjectURL(url);
+  } else if (title === "" || recipe === "") {
+    throwError("You have to fill in the title and recipe!");
+  }
+}
+
+function throwError(message) {
+  const element = document.createElement("p");
+  element.innerText = message;
+  element.id = "errMsg";
+  document.body.appendChild(element);
+
+  console.error(message);
+}
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,6 +8,9 @@
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    
+    <button onclick="syncRecipes()">Sync recipes</button>
+    <a href="addRecipe/addRecipe.html"><button>Add recipe</button></a>
+
+    <div id="recipes"></div>
 </body>
 </html>
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -0,0 +1,3 @@
+function syncRecipes() {
+    
+};