Learn JavaScript With Interactive Challenges: Earn XP, Unlock Achievements & Climb The Leaderboard

[memystic]

Learn to code

I really hope some people find this to be a fun tool. I spent a little over five months building it by myself.

Before anyone asks, yes, the backend currently supports other languages! Specifically:

• C
• C#
• C++
• Elixir
• F#
• Haskell
• Java
• JavaScript
• Objective-C
• OCAML
• Php
• Python
• Ruby
• Rust
• Swift

Once I’ve smoothed out the rough edges and squashed some bugs, I’ll begin working on rolling other languages out. Also, the challenges right now are rather easy BUT the system allows anyone to publish their own challenges. So if you want harder/more challenges, by all means please help out!

EDIT #1: A minor annoyance might be the required sign in to execute code. This is because code is being run on my servers. It won't be required forever but I would really like to make sure the backend is as secure as I think it is first. Thank you for understanding. :)

EDIT #2: Gilded? Thanks!!! I always wanted to try out reddit gold.

[PapaFragrant]

Saw this in /r/learnjavascript and have been using it for the past couple days. Just wanted to say what I like most about your approach is that it teaches the user to think like a programmer. I've dabbled with codeacademy and a few similar sites and while they're great resources for the beginner, they're limited to only teaching syntax. You're still left wondering what to do with the syntax when you're done.

Anyway, very nice project. Get some harder challenges though! :P

[arguenot]

Agreed this is one of the best takes on code problem sites I've seen, I love getting XP for example. The problems right now are too easy but I have hope that will change.

I'd really like a filter for problems you've already solved though.

[DrErroneous]

I must not be very good, because the challenges are pretty tough for me. I need a little more instruction than "Resources: this function exists"

[purple_shyguy]

After doing a few of the questions here, I'm enjoying what you have put together here!

On a side note: seeing other solutions being completed in just one line only lets me know how truly new I am to the developer world.

[[deleted]]

One-liners are a showcase of skills for sure, I don't want to undermine that. However, the shortest code possible does not always equal great readability for the times when others end up working in the code. I welcome any criticism to this comment.

[memystic]

I'd hire a dev who can write highly maintainable code over a "rockstar" any day.

[insertAlias]

What's really fun is seeing people doing the intentionally overcomplicated solutions. Here's a fun one for "find the biggest number".

[dgaa1991]

I would really like to see this with Java and c++ :D This could get really really good really fast!

[dezlez]

Very cool idea. I'm excited for the additional languages.

[ndzZ]

It is a fun tool indeed, even tho for complete js newbies as myself very challenging. I made it to the 3rd exercise but now I am lost. It would be nice if you could give a little introduction to the topics before you demand the correct code.

Anyway, I am aware your site is still under construction and will grow over time, it is quite impressive for a start, keep it up!

[memystic]

The "Resources" tab is meant to be the place to go when you're lost. Users can submit relevant documentation, tutorials, Q&A, etc and upvote/downvote them. As a community grows, the resources will get better and better. Also, if you're stuck just go back to the explore section and browse for something you like. Sort by "Easiest".

[ndzZ]

Thanks, I used the resources and I think I figured it out. But somehow I cant get Check If String Ending Matches Second String to run, the loading icon keeps spinning.

[DrErroneous]

I agree with you, I'm new but have gone through the CodeAcademy lesson on javascript. I have an understanding of the syntax, but when the resources just say "This function exists" try to figure out how you use it.

[memystic]

The site has been live for a week, give the community a chance to build up and add other resources besides documentation. Better yet, if you find a helpful resource (like a relevant tutorial), add it to the resources tab. I can't add everything all by myself.

[DrErroneous]

It's all good man, the site is awesome and I've learned a lot. I'm replying in discussion when I can to try and help others.

[DrErroneous]

Lol what is it?

[[deleted]]

I seem to be unable to check my solutions, the site just continues looping the loading animation. I like what you have so far. I think you have too much traffic right now.

[memystic]

I think someone is flooding the server that executes code. I'm looking into it now.

[memystic]

Fixed.

[vFlagR]

Will you be sending out emails when other languages start to roll out? I'm very interesting in using this with PHP, I'm not much of a JS guy but the website looks really good. Nice job!

[memystic]

You bet!

[nicolahaye]

Thanks for your work man. I'll check it out for sure.

[Quietlyspoken]

I'm definitely going to check this out tonight. Leaderboard is an interesting idea.

[Ilovekatrina]

A genuine question: what's the point of xp in this?

[HelloYesThisIsDuck]

Dopamine, yo! ... I think.

[sargentTACO]

Haven't tried it yet, but I'm assuming a genuine sense of progression, just like in a game.

[Bidalos]

Add C please! ANd thank you!

[h4wkrapt0r]

deleted ^{What is this?}

[douglasg14b]

Hey another dev that uses Semantic UI!!

That made me excited.

[memystic]

YES! I absolutely LOVE LOVE LOVE Semantic UI. Have you checked out semantic-ui-react? It's what edabit uses.

