Day 137: Pomodoro Clock & Done w/ the Odin Project's Web Dev 101!

Wow, it's been a while since the last post. The reason this took so long was because the Pomodoro Clock project itself took so long to complete! See here for the code in all its glory.

I did the set up so that it can eventually be refactored to submit to the freeCodeCamp's version of their project. Yes, I do like my twofers.

Overall, this thing took about 19 hrs and 35 minutes to complete. Why? Because I had to do it over and I added some options that did not work out.

The project started with the styling which was my favorite part because it was so straight forward to me. That didn't take too long, probably just a handful of hours.

Then coding up the functionality began.

I started by tracking the actual time with use of the Date() object and some help from w3schools. I went this route because it is supposed to be more accurate than just using setInterval by itself. But it was really freaking hard to get a pause and resume type functionality working with the setIntervals and clearIntervals. I was able to get it paused, but not resumed, or resumed incorrectly, or there would be some bug that affected it. It was a mess.

Eventually, I decided to just straight up use setInterval() by itself without relying on Date() to track the time. So that was about 5-6 hours wasted. It was actually so much simpler this way and I was able to get the pausing and resuming up and running very quickly!

By then, it was pretty much working as intended, but I planned from the start of the project that I wanted to use a progress bar.. or rather, a progress circle. I found a neat library aptly named ProgressBar.js which seemed to fit the bill. I got it working!... but only if you do not use the pause functionality. If you do use pause, bugs start presenting itself with the progress bar by either doubling in time or some other weird stuff. So then we have another 5-6 hours spent on trying to get it working. After some searching around, it appears that others who also wanted to use a pause functionality encountered the same problems.

To fix it was to edit the library itself and I am not quite there in terms of ability yet (especially since it also uses SVG which I only just started reading about). That and I was ready to be done with the project and move on already! So I called it a close, with a promise that I will build my own built-in progress bar.

After fiddling with the project for so long, I reasoned that it would be very simple to implement my own progress bar using JS to change the styles in CSS based on the % completed. And it was! While it is not the slickest thing in the world, it does and (generally) looks like how I envisioned it.

Sometimes, you just got to Keep it Simple, Stupid. (KISS)

And lastly, I am really pleased to finally finish the Web Development 101 section in the Odin Project!

Gee, I wonder where I got that idea for the progress circle from?

Day 121: Javascript Calculator Project Completed!

The Javascript Calculator project with keyboard support was not as terrible in terms of bug squashing (and general frustration) as the Etch-A-Sketch Project.

Two points of interested of this project was that:

1. When I began, I started going down this weird rabbit hole of pushing the clicked numbers into an array and then joining them for calculations. There were other funky stuff I was trying as well that I don't quite remember. It was a not insignificant (to me) amount of code written up that I ultimately ended up tossing out the whole thing and starting all over. 
2. One of the extra credit assignments in the Odin Project is to include keyboard support. I wrote up that bit pretty quickly and it worked for the most part, but had weird bugs that included other characters that was strangely (to me) not being filtered out by the conditional. I had used "keyup" as the eventlistener and tried a few things to fix that bug. Eventually, I decided to try using "keydown" instead. Literally just switching out one word, "keyup" to "keydown" worked! I still don't quite understand why and will need to read up on the differences between the two. 

Overall, it was a really enjoyable project! FreeCodeCamp also has this project as part of their front end libraries certification, which I was planning to just submit both to TOP and FFC in one go. However, I decided to hold off on submitting to FCC since this calculator was written entirely in JS. I am still taking my time going through the React and Redux sections and eventually would like to refactor the code to use those libraries in the future since the whole point of the project for the FCC certification is to get more experience with them. 

The next project I will be working on is the Pomodoro Clock project which again is an assignment in both TOP and FCC. I will be taking the same steps, working with it in vanilla JS and then later refactoring to React/Redux. 

Day 103: First Pull Request!

It's not much but I just made my first pull request to something that is not myself and it was accepted! Huzzah!

I am so stupid excited right now. 

It's not much. It is literally just updating an .md file as a part of the Odin Project curriculum when you complete your projects to include a link to it, but it's still sooooooo exciting to see everything in action and be included!

