one

backend/data.json

-{
-    "medicines": [
+{"medicines": [{"name": "Elixirium", "price": 5.99}, {"name": "Cureallium", "price": 7.49}, {"name": "Healix", "price": 4.99}, {"name": "Restorix", "price": 12.99}, {"name": "", "price": 15.49}, {"name": "Tonicast", "price": null}, {"name": "Allevium", "price": 19.99}, {"name": "Synthomaxi", "price": 14.99}, {"name": "Magicure", "price": 200.0}, {"name": "Paracetamol", "price": 2.0}, {"name": "Ibuprofen", "price": 3.99}, {"name": "Asprin", "price": 4.99}]}
\ No newline at end of file
-        {
-            "name": "Elixirium",
-            "price": 5.99
-        },
-        {
-            "name": "Cureallium",
-            "price": 7.49
-        },
-        {
-            "name": "Healix",
-            "price": 4.99
-        },
-        {
-            "name": "Restorix",
-            "price": 12.99
-        },
-        {
-            "name": "",
-            "price": 15.49
-        },
-        {
-            "name": "Tonicast",
-            "price": null
-        },
-        {
-            "name": "Allevium",
-            "price": 19.99
-        },
-        {
-            "name": "Synthomaxi",
-            "price": 14.99
-        },
-        {
-            "name": "Magicure",
-            "price": 200.0
-        }
-    ]
-}
\ No newline at end of file

frontend/index.html

@@ -14,6 +14,25 @@
         <h1>Medicine Tracker</h1>
     </header>
     <main>
+        <table>
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Price</th>
+                </tr>
+            </thead>
+            <tbody id="medicine-body">
+                
+            </tbody>
+        </table>
+        <form id="medicine-entry-form">
+            <label for="medicine-name">Medicine Name:</label>
+            <input type="text" id = "medicine-name" name = "name" required />
+            <label for="medicine-price">Medicine Price (USD):</label>
+            <input type="number" id = "medicine-price" name = "price" min = "0"  step = 0.01 required />
+            <button type="submit">Confirm Add Medicine</button>
+        </form>
+        <p id="feedback" style="display: none;"></p>
 
     </main>
     <script src="script.js"></script>

frontend/script.js

+async function fetchData() {
+    try{
+        const response = await fetch("http://localhost:8000/medicines");
+        if(!response.ok) {
+            throw new Error("Failed to fetch data")
+        }
+        const data = await response.json();
+        displayData(data.medicines);
+    } catch (error){
+        console.error("Error fetching data:", error);
+
+    }
+
+    function displayData(data) {
+        const tblBody = document.getElementById("medicine-body");
+        tblBody.innerHTML = "";
+        data.forEach((medicine) => {
+            const row = document.createElement("tr");
+            const name = document.createElement("td");
+            name.textContent = medicine.name || "N/A";
+            row.appendChild(name);
+            const price = document.createElement("td");
+            price.textContent = medicine.price !== null ? `$${medicine.price.toFixed(2)}` : "N/A";
+            row.appendChild(price)
+            tblBody.appendChild(row);
+
+        });
+    }
+
+}
+
+fetchData();
+
+document.getElementById("medicine-entry-form").addEventListener("submit", async (event) => {
+    event.preventDefault();
+    
+    const form = new FormData(event.target);
+    const feedback = document.getElementById("feedback");
+
+
+    try {
+        const response = await fetch("http://localhost:8000/create", {
+            method: "POST",
+            body: form,
+        })
+        if (!response.ok) {
+            throw new Error(`Could not add medicine: ${response.statusText}` )
+        }
+
+        event.target.reset();
+        feedback.textContent = "Success! Refresh the page";
+        feedback.style.color = "green";
+
+    }catch (error) {
+        console.error("Error", error);
+        showFeedback("Error!", "error");
+    }
+
+    feedback.style.display = "block";
+
+});
+

frontend/style.css

@@ -29,4 +29,66 @@ body {
     height: 30px;
 }
 
-/* ---- Your custom styles below ---- */
+/* ---- Your custom styles below ---- */
\ No newline at end of file
+h1{
+    text-align: center;
+    color:blue
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+th {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+    background-color: #ddd;
+    font-weight: bold;
+}
+
+td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+
+}
+
+form {
+    max-width: 400px;
+  margin: 20px auto;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background: #f9f9f9;
+}
+
+label {
+    display: block;
+    margin: 10px 0 5px;
+  }
+  
+  input {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+  }
+  
+  button {
+    background: #007bff;
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 3px;
+    cursor: pointer;
+  }
+  
+
+  
+  #feedback {
+    margin-top: 10px;
+    font-weight: bold;
+  }