My self-imposed Codecademy graduation exam

I’ve always wanted to teach myself how to code but never found good teaching material… until I found Codecademy.

Codecademy is a slick, fun, & easy way to learn to program.  They currently offer courses in JavaScript, HTML, and CSS so I took them.

My main complaint was that it is a little too structured. They guide you through the exercises step-by-step. So I wasn’t quite sure how I would do without the training wheels. Plus, I feared that if I didn’t use it right away, I’d lose everything I’d learned.

So I decided that the best way to prove to myself that I really did get it and to lock in everything I had learned was to come up with a challenge and that challenge was Minesweeper.

You remember Minesweeper.  This addictive little game shipped with every version of Windows since Windows 3.1 came out in 1992.  I shudder to think how much time that game sucked up….

Minesweeper was simple enough that I was pretty sure I could handle it with just JavaScript but complicated enough to be challenging, especially the part where it calculates all the mines in surrounding cells and, if there are none, proceeds to check those cells as well.

So without further ado, here it is.

If you find bugs or have any feedback on how I coded this, I want to learn so please comment below.

Note: The (free) hosting service I am using is a bit slow so it may take a few seconds to generate your playing field.  There’s probably a more efficient way to generate the playing field but this works… and that’s good enough for me. 🙂 

Now on to JQuery….

Advertisements

Tags: , , , , ,

About Andrew Ackerman

Andrew is recovering consultant turned serial entrepreneur, startup mentor and angel investor. He is the Managing Director at Dreamit, currently in charge of the Edtech accelerator program. Andrew is also a contributing writer to Fortune, AlleyWatch, The 74 Million, et. al. Andrew has founded two companies and has a keen appreciation for how hard it is to build a successful startup, even under the best of circumstances. He speaks Hebrew fluently as well as some Spanish, French, Japanese and JavaScript.

10 responses to “My self-imposed Codecademy graduation exam”

  1. E-skills4Future says :

    Wow Andrew, I’m impressed with your achievements! Have you used other resources to learn to code or was it just Codecademy? Well done anyway! And I love Minesweeper! 🙂

    • Andrew Ackerman says :

      Flattery will get you everywhere. 🙂

      I’d learned a little html back in 2005 or so but I was still using tables to control layout and didn’t really get CSS at the time so I pretty much re-learned everything this time around. Never studied JavaScript before.

      One thing about Codecademy that needs improvement is its search feature. If I needed a refresher on something, I had to go to an exercise I had finished that I remembered had that function in it. So for quick lookups (e.g., what’s the correct syntax for something), I found that W3schools (http://w3schools.com/) was very useful.

      (Also, don’t underestimate simply asking people. I was stuck on how to get the right panel to show/hide based on the tab the user clicks until one guy I met in passing suggested using “changestyle”. Once you have even a piece of the answer, it’s easy to find the rest.)

  2. James ♂☺ (@agenfrida) says :

    Hey, Andrew!

    I’ve found your Minesweeper game pretty good! 😀 I am studying @ Codecademy too. I started Code Year a few weeks ago. I’m really happy you’ve learned JavaScript, I get most of JS lessons because I’ve taken a few C++ lessons at college, they’re very similar, so that’s pretty much straightforward.

    I wish I could do something like that (or better! 😉 ) before I finish Code Year.

    • Andrew Ackerman says :

      Never studied C++ so it’s reassuring to hear that it is similar.

      Minesweeper is definitely doable after most of the year. I haven’t done the jquery stuff yet so you don’t need that. The only part not covered in Codecademy had to do with the CSS (to get the right panel to update based on the tab you click, I had to use changestyle to change the class to a style with display=”hidden” as an attribute.)

      The tricky parts are figuring out how you want to suite the data (e.g., one array with ask the cells or each route as it’s own array) and how to iterate through all the surrounding cells.there are, no doubt, several differently ways to make this work.

      If you think of anything else that might be another good graduation ‘exam’, let me know.

  3. Amjad Masad says :

    This is really awesome! Implementation looks good too!

    I noticed that field drawing takes some time and it even hangs on numbers bigger than 30×30.
    Digging into the code there is a tiny optimization you can make to make the field drawing much much faster and allow constructing much bigger fields is to group together your interactions with the DOM. This is because the DOM’s performance really suck (which is why sometimes people think JS is slow).

    In the drawField function we will construct the html inside a string and then write it all at once (as opposed to writing each cell on it’s own).

    function drawField(playingField) {
    var fieldLength = playingField.length;
    var html = ”;

    for (i=0 ; i<fieldLength ; i++) {
    html += ' ‘;
    if (i%cols === (cols-1)) {
    html += ”;
    }
    }

    // This is the only place were we touch the DOM.
    document.getElementById(“field”).innerHTML = html;
    }

    Further reading about optimizations related to the DOM: http://www.html5rocks.com/en/tutorials/speed/html5/#toc-optimization-strategies

Tell me what you think

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: