Elo Rating System Calculator
.elo-rating-calculator-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 700px;
margin: 20px auto;
padding: 25px;
background: #f9f9f9;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border: 1px solid #e0e0e0;
}
.elo-rating-calculator-container h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
font-size: 28px;
}
.elo-rating-calculator-container h3 {
color: #444;
margin-top: 30px;
margin-bottom: 15px;
font-size: 22px;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
.elo-rating-calculator-container p {
line-height: 1.6;
color: #555;
margin-bottom: 10px;
}
.calculator-form .form-group {
margin-bottom: 18px;
}
.calculator-form label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #333;
font-size: 16px;
}
.calculator-form input[type="number"],
.calculator-form select {
width: calc(100% – 22px);
padding: 12px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 16px;
box-sizing: border-box;
transition: border-color 0.3s ease;
}
.calculator-form input[type="number"]:focus,
.calculator-form select:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
.calculator-form .description {
font-size: 14px;
color: #777;
margin-top: 5px;
}
.calculator-form button {
display: block;
width: 100%;
padding: 14px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
margin-top: 25px;
}
.calculator-form button:hover {
background-color: #0056b3;
transform: translateY(-1px);
}
.calculator-form button:active {
transform: translateY(0);
}
.calculator-results {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
}
.calculator-results #eloResult p {
background-color: #e9f7ff;
border: 1px solid #cce5ff;
padding: 15px;
border-radius: 8px;
color: #004085;
font-size: 17px;
line-height: 1.8;
}
.calculator-results #eloResult strong {
color: #0056b3;
}
.elo-explanation ol, .elo-explanation ul {
margin-left: 20px;
margin-bottom: 15px;
color: #555;
}
.elo-explanation ol li, .elo-explanation ul li {
margin-bottom: 8px;
line-height: 1.6;
}
.elo-explanation code {
background-color: #eef;
padding: 2px 5px;
border-radius: 4px;
font-family: 'Courier New', Courier, monospace;
color: #c7254e;
}
function calculateEloRatings() {
var playerARating = parseFloat(document.getElementById('playerARating').value);
var playerBRating = parseFloat(document.getElementById('playerBRating').value);
var kFactor = parseFloat(document.getElementById('kFactor').value);
var matchResult = document.getElementById('matchResult').value;
if (isNaN(playerARating) || isNaN(playerBRating) || isNaN(kFactor) || playerARating < 0 || playerBRating < 0 || kFactor <= 0) {
document.getElementById('eloResult').innerHTML = 'Please enter valid positive numbers for all rating and K-factor fields.';
return;
}
var Qa = Math.pow(10, playerARating / 400);
var Qb = Math.pow(10, playerBRating / 400);
var Ea = Qa / (Qa + Qb);
var Eb = Qb / (Qa + Qb);
var Sa, Sb;
if (matchResult === 'A_wins') {
Sa = 1;
Sb = 0;
} else if (matchResult === 'B_wins') {
Sa = 0;
Sb = 1;
} else { // draw
Sa = 0.5;
Sb = 0.5;
}
var newPlayerARating = playerARating + kFactor * (Sa – Ea);
var newPlayerBRating = playerBRating + kFactor * (Sb – Eb);
var ratingChangeA = newPlayerARating – playerARating;
var ratingChangeB = newPlayerBRating – playerBRating;
var resultHtml = '