I Made A JavaScript Calculator!

Happy New Year!

This new year has gotten off to a pretty good start for me. I have finished my JavaScript calculator, which can be viewed live on CodePen here.

The user stories I had to fufill to complete the challenge:

  1. Add, subtract, multipy and divide two numbers.
  2. Clear the input field with a clear button.
  3. Chain mathematical operations together until hitting the equal button, and still get the correct output.

I realized from working on my Pomodoro clock that I sometimes get caught up with “making it pretty” that I was losing focus on making it work. So, once I created my basic buttons and display, I left the styling bare to finish later. I feel like this worked to my advantage in keeping me focused on one task at a time.

When it came to making my buttons functional, I knew that I would need to store the keys being clicked by the user as well as make them display on the screen. It actually didn’t take long for me to get that part working. The hard part was really getting the calculator to evaluate the input. I started off trying to use methods to take in the input as one long string, converting it to integers and operators, then evaluating them. I was spinning my wheels for a bit.

After consulting the Google gods, I discovered that there is actually a method called ‘eval’ that can simply evaluate a string as an equation. Bingo! So far, I haven’t been able to break it and I haven’t gotten word that anyone else has broken it yet. Sounds like a success to me!

I used Palleton to find a triad of pastel colors and a couple Google Fonts to give my calculator some life.

Advertisements

Oops!: I Fixed a Bug in My Random Quote Generator

Turns out, my Quote Generator wasn’t quite complete. I tweeted it out for all the world to see, and @FreeCodeCamp caught something I missed.

When I was first coding this project, I was trying to use a for loop to cycle through all of the quotes. I took it out once I realized that I didn’t want to cycle through since I’m using randomized values. So, for a second, I thought I screwed something up and the code reverted back to that point.

I clicked the button a handful of times and it seemed to be working as expected. But clearly there was a problem somewhere, so I kept clicking. Lo and behold, my quote div completely disappeared!

In my last post, I mentioned how Bonfires are helping me get better at approaching solving these problems. I’m also getting better at debugging. I instantly opened the console to look and see what happened when I clicked my generator button. I printed to the console log to show me when it generated a number and when it displayed successfully. It took about 15 tries before my code broke and I got that cute little error box that told me what was wrong.

This is my code before:

var x = Math.floor((Math.random() * quotes.length) + 1);

And this is my code after:

var x = Math.floor((Math.random() * quotes.length - 1) + 1);

Can you spot the difference?

Turns out, I wasn’t giving my code a proper range to pull the number from. Although quotes.length might equal 13, that also means that I need the random number to stop at index 12. My code was including 13, which doesn’t exist, and broke my generator.

Thanks again to Free Code Camp for finding that error for me. It’s always a little disheartening when you are proud of a project then someone finds a flaw that you missed. But, I’m learning it’s actually pretty difficult to accurately test your own code. My goal was to make my code work, so I tested it to make sure it worked and it did. But when FCC tested it, they tested it to see if it would break; something I didn’t even think about.  After realizing that, I ran my generator over and over again until I was sure there would be no more errors (over 300 times!).

Here’s my now fully functioning Random Quote Generator.

http://codepen.io/cerita/full/BoMzLr/

Getting Reacquainted With Bootstrap

Bootstrap is this really cool and really popular HTML, CSS, JavaScript framework developed at Twitter that makes building a responsive website a stupid simple process. It’s also a good skill to have in your toolbelt these days- I’ve seen many job postings listing Bootstrap as a desired skill.

Responsive Design

Chances are, you’ve been on a website that looks different on your computer than your phone. Or, you’ve made your browser smaller and noticed the content moves around a little. Responsive refers to the fact that websites will readjust how they appear according to the size of the screen or window you’re viewing it in.

Grids

Grid systems are used for creating page layouts with a series of rows and columns. Bootstrap’s grid spans up to 12 columns and uses predefined classes for easy layout options.

Each row must be inside of a “container” or “container-fluid” class, and each column will have a class like “col-xs-#” which will affect how it looks on certain screen sizes.

Font Awesome

Font Awesome is a font and toolkit of scalable and customizable vector icons.

It probably sounds silly but for the longest time, I couldn’t figure out why it was that every time I seemed to check a developer’s source code, they seemed to have these weird “fa fa-” classes where the social media icons were. I thought I had missed something on coding standards.

Nope, I just needed to open my eyes to the wonder that is Bootstrap.

I was also downloading icon sets and trying to add them as anchored images on the pages I built. Learn from my mistakes and use Font Awesome instead.

Now that I’ve looked more into Bootstrap outside of the usual paint-by-numbers type of tutorials, I’m getting more and more excited about actually using it.

I’m also looking into some Bootstrap specific courses out there- preferably free. If you know any, please let me know!

