diff --git a/public/css/styles.css b/public/css/styles.css index 4478e76..90fcb6f 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -521,9 +521,16 @@ .static { position: static; } + .block { + display: block; + } .grid { display: grid; } + .border { + border-style: var(--tw-border-style); + border-width: 1px; + } .text-center { text-align: center; } @@ -573,6 +580,11 @@ animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } +@property --tw-border-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} @property --tw-outline-style { syntax: "*"; inherits: false; diff --git a/public/index.html b/public/index.html index 258f46a..63e6d45 100644 --- a/public/index.html +++ b/public/index.html @@ -18,9 +18,9 @@
-

AI-Generated Candidate Profile:

-

Displayed in JSON format. Edit as needed.

- + + + diff --git a/public/js/script.js b/public/js/script.js index ede7cc9..ea68b35 100644 --- a/public/js/script.js +++ b/public/js/script.js @@ -1,3 +1,24 @@ +const profileJsonTextarea = document.getElementById("profileJson"); + +// Function to validate JSON input live +function validateJsonInput() { + const errorText = document.getElementById("jsonError"); + + try { + // Try parsing JSON + // TODO Update these styles to be correct tailwind classes for constancy + JSON.parse(profileJsonTextarea.value); + profileJsonTextarea.style.border = "2px solid green"; // Green border on valid input + errorText.style.display = "none"; + } catch (e) { + profileJsonTextarea.style.border = "2px solid red"; // Red border on error + errorText.style.display = "block"; + } +} + +profileJsonTextarea.addEventListener("input", validateJsonInput); + + document.getElementById('uploadForm').addEventListener('submit', async function (event) { event.preventDefault(); @@ -133,4 +154,6 @@ function formatCoverLetter(rawText) { .replace(/<\/conclusion>/g, '') .replace(/<\/signature>/g, '') .replace(/<[^>]+>/g, ''); // Remove all XML-like tags -} \ No newline at end of file +} + +