frontend for the node js backend

charakamihiranga · Nov 5, 2024 · 9499e1f · 9499e1f
1 parent 084370a
commit 9499e1f
Show file tree

Hide file tree

Showing 17 changed files with 1,140 additions and 1 deletion.
diff --git a/Javascript_RESTAPI/frontend/css/style.css b/Javascript_RESTAPI/frontend/css/style.css
@@ -0,0 +1,95 @@
+/* styles.css */
+
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #f4f4f4;
+  color: #333;
+}
+
+.container {
+  max-width: 600px;
+  margin: 50px auto;
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1, h2 {
+  text-align: center;
+}
+
+form {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+input[type="text"] {
+  padding: 10px;
+  margin-right: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  flex: 1;
+}
+
+button {
+  padding: 10px 15px;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-left: 5px; /* Add space between buttons */
+  transition: background-color 0.3s; /* Smooth transition for hover effects */
+}
+
+button.add {
+  background-color: #28a745; /* Green for Add button */
+}
+
+button.add:hover {
+  background-color: #218838; /* Darker green for Add button hover */
+}
+
+button.edit {
+  background-color: #007bff; /* Blue for Edit button */
+}
+
+button.edit:hover {
+  background-color: #0069d9; /* Darker blue for Edit button hover */
+}
+
+button.delete {
+  background-color: #dc3545; /* Red for Delete button */
+}
+
+button.delete:hover {
+  background-color: #c82333; /* Darker red for Delete button hover */
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  padding: 10px;
+  background-color: #e9ecef;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  display: flex; /* Allow for flexbox layout of item and buttons */
+  justify-content: space-between; /* Space between item name and buttons */
+  align-items: center; /* Center align items vertically */
+}
+
+li button {
+  margin-left: 10px; /* Ensure there's space between the item text and buttons */
+}
+
+/* Optional: Add styles for focused state on buttons */
+button:focus {
+  outline: none;
+  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Blue shadow for focused state */
+}
diff --git a/Javascript_RESTAPI/frontend/index.html b/Javascript_RESTAPI/frontend/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Item Management</title>
+    <link rel="stylesheet" href="../frontend//css/style.css"> <!-- Link to your CSS -->
+</head>
+<body>
+    <div class="container">
+        <h1>Item Management</h1>
+
+        <form id="itemForm">
+            <input type="text" id="itemName" placeholder="Enter item name" required>
+            <button type="submit" style="background-color: green;">Add Item</button>
+        </form>
+
+        <h2>Items</h2>
+        <ul id="itemList"></ul>
+    </div>
+
+    <script src="../frontend/js/script.js"></script> <!-- Link to your JS -->
+</body>
+</html>
diff --git a/Javascript_RESTAPI/frontend/js/script.js b/Javascript_RESTAPI/frontend/js/script.js
@@ -0,0 +1,126 @@
+// script.js
+
+const itemForm = document.getElementById('itemForm');
+const itemList = document.getElementById('itemList');
+const apiUrl = 'http://localhost:3000/items'; // Adjust this URL to your API
+let editingItemId = null; // Variable to store the ID of the item being edited
+
+// Fetch items from the API
+async function fetchItems() {
+    try {
+        const response = await fetch(apiUrl);
+        if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        const items = await response.json();
+        itemList.innerHTML = ''; // Clear the list before adding items
+        items.forEach(item => {
+            const li = document.createElement('li');
+            li.textContent = item.name;
+
+            // Create Edit Button
+            const editButton = document.createElement('button');
+            editButton.textContent = 'Edit';
+            editButton.className = 'edit'; // Add class for styling
+            editButton.onclick = () => editItem(item.id, item.name);
+            li.appendChild(editButton);
+
+            // Create Delete Button
+            const deleteButton = document.createElement('button');
+            deleteButton.textContent = 'Delete';
+            deleteButton.className = 'delete'; // Add class for styling
+            deleteButton.onclick = () => deleteItem(item.id);
+            li.appendChild(deleteButton);
+
+            itemList.appendChild(li);
+        });
+    } catch (error) {
+        console.error('Failed to fetch items:', error);
+    }
+}
+
+// Add new item to the API
+itemForm.addEventListener('submit', async (e) => {
+    e.preventDefault(); // Prevent default form submission
+
+    const itemName = document.getElementById('itemName').value;
+
+    if (editingItemId) {
+        // Update existing item
+        await updateItem(editingItemId, itemName);
+    } else {
+        // Create new item
+        await createItem(itemName);
+    }
+});
+
+// Create new item
+async function createItem(name) {
+    try {
+        const response = await fetch(apiUrl, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ name })
+        });
+
+        if (response.ok) {
+            fetchItems(); // Refresh the item list
+            itemForm.reset(); // Reset form input
+        } else {
+            console.error('Failed to add item');
+        }
+    } catch (error) {
+        console.error('Error adding item:', error);
+    }
+}
+
+// Edit item
+function editItem(id, name) {
+    editingItemId = id; // Set the ID of the item being edited
+    document.getElementById('itemName').value = name; // Populate the input with the item name
+}
+
+// Update item
+async function updateItem(id, name) {
+    try {
+        const response = await fetch(`${apiUrl}/${id}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ name })
+        });
+
+        if (response.ok) {
+            fetchItems(); // Refresh the item list
+            itemForm.reset(); // Reset form input
+            editingItemId = null; // Reset editing item ID
+        } else {
+            console.error('Failed to update item');
+        }
+    } catch (error) {
+        console.error('Error updating item:', error);
+    }
+}
+
+// Delete item
+async function deleteItem(id) {
+    try {
+        const response = await fetch(`${apiUrl}/${id}`, {
+            method: 'DELETE'
+        });
+
+        if (response.ok) {
+            fetchItems(); // Refresh the item list
+        } else {
+            console.error('Failed to delete item');
+        }
+    } catch (error) {
+        console.error('Error deleting item:', error);
+    }
+}
+
+// Initial fetch of items
+fetchItems();
diff --git a/Javascript_RESTAPI/index.js b/Javascript_RESTAPI/index.js
@@ -2,11 +2,14 @@ const express = require('express');
 const bodyParser = require('body-parser');
 const itemRoutes = require('./src/routes/itemRoutes');
 const errorMiddleware = require('./src/middleware/errorMiddleware'); // Load environment variables from .env file
+const cors = require('cors');
+
+
 
 const app = express();
 const PORT = process.env.PORT || 3000;
 
-// Middleware
+app.use(cors());
 app.use(bodyParser.json());
 
 // Routes

diff --git a/Javascript_RESTAPI/node_modules/.package-lock.json b/Javascript_RESTAPI/node_modules/.package-lock.json
diff --git a/Javascript_RESTAPI/node_modules/cors/CONTRIBUTING.md b/Javascript_RESTAPI/node_modules/cors/CONTRIBUTING.md
diff --git a/Javascript_RESTAPI/node_modules/cors/HISTORY.md b/Javascript_RESTAPI/node_modules/cors/HISTORY.md