Coder
HTML
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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>
CSS
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);
}
JAVASCRIPT
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);
progressPie.style.transform = `rotate(${progressPercentage}deg)`;
progressBar.querySelector('.progress-text').textContent = `${Math.round(progressPercentage)}%`;
}
