Calculator Tools Calculator Tools
Create

Football Elo Rating Tracker

Apr 19, 2025

About this app

Track and calculate Elo ratings for football teams. Enter match results and see how they affect the teams' ratings in real-time.

Football Elo Rating Tracker Football Elo Rating Tracker Team 1 Name Team 1 Current Elo Rating Team 1 Score Team 2 Name Team 2 Current Elo Rating Team 2 Score Calculate Ratings

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Football Elo Rating Tracker</title>
<meta name="description" content="Track and calculate Elo ratings for football teams. Enter match results and see how they affect the teams' ratings in real-time.">
<meta name="keywords" content="Elo rating, football, soccer, ratings tracker, match results">

<!-- Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">

<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.

function calculateElo(currentRating, opponentRating, score, opponentScore, k_factor=30) {
const expectedScore = 1 / (1 + Math.pow(10, (opponentRating - currentRating) / 400));
return Math.round(currentRating + k_factor * (score - expectedScore));
}

$(document).ready(function() {
$('#submit-form').on('submit', function(e) {
e.preventDefault();

const team1 = $('#team1').val().trim();
const rating1 = parseFloat($('#rating1').val());
const team2 = $('#team2').val().trim();
const rating2 = parseFloat($('#rating2').val());
const score1 = parseInt($('#score1').val());
const score2 = parseInt($('#score2').val());

if (isNaN(rating1) || isNaN(rating2)) {
alert('Please enter valid ratings.');
return;
}

if (score1 > score2) {
const newRating1 = calculateElo(rating1, rating2, 1, 0);
const newRating2 = calculateElo(rating2, rating1, 0, 1);
$('#result').html(`<h4>Result:</h4><p>${team1} wins! (${team1} new rating: ${newRating1}, ${team2} new rating: ${newRating2})</p>`);
} else if (score1 < score2) {
const newRating1 = calculateElo(rating1, rating2, 0, 1);
const newRating2 = calculateElo(rating2, rating1, 1, 0);
$('#result').html(`<h4>Result:</h4><p>${team2} wins! (${team1} new rating: ${newRating1}, ${team2} new rating: ${newRating2})</p>`);
} else {
const newRating1 = calculateElo(rating1, rating2, 0.5, 0.5);
const newRating2 = calculateElo(rating2, rating1, 0.5, 0.5);
$('#result').html(`<h4>Result:</h4><p>It's a draw! (${team1} new rating: ${newRating1}, ${team2} new rating: ${newRating2})</p>`);
}
});
});

} catch (error) {
throw error;
}
</script>

<style>
body {
background: linear-gradient(90deg, #4e54c8, #8f94fb);
color: #fff;
}
#main-container {
margin-top: 50px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
padding: 30px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
input, button {
border-radius: 5px;
margin: 5px 0;
}
button {
background-color: #fa4e3c;
border: none;
color: #fff;
}
h1, h4 {
text-align: center;
}
.result {
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Football Elo Rating Tracker</h1>
<form id="submit-form">
<div class="mb-3">
<label for="team1" class="form-label">Team 1 Name</label>
<input type="text" class="form-control" id="team1" required>
</div>
<div class="mb-3">
<label for="rating1" class="form-label">Team 1 Current Elo Rating</label>
<input type="number" class="form-control" id="rating1" required>
</div>
<div class="mb-3">
<label for="score1" class="form-label">Team 1 Score</label>
<input type="number" class="form-control" id="score1" min="0" required>
</div>
<div class="mb-3">
<label for="team2" class="form-label">Team 2 Name</label>
<input type="text" class="form-control" id="team2" required>
</div>
<div class="mb-3">
<label for="rating2" class="form-label">Team 2 Current Elo Rating</label>
<input type="number" class="form-control" id="rating2" required>
</div>
<div class="mb-3">
<label for="score2" class="form-label">Team 2 Score</label>
<input type="number" class="form-control" id="score2" min="0" required>
</div>
<button type="submit" class="btn btn-primary w-100">Calculate Ratings</button>
</form>
<div id="result" class="result"></div>
</div>
</body>
</html>