Dynamic progress bar with React+Redux
Hi there! I am so happy that you continue developing our interactive Daily ToDo app with me. Today you are going to get to know how to implement a dynamic progress bar that will handle task completing status by percentage for every category.
But before moving on, if you are new here, please, have a look at the previous posts. You should start developing app there and then continue with us here.
And now I would like to offer my approach how to add a simple but dynamic progress bar to every task category and finally, make our Daily ToDo app interactive.
Let’s change into my-daily-todos folder and start developing!
Firstly, I recommend you to add a small library w3.css to our index.html where we store all style dependencies:
// my-daily-todos/public/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
// just add this library
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
If you open your index.html for the first time, you’ll notice, that there lots of comments and some initial link tags. In this case, you can just rewrite your index.html in the way that I left above.
The dynamic progress bar belongs to the TaskCategory.js component. That’s why we have to open this file and step by step implement the new feature:
-
To initialize
completed_tasksconstant, that will filtertasksbycompletedproperty and store them in; -
To initialize
percentageconstant to count the percentage of completed tasks with a simple formula and to round it withfloormethod; -
Apply classes from the
w3.csslibrary for tags inside theTaskCategory.jscomponent and pass the value ofpercentage;
// my-daily-todos/src/Tasks/TaskCategory.js
...
export const TaskCategory = ({category, tasks, completeTask}) => {
// Step 1
const completed_tasks = tasks.filter(task => task.completed);
// Step 2
const percentage = Math.floor(completed_tasks.length / tasks.length * 100);
return <div>
<h2>{category}</h2>
// Step 3
<div className="w3-light-grey w3-round progress-bar">
<div className="w3-container w3-round w3-green progress-bar-indicator"
style={{width: `${percentage}%`}}>
{percentage}%
</div>
</div>
<ul>
{tasks.map(task =>
<li key={task.id}>
<Task task={task} completeTask={completeTask} />
</li>
)}
</ul>
</div>
}
To make things look good, we should change into App.js and add styles to already created from the w3.css library .progress-bar and .progress-bar-indicator classes:
// my-daily-todos/src/App.css
...
.taskslist-container .progress-bar {
width: 30%;
height: 25px;
text-align: center;
margin-bottom: 1rem;
font-size: 11px;
}
.taskslist-container .progress-bar-indicator {
height: 25px;
padding-top: 5px;
}
To check how it looks like, don’t forget to run a local server by the npm start in the terminal in my-daily-todos folder.
You should get something like that at the end:
Thank you for the reading. Happily, you are enjoying developing with React+Redux and waiting for the next feature description. Have a nice coding!
