// Check if the document is ready using jQuery$(document).ready(function() {   // DOM is fully loaded. Write other codes.  alert('Hello from jQuery');});
// Check if the document is ready using vanilla JavaScriptlet documentReadyCallback = () => {   // DOM is fully loaded. Write other codes.  alert('Hello from JavaScript');};
if (document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {  documentReadyCallback();} else {  document.addEventListener("DOMContentLoaded", documentReadyCallback);}

// Select multiple elements by "class" using jQuery.$(".blog-post");
// Select the first instance of an element by "class" using vanilla JavaScript.document.querySelector(".blog-post");
// Select multiple elements by "class" using vanilla JavaScript.document.querySelectorAll(".blog-post");

// Select multiple elements and hide them using jQuery$(".blog-post").hide();
// Select multiple elements and hide them using vanilla JavaScriptdocument.querySelectorAll(".blog-post").forEach((post) => {  post.style.display = "none";});

// Searching a child element inside an element using jQuery.let blogsSection = $(".blogs-section");blogsSection.find(".blog-post");
// Searching a child element inside an element using vanilla JavaScript.let blogsSection = document.querySelector(".blogs-section");blogsSection.querySelector(".blog-post");

// Apply styles to elements using jQuery$(".blog-post").css("border", "2px solid #326ED3");
// Apply styles to elements using vanilla JavaScriptdocument.querySelector(".blog-post").style.border = "2px solid #326ED3";

// Hide or show an element using jQuery$(".blog-post").hide();$(".blog-post").show();
// Hide or show an element using vanilla JavaScriptdocument.querySelector(".blog-post").style.display = "none";document.querySelector(".blog-post").style.display = "block";

// Create an element inside DOM using jQuery$(".message").append("<p>This is a sample text message.</p>");
// Create and element inside DOM using vanilla JavaScriptlet messageElement = document.querySelector(".message");let messageChildElement = messageElement.createElement("p");messageChildElement.textContent = "This is a sample text message.";

// Update an element text using jQuery$(".login-button").text("Log In");
// Update an element text using vanilla JavaScriptdocument.querySelector(".login-button").textContent = "Log In";
// Update an element HTML using jQuery$(".login-message").html("<div>Login successfull!</div>");
// Update an element HTML using vanilla JavaScriptdocument.querySelector(".login-message").innerHTML = "<div>Login successfull!</div>";

// Add, remove, and toggle class using jQuery$(".blog-post").addClass("popular");$(".blog-post").removeClass("popular");$(".blog-post").toggleClass("popular");
// Add, remove, and toggle class using vanilla JavaScriptlet blogPost = document.querySelector(".blog-post");blogPost.classList.add("popular");blogPost.classList.remove("popular");blogPost.classList.toggle("popular");

// Check if element has a class using jQueryif ($(".blog-post").hasClass("popular")) {  alert('This is a popular post');}
// Check if element has a class using vanilla JavaScriptif (document.querySelector(".blog-post").classList.contains("popular")) {  alert('This is a popular post');}

// Listen to events using jQuery$(".signout-button").click(function(event) {  // Logout user});$(".delete-account-form").mouseenter(function(event) {  // Higlight the delete account form});$(".password").keyup(function(event) {  // Start checking the password strength});
// Listen to events using vanilla JavaScriptdocument.querySelector(".signout-button").addEventListener("click", (event) => {  // Logout user});document.querySelector(".delete-account-form").addEventListener("mouseenter", (event) => {  // Higlight the delete account form});document.querySelector(".password").addEventListener("keyup", (event) => {  // Start checking the password strength});

// Listen to events for dynamically added elements using jQuery$(document).on("click",'#signout-button', function(event) {  // Logout user.});
// Listen to events for dynamically added elements using vanilla JavaScriptdocument.addEventListener("click", (event) => {  if(event.target && event.target.id == "signout-button"){    // Logout user.  }});

// Creating and triggering events using jQuery$(document).trigger("click");$(".signout-button").trigger("click");
// Creating and triggering events using vanilla JavaScriptdocument.dispatchEvent(new Event("click"));document.querySelector(".signout-button").dispatchEvent(new Event("click"));

// Find the next, previous, and parent element using jQuery$(".blog-post").next();$(".blog-post").prev();$(".blog-post").parent();
// Find the next, previous, and parent element using vanilla JavaScriptlet blogPost = document.querySelector(".blog-post");blogPost.nextElementSibling;blogPost.previousElementSibling;blogPost.parentElement;

// Perform network requests using jQuery$.ajax({    url: "http://example.com/movies.json",  type: "POST",  data: {    key: value  },  success: function (response) {    // See the response  },  error: function (response) {    // See the error response  }});
// Perform network requests using vanilla JavaScriptfetch("http://example.com/movies.json", {    method: "POST",    headers: {    "Content-Type": "application/json"    },    body: JSON.stringify({key: value})}).then(response => {  // See the response}).catch(error => {  // See the error response});