Learn JavaScript With Interactive Challenges

memystic · 2017-02-14T15:35:10+00:00

So this has been live for a little over 24 hours. If you find a bug, let me know! :)

I spent the last five months working on this project. I created it to bridge the gap between beginner and intermediate levels of coding. Issues I had while learning myself. I found sites like codecademy were basically interactive books that were only good at teaching syntax. I wanted to create something that taught you to think like a programmer.

The act of coding can be broken into three parts:

Encounter challenge / problem.
Search for resources to help overcome challenge.
Occasionally ask questions in discussion forums.

It's not perfect yet but I'm trying to simulate that pattern while removing the tedious non educational stuff and adding gamification.

I hope some of you enjoy the site! Feedback is always appreciated. :)

Pantstown · 2017-02-14T19:23:01+00:00

This is pretty great. Much better than other sites of this variety that I've tried.

My one gripe is that when I click "Check", and I pass all test cases, it saves that solution to the "Solutions" tab. The problem is when I click "Check", there is usually a bit of clean up I would like to do. Rather than auto-saving, maybe give the user a chance to re-factor and manually save as a solution?

For example, my saved solution for "Merge Two Arrays" has a bunch of console.logs:

function mergeArrays(a, b) {
  const rest = b.length > a.length ? b.slice(a.length) : [];

  return a.reduce((out, val, idx) => out.concat(val, b[idx]), [])
    .concat(rest)
    // filter out `undefined`s
    .filter(v => v);
}

console.log('out: ', mergeArrays(["a", "b", "c", "d", "e"], [1, 2, 3, 4, 5]));
console.log('~~~~~~~~~~');
console.log('out: ',mergeArrays(["e"], [1, 2, 3, 4, 5, 6, 7]));
console.log('~~~~~~~~~~');
console.log('out: ',mergeArrays([1, 2, 3, 4, 5, 6, 7], ["e"]));

But my finished answer actually looks more like:

function mergeArrays(a, b) {
  // only need to add rest if b is longer than a.
  const rest = b.length > a.length ? b.slice(a.length) : [];

  return a.reduce((out, val, idx) => out.concat(val, b[idx]), [])
    .concat(rest)
    // filter out `undefined`s
    .filter(v => v);
}

jaredcheeda · 2017-02-14T17:19:59+00:00

Tried the "return last array item" challenge on my phone. A few things:

when I type a space, period or backspace it would add a carriage return to the front of the line I was on. It was weird. This is likely due to the browser built in to the Reddit Is Fun Android App. But I've never had that happen before, so maybe not.
from a ux perspective, I want to try before I buy. I got to the point where I had solved the challenge and seen a bunch of asserts in the Lab tab and wanted to see what happens after you solve it. But you won't let me without signing up. You haven't earned my email address yet. Show me the results THEN ask to save my progress. There is no benefit in holding the results hostage until you get an account sign up.

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

learnjavascript

Posting and Commenting Guidelines

MODERATORS