The plugin makes it super easy to create a progress bar to stand alone, but I needed it to work within my larger app. After going through a couple of options, I found that Rostyslav Bryzgunov’s jQuery Circle Progress plugin fit the bill perfectly. I had to do a little thinking to realize that I wanted this image to act as a progress bar, but once I hit upon the idea, I went searching for another jQuery plugin. (Trust me, it’s super cute.) But I abandoned that idea after a couple of days in favor of just getting a simple circle to work. I hoped that my newfound beginner knowledge of svg could come in handy and I even went to the trouble to create a handy little svg tomato. As I said, I originally wanted to try and create one shaped like a tomato. My next project was to try and add in progress bars. Once the session timer is complete, then that div hides and the break div shows and the break timer starts. Once you’ve made your selections, you click the start button and the session timer starts. My structure mimics the original pen, with two variables, one for break time and one for session time, that you can modify using plus and minus buttons. Using Jason’s plugin, I was able to get a basic timer working fairly quickly. So I kept looking until I ran across Jason Chavannes’ jQuery Timer, which had everything I wanted and good demos and documentation. It has a lot of the functionality I wanted but didn’t have the built in ability to pause and restart the timers. I experimented with jQuery Simple Timer by Carlous Souza. There’s no shortage of timer plugins for jQuery but I was able to sift through them fairly easily, eschewing anything that was pre-styled. I needed something that would let me easily build a timer. Naturally, I started with basic functionality. My first trial was to find some frameworks that would allow me to do what I wanted. With those two things in the back of my mind, I resolved on beginning at the beginning and just get something working. I also really liked the idea of the progress bar shaped like a tomato. On the aesthetic side, I really liked the idea of filling up the circle as time passed in the reference pen, but I wanted to add on to that idea by creating little progress bars for each session. They should also be able to pause the timer and restart it. Essential functionality was to allow users to set both the session and break time and start the timer. I took my inspiration both from the pen and from pomodoro apps in the iOS App Store, particularly this offering by Nasa Trained Monkeys. But once I did get started, I found myself super motivated to work through the problems my idea presented. Seems simple right? Wrong! I could tell right from the beginning that this project was going to be more complex than the others had been, which is probably why I dragged my feet on it. So the project was to reverse-engineer this pen by Geoff Stoerbeck. Seeing as how I had some free time on my hands, in between taking a pretty good, in-depth beginner course on D3 JS, I decided to tackle my next Front End Project: the pomodoro timer. I realized that I’ve been seriously neglecting my Free Code Camp practice. The end of the year has been sneaking up on me.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |