// Define initial progress values
let progress = {
'2022-01-01': 50,
'2022-01-02': 60,
'2022-01-03': 75,
'2022-01-04': 80,
'2022-01-05': 90
};
// Define customizable text boxes
let objectives = {
'2022-01-01': 'Complete first chapter of book',
'2022-01-02': 'Write 500 words for blog post',
'2022-01-03': 'Finish coding project',
'2022-01-04': 'Attend networking event',
'2022-01-05': 'Launch website'
};
// Get the canvas element from the HTML document
let canvas = document.getElementById('progress-canvas');
// Get the canvas context
let context = canvas.getContext('2d');
// Set the font for the text boxes
context.font = '16px Arial';
// Loop through each day of progress
for (let date in progress) {
// Set the progress bar color
if (progress[date] >= 90) {
context.fillStyle = 'green';
} else if (progress[date] >= 70) {
context.fillStyle = 'yellow';
} else {
context.fillStyle = 'red';
}
// Draw the progress bar
context.fillRect(50, 100 - progress[date], 50, progress[date]);
// Draw the progress value
context.fillStyle = 'black';
context.fillText(progress[date] + '%', 60, 100 - progress[date] - 5);
// Draw the customizable text box
context.fillText(date + ': ' + objectives[date], 110, 100 - progress[date] - 5);
}
