jQuery
Practice

12 problems — selectors, content, styling, events, animations & more

Easy (×3)

Easy-Medium (×3)

Medium (×3)

Medium-Hard (×3)

💡 How to use these slides:

Read the task carefully, then write your solution in the code editor
Click ▶ Run Code (or press Ctrl+Enter) to execute
Stuck? Use the 👁️ Show Solution button — but try first!
Click Reset Preview to restore the original state of the preview

⭐ Easy — Problem 1 of 12

Change the Heading Text

Practice: ID selector + .text()

Your Task:

1Select the element with ID headline and change its text to "jQuery is awesome!"

💡 Hints:

To select by ID use: $("#your-id")
To set text content use: .text("your text here")
Put them together: $("#headline").text("...")

YOUR CODE

// Step 1: Select the element with id "headline"
// Step 2: Call .text() on it with "jQuery is awesome!"

Ln 1, Col 1 JavaScript + jQuery

✅ Solution:

$("#headline").text("jQuery is awesome!");

💻 Console Output:

🎨 Live Preview:

Original heading text

This paragraph should stay the same.

⭐ Easy — Problem 2 of 12

Style All the Boxes

Practice: class selector + .css()

Your Tasks:

1Select all elements with class card and change their background color to #DBEAFE
2Also change their text color to #1E40AF

💡 Hints:

To select by class use: $(".class-name")
To set one CSS property: .css("property", "value")
To set multiple at once: .css({ "property": "value", "property2": "value2" })
jQuery applies the change to all matched elements — no loop needed!

YOUR CODE

// Select all .card elements and change their styles

Ln 1, Col 1 JavaScript + jQuery

✅ Solution:

$(".card").css({
    "background": "#DBEAFE",
    "color": "#1E40AF"
});

💻 Console Output:

🎨 Live Preview:

Card A

Card B

Card C

⭐ Easy — Problem 3 of 12

Read an Input Value

Practice: .val() + console.log()

Your Tasks:

1Get the current value from the input with ID username and store it in a variable
2Log it to the console with the label "Hello," — e.g. Hello, Ada
3Also update the text of #greeting-output to show the same message

💡 Hints:

Get an input's value: var name = $("#username").val();
Combine strings: "Hello, " + name
Print to console: console.log("Hello, " + name);
Set element text: $("#greeting-output").text("Hello, " + name);

YOUR CODE

// Step 1: Get the value of #username and store it in a variable
var name = 

// Step 2: Log "Hello, " + name to the console


// Step 3: Update #greeting-output text to "Hello, " + name

Ln 1, Col 1 JavaScript + jQuery

✅ Solution:

var name = $("#username").val();
console.log("Hello, " + name);
$("#greeting-output").text("Hello, " + name);

💻 Console Output:

🎨 Live Preview:

Enter your name:

Greeting will appear here...

🔵 Easy-Medium — Problem 4 of 12

Inject HTML Content

Practice: .html() vs .text()

Your Tasks:

1Change the content of #status-box to: ✅ Connected — server is online
2Change the content of #warning-box to: ⚠️ Low battery

💡 Hints:

.html("...") renders HTML tags — use this instead of .text() when you want formatting
Example: $("#box").html("Bold!")

YOUR CODE

// Task 1: Update #status-box with HTML


// Task 2: Update #warning-box with HTML

Ln 1, Col 1 JavaScript + jQuery

✅ Solution:

$("#status-box").html("<strong>✅ Connected</strong> — server is online");
$("#warning-box").html("<em style='color:#DC2626'>⚠️ Low battery</em>");

💻 Console Output:

🎨 Live Preview:

Status unknown

No warnings

🔵 Easy-Medium — Problem 5 of 12

Show a Hidden Element

Practice: .click() + .show() / .hide()

Your Tasks:

1When #reveal-btn is clicked, show the element #secret-panel
2When #hide-btn is clicked, hide #secret-panel again

💡 Hints:

Attach a click handler: $("#btn").click(function() { ... });
Show an element: $("#element").show();
Hide an element: $("#element").hide();
Remember: Run the code first, then click the buttons in the preview!

YOUR CODE (run first, then interact)

// When #reveal-btn is clicked, show #secret-panel


// When #hide-btn is clicked, hide #secret-panel

Ln 1, Col 1 JavaScript + jQuery

✅ Solution:

$("#reveal-btn").click(function() {
    $("#secret-panel").show();
});

$("#hide-btn").click(function() {
    $("#secret-panel").hide();
});

💻 Console Output:

🎨 Live Preview (click buttons after running!):

🔵 Easy-Medium — Problem 6 of 12

Add, Remove & Toggle Classes

Practice: .addClass() · .removeClass() · .toggleClass()

Your Tasks:

1When #add-btn is clicked, add class highlighted to #demo-box
2When #remove-btn is clicked, remove class highlighted from #demo-box
3When #toggle-btn is clicked, toggle class highlighted on #demo-box

💡 Hint: Use .addClass("highlighted"), .removeClass("highlighted"), and .toggleClass("highlighted"). The .highlighted class is already defined in the preview — it turns the box gold.

YOUR CODE (run first, then interact)

// Task 1: Add "highlighted" class when #add-btn is clicked


// Task 2: Remove "highlighted" class when #remove-btn is clicked


// Task 3: Toggle "highlighted" class when #toggle-btn is clicked

Ln 1, Col 1 JavaScript + jQuery

✅ Solution:

$("#add-btn").click(function() {
    $("#demo-box").addClass("highlighted");
});

$("#remove-btn").click(function() {
    $("#demo-box").removeClass("highlighted");
});

$("#toggle-btn").click(function() {
    $("#demo-box").toggleClass("highlighted");
});

💻 Console Output:

🎨 Live Preview:

Watch me change!

🟡 Medium — Problem 7 of 12

Hover Effects

Practice: .hover() + $(this)

Your Tasks:

1When the mouse enters any .menu-item, change its background to #2563EB and text color to white
2When the mouse leaves, restore background to #F1F5F9 and color to #1E293B

💡 Hints:

.hover(fnEnter, fnLeave) takes two functions — one for in, one for out
Use $(this) inside the handler to reference the hovered element
This needs to work for all .menu-item elements — jQuery handles this automatically

YOUR CODE (run first, then hover the items)

$(".menu-item").hover(
    function() {
        // Mouse enters — change background and color

    },
    function() {
        // Mouse leaves — restore original styles

    }
);

Ln 1, Col 1 JavaScript + jQuery

✅ Solution:

$(".menu-item").hover(
    function() {
        $(this).css({ "background": "#2563EB", "color": "white" });
    },
    function() {
        $(this).css({ "background": "#F1F5F9", "color": "#1E293B" });
    }
);

💻 Console Output:

🎨 Live Preview (hover after running!):

🏠 Home
📄 About
💼 Portfolio
📬 Contact

🟡 Medium — Problem 8 of 12

Build a Task List

Practice: .click() + .val() + .append()

Your Tasks:

1When #add-task-btn is clicked, read the value from #task-input
2If the value is not empty, append <li>[task]</li> to #task-list
3After adding, clear the input field

💡 Hints:

Check if value is not empty: if (value !== "") { ... }
Build the list item: "<li>" + value + "</li>"
Clear an input: .val("")

YOUR CODE (run first, then try adding tasks)

$("#add-task-btn").click(function() {
    // Step 1: Get the value from #task-input
    var task = 

    // Step 2: If the task is not empty, add it to #task-list


    // Step 3: Clear the input

});

Ln 1, Col 1 JavaScript + jQuery

✅ Solution:

$("#add-task-btn").click(function() {
    var task = $("#task-input").val();
    if (task !== "") {
        $("#task-list").append("<li style='padding:8px;border-bottom:1px solid #E2E8F0'>" + task + "</li>");
        $("#task-input").val("");
    }
});

💻 Console Output:

🎨 Live Preview:

📝 My Task List

Buy groceries
Read a book

🟡 Medium — Problem 9 of 12

Fade & Remove

Practice: .fadeOut() · .fadeIn() · .remove()

Your Tasks:

1When #fade-out-btn is clicked, fade out #fade-target
2When #fade-in-btn is clicked, fade it back in
3When any .dismiss-btn is clicked, completely remove its parent .alert-card from the DOM

💡 Hints:

.fadeOut() and .fadeIn() animate opacity
To get the parent of the clicked button: $(this).parent()
.remove() deletes an element from the DOM entirely

YOUR CODE (run first, then interact)

// Task 1: Fade out #fade-target


// Task 2: Fade in #fade-target


// Task 3: Remove the parent .alert-card when .dismiss-btn is clicked

Ln 1, Col 1 JavaScript + jQuery

✅ Solution:

$("#fade-out-btn").click(function() {
    $("#fade-target").fadeOut();
});

$("#fade-in-btn").click(function() {
    $("#fade-target").fadeIn();
});

$(".dismiss-btn").click(function() {
    $(this).parent().remove();
});

💻 Console Output:

🎨 Live Preview:

I will fade in and out ✨

Dismiss these alerts:

⚠️ Update available

🔴 Connection lost

🔴 Medium-Hard — Problem 10 of 12

Exclusive Selection

Practice: $(this) · .siblings() · chaining

Your Tasks:

1When a .option-card is clicked, add class selected to it and remove selected from all its sibling .option-card elements
2Update #chosen-label's text to show which option was selected, using the clicked card's .find(".option-name") text

YOUR CODE (run first, then click an option)

$(".option-card").click(function() {
    // Your code here...


});

Ln 1, Col 1 JavaScript + jQuery

✅ Solution:

$(".option-card").click(function() {
    $(this).addClass("selected")
           .siblings(".option-card").removeClass("selected");
    
    var name = $(this).find(".option-name").text();
    $("#chosen-label").text("You chose: " + name);
});

💻 Console Output:

🎨 Live Preview:

Nothing selected yet

🚀

Rocket

🌊

Wave

🌿

Leaf

🔴 Medium-Hard — Problem 11 of 12

Manage a Dynamic List

Practice: .prepend() · .last() · .remove() · live counters

Your Tasks:

1When #prepend-btn is clicked, prepend a new item <li>New item</li> to #dyn-list
2When #remove-last-btn is clicked, remove the last <li> in #dyn-list
3After every add or remove operation, update #item-count's text to show the current number of li children

YOUR CODE (run first, then interact)

$("#prepend-btn").click(function() {
    // Prepend a new <li> and update count


});

$("#remove-last-btn").click(function() {
    // Remove last <li> and update count


});

Ln 1, Col 1 JavaScript + jQuery

✅ Solution:

$("#prepend-btn").click(function() {
    $("#dyn-list").prepend("<li style='padding:8px;border-bottom:1px solid #E2E8F0'>New item</li>");
    $("#item-count").text($("#dyn-list li").length);
});

$("#remove-last-btn").click(function() {
    if ($("#dyn-list li").length > 0) {
        $("#dyn-list li").last().remove();
        $("#item-count").text($("#dyn-list li").length);
    }
});

💻 Console Output:

🎨 Live Preview:

List Count: 3

Alpha
Beta
Gamma

🔴 Medium-Hard — Problem 12 of 12

Build a Like Button

No hints — put it all together

Your Tasks — build the full feature from scratch:

1When a .like-btn is clicked, read its current data-count attribute, increment it by 1, and write it back
2Update the button's own .like-count child span to display the new number
3Toggle class liked on the button (the style is already defined — it turns the button blue)
4Update #total-likes to always show the sum of all buttons' data-count values

YOUR CODE (run first, then click ♥ on each post)

$(".like-btn").click(function() {
    // Your code here — no hints this time, you've got this!


});

Ln 1, Col 1 JavaScript + jQuery

✅ Solution:

$(".like-btn").click(function() {
    var count = parseInt($(this).attr("data-count")) + 1;
    $(this).attr("data-count", count);
    $(this).find(".like-count").text(count);
    $(this).toggleClass("liked");

    var total = 0;
    $(".like-btn").each(function() {
        total += parseInt($(this).attr("data-count"));
    });
    $("#total-likes").text(total);
});

💻 Console Output:

🎨 Live Preview:

Feed Total likes: 0

Just deployed my first jQuery project! 🚀

Finally understood what $(this) means 😅

CSS animations + jQuery = 🔥

jQueryPractice

Change the Heading Text

Original heading text

Style All the Boxes

Read an Input Value

Inject HTML Content

Show a Hidden Element

Add, Remove & Toggle Classes

Hover Effects

Build a Task List

📝 My Task List

Fade & Remove

Exclusive Selection

Manage a Dynamic List

Build a Like Button

jQuery
Practice