Added new CodeClip-like CSS for Multi-Language Code Executor

abc.css

@@ -0,0 +1,160 @@
+/* Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background-color: #f7f9fc;
+  color: #333;
+  line-height: 1.6;
+}
+
+/* Header */
+header {
+  text-align: center;
+  padding: 2rem 1rem;
+  background-color: #fff;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+}
+
+header h1 {
+  font-size: 2rem;
+  color: #1a73e8;
+}
+
+header p {
+  font-size: 1rem;
+  color: #666;
+  margin-top: 0.5rem;
+}
+
+/* Main Container */
+.container {
+  max-width: 1200px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+
+/* API Section */
+.api-section {
+  background: #fff;
+  padding: 1rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+  margin-bottom: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
+.api-section input {
+  flex: 1;
+  padding: 10px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+}
+
+.api-section button {
+  background: #1a73e8;
+  color: white;
+  border: none;
+  padding: 8px 15px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.api-section button:hover {
+  background: #155fc0;
+}
+
+.status-dot {
+  font-size: 0.9rem;
+  color: #d00;
+}
+
+/* Editor and Console Layout */
+.editor-console-wrapper {
+  display: flex;
+  gap: 20px;
+  margin-top: 2rem;
+}
+
+.editor-section, .console-section {
+  flex: 1;
+  background-color: #fff;
+  padding: 1rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+}
+
+/* Editor */
+.editor-section h2, .console-section h2 {
+  font-size: 1.2rem;
+  color: #1a73e8;
+  margin-bottom: 0.5rem;
+}
+
+textarea, select {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  font-family: Consolas, monospace;
+  font-size: 0.9rem;
+  background: #f9f9f9;
+  color: #333;
+}
+
+/* Buttons */
+.button-group button,
+.quick-examples button,
+.console-section button {
+  background: #1a73e8;
+  color: #fff;
+  border: none;
+  padding: 8px 12px;
+  margin: 5px 5px 0 0;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.button-group button:hover,
+.quick-examples button:hover,
+.console-section button:hover {
+  background: #155fc0;
+}
+
+/* Output Console */
+pre#outputConsole {
+  background: #f9f9f9;
+  color: #333;
+  padding: 10px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  min-height: 200px;
+  white-space: pre-wrap;
+  font-size: 0.9rem;
+  overflow-x: auto;
+}
+
+/* Footer */
+footer {
+  text-align: center;
+  padding: 1rem;
+  font-size: 0.9rem;
+  color: #888;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .editor-console-wrapper {
+    flex-direction: column;
+  }
+}

javascript-excecutor.js

@@ -0,0 +1,94 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const form = document.getElementById('challengeForm');
+
+  form.addEventListener('submit', function (event) {
+    event.preventDefault(); // Stop form from submitting
+    let isValid = true;
+    clearErrors();
+
+    // Validate title
+    const title = document.getElementById('title');
+    if (title.value.trim() === '') {
+      showError(title, 'Title is required');
+      isValid = false;
+    }
+
+    // Validate description
+    const description = document.getElementById('description');
+    if (description.value.trim() === '') {
+      showError(description, 'Description is required');
+      isValid = false;
+    }
+
+    // Validate difficulty
+    const difficulty = document.getElementById('difficulty');
+    if (difficulty.value === '') {
+      showError(difficulty, 'Please select a difficulty level');
+      isValid = false;
+    }
+
+    // Validate test cases
+    const testCases = document.querySelectorAll('.test-case');
+    testCases.forEach((tc, index) => {
+      if (tc.value.trim() === '') {
+        showError(tc, `Test case ${index + 1} cannot be empty`);
+        isValid = false;
+      }
+    });
+
+    // Validate solution
+    const solution = document.getElementById('solution');
+    if (solution.value.trim() === '') {
+      showError(solution, 'Sample solution is required');
+      isValid = false;
+    }
+
+    if (isValid) {
+      alert('Challenge submitted successfully!');
+      form.reset(); // Clear the form
+    }
+  });
+
+  function showError(inputElement, message) {
+    let error = document.createElement('div');
+    error.className = 'error-message';
+    error.innerText = message;
+    inputElement.parentNode.appendChild(error);
+    inputElement.style.borderColor = 'red';
+  }
+
+  function clearErrors() {
+    document.querySelectorAll('.error-message').forEach((e) => e.remove());
+    document.querySelectorAll('input, textarea, select').forEach((el) => {
+      el.style.borderColor = '#ccc';
+    });
+  }
+});
+
+document.getElementById('downloadCode').addEventListener('click', () => {
+  const code = document.querySelector('#codeEditor').value; // Adjust selector if needed
+  const blob = new Blob([code], { type: 'text/plain' });
+  const link = document.createElement('a');
+  link.href = URL.createObjectURL(blob);
+
+  // Optional: name the file based on selected language
+  const language = document.querySelector('#languageSelect').value || 'code';
+  const extension = getFileExtension(language);
+  link.download = `my_code.${extension}`;
+
+  link.click();
+});
+
+function getFileExtension(language) {
+  // Map language names to common extensions
+  const extensions = {
+    'javascript': 'js',
+    'python': 'py',
+    'java': 'java',
+    'c': 'c',
+    'cpp': 'cpp'
+    // Add more languages if needed
+  };
+  const key = language.toLowerCase();
+  return extensions[key] || 'txt';
+}