main.js

let heading = document.getElementById("heading");
let head2 = document.getElementById("head2");
let para = document.getElementById("para");
let four = document.getElementById("four");
let five = document.getElementById("five");
let six = document.getElementById("six");
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");
let rows = document.getElementById("rows");
let image = document.getElementById("image");
console.log(rows);

heading.style.color = "green";

heading.addEventListener("click", () => {
    heading.style.color = "red";
});

if (heading.style.color = "red") {
    heading.addEventListener("click", () => {
        heading.style.color = "rgb(79, 236, 6)";
    });
}

head2.addEventListener("mouseenter", () => {
    head2.style.fontSize = "60px";
});

rows.addEventListener("click", () => {
    rows.style.background = "red";
});

head2.addEventListener("mouseleave", () => {
    head2.style.fontSize = "30px";
});

para.addEventListener("dblclick", () => {
    para.innerHTML = "I was double-clicked!";
});

$("#btn1").click(() => {
    $("#three").fadeToggle("slow");
});

$("#btn2").click(() => {
    $("#five").slideToggle("slow");
});

$("#image").hover(() => {
    $("#image").animate({
        left: "40px",
        height: "250px",
        width: "250px"
    });
});