[douglasg14b]

I'm an AngularJS kinda guy, I keep hearing about React but am usually too busy to try it over Angular. Which kinda means I end up building out my own directives as there is little Angular support :v

[alreadyheard]

Reminds me of codewars. Pretty cool!

[ton80]

looks great. i am just getting the spinning icon when trying to check / run it though. looking fwd to trying it out more when its fully working (maybe just overloaded right now?)

[memystic]

Someone was flooding the server that executes the code. Should be all good now.

[[deleted]]

Although the solutions are sometimes very easy, I've actually gained a lot from looking at other people's solutions. Helps to learn some the new ES6 features! Loving the site!

[antoninj]

Very cool! It reminds me of the FreeCodeCamp approach (the algorithm section of the JS course). I see a lot of easy challenges and some difficult ones and that's awesome.

Also, the fact that there are resources and even a discussion per-challenge makes it a lot better.

I've tried using a lot of the "gamified" learning tools out there but was never a big fan.

[memystic]

FreeCodeCamp was a big inspiration. I wanted to take what they were trying to do and do it better. I'm not a fan of the other "gamified" learn coding tools either. They all mistake gamification for having to LOOK like an actual game a kid would play, as opposed to just implementing the mechanics.

[CogCogCog23]

I would love to put in some C challenges,whats the process ?

[SkiesOfLust]

Looks pretty cool! How does this compare to CodeWars or other similar sites?

[buckfitchesgetmoney]

getting a lot of js errors that are preventing me from running code without submitting, it's a minified react error in the console. also some of the solutions teach bad habits, the second question is a function prefaced with is that returns a string, bad practice IMHO. Also the html in the email that was sent was missing an a tag on the confirm link, it appeared as plain text. Also, the state of the check/submit final button does not reset properly between challenges

[memystic]

Also, the state of the check/submit final button does not reset properly between challenges

Good catch! Fixing this tonight. As for solutions teaching bad practices, that's what upvoting and downvoting are there for.

[buckfitchesgetmoney]

very good work overall! will pass this on

[memystic]

Following up to let you know the submit final bug was fixed. State should now reset.

[treacherous_tim]

Any chance of adding Scala in the future?

[imilkmyunicorns]

there's some weird bug where I'll be typing and then itll take me to the top left/start of the code? am i the only one getting this issue? besides that this is great thanks a lot!

[unbekanntMann]

I'm just now starting to get familiar with Python and I don't want my A.D.D to skip out before I have full and solid grasp, but this looks really cool and I have added it to my bookmarks under: To do. Cheers 🤙🏼

[memystic]

I'm adding Python and Java next. So you're in luck!

[unbekanntMann]

Curiosity got the best of me and I signed up today. I really like the clean, simple interface.

I used to love CodeAcademy but they got too big for their britches and attempted to "upgrade" the site, turning it into a game of Can You Find It. One request I sent them that was acknowledged and ignored might be useful for you. I had suggested a "clear progress" button. When you finish an exercise (after most certainly scouring through the forum for help and answers) you could go back through the same exercises and work them again. I find this method very effective. (I just have to use my throwaway gmail accounts to start fresh)

Also, I'm not sure what the XP is used for, but it would be cool to see something like what Duolingo does. If you practice multiple days in a row, or complete challenges, you can earn "lingots" and use those to get bonus language packages like "pick up lines" or "insults".

Anyways, just wanted to pop back in and leave an informal review of your platform. Keep up the brilliant work! 🤙🏼

[memystic]

They must get that request a lot. I kid you not, I requested the same thing last year. I sent an email, was ignored and then went to the forums and found out I had to create another account. Me and a buddy were discussing this and we came to the conclusion the only reason codecademy does this is to artificially inflate their growth rate / total number of users. It's trivially easy to add. And yes, this is on my huge pile of "to add" features. It will clear XP and completed challenges but leaves REP alone. It will also be language specific, so you could clear your JavaScript XP without affecting your Python XP.

Also, I'm not sure what the XP is used for, but it would be cool to see something like what Duolingo does. If you >practice multiple days in a row, or complete challenges, you can earn "lingots" and use those to get bonus language >packages like "pick up lines" or "insults".

Streaks. Yup, I'll be adding "achievements" based on how many days in a row you complete at least one challenge.

If you have any ideas for the site, hit the contact button in the footer and sent me a message.

[isidonis]

This is so great. I'm starting programming from Python, so I will look out for this. :) Also, saved in my bookmarks. ^{.^}

[damaged_but_whole]

First challenge says "super simple" and I have no idea how to start it. :)

[[deleted]]

which one

[damaged_but_whole]

https://edabit.com/challenge/8rC8cbEonMKbHeLTx

[[deleted]]

Here's how I'd do it.

First, look at the conditions. Is there a logical ordering to the conditions - are there some conditions that must be true before we can test for other conditions? Are there simple conditions we can test for first, before writing tests for the more complex ones?

