 The weather has been incredible, pretty much all of September, except today, but I'm not mad because I finally can dress nice. Like, the fall is for the fellow. Good, everybody. Jossie here. And this is part two of coding and design with me. Now part one was incredible. It got like 50,000 plus views. I'm so happy that you all enjoyed that video. One thing I want to mention is that I don't have the code actually completed before I make this video, and that actually helps it be more realistic. I also like to mention that there's no guarantee that I can finish everything in one video. The idea of these videos is to use it as accountability so I can actually be more consistent with programming outside of work, along with having small goals that are achievable. I think that's not only helpful for myself, but it's helpful for you all to see that, hey, you can get a lot of things done if you just have small goals that you work on consistently. If you give this video a thumbs up, I will greatly appreciate it. It helps out with the YouTube algorithm. Also subscribe for more content like this, and don't forget to hit that notification bell so you can know right away when I release a video. For those of you who have maybe forgotten, or for those of you all who didn't watch part one, I definitely recommend watching part one. You can click it with this little card popping up right now. What I'm working on is a Pomodoro timer. I currently have the dropdowns not necessarily functioning, but the dropdowns exist on the page, and they're available for the users to click. They just don't work, and I use material design. I also use React, so it's a combination of those two. I also use Adobe Illustrator for actually designing it. I'm trying to decide whether or not I'm going to actually try to get the dropdown values connected to the Pomodoro timer, or if I'm going to just simply work on the start, pause, and play buttons for the Pomodoro timer. Before deciding what I'm going to actually work on, I like to just really go in the codebase, run the application. That's honestly the easiest way for me to figure out what I want to do, whether or not I have some design that I want to continue working on. If there's some functionality that needs to be the main focus or not, that's the best thing for me to do. Run the application, go in the codebase, and figure out what parts are easiest for me to work on. It's really important to have small wins. I actually haven't really worked on this application since posting the video. Luckily in my main job, I basically am a React developer. I'm always programming in React. So what I actually need to build, I don't think will be that difficult considering the fact that I've continued to work on my React skill sets pretty much every weekday since posting the video. There's something about coupling the rendered logic and UI that React embraces that makes programming so much easier, honestly, handling offense and keeping track of state over time along with preparing data and displaying it is so easy with React. After analyzing my code, I decided that I'll work on connecting the focus time drop down value to the Pomodoro timer and animation, along with redesigning the action buttons that allow a user to start, stop, and reset the timer. Currently the start and reset buttons work but not stop. I need to do some research to figure out how to add some functionality for this set interval method. But the main goal for today is to redesign the buttons layout along with connecting the focus timer drop down to the Pomodoro circular progress bar that I imported from Material Design. Since I'm using drop down selection to actually populate the values for the Pomodoro timer, I'll definitely need to refactor my code since my main logic is encapsulated inside use effect. Back hooks allow you to use state and other React features without writing a class. From a high level use effect tells React that our component needs to do something after rendering and you don't need to fire any events for use effect to be called. It also runs after first render and after every update. For now, we won't need it because I think it's simpler to just use a button click to start the focus timer. I'll move the use effect code to my start Pomodoro timer method. I also noticed that I have a state variable that decides if the Pomodoro timer is active or not. It's currently set to false. So I'll need to add some logic to set active to true once our focus timer is not zero. Now that I have the data from the drop down connected to the start Pomodoro timer method, I actually need to make some changes to my formula that I created to ensure that the animation for the circular progress bar matches the amount of seconds it takes for a full interval to complete based on the data from the drop down. Our current formula only works for 45 minutes. What I do to fix this issue is simply divide 45 from the selected time if the value is less than 45 and then multiply that value by whatever the constant value is that I subtracted the focus timer to make sure the circular progress bar decreases in circular size every second. My current constant that's being subtracted in the set interval method every second is 0.0303704 and that's based off of 45 minutes. Okay, so now that we have the Pomodoro timer connected to the drop down focus time, we basically grabbed the data from that drop down menu item and then we're using it in our start Pomodoro timer method to figure out the calculation for the value that needs to be subtracted from the focus time every second to make sure that the animation of the circular progress bar is synced up perfectly with the amount of time you're supposed to focus. Now it's time for me to grab some lunch and I'm thinking about going to a coffee shop for a split second that's down the street from the apartment. Since I don't really need to do any wireframing, the second half of the video will be design and coding together where I'll need to transform these action buttons into the design from Adobe Illustrator. The first thing I need to do is to move the start button underneath the first drop down. After that I'll create an ID to add height with padding border radius background color along with changing some font properties. The reason why I'm using an ID for the button instead of the class is because these styles will not be reused for other buttons. It's always good to use IDs for unique elements in CSS classes and as utilities that can be reused throughout your app. Now I need to move on to the stop and play buttons but before I style them I'm going to go ahead and change the color of the progress bar to match the color from the design. Before I actually restyle the buttons I need to lay them out correctly on the page. I'll do this by using CSS display flex which is one of my favorite properties to use especially when I'm positioning and laying out items within a container so that's going to be the main div to house the buttons and this will also put the buttons in the same row. Display flex will display the position of the buttons in a row by default. All we need to do is give the button container some width and then justify content with space around something like that. It's probably a little bit different. Now in order to style the buttons to reflect what we have in the design I have to make the background color the same as a body of the application at 50% border radius make the height and width the same along with adding a border that's the same color from the design. I also will remove the inner HTML from the buttons and I'll replace that inner HTML with material UI icons. That's one of the major benefits of using material design. I can simply use MPM install at material UI slash icons material dash height. So to actually get things positioned correctly I had to make a change to the focus time container. I actually needed to make the flex direction column that way the start button can be position left aligned with the drop downs but everything else remain the same. I also created a drop down container that way the focus time container can still use CSS flex and then for the drop down container all I did was add display flex justify content space between and align items self-start and I made the width 100%. I did this for the start button container now all I have is a few details to finish coding I just need to make sure I get the correct color from the design along with I'm gonna inspect the page so I can actually target the specific CSS class for the material icons and the material circular progress bar.