Skip to content

README.md

Latest commit

 

History

History
121 lines (76 loc) · 2.34 KB

README.md

File metadata and controls

121 lines (76 loc) · 2.34 KB

🏏 IPL Winner Checker

A fun and interactive DOM-based project that randomly displays IPL teams, their captains, origins, and number of IPL titles — with dynamic backgrounds and intro video overlay.

🔗 Live Demo

👉 Click Here to View Live

📦 GitHub Repository

👉 Click Here for Source Code

🌟 Features

  • 🎥 Auto-play intro video
  • 🖼️ Dynamic background images
  • 🔀 Random IPL team generator
  • 📊 Shows wins, captain & origin
  • ✨ Clean glass-effect UI
  • 🧊 Fully DOM-based logic

📸 Preview

image
image 
![App Screenshot](./screenshot.png)

🛠️ Tech Stack

Technology Used For
HTML5 Structure
CSS3 Styling & effects
JavaScript (DOM) Logic
GitHub Pages Hosting

📂 Project Structure

📦 DOM-Project-1
 ┣ index.html
 ┣ style.css
 ┣ script.js
 ┣ images/
 ┃ ┣ CSK.png
 ┃ ┣ MI.jpg
 ┃ ┣ RCB.png
 ┃ ┣ KKR.jpg
 ┃ ┣ SRH.jpg
 ┃ ┣ PBKS.png
 ┃ ┗ DC.jpg
 ┗ videos/
   ┗ introo.mp4

🚀 Getting Started

1️⃣ Clone the Repository

git clone https://github.com/vikaskumar098/DOM-Project-1.git

2️⃣ Run the Project

Open in VS Code → Run with Live Server

🧠 Core JavaScript Logic

btn.addEventListener("click", function () {
    let winner = arr[Math.floor(Math.random() * arr.length)];

    h1.innerHTML = `${winner.team} has won ${winner.wins} times in IPL! 
    ${winner.captain} is the captain from ${winner.origin}.`;

    main.style.backgroundImage = `url(${winner.primary})`;
    main.style.color = winner.secondry;
    video.style.display = "none";
});

👤 Connect With Me

🔗 LinkedIn: Vikas Kumar

⭐ Support

If you like this project, consider giving it a ⭐ star on GitHub!