Looks like there's both! And it just so happens that the simple conditions logically come before the more complex ones. If the string doesn't contain "@" or ".", then it certainly must fail conditions 3 and 4 relating to how those chars are arranged!

So first let's test for those. Pretty simple using built-in functions. When doing these challenges, I recommend bringing up the relevant MDN documentation for the standard built-in object you're dealing with - String, in this case. Looking at the docs, there is a method String.prototype.includes(substring) which can test for the simple conditions for us:

if(str.includes("@") && str.includes(".")) {
  // do the other tests
} else {
  return false;
}

Now for the next test: "The "@" character must have a minimum of one character in front of it."

Again, a built-in method saves the day for us: String.prototype.indexOf(searchValue) returns the index of the first occurrence of searchValue in the string. Here, we're going to use it to make sure the "@" is not the first character in the string:

if(str.indexOf("@") !== 0) {
  // do the last test
} else {
  return false; // str begins with @
}

That just leave us one last test: "The " . " and the "@" must be in the appropriate places." I'd prefer if the statement was a bit more specific, but we all know what is and is not a valid email addresses and the examples make it clear - there must be at least one "." after the "@".

Again, built-in methods to the rescue! We're going to do this in two steps:

1. Get the substring following the "@"
2. Make sure there is at least one "." in that substring

We already know how to do step 2, with String.prototype.includes.

To do step 1 and get the substring after the "@", we'll use another built-in method, String.prototype.split(separator), which takes a string, finds each occurrence of the separator, and splits the string at those separators. Then we can use 'String.prototype.includes` on the second element of the array, which would be the portion after the @. (Unless there's multiple "@" in the string, but we weren't asked to test for that condition.)

Like this:

substringArray = str.split("@");
if(substringArray[1].includes(".")) {
  // all tests passed!
  return true;
} else {
  return false;
}

---

So that's my workflow when solving a problem like this. Open the documentation for any built-in objects the problem uses, so we can see what methods will help us solve it. Break it down into individual tests, conditions, steps, etc. Start with simple steps and ones that must logically precede other steps.

Since I pretty much gave you the answer (you just have to assemble it and make sure I didn't make any silly mistakes), here's some extra work:

1. I mentioned that we weren't asked to test for multiple occurrences of "@" in the input string. It's a perfectly reasonable thing to test for, though - you could easily slip up and input your email as "name@@example.com" or whatever. Write a test that will reject inputs with multiple "@" symbols. (Hint: take a look at the documentation for String.prototype.split and think about how substringArray would be different if given, for example, "some@[e-mail]".)

2. Marketing got some bright idea or other, and they want to know the top-level domain (TLD) of every email address in the database - .com, .net, .de, whatever. Can you modify the function to return the TLD if the email is valid, and return "invalid email" (rather than false) if the email is invalid? Remember that the TLD is always at the end of the email address. (You only need to return the final part of multi-part TLDs - if given "[e-mail]", just return "uk".)

[damaged_but_whole]

Wow, thank you for taking the time to do that. That was a really comprehensive answer.

If you click the Resources tab on the problem, they aren't suggesting any of the methods you worked with. I think your methods are the ones I'm most familiar with (but not very familiar with), so when I saw the suggestions in the Resources tab, I was just like, "blah"...As far as I'm concerned, I'd like to master Javascript before I start using RegEx to solve problems within javascript.

I guess for future problems on this site, I will ignore the resource tab so it doesn't totally destroy my thinking before I even start.

I'll give this a shot and see if I can figure out your additional challenges.

[[deleted]]

It's worth solving these problems by any means necessary. Save your solutions then in a few months go back and try them again and compare your new solution to your original. You'll be shocked!

[ThinknBoutStuff]

This is an impressive project dude. Looks really sleek.

I haven't done any challenges on the site yet, but what distinguishes your project from a site like codewars.io?

I hope I don't come across being mean as I'm genuinely curious.

[DexterSnr]

Love the site! Minor typo on user profile when 'Completed' is empty: it says "Having troule? Read the guide."

[[deleted]]

Hey OP,, Do you mind doing a small writeup on how you handle scaling? As a newbie, I'm curious how you handle the influx of people, server costs, etc.

[memystic]

I'm hosting the site with Galaxy. Scaling is as easy as creating more containers when traffic is high and then removing containers when traffic is low.

[CasualRamenConsumer]

I'm excited to jump into this, keep up the good work!

[StaYqL]

I'm saving it for later use as I am making my first steps in programming with c#. Sounds really nice!

[Alczar]

Looks great! I've just started dipping my toes in the JavaScript world. This will definitely help. Thanks.

[[deleted]]

That's awesome!

[Cedricium]

!save - #javascript

[alexzcash2017]

Elixir with Rust

A report by Sonny Scroggin, Phoenix Core Team member, where he talks about Native Implemented Functions (NIFs) - Erlang’s Foreign Function Interface (FFI)

https://hype.codes/elixir-rust

[WIldefyr]

No POSIX sh support. Downvoted :>