Basic HTML5 and CSS? Check!

Free Code Camp launched less than a year ago and has expanded so much since I was active on it just in April. In fact, I don’t remember doing much with HTML and CSS at all when I initially signed up for the site. Then again, it may have been linked to Codecademy at the time, which I had already completed.

Better yet, this entire section is housed on the Free Code Camp site and you get to build a cute little Kitty app.

I honestly felt a tad bit annoyed that I had to start with the basics again. I had completed them last time I was on the site, as well as on other sites like Treehouse. I was thinking “Do I really have to do this again?” But, as I went along, I found myself looking at the “read more” hints offered to find out what I needed to do. Heck, I don’t remember using attr for any images I’ve used on my project sites outside of this blog.

Now that I’ve finished it and looked ahead at my map, I see that jQuery and JavaScript still show as finished sections for me. But I’m probably going to do them again anyway. Yes, they’re basics, but they’re the foundation on which I will build all further knowledge. Can’t hurt to relearn them, right?

Sasstronaut + WordPress

So I got into kind of a “what now?” slump after finishing the Front End track. I didn’t feel like I knew “enough” to confidently move forward with something else, and I felt too creatively stumped to design a project for myself. But I knew I didn’t want to stop. That’s when I started the Web Design track.

The last course in the track was Sass Basics. I’ve seen terms like Sasstronaut all around since I’ve started learning, and I was pretty excited to add myself to the list of cool people that use Sass.

I fell in love with Sass pretty much right away. I even found myself comfortable with using the command line to install and use it.

Soon after, I updated my github hosted website (for maybe the dozenth time), this time coding my styles with Sass. I also got rid of the resume style I had going on for the past month or so, and updated it with this fancy layout, featuring a photo from Unsplash.

cerita.github.io screenshot

cerita.github.io screenshot

It’s still pretty bare right now though, isn’t it? Creating a bio is still a bit awkward for me, and I’m not sure what projects are ‘good enough’ to showcase. Though, I suppose if they were good enough for my blog, they should be good enough for a some kind of portfolio.


Speaking of my blog, which is hosted on free WordPress.com, I’m now on to the WordPress Development track on Team Treehouse.

I already completed How To Make A Website With WordPress and The WordPress Codex a few months ago out of curiosity. Today, I got WordPress set up locally on my machine (which was kind of a headache, not gonna lie) and I’m ready to do this thing!

The WordPress Theme Development course is next for me. It covers taking a basic HTML/CSS/JS prototype and converting it into a WordPress theme. It also goes over responsive navigation, templates, custom post types, and widgets.

Unfortunately, now that I’ve moved, my WiFi usage is a little different (limited) and plugging away at videos isn’t the best plan of action for me. At first I was a bit bummed because once I get started on something, it’s really hard for me to stop. And, let’s be honest, I really love marathoning things on Hulu. But, this forces me to pace myself through the courses and will hopefully encourage me to play around a little bit more with what I’ve learned so that it sticks with me longer.

Maybe I’ll even find myself getting unplugged for some time!

I Made A Webpage!

You can find my little splash page here.

And here’s the Codepen version below.

http://codepen.io/cerita/pen/EaKeRa

It’s definitely a work in progress, and probably always will be. I’ll be adding more content, some fancier styling  as I get more comfortable with CSS and, eventually, some JavaScript. I also plan on moving it to a personal domain name at some point.

Last week, I started some WordPress courses on Team Treehouse and I’m pretty excited to learn that too (so excited that I finished the Learn WordPress track in a day).   But, I’ll be back on the Front End track this week, finishing up the Interactive JavaScript course.

Designing HTML E-Mails

This week, I completed the HTML E-mail Design course on Team Treehouse where I learned how to build a mobile-friendly e-mail from scratch using HTML and CSS.

The other day, I opened up one of the e-mails I got from subscribing to Skillcrush and was inspired to recreate it. The e-mail was a simple one column layout, featuring one main photo. There was a lot of text in the e-mail as well, but the text featured about a dozen links back to the Skillcrush site, which is a pretty smart move in my opinion. I get lots of e-mails from retail sites that have all of the info in one huge image.

I tend to check my e-mail when I’m mobile and I almost never choose to view the images since they’ll take too long to load and they rarely fit my phone’s screen. When I get e-mails from Skillcrush, however, the one or two missing images doesn’t keep me from getting the message and clicking through to the site.

So, here is my recreation of the e-mail.

Although I look forward to feeling comfortable designing everything from scratch, being able to study and recreate an existing design works out much better for me than aimlessly building. I just hope that they don’t mind!

I’ve been having fun with taking more courses outside of my track lately. In addition to this one, I’ve finished the SEO Basics course.