YU Ratio calculator built by AI
<style>
body {
background-color: #f2f2f2;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.calculator {
background-color: #fff;
border: 3px solid #2e7d32; /* default green */
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
padding: 30px;
width: 320px;
text-align: center;
transition: border-color 0.3s ease;
}
.calculator h2 {
font-size: 1.5rem;
margin-bottom: 20px;
}
.calculator input {
width: 100%;
padding: 10px;
margin: 10px 0;
font-size: 1rem;
border-radius: 10px;
border: 1px solid #ccc;
}
.calculator button {
background-color: #2e7d32;
color: #fff;
border: none;
padding: 10px 20px;
margin-top: 15px;
font-size: 1rem;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.result {
margin-top: 20px;
font-size: 1.2rem;
}
.rating {
font-weight: bold;
font-size: 1.2rem;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="calculator" id="calculator">
<h2>YU Ratio Calculator</h2>
<label>Enter the total number of words</label>
<input type="number" id="totalWords" placeholder="e.g., 3000">
<label>Enter the words on the company</label>
<input type="number" id="companyWords" placeholder="e.g., 300">
<button id="calcButton" onclick="calculateYU()">Calculate</button>
<div class="result" id="result"></div>
<div class="rating" id="rating"></div>
</div>
<script>
function calculateYU() {
const total = parseInt(document.getElementById('totalWords').value);
const company = parseInt(document.getElementById('companyWords').value);
const resultDiv = document.getElementById('result');
const ratingDiv = document.getElementById('rating');
const calcBox = document.getElementById('calculator');
const button = document.getElementById('calcButton');
if (isNaN(total) || isNaN(company) || total <= 0 || company < 0 || company > total) {
resultDiv.textContent = "Please enter valid numbers.";
ratingDiv.textContent = "";
calcBox.style.borderColor = "#2e7d32";
button.style.backgroundColor = "#2e7d32";
return;
}
const topic = total - company;
const ratio = (topic / total * 100).toFixed(0);
resultDiv.textContent = `Your YU Ratio = ${ratio}%`;
let rating = "";
let color = "";
if (ratio >= 90) {
rating = "Excellent!";
color = "#2e7d32"; // green
} else if (ratio >= 80) {
rating = "Pretty Good";
color = "#66bb6a"; // light green
} else if (ratio >= 70) {
rating = "Getting Salesy";
color = "#fb8c00"; // orange
} else {
rating = "Brochure Alert!";
color = "#e53935"; // red
}
ratingDiv.textContent = rating;
ratingDiv.style.color = color;
calcBox.style.borderColor = color;
button.style.backgroundColor = color;
}
</script>
</body>
</html>
