add form logic to script.js

public/index.html

@@ -16,7 +16,7 @@
       <label for="jobDescription">Paste Job Description:</label>
       <textarea name="jobDescription" rows="6" cols="50" required></textarea><br><br>
 
-      <button type="submit" id="generateSub">Generate Cover Letter</button>
+      <button type="submit" id="generateBtn">Generate Cover Letter</button>
   </form>
 
   <!-- Hidden To Start With -->
@@ -29,7 +29,7 @@
   <!-- End Hidden Section -->
 
 
-  <script src="script.js"></script> <!-- External JS file -->
+  <script src="js/script.js"></script> <!-- External JS file -->
 
 
 </body>

public/js/script.js

@@ -0,0 +1,20 @@
+document.getElementById('uploadForm').addEventListener('submit', async function (event) {
+  event.preventDefault();
+
+  const formData = new FormData(this);
+  const outputSection = document.getElementById('outputSection');
+  const coverLetterOutput = document.getElementById('coverLetterOutput');
+  const generateBtn = document.getElementById('generateBtn');
+  const downloadBtn = document.getElementById('downloadBtn');
+
+
+  generateBtn.disabled = true;
+  generateBtn.textContent = "Generating...";
+  coverLetterOutput.value = "";  //This clear any previous generated output
+  
+  // Show the Output Section while the program runs
+  outputSection.style.display = "block";
+  coverLetterOutput.value = "Generating cover letter...";
+
+
+})

server.js

@@ -0,0 +1,22 @@
+const express = require('express');
+const path = require('path');
+const dotenv = require('dotenv');
+
+dotenv.config();
+
+const app = express();
+const PORT = 3000;  //TODO DO NOT HARDCODE THIS
+
+// Middleware
+app.use(express.static(path.join(__dirname, 'public')));
+app.use(express.json());
+
+
+// Routes
+// const generateRoute = require('./routes/generate');
+// app.use('/generate', generateRoute);
+
+app.listen(PORT, () => {
+  console.log(`Server running on http://localhost:${PORT}`);
+});
+