Blog

Digital Clock

Concepts Used: setInterval(), DOM update

Features:

Shows live time updating every second

<!DOCTYPE html>
<html>
<head>
  <title>Digital Clock</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
#clock { font-size: 40px; font-weight: bold; margin: 20px; }  </style>
</head>
<body>
  <h2>Digital Clock</h2>
  <div id="clock"></div>

  <script>
$(document).ready(function(){
  function updateClock(){
    let now = new Date();
    let time = now.toLocaleTimeString();
    $("#clock").text(time);
  }
  setInterval(updateClock, 1000);
  updateClock();
});  </script>
</body>
</html>

Explanation:

setInterval() updates every second.
.text() replaces content with the current time.

August 21, 2025

FAQ Accordion

Concepts Used: SlideToggle, event handling

Features:

Click a question → answer expands/collapses

<!DOCTYPE html>
<html>
<head>
  <title>FAQ Accordion</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
.question { cursor: pointer; font-weight: bold; margin: 10px 0; }
.answer { display: none; margin-left: 20px; }  </style>
</head>
<body>
  <h2>FAQ</h2>
  <div class="question">What is jQuery?</div>
  <div class="answer">jQuery is a JavaScript library for DOM manipulation.</div>

  <div class="question">Why use jQuery?</div>
  <div class="answer">It simplifies JavaScript code and works across browsers.</div>

  <script>
$(document).ready(function(){
  $(".question").click(function(){
    $(this).next(".answer").slideToggle();
  });
});  </script>
</body>
</html>

Explanation:

.slideToggle() smoothly shows/hides answers.
.next() selects the answer related to the clicked question.

August 21, 2025

Form Validation

Concepts Used: Events, Regex, DOM manipulation

Features:

Checks empty input
Validates email format
Shows error messages

<!DOCTYPE html>
<html>
<head>
  <title>Form Validation</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h2>Register Form</h2>
  <form id="myForm">
&lt;input type="text" id="name" placeholder="Enter Name"&gt;&lt;br&gt;&lt;br&gt;
&lt;input type="email" id="email" placeholder="Enter Email"&gt;&lt;br&gt;&lt;br&gt;
&lt;button type="submit"&gt;Submit&lt;/button&gt;  </form>
  <p id="msg"></p>

  <script>
$(document).ready(function(){
  $("#myForm").submit(function(e){
    e.preventDefault();
    let name = $("#name").val().trim();
    let email = $("#email").val().trim();
    let emailPattern = /^&#91;^ ]+@&#91;^ ]+\.&#91;a-z]{2,3}$/;
    if(name === ""){
      $("#msg").text("Name is required").css("color","red");
    } 
    else if(!email.match(emailPattern)){
      $("#msg").text("Invalid Email").css("color","red");
    } 
    else {
      $("#msg").text("Form Submitted Successfully!").css("color","green");
    }
  });
});  </script>
</body>
</html>

Explanation:

.submit() handles form submission.
Regex checks email format.
.text() and .css() display validation messages dynamically.

August 21, 2025

Image Slider

Concepts Used: show/hide, animations, selectors

Features:

Next/Prev buttons
Auto slideshow

<!DOCTYPE html>
<html>
<head>
  <title>Image Slider</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
#slider { width: 400px; height: 250px; overflow: hidden; position: relative; }
#slider img { width: 400px; height: 250px; display: none; }
#slider img:first-child { display: block; }
.btn { cursor: pointer; margin: 5px; padding: 5px 10px; background: black; color: white; }  </style>
</head>
<body>
  <h2>Image Slider</h2>
  <div id="slider">
&lt;img src="https://via.placeholder.com/400x250/ff7f7f" /&gt;
&lt;img src="https://via.placeholder.com/400x250/7f7fff" /&gt;
&lt;img src="https://via.placeholder.com/400x250/7fff7f" /&gt;  </div>
  <button id="prev" class="btn">Prev</button>
  <button id="next" class="btn">Next</button>

  <script>
$(document).ready(function(){
  let index = 0;
  let images = $("#slider img");
  let total = images.length;
  function showImage(i){
    images.hide();
    images.eq(i).fadeIn();
  }
  $("#next").click(function(){
    index = (index + 1) % total;
    showImage(index);
  });
  $("#prev").click(function(){
    index = (index - 1 + total) % total;
    showImage(index);
  });
  // Auto Slide
  setInterval(function(){
    $("#next").click();
  }, 3000);
});  </script>
</body>
</html>

Explanation:

.eq(index) selects image by index.
.fadeIn() creates a smooth transition.
setInterval() automatically cycles through images.

August 21, 2025

To-Do List App

Concepts Used: DOM manipulation, event handling, selectors

Features:

Add tasks
Mark tasks as completed
Delete tasks

<!DOCTYPE html>
<html>
<head>
  <title>To-Do List</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
.done { text-decoration: line-through; color: gray; }  </style>
</head>
<body>
  <h2>My To-Do List</h2>
  <input type="text" id="taskInput" placeholder="Enter task">
  <button id="addBtn">Add Task</button>
  <ul id="taskList"></ul>

  <script>
$(document).ready(function(){
  // Add new task
  $("#addBtn").click(function(){
    let task = $("#taskInput").val();
    if(task !== ""){
      $("#taskList").append("&lt;li&gt;" + task + " &lt;button class='delete'&gt;X&lt;/button&gt;&lt;/li&gt;");
      $("#taskInput").val("");
    }
  });
  // Mark task as done
  $(document).on("click", "li", function(){
    $(this).toggleClass("done");
  });
  // Delete task
  $(document).on("click", ".delete", function(e){
    e.stopPropagation();
    $(this).parent().remove();
  });
});  </script>
</body>
</html>

Explanation:

Uses .append() to add tasks dynamically.
.toggleClass() lets us mark tasks complete.
.on() handles dynamically created elements

August 21, 2025

Solve errors in jQuery AJAX?

$.ajax({
  url: "wrong_url.json",
  method: "GET",
  error: function(xhr, status, error){
console.log("Error: " + error);  }
});

August 21, 2025

prop() and attr()?
- .attr() → Gets/sets HTML attributes.
- .prop() → Gets/sets DOM properties.
Example:
```
$("#check").attr("checked"); // may return "checked"
$("#check").prop("checked"); // returns true/false
```
August 21, 2025

element is hidden in jQuery?

if($("#box").is(":hidden")){
  console.log("Box is hidden");
}

August 21, 2025

event delegation in jQuery?
Event delegation means attaching an event to a parent element so that future child elements also inherit it.

Example:
```
$(document).on("click", "button.dynamic", function(){
  alert("New button clicked!");
});
```
Useful when elements are added dynamically.
August 21, 2025

How do you stop an animation in jQuery?

Use .stop() method.

$("#box").slideDown(5000);
$("#stopBtn").click(function(){
  $("#box").stop(); // stops animation
});

August 21, 2025