CTS HTML / CSS / JavaScript – Code Snippet Completion Tips
Understand the question first (MOST IMPORTANT)
Do not start coding immediately
Read the comments in the code (// TODO, /* write logic */)
Clearly identify:
o What is already given
o What output or behaviour is expected
Check carefully which file you are editing (HTML / CSS / JS)
HTML – What you usually need to add
Correct id and class names (very common mistake)
Properly link the JS file
<script src="[Link]"></script>
Form-related attributes:
o id
o name
o required
Button type:
<button type="button">Submit</button>
Correct input types:
o email
o password
o number
Use proper semantic tags if required
Most HTML mistakes happen because of wrong id or class names.
CSS – Typical logic you need to fill
Apply styles using the correct selector
#idName {}
.className {}
Fix layout using:
o display: flex
o justify-content
o align-items
Center elements using:
o margin: auto
Show / hide elements using:
o display: none
o
Handle responsiveness using:
o For mobile & Desktop
o @media (max-width: 768px) {
o /* mobile styles */
o }
o @media (min-width: 769px) {
o /* desktop styles */
o }
Validation colors:
o Red for error
o Green for success
JavaScript
DOM selection
[Link]("id")
[Link](".class")
Event handling
[Link]("click", function () {})
Accessing input value
[Link]
Validation using if–else
if (value === "") {
// show error
} else {
// success
}
Changing text on screen
[Link] = "Error message";
Changing styles using JS
[Link] = "red";
[Link] = "block";
Loops for multiple checks
for (let i = 0; i < [Link]; i++) {}
Common CTS logic patterns
Form validation
Show or hide error messages
Button click updates text
Character count
Password and confirm password comparison
Toggle visibility
Simple calculations
CTS HTML / CSS / JS
Pattern 1: Button click → show message
[Link]("click", function () {
[Link] = "Submitted Successfully";
});
Pattern 2: Input validation (empty check)
if ([Link] === "") {
[Link] = "block";
} else {
[Link] = "none";
}
Pattern 3: Change color based on condition
if (marks >= 40) {
[Link] = "green";
} else {
[Link] = "red";
}
Pattern 4: Password and confirm password match
if ([Link] === [Link]) {
[Link] = "Matched";
} else {
[Link] = "Not Matched";
}
Pattern 5: Character count
[Link] = [Link];
Pattern 6: Show or hide element
[Link] = "block";
[Link] = "none";
Pattern 7: Loop through inputs
for (let i = 0; i < [Link]; i++) {
if (inputs[i].value === "") {
// error
}
}
Pattern 8: Toggle password visibility
if ([Link] === "password") {
[Link] = "text";
} else {
[Link] = "password";
}
Pattern 9: Prevent default form submission
[Link]();
Pattern 10: Add or remove class
[Link]("error");
[Link]("error");
Pattern 11: Filter search results when you type
[Link]("keyup", function () {
const value = [Link]();
for (let i = 0; i < [Link]; i++) {
if (items[i].[Link]().includes(value)) {
items[i].[Link] = "block";
} else {
items[i].[Link] = "none";
}
}
});
Pattern 12: Filter table rows based on input
for (let i = 1; i < [Link]; i++) {
const cellText = tableRows[i].cells[0].[Link]();
if ([Link](searchValue)) {
tableRows[i].[Link] = "";
} else {
tableRows[i].[Link] = "none";
}
}
Sorting Table Header Example
You must do ONLY these 3 things:
1. Add data-sortable="true" to all <th> elements
2. Add margin-left: 5px to .sort-indicator class
3. Complete sortTable() function to:
o Toggle ascending / descending order
o Sort rows based on clicked column
o Re-append sorted rows
FILE 1: [Link]
<!-- TODO: Add data-sortable="true" to all <th> elements -->
<th onclick="sortTable(0)">ID <span class="sort-
indicator"></span></th>
<th onclick="sortTable(1)">Name <span class="sort-
indicator"></span></th>
<th onclick="sortTable(2)">Age <span class="sort-
indicator"></span></th>
Result :
<th data-sortable="true" onclick="sortTable(0)">ID <span class="sort-
indicator"></span></th>
<th data-sortable="true" onclick="sortTable(1)">Name <span
class="sort-indicator"></span></th>
<th data-sortable="true" onclick="sortTable(2)">Age <span
class="sort-indicator"></span></th>
FILE 2: [Link]
.sort-indicator {
font-size: 12px;
/* TODO: add margin-left: 5px */
}
Result :
.sort-indicator {
font-size: 12px;
margin-left: 5px;
}
File3: [Link]
const directions = {};
function sortTable(columnIndex) {
const table = [Link]("data-table");
const tbody = [Link][0];
const rows = [Link]([Link]);
// TODO:
// Toggle ascending / descending order
// Sort rows based on the clicked column
// Re-append sorted rows to the table body
}
Steps :
First click sorts ascending
Next click sorts descending
Use directions[columnIndex] to track order
Compare numbers as numbers, text as strings
Append sorted rows back to <tbody>
const directions = {};
function sortTable(columnIndex) {
const table = [Link]("data-table");
const tbody = [Link][0];
const rows = [Link]([Link]);
// Toggle direction
const direction = directions[columnIndex] === "asc" ? "desc" : "asc";
directions[columnIndex] = direction;
// Sort rows
[Link](function (a, b) {
let valA = [Link][columnIndex].innerText;
let valB = [Link][columnIndex].innerText;
if (!isNaN(valA) && !isNaN(valB)) { // for numbers only
valA = Number(valA); // if these are string -> it is wrong
valB = Number(valB); // “10” < “2” wrong
}
if (valA < valB) return direction === "asc" ? -1 : 1;
if (valA > valB) return direction === "asc" ? 1 : -1;
return 0;
});
// Re-append sorted rows
[Link](function (row) {
[Link](row);
});
}