<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dallas' NFL War Game</title>
<!-- Add your CSS file link here -->
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #003366;
color: white;
padding: 10px 0;
}
#teams-list, #matchup-section, #winner-announcement {
margin: 20px auto;
width: 80%;
}
#teams {
list-style: none;
padding: 0;
}
#teams li {
background-color: #fff;
border: 1px solid #ddd;
margin-bottom: 5px;
padding: 10px;
text-align: left;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
footer {
background-color: #003366;
color: white;
bottom: 0;
width: 100%;
padding: 10px 0;
}
#teams {
width: 100%;
border-collapse: collapse;
}
#teams td, #teams th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
#teams tr:nth-child(even) {
background-color: #f2f2f2;
}
#teams tr:hover {
background-color: #ddd;
}
.lost {
filter: grayscale(100%); /* Converts the image to grayscale */
opacity: 0.5; /* Makes the image half-transparent */
}
#teams td {
text-align: center; /* Centers content horizontally in table cells */
vertical-align: middle; /* Centers content vertically in table cells */
padding: 10px; /* Adjust padding as needed */
}
#teams img {
display: inline-block; /* Makes the image inline for centering */
max-width: 100%; /* Ensures the image does not exceed the cell width */
height: auto; /* Maintains aspect ratio */
}
@keyframes knockoff {
0% { transform: translateX(0); opacity: 1; }
100% { transform: translateX(-300px); opacity: 0; } /* Adjust as needed */
}
.loser-animation {
animation: knockoff 1s forwards; /* forwards will keep the element in the final state */
}
</style>
</head>
<body>
<header>
<h1>Dallas' NFL War Game</h1>
</header>
<section id="teams-list">
<table id="teams">
<!-- Table rows and columns will be dynamically filled here -->
</table>
</section>
</section>
<section id="matchup-section">
<button id="matchup-button">Generate Random Matchup</button>
<div id="current-matchup">
<h3>Current Matchup</h3>
<!-- Logos of the teams in the current matchup will be displayed here -->
</div>
</section>
<section id="winner-announcement">
<h3>Winner Announcement</h3>
<!-- Display the winner and the city taken over -->
</section>
<footer>
<p>© 2024 NFL Matchup Game</p>
</footer>
<!-- Add your JavaScript file link here -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const teams = [
{ name: "Arizona Cardinals", city: "Glendale", logo: "https://static.www.nfl.com/image/private/f_auto/league/u9fltoslqdsyao8cpm0k", hasLost: false },
{ name: "Atlanta Falcons", city: "Atlanta", logo: "https://static.www.nfl.com/image/private/f_auto/league/d8m7hzpsbrl6pnqht8op", hasLost: false },
{ name: "Baltimore Ravens", city: "Baltimore", logo: "https://res.cloudinary.com/nflleague/image/private/f_auto/league/ucsdijmddsqcj1i9tddd", hasLost: false },
{ name: "Buffalo Bills", city: "Buffalo", logo: "https://res.cloudinary.com/nflleague/image/private/f_auto/league/giphcy6ie9mxbnldntsf", hasLost: false },
{ name: "Carolina Panthers", city: "Charlotte", logo: "https://static.www.nfl.com/image/private/f_auto/league/ervfzgrqdpnc7lh5gqwq", hasLost: false },
{ name: "Chicago Bears", city: "Chicago", logo: "https://static.www.nfl.com/image/private/f_auto/league/ijrplti0kmzsyoaikhv1", hasLost: false },
{ name: "Cincinnati Bengals", city: "Cincinnati", logo: "https://res.cloudinary.com/nflleague/image/private/f_auto/league/okxpteoliyayufypqalq", hasLost: false },
{ name: "Cleveland Browns", city: "Cleveland", logo: "https://static.www.nfl.com/image/private/f_auto/league/fgbn8acp4opvyxk13dcy", hasLost: false },
{ name: "Dallas Cowboys", city: "Arlington", logo: "https://static.www.nfl.com/image/private/f_auto/league/ieid8hoygzdlmzo0tnf6", hasLost: false },
{ name: "Denver Broncos", city: "Denver", logo: "https://res.cloudinary.com/nflleague/image/private/f_auto/league/t0p7m5cjdjy18rnzzqbx", hasLost: false },
{ name: "Detroit Lions", city: "Detroit", logo: "https://res.cloudinary.com/nflleague/image/private/f_auto/league/ocvxwnapdvwevupe4tpr", hasLost: false },
{ name: "Green Bay Packers", city: "Green Bay", logo: "https://res.cloudinary.com/nflleague/image/private/f_auto/league/gppfvr7n8gljgjaqux2x", hasLost: false },
{ name: "Houston Texans", city: "Houston", logo: "https://static.www.nfl.com/image/private/f_auto/league/bpx88i8nw4nnabuq0oob", hasLost: false },
{ name: "Indianapolis Colts", city: "Indianapolis", logo: "https://static.www.nfl.com/image/private/f_auto/league/ketwqeuschqzjsllbid5", hasLost: false },
{ name: "Jacksonville Jaguars", city: "Jacksonville", logo: "https://res.cloudinary.com/nflleague/image/private/f_auto/league/qycbib6ivrm9dqaexryk", hasLost: false },
{ name: "Kansas City Chiefs", city: "Kansas City", logo: "https://res.cloudinary.com/nflleague/image/private/f_auto/league/ujshjqvmnxce8m4obmvs", hasLost: false },
{ name: "Las Vegas Raiders", city: "Paradise", logo: "https://static.www.nfl.com/image/private/f_auto/league/gzcojbzcyjgubgyb6xf2", hasLost: false },
{ name: "Los Angeles Chargers", city: "Inglewood", logo: "https://static.www.nfl.com/image/private/f_auto/league/dhfidtn8jrumakbogeu4", hasLost: false },
{ name: "Los Angeles Rams", city: "Inglewood", logo: "https://static.www.nfl.com/image/private/f_auto/league/ayvwcmluj2ohkdlbiegi", hasLost: false },
{ name: "Miami Dolphins", city: "Miami Gardens", logo: "https://res.cloudinary.com/nflleague/image/private/f_auto/league/lits6p8ycthy9to70bnt", hasLost: false },
{ name: "Minnesota Vikings", city: "Minneapolis", logo: "https://res.cloudinary.com/nflleague/image/private/f_auto/league/teguylrnqqmfcwxvcmmz", hasLost: false },
{ name: "New England Patriots", city: "Foxborough", logo: "https://res.cloudinary.com/nflleague/image/private/f_auto/league/moyfxx3dq5pio4aiftnc", hasLost: false },
{ name: "New Orleans Saints", city: "New Orleans", logo: "https://static.www.nfl.com/image/private/f_auto/league/grhjkahghjkk17v43hdx", hasLost: false },
{ name: "New York Giants", city: "East Rutherford", logo: "https://res.cloudinary.com/nflleague/image/private/f_auto/league/t6mhdmgizi6qhndh8b9p", hasLost: false },
{ name: "New York Jets", city: "East Rutherford", logo: "https://static.www.nfl.com/image/private/f_auto/league/ekijosiae96gektbo4iw", hasLost: false },
{ name: "Philadelphia Eagles", city: "Philadelphia", logo: "https://res.cloudinary.com/nflleague/image/private/f_auto/league/puhrqgj71gobgdkdo6uq", hasLost: false },
{ name: "Pittsburgh Steelers", city: "Pittsburgh", logo: "https://res.cloudinary.com/nflleague/image/private/f_auto/league/xujg9t3t4u5nmjgr54wx", hasLost: false },
{ name: "San Francisco 49ers", city: "Santa Clara", logo: "https://res.cloudinary.com/nflleague/image/private/f_auto/league/dxibuyxbk0b9ua5ih9hn", hasLost: false },
{ name: "Seattle Seahawks", city: "Seattle", logo: "https://res.cloudinary.com/nflleague/image/private/f_auto/league/gcytzwpjdzbpwnwxincg", hasLost: false },
{ name: "Tampa Bay Buccaneers", city: "Tampa", logo: "https://static.www.nfl.com/image/private/f_auto/league/v8uqiualryypwqgvwcih", hasLost: false },
{ name: "Tennessee Titans", city: "Nashville", logo: "https://static.www.nfl.com/image/private/f_auto/league/pln44vuzugjgipyidsre", hasLost: false },
{ name: "Washington Commanders", city: "Landover", logo: "https://static.www.nfl.com/image/private/f_auto/league/xymxwrxtyj9fhaemhdyd", hasLost: false }
];
const teamsList = document.getElementById('teams');
const matchupButton = document.getElementById('matchup-button');
const currentMatchup = document.getElementById('current-matchup');
const winnerAnnouncement = document.getElementById('winner-announcement');
// Initialize the teams list
function initializeTeamsList() {
teamsList.innerHTML = ''; // Clear existing content
let row = document.createElement('tr');
teams.forEach((team, index) => {
let cell = document.createElement('td');
let logoImg = document.createElement('img');
logoImg.src = team.logo;
logoImg.alt = team.name;
logoImg.style.width = '50px'; // Set a standard size for logos
cell.appendChild(logoImg);
row.appendChild(cell);
// Create a new row after every 8th team
if ((index + 1) % 8 === 0) {
teamsList.appendChild(row);
row = document.createElement('tr');
}
});
// Append the last row if it has less than 8 cells
if (row.hasChildNodes()) {
teamsList.appendChild(row);
}
}
// Generate a random matchup
function generateRandomMatchup() {
// Filter out teams that have lost
const availableTeams = teams.filter(team => !team.hasLost);
if (availableTeams.length < 2) {
alert('Not enough teams to create a matchup!');
return;
}
const teamIndices = new Set();
while (teamIndices.size < 2) {
teamIndices.add(Math.floor(Math.random() * availableTeams.length));
}
const matchupTeams = [...teamIndices].map(index => availableTeams[index]);
// Clear previous matchup logos and text
currentMatchup.innerHTML = '';
// Create and append logos for the matchup teams
matchupTeams.forEach(team => {
const logoImg = document.createElement('img');
logoImg.src = team.logo;
logoImg.alt = team.name;
logoImg.style.width = '100px'; // Adjust size as needed
currentMatchup.appendChild(logoImg);
});
// Add matchup text below the logos
determineWinner(matchupTeams);
}
// Determine the winner
function determineWinner(matchupTeams) {
const winnerIndex = Math.floor(Math.random() * matchupTeams.length);
const winner = matchupTeams[winnerIndex];
const loser = matchupTeams[1 - winnerIndex];
// Clear previous winner announcement
winnerAnnouncement.innerHTML = '';
// Create and append the winner text
const winnerText = document.createElement('h3');
winnerText.textContent = 'WINNER';
winnerAnnouncement.appendChild(winnerText);
// Display the winner's logo
const winnerLogo = document.createElement('img');
winnerLogo.src = winner.logo;
winnerLogo.alt = winner.name;
winnerAnnouncement.appendChild(winnerLogo);
// Find and animate the loser's logo
const logos = document.querySelectorAll('#teams img');
logos.forEach(logo => {
if (logo.alt === loser.name) {
logo.classList.add('loser-animation');
}
});
// Update the winner's and loser's status
winner.hasLost = false; // Assuming winner shouldn't be marked as lost
loser.hasLost = true;
}
initializeTeamsList();
matchupButton.addEventListener('click', generateRandomMatchup);
});
let previousWinner = null; // Holds the last match's winner
</script>
</body>
</html>
1 Like
Dang, that’s really cool
Thank you, it was all my 11 year olds idea lol.
Nicely done! Very informative, and entertaining!