Skip to content

Add challenge submission form with dynamic test case input #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adityai0 merged 11 commits into from
Jul 22, 2025
Merged

Add challenge submission form with dynamic test case input #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fcf2c24
feat: add form UI for challenge submission
Trupti0705 Jul 22, 2025
40e2787
style: add styling for challenge form
Trupti0705 Jul 22, 2025
2413436
feat: add JS logic for dynamic test cases and preview
Trupti0705 Jul 22, 2025
66afb2f
Update index.html
Trupti0705 Jul 22, 2025
8d5532e
fix: corrected script path
Trupti0705 Jul 22, 2025
72fb067
Delete submit-challenge/index.html
Trupti0705 Jul 22, 2025
f825a13
fix: re-added index.html matching js and css
Trupti0705 Jul 22, 2025
6861e1a
Update index.html
Trupti0705 Jul 22, 2025
6faa028
Update index.html
Trupti0705 Jul 22, 2025
07fdb5d
fix: improve script.js validation and DOM loading check
Trupti0705 Jul 22, 2025
dac79a2
fix: update JS to avoid preview folder conflict
Trupti0705 Jul 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions submit-challenge/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Submit Coding Challenge</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main class="container">
<h2>Submit New Coding Challenge</h2>
<form id="challengeForm">
<label for="title">Title</label>
<input id="title" name="title" type="text" required />

<label for="description">Description</label>
<textarea id="description" name="description" required></textarea>

<label for="difficulty">Difficulty</label>
<select id="difficulty" name="difficulty" required>
<option value="">Select</option>
<option>Easy</option>
<option>Medium</option>
<option>Hard</option>
</select>

<label>Test Cases</label>
<div id="testCases">
<input type="text" class="test-case" placeholder="Test Case 1" required />
</div>
<button type="button" id="addTestCase">+ Add Test Case</button>

<label for="solution">Sample Solution</label>
<textarea id="solution" name="solution" required></textarea>

<button type="submit">Submit</button>
</form>

<section id="preview"></section>
</main>
<script src="submit-challenge/script.js"></script>

</body>
</html>
35 changes: 35 additions & 0 deletions submit-challenge/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
const form = document.getElementById('challengeForm');
const testCasesDiv = document.getElementById('testCases');
const addBtn = document.getElementById('addTestCase');
const preview = document.getElementById('preview');

addBtn.addEventListener('click', () => {
const input = document.createElement('input');
input.type = 'text';
input.className = 'test-case';
input.placeholder = `Test Case ${testCasesDiv.children.length + 1}`;
input.required = true;
testCasesDiv.appendChild(input);
});

form.addEventListener('submit', (e) => {
e.preventDefault();

const title = document.getElementById('title').value.trim();
const description = document.getElementById('description').value.trim();
const difficulty = document.getElementById('difficulty').value;
const solution = document.getElementById('solution').value.trim();

const testCases = Array.from(document.querySelectorAll('.test-case'))
.map(input => input.value.trim())
.filter(Boolean);

preview.innerHTML = `
<h3>Preview</h3>
<p><strong>Title:</strong> ${title}</p>
<p><strong>Difficulty:</strong> ${difficulty}</p>
<p><strong>Description:</strong><br>${description.replace(/\n/g, "<br>")}</p>
<p><strong>Test Cases:</strong><ul>${testCases.map(tc => `<li>${tc}</li>`).join('')}</ul></p>
<p><strong>Sample Solution:</strong><br><pre>${solution}</pre></p>
`;
});
34 changes: 34 additions & 0 deletions submit-challenge/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
body {
font-family: sans-serif;
background: #f0f0f0;
padding: 2rem;
}

.container {
max-width: 700px;
background: white;
padding: 2rem;
margin: auto;
border-radius: 10px;
}

form {
display: flex;
flex-direction: column;
}

label {
margin-top: 1rem;
}

input, textarea, select, button {
padding: 0.5rem;
font-size: 1rem;
margin-top: 0.3rem;
}

#preview {
margin-top: 2rem;
background: #e0e0ff;
padding: 1rem;
}
Loading