• Thursday , 14 December 2017

Coding Challenge #40.1: Word Counter in JavaScript

Code Canyon



In this Coding Challenge, I build a word counting (concordance) web application in JavaScript. The video demonstrates a use of associate arrays, regular expressions, and other techniques previously covered as part of “Programming from A to Z.”

Next Video: https://youtu.be/fxQ0B6BkfKo

http://shiffman.net/a2z/text-analysis/

Course url: http://shiffman.net/a2z/

Support this channel on Patreon: https://patreon.com/codingtrain

Send me your questions and coding challenges!: https://github.com/CodingTrain/Rainbow-Topics

Contact: https://twitter.com/shiffman

GitHub Repo with all the info for Programming from A to Z: https://github.com/shiffman/A2Z-F16

Links discussed in this video:
ITP from Tisch School of the Arts: https://tisch.nyu.edu/itp

Source Code for the all Video Lessons: https://github.com/CodingTrain/Rainbow-Code

p5.js: https://p5js.org/
Processing: https://processing.org

For More Programming from A to Z videos: https://www.youtube.com/user/shiffman/playlists?shelf_id=11&view=50&sort=dd

For More Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

Help us caption & translate this video!

http://amara.org/v/XJ8r/

Original source

3d Ocean

Related Posts

24 Comments

  1. Mir Tuchy
    July 28, 2017 at 06:39

    Genius

  2. Akashdeep S
    July 28, 2017 at 06:39

    How did he get that console????

  3. Andika Yahya Siahaan
    July 28, 2017 at 06:39

    hi. i just want to make spelling bee aplication in javascript, but i don't know how to make the code. can you tell me how to make it ? thnks

  4. Aglaophamus1
    July 28, 2017 at 06:39

    Awesome video! Love your enthusiasm and clear explanations. Thanks so much for putting this up.

  5. Deekshitulu Madabattula
    July 28, 2017 at 06:39

    Great one. Thanks πŸ™‚

  6. Diwas Rai
    July 28, 2017 at 06:39

    I have a noob question. On the if statement, how does incrementing an 'object "key" equals the increase in count in "value" ? I understand the declaration of value to 1, if the word (aka counts[word] ) is undefined. But if it exists why does counts[word]++ define the value of the key?

  7. Andrew S
    July 28, 2017 at 06:39

    He should've counted the word frequencies of the Bee movie script instead… πŸ˜›

  8. NonTwinBrothers
    July 28, 2017 at 06:39

    I've always loved and hated learning string patterns. They're extremely useful to use and make you look super smart but they're terribly hard to learn.

  9. Fun Aholic
    July 28, 2017 at 06:39

    awesome content.i needed this.

  10. Norman Kang
    July 28, 2017 at 06:39

    Wait, why do we always use p5.js? Why not just javascript? Is using just javascript too advanced?

  11. TwoGenius
    July 28, 2017 at 06:39

    you are best coder in my opinion!

  12. Darshan Rajadhyaksha
    July 28, 2017 at 06:39

    Word counter with graph :- http://codingflag.in/mysketch.php?sketch=95

  13. espertalhao041
    July 28, 2017 at 06:39

    You have a HUGE!!!! problem. What if, by accident, you have a word that is part of the prototype? That should break some stuff. What you can do is to append a NULL-char at the beginning. That is, instead of `counts[key]`, you use `counts['' + key]` everywhere where you have to access `key`.

  14. SonofThor420
    July 28, 2017 at 06:39

    Just found your videos. Man, you're such a great teacher! Your enthusiasm and expertise make it so fun AND easy to learn these complex topics. Well done, sir.

  15. Aaron Buckles
    July 28, 2017 at 06:39

    I'm confused on how the compare function works. What is a and b and how are we passing the into the function?

  16. Rob M γƒ­γƒ– γƒŸ
    July 28, 2017 at 06:39

    Why can't you just load the txt string in the setup function? Is there an advantage to having it done in a preload function?

  17. Jacek Patryk Urbanowicz
    July 28, 2017 at 06:39

    hello everybody, I got this rather tedious way for excluding some words in the counter:
    for (var j = 0; j < keys.length; j++) {
    var k = keys[j];
    if (k != 'the' &&
    k != 'and' &&
    k != 'of' &&
    k != 'to' &&
    k != 'a' &&
    k != 'in') {
    createDiv(" " + k + " " + counts[k]);
    }
    }
    can we make it with array difference in p5? Some shorter solution?

  18. Setup Draw
    July 28, 2017 at 06:39

    I've noticed that if you just use if (counts[word]) { ….. It is not working properly , infact I got NAN instead of the numbers. So I think (counts[word] === undefined) is necesssary. Can anyone explain the reason for that?

    Another thing I do not understand completely is how the function compare(a,b){…. works.
    What gets passed in and how the ordering is made is quite obscure to me.

    BTW Great Coding Challenge Dan!

  19. Archemi
    July 28, 2017 at 06:39

    Do you know a method for hyphenation?

  20. DavidSM - Rieju Marathon 125 PRO
    July 28, 2017 at 06:39

    What's the syntax theme do you use?

  21. Eric Mooneyham
    July 28, 2017 at 06:39

    Great video and explanation..! Implemented in Perl while listening.. Here's what I came up with and prints sorted by word alphabetically.

    my %Words;
    map { $Words{$_}++ } split(/W+/, lc $ARGV[0]);
    print "$_ => $Words{$_}" foreach sort keys %Words;

  22. MAD! -
    July 28, 2017 at 06:39

    thanks coach

  23. priiix
    July 28, 2017 at 06:39

    why not create an array of objects with both values in the first place ?

  24. syed nabil
    July 28, 2017 at 06:39

    πŸ‘

Leave A Comment

You must be logged in to post a comment.