diff --git a/index.html b/index.html
index 9ea65817..01a5a94f 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,77 @@
+
+
+
+ CodeClip
+
+
+
+
+
+
+
+ Live Preview (Description)
+
+
+
+
+
+=======
diff --git a/scripts/app.js b/scripts/app.js
index c034347b..fd3d84dc 100644
--- a/scripts/app.js
+++ b/scripts/app.js
@@ -1,3 +1,46 @@
+console.log('app script loaded');
+const form = document.getElementById('challengeForm');
+const preview = document.getElementById('preview');
+
+const descriptionField = document.getElementById('description');
+descriptionField.addEventListener('input', () => {
+
+ const raw = descriptionField.value;
+ let formatted = raw
+ .replace(/^### (.*$)/gim, '$1
')
+ .replace(/^## (.*$)/gim, '$1
')
+ .replace(/^# (.*$)/gim, '$1
')
+ .replace(/\*\*(.*?)\*\*/gim, '$1')
+ .replace(/\*(.*?)\*/gim, '$1')
+ .replace(/\n/gim, '
');
+
+ preview.innerHTML = formatted;
+});
+
+form.addEventListener('submit', function (e) {
+ e.preventDefault();
+
+ const data = {
+ title: document.getElementById('title').value.trim(),
+ description: document.getElementById('description').value.trim(),
+ difficulty: document.getElementById('difficulty').value,
+ testCases: document.getElementById('testCases').value.trim(),
+ solution: document.getElementById('solution').value.trim()
+ };
+
+ try {
+ JSON.parse(data.testCases);
+ } catch (err) {
+ alert(`Test cases must be valid JSON format. Error: ${err.message}\nExample of valid JSON: [{"input": "value1", "output": "value2"}]`);
+ return;
+ }
+
+ console.log("Submitted Challenge Data:", data);
+ alert("Challenge submitted successfully!");
+
+ form.reset();
+ preview.innerHTML = '';
+});
import { saveUserProgress, loadUserProgress, saveCompletedChallenges, loadCompletedChallenges } from './data.js';
console.log('app script loaded');