That said, I did finish my rock, paper, scissors project last night. Give it a whirl, there's a treat if you win! (or lose). It took about 7 hours to do spread between 3 days. I wanted to do a bit more than the minimum viable product, so I spent more time on it than was necessary. The time count actually includes looking up images and sounds for it so it was not all super productive coding, but time well spent that was still important to the project. It was nice to brush up on on a tiny bit of CSS with the project as well.

The next project, doing an etch-a-sketch seems a bit more complicating, but it should be interesting! I always like to quickly peek at code from other folks... and most of them are less than 100 lines of JS. Crazy how something may seem so complicated, but can be done in much fewer lines than I always think it would be.

Day 101: Round 2 of the #100DaysOfCode

Yesterday was my 100th day for my #100DaysOfCode. There really wasn't much fanfare other than a post to Instagram:

View this post on Instagram

Today is the 100th day of my #100daysofcode! Working on a #kawaii rock, paper, scissors game and going through all #theOdinProject projects! It's been a bumpy journey but one that has been so fulfilling. I've already been asked by those even more of a newbie than I am on what's worked for me. My number one advice is really to do the 100 days to put in the time and build a habit. Now that day 100 is done, what happens now? Without much fanfare, I am starting another 100 days! I am proud of what I've learned so far, but I still have a long ways to go! #codenewbie #girlcoder #womenwhocode #javascript #wannabedeveloper #learnprogramming #shecodes #goodhabits #milestones #learntocode

A post shared by Ann Nguyen (@anncancode) on Jul 16, 2019 at 6:23pm PDT

And a quick tweet about it:

Today is #Day100 of my #100DaysOfCode!

Huzzah!

Currently working through the projects on #theOdinProject https://t.co/kYclTFh4mF

So now what? I'm starting another 100 days! Gotta keep going!#CodeNewbie #Javascript #WomenWhoCode #LearnToCode

— AnnCanCode (@AnnCanCode) July 17, 2019

Honestly, I was too busy working on the latest project to really make a big deal out of it.

I am glad to have completed Angela Yu's Bootcamp and the FCC Algorithm and Data Structures certificate before day 100 though.

I have no plans to stop doing #100DaysOfCode until I actually make a career change into software development.

What's Next? 

The next few goals will be to complete the Modern Javascript Bootcamp course on Udemy with Andrew Mead.

As a quick note: my gold standard for Udemy instructors is still Angela Yu, but Andrew Mead is a really close second. They have very similar teaching styles with the demonstrations and then challenges. I also find Andrew's method in using NodeJS to teach Javascript to be unique too! Since it gets you used to the terminal (although I have been mostly going through his projects on the console with codesandbox.io so I can code on any computer). I am already making plans to purchase his NodeJS and his GraphQL courses when I finish up other courses/projects.

The other Udemy courses I also intend to go through are my already purchased Complete Web Developer in 2019: Zero to Mastery course by Andrei Neagoie (already about halfway through), the Modern React Bootcamp by Colt Steele, and Advanced CSS and Sass by Jonas Schmedtmann. For most cases, I will try to get through the parts I am already familiar with ASAP and focus on the challenges and projects in these courses. Other more advanced courses I would like to get are ones on MongoDB and D3. While I could purchase these courses now, I really don't want to get into the trap of throwing money at something just so I can feel like I am being productive. So I am forcing myself to complete the courses I already have before getting more.

For projects, I have plans to go through (most of) the projects list on The Odin Project. with the first one being a simple Rock, Paper, Scissors game. A few of these projects are also similar to the various freeCodeCamp projects or the projects in the Javascript30 course by Wes Bos, so it's like I can multi-task with my projects! Not that I am getting bonus points or anything like that from anyone (but myself) but it's nice to feel like I am being efficient, no? The whole point really is to build the damn thing already and get some projects under my belt.

In the meantime, I am going to throw some Edabit or Codewars problems in here and there as well as watching Linkedin Learning videos (formally called Lynda.com) during my down time. I usually don't code along with the LL videos because the courses are often really short (like 1-2 hours) and they really do not go as in depth as I prefer. These are usually reserved for winding down before bed or as I am commuting.

I am not doing any one specific course or set of projects in a linear fashion, but sort of all of them at once as I am going through my curriculum, which is loosely following in the order that freeCodeCamp laid out.

Day 053: BTDT Tip Calculator & Bill Splitter - using parseFloat, toFixed & building it in order to make it work!

Yesterday, I took take a short break from the bootcamp for a day to let the information sink in a bit (see active and diffuse learning). So what better time than to do my next BUILD THE DAMN THING project. It is a handy tip calculator & bill splitter that I probably spent way more time on that I should have.

See the Pen Tip Calculator/Bill Splitter by 4nn (@4nn) on CodePen.

Some Things I Learned

I guess I already knew these things, but it was more so putting it into practice and getting to experience the joys of parsing strings to numbers to strings to numbers so the formula would work.

I initially thought this would be quick and easy since I banged out the formula in the console in less than 5 mins.

parseInt(), parseFloat(), .toFixed()

Of course the console just deals with the parameters as numbers. It is a different story when you are pulling values from the DOM, which would output those numbers into a string. You can't really do math with strings!

So I became intimately familiar with the parse functions to get those strings into numbers. (Good to know when I tackle the building a calculator project)

parseInt() parses the value into an integer. I used this in the beginning since I was testing with whole numbers.

parseFloat() parses the value into the floating point number (with all the decimals and such).

Once that was all set, I later used the .toFixed() method to get the numbers into 2 decimal places.

Voila! The math actually worked with the DOM in codepen!

So I go about to add in the conditionals and error messages and such, but the conditionals did not work because it was essentially asking if the preTipBill === NaN. Why did it keep coming up as NaN even though the math worked out previously? Enter frustrationland!

My husband probably noticed my annoyance after some time which was his cue to help (of which I didn't ask for his help, but recognize that I need to get better at knowing when to ask). So he identified that I was doing too many things at a time before calling the if statement. I was assigning the DOM values to the variable and then reassigning the variables to parseFloat().toFixed() and then setting the condition statement. It looked something like this:

 let preTipBill = document.getElementById("preTipBill").value;
 preTipBill = parseFloat(preTipBill).toFixed(2);
 let tipPercent = document.getElementById("tipPercent").value;
 let splitBetween = document.getElementById("splitBetween").value;
 splitBetween = parseFloat(splitBetween).toFixed(0);

 if (preTipBill === "" || tipPercent === "" || preTipBill.length === 0 || tipPercent.length === 0) {
  ...
 }

Of course that mess was then checking the if conditionals to preTipBill === NaN which is not what I want especially when trying to reassign blank splitBetween values to 1 if the user opts not to split the bill. Anyways, once he pointed that out, I got it right away. Like, RIGHT AWAY. Rookie mistake!

  let preTipBill = document.getElementById("preTipBill").value;
  let tipPercent = document.getElementById("tipPercent").value;
  let splitBetween = document.getElementById("splitBetween").value;

  if (preTipBill === "" || tipPercent === "" || preTipBill.length === 0 || tipPercent.length === 0) {
    document.getElementById("output").innerHTML = "Please input all required amounts!";
  } else {

    preTipBill = parseFloat(preTipBill).toFixed(2);
    splitBetween = parseFloat(splitBetween).toFixed(0);

I needed to reassign the values LATER, preferably once the condition is met. Just moving the reassignments fixed the whole thing. Sheesh!

In working through all the projects in the Angela Yu Web Dev Bootcamp, the location of the reassignments were sort of laid out for you when working through the projects and it made a ton of sense at the time, of course. But it really isn't until you've been frustrated and 😬 over it for an hour that it really sinks in. The ORDER of your code matters! I found this to be a very valuable lesson.

On a side note: it's my mom's birthday this Saturday and I'll definitely be pulling out this little calculator at the end of the meal!

Here's the User Story

• user inputs total initial bill
• user inputs desired tip amount
• user gets error message if initial bill and tip amounts are missing
• display the tip subtotal
• display the total amount
• user can opt to split the bill, input number of people to split it with
• display the per person initial bill
• display the per person tip and total
• if user does not split bill, only display the tip & final total
• have button calculate and clear all

Day 052: Personal Bootcamp Debrief

So it's Tuesday now and the long weekend has come and gone. How did my personal bootcamp go?

It was really tiring, but a GREAT experience. I didn't want to spend too much time blogging about it while it was going one since I wanted to dedicate most of the time during the weekend to coding and learning to code. I posted some thoughts on instagram during the weekend.

Day 1:

View this post on Instagram

[48/100] It's a long weekend so I decided to go on a Personal Bootcamp Weekend and try to code/learn for at least 8 hours each day for the next 3 days as if I were in a real #codingbootcamp. I'm trying to get through as much of this 40+ hr bootcamp course on #udemy as possible (#webdev course by Angela Yu). I'm done with my first 8 hours, just ONE day and I am exhausted! Much props to the fulltime bootcampers who do this for weeks on end. And no wonder ya'll level up so crazy, that is so much learning and coding! Tomorrow, it continues! If you can spare a weekend or long weekend to do a personal weekend bootcamp, I totally recommend it! 

Day 3:

View this post on Instagram

[50/100] Currently learning #git and #versioncontrol with the #cli and... Huzzah! I am halfway through my #100daysofcode and on my last day of my personal #codingbootcamp long weekend. I am taking a quick break now but I have 3.5 more hours left to complete my 8 hr day of #coding for today. By the end, it would be at least 24 hours of learning and coding in the last 3 days! I feel like I have learned SO much from the very start and this weekend has been a #powerup for sure. It's been hard and tiring, but also very rewarding. I can't wait to apply everything in this course to building my apps. And for sure, I will be doing more of my weekend bootcamps in the future and maybe even drag some friends along too! 

The plan is to do something like this once a month and maybe drag some folks from my accountability group into it as well, if they want to jump in for a day or so.

As for how far I got through the material (Angela Yu's Web Dev Bootcamp), I was at 23% of the course having just finished the Bootstrap section when I started the weekend. I ended the weekend at completing 66% of the course and am into the first few videos on JSON and API.

Sort of Daily Breakdown

I was mentally wiped out the first day since it was pretty much a continuous 8+ hours of learning and coding.

The second day was much better because I took a long break in the middle so it was like 2 medium sized coding sessions vs one big long one on the first day. It was also mostly working on a project that day (building a Simon Says game) so that added variety. I also kind of stayed up until 2am in the morning that evening watching more of the videos after finishing the project because I felt like I was on a roll.

The last day was a bit shorter (since I got in those hours in the AM ), so it was not bad in terms of total hours required for the daytime. I did do the minimum number of hours on the last day so I can enjoy the long weekend and let my brain rest for a little. In all, I did clock in bout 25.5 hours of learning and coding in the past 3 days.

What I Learned

I feel like I learned SO much! The three big things: being more comfortable with the DOM, being introduced to NodeJS, and finally learning the CLI/Git/Version Control. The next bits would be to get through the API section (which is also very cool!), moving on to databases, RESTful API, and authentication and security. I would like to finish the course by the end of this coming weekend, but we will see how that goes since it depends on how much time it takes to get through the projects.

Hi NodeJS. I am so excited to meet you!

I must say, I really enjoyed the projects in this bootcamp. When she introduces you to a concept, there is a bit of code-along happening. Then there's the pausing before each mini challenge so you can work through the concepts on your own before you unpause and she goes over it. For the big projects (what she calls "boss level challenges), she lays down the to-do's for each step and you tackle them one by one. At the end, she goes over the whole project. I opted to not review her solutions unless I feel really stuck (and am happy, but annoyed with myself to say that I peeked only once during the Simon Says challenge).

You know I already had that problem before where the initial look at the code makes me wonder how in the world I can ever get to that point. But those step-by-step to-do requests really help remind me that this is what programming is all about. They are all little steps to get to the final product. And when your app works and you look back at the code, everything actually makes sense!

What's Next? 

I know I haven't finished Angela's course yet, but I am already looking ahead. Here are my next to-do's:

• Finish Angela Yu's Web Dev Bootcamp 
• Andrei Neagoie's Zero to Mastery Course (yes another kind of intro course)
• Wes Bos' Javascript 30 (more projects!)
• The Odin Project Web Development 101 (ignoring Ruby and Rails)
• The Odin Project Javascript course (ignoring anything with Ruby and Rails) 
• KhanAcademy HTML/JS (good as a break of sorts, for fun & DOM refresher)
• Build The Damn Thing personal projects
• Free Code Camp challenges/projects
• Finish up the old to-do list as bedtime refresher

I added another intro-to style course to the list, Andrei Neagoie's ZTM because he has sections that cover React & Redux which I feel is something important that is missing from Angela's course. His projects also seem really interesting too. Colt Steele's Web Dev Bootcamp course also ranked high, but he is missing React & Redux so I did not really consider it. I might consider Colt's Modern React Bootcamp course in the future though.

For Andrei's ZTM course, I will skip the parts that I am comfortable with (HTML, CSS, JS basics), use the parts I am not yet comfortable with as review on 2x speed, and delve into the projects for the experience. I am also interested in his more intermediate course, the Complete Junior to Senior Web Developer Roadmap (2019) and figured I ought to see if I like his teaching style before jumping into another 30+ hour course. Use the coupon code LEVELUPZTM to buy his course fo $10.99 without having to wait for a sale.

The focus of the list is projects, projects, PROJECTS! Which is why Wes Bos' JS30 is on the list as well as the Odin Project. I was actually slowly going through TOP Web Dev 101 as bedtime reading, so I am about 33% done with it already. It follows along nicely with Angela Yu's bootcamp contents this past weekend. In TOP, I am skipping the parts related to Ruby or Rails, but might revisit that in the future. TOP just seems to have some really great projects and the curriculum is constantly being updated (contrary to what they say on the internets).

In the middle of all this, I do intend to do the challenges and projects on FCC as well. I would like to get the full stack FCC certification eventually! FCC is kind of where it all started, so of course it is always on the list. I do admit that the website alone was not enough for me to understand the material (sometimes the wording of the challenges confused me) hence my branching out to Codecademy, Lynda, and Udemy which has been working well in helping me learn.

Okay, this post was a lot longer than intended, but it is really good to create a roadmap for myself to tackle in the next few months. This also helps to know what I am doing for my next Personal Bootcamp!

Day 046: BUILD THE DAMN THING - A Simple MadLibs

I'm pleased to present my first project from (mostly) scratch: a simple and silly madLibs app!

See the Pen Simple Madlibs by 4nn (@4nn) on CodePen.

It's "mostly" from scratch because I had to look up the DOM syntax and later encountered some issues with the HTML5 form inputs, namely using <input type="button"> vs <button>. I need more practice in understanding the DOM. While I understand that part of being a good coder is getting good at asking the right questions to look up stuff, but I can't wait until the day I actually know the syntax well enough to not need to reference documentation!

Here's the user story for the app:

• Allow user to input various words
• Generate random madLibs sentence
• Allow user to clear the madLibs sentence
• Allow user to clear input values
• If any input is empty, prompt user input 
• Pretty up UI with some bootstrap practice

In all I spent about 2 hours on it including the Bootstrap bits. I am not including the time I spent at the end of April trying to create this. This was right after I finished up the Practical JS course and was attempting to create the madLibs in the console first (like the course) and then move it to the DOM. I set up my workspace in VSCode and got to work on the JS file. Unfortunately, I ended up just confusing myself and making it more complicating than it should be and got frustrated and gave up. You know the old adage of putting the cart before the horse? Yep. 

But after watching all those videos during crunch time at work, I got a bit more confident to give it another go. Since it was simple enough, I figured starting it in Codepen was enough and it was! 

I have to admit, even getting to the point where I knew I had to start building stuff scared me. I couldn't put into words why I felt the fear of starting the project, but in retrospect I think it's the sentiment of "I can't fail if I don't start!"

Once I decided to restart the project, it took a whole day to get over the fear. I was procrastinating by doing chores or watching more videos. Once I realized what I was doing, I took to repeating to myself to:

BUILD THE DAMN THING! 

JUST BUILD THE DAMN THING!

And then I did and it wasn't terrible! Sure, I needed to reference some materials and some parts didn't work at first, but it in the end, it was resolved and it works more or less as I envisioned it. It even took less time than I thought it would (I had estimated 6 hours lol). I also reminded myself to take it one step at a time and that helped a lot. 

Knowing how I am, I am probably going to keep having the same fear as my ideas for projects get more complex. But I just have to BUILD THE DAMN THING and just keep chugging along. 

The next projects to work on is a tip calculator, day counter (so I can correctly get my #100dayofcode number), a Tabata timer, and an actual calculator. Baby steps!