<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href=""> <title>Task Progress Tracker</title> </head> <body> <div class="container mt-5"> <h2 class="text-center mb-4">Task Progress Tracker</h2> <div class="progress-container"> <div class="progress" id="progressBar" data-progress="0"> <div class="progress-circle"> <span class="progress-text">0%</span> <div class="progress-pie" id="progressPie"></div> </div> </div> </div> <div class="form-group mt-4"> <label for="taskInput">Enter the number of tasks:</label> <input type="number" class="form-control" id="taskInput" placeholder="Enter number of tasks"> </div> <button class="btn btn-primary" onclick="updateProgress()">Update Progress</button> </div> </body> </html>
body { background-color: #f8f9fa; } .progress-container { text-align: center; } .progress { position: relative; width: 200px; height: 200px; border-radius: 50%; background-color: #ddd; } .progress-circle { position: absolute; width: 100%; height: 100%; clip: rect(0, 200px, 200px, 100px); } .progress-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; font-weight: bold; color: #333; } .progress-pie { position: absolute; width: 100%; height: 100%; clip: rect(0, 100px, 200px, 0); }
function updateProgress() { const taskInput = document.getElementById('taskInput'); const progressBar = document.getElementById('progressBar'); const progressPie = document.getElementById('progressPie'); const totalTasks = parseInt(taskInput.value); const completedTasks = Math.min(totalTasks, 100); // Cap at 100% for visual representation const progressPercentage = (completedTasks / totalTasks) * 100; progressBar.setAttribute('data-progress', progressPercentage); = `rotate(${progressPercentage}deg)`; progressBar.querySelector('.progress-text').textContent = `${Math.round(progressPercentage)}%`; }
Expand for more options Login