Create a Progress Bar in React From Scratch

hello and welcome in this video I'm going to be building a progress bar in react from scratch as you can see you can just click on the progress and it's going to increase by a percent and you can also click on the reset button to take it back to zero uh any technical prerequisites for this video you're going to find in the description and this is a very good tutorial for beginners or any others that might want to build a progress bar in react so yeah let's get started so yeah I'm in the visual studio code and I'm going to do npm create bit in order to create our template with up and then I'm going to choose the name which is going to be the default I'm going to choose react and JavaScript as our Technologies and then I can do npm install in order to install some dependencies that we're going to need right and now I can do npn run Dev so we can see our app is up and running and I'm not going to need everything from this template up so I'm going to delete some stuff the Assets in the up.css and I'm also going to delete the scissors that I'm that I won't need for this and then I go to up to jsx to delete all the code basically except the main deal nice and now I can test that is working there there you go and then I can create my first component which is going to be the progress bar.jsx generate some template component code and I can go back to the app.jsx in order to import this to the main div foreign so yeah nice there you go the progress bar is up and running and then I can start basically changing the HTML inside the progress bar component and I'm going to put a class name first of a container and then I'm going to create another div with the class name of progress bar there you go and then another div inside of that they're just going to have a class name of progress bar feel nice and for now I'm going to put some text but it's going to be the progress bar later on that you're going to see and then I'm going to create another one another div with the class name of progress label and then inside I'm going to put some placeholder basically percentage and below that I'm going to create a button which is going to be the progress button and I'm going to copy and paste this below in order to create also the reset button so we have the very ugly like user interface right now so that's why I'm going to the index.css in order to create some beautiful styling and I'm going to copy paste basically the fonts and some very basic CSS that we're going to be using uh but it's basically some margin and flexbox in order to centralize everything basically and below that I'm going to create the CSS for the container main container class it's going to basically have a width of 200 pixels and I also want to have a margin at top of 200 pixels because we want to it to be in the center so we can see a bit better and then we can create progress bar um this is right here and the width is going to be 100 pixels it has some height of 30 pixels and the Border radius of 10 pixels and also I want some background color of this grayish color and then I want to have some margin bottom of 10 pixels nice so you can see the progress bar and I all can also delete this text this placeholder text so it doesn't so it's not in the way there you go now it looks better and I'm going to continue with the next class which is the progress bar fill and here I'm going to have a height of 10 100 percent inverter radius of 10 pixels some background color of this hashtag to ECC 71 this screen which means that our bar is filled in basically and then the next thing I'm going to do is uh yeah I can go right here and continue with the truck transition because we're going to have like a transition effect of you know when it's being filled in I want it to be like more like smoothing that's why we're going to use is out with half a second and then I'm going to change the progress label class and basically here I want to have a margin top of 10 pixels font size of 25 pixels 24 pixels and font weight of bold color of this all Force oh wait yes there you go yep now it looks a bit better and now I want to I'm going to copy paste the button to says because yeah it's not that important but yeah now we can go on and we can import some hooks which we're going to be using in our uh web in our progress bar it's going to be the use date book and I want to create a state variable that is going to be called the progress it's basically going to be the number of the percent of the our progress and in the star it's going to be of course be at zero percent so it's zero and yeah I can change this I can remove the 50 right here and put the progress nice then I'm going to have Allen click it's going to be handle button click nice I'm going to copy and paste it because I also want to have the handle button reset and now I can create these handlers basically the first one is going to be the const handle button click nice is going to be equal to the arrow function and basically if the progress is less than 100 then what I want you to do I want you to set the progress to whatever the progress was Plus 20. else I mean if you go above 100 there's no point to do anything because 100 is the limit and then I can do the handle reset click which is equal to an arrow function again and I'm going to set the progress to zero and oops there's a mistake right there I need to name it handle button reset there you go nice and what I want to do next is I want to know the color of the you know depends on the color of what oh sorry on the progress on what color you're going to see so if it's less than 40 I want it to be color of this red kind of color it means basically it means that we're pretty low on percent else if the progress is less than 70 then I want you to change to this orange color which you're going to see soon and finally if yeah it's going to be green if the other two are not if we're not if we're above basically the 70 percent there you go nice so now I need to put the styling in the progress bar I want to have a width of this a copy paste is because yeah it's just the quotes and dollar sign carry brackets progress percent and then background color I want to have I won't basically get use the get color to return the color that um I want so there you go it works and yeah thank you for watching if you have any questions please leave them in the comments and please subscribe for more videos thank you

Channel: Developer George

Views: 9,296

Keywords:

Id: 5nq61iIKVDE

Length: 10min 11sec (611 seconds)

Published: Thu Feb 16 2023