This is a repository for 30 different projects written in JavaScript based on WesBos's course: #JavaScript30. You can find my result here.

Content

1. Projects List
2. Key Concept
3. Progress
4. References

Project List

• 01. JavaScript Drum Kit - 19/09/2020
• 02. CSS + JS Clock - 19/09/2020
• 03. Playing with CSS variables and JS - 20/09/2020
• 04. Array Cardio Day 1 - 20/09/2020
• 05. Flex Panels Image Gallery - 21/09/2020
• 06. Ajax Type Ahead - 21/09/2020
• 07. Array Cardio Day 2 - 21/09/2020
• 08. Fun with HTML5 Canvas - 21/09/2020
• 09. 14 Must Know Dev Tool Tricks - 22/09/2020
• 10. Hold Shift to Check Multiple Checkboxes - 22/09/2020
• 11. Custom HTML5 Video Player - 22/09/2020
• 12. Key Sequence Detection (KONAMI CODE) - 23/09/2020
• 13. Slide In on Scroll - 23/09/2020
• 14. Object and Arrays - Reference VS Copy - 23/09/2020
• 15. LocalStorage and Event Delegation - 23/09/2020
• 16. CSS Text Shadow Mouse Move Effect - 24/09/2020
• 17. Sorting Band Names without articles - 24/09/2020
• 18. Tally String Times with Reduce - 24/09/2020
• 19. Unreal Webcam Fun - 25/09/2020
• 20. Native Speech Recognition - 25/09/2020
• 21. Geolocation based Speedometer and Compass - 25/09/2020
• 22. Follow Along Links - 25/09/2020
• 23. Speech Synthesis - 25/09/2020
• 24. Sticky Nav - 25/09/2020
• 25. Event Capture, Propagation, Bubbling and Once - 25/09/2020
• 26. Stripe Follow Along Dropdown - 25/09/2020
• 27. Click and Drag to Scroll
• 28. Video Speed Controller UI
• 29. Countdown Clock
• 30. Whack A Mole Games
• 31. That's All Folks

Key Concept

Callback function

Definition

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Example

  function greeting(name) {
    alert('Hello ' + name);
  }

  function processUserInput(callback) {
    var name = prompt('Please enter your name.');
    callback(name);
  }

  processUserInput(greeting);

Asynchronous and Synchronous

Callback Hell

Definition

This is a big issue caused by coding with complex nested callbacks. Here, each and every callback takes an argument that is a result of the previous callbacks. In this manner, The code structure looks like a pyramid, making it difficult to read and maintain. Also, if there is an error in one function, then all other functions get affected. (from GeeksforGeeks)

Constructing a Callback Hell

Let’s imagine we’re trying to make a burger. To make a burger, we need to go through the following steps:

1. Get ingredients (we’re gonna assume it’s a beef burger)
2. Cook the beef
3. Get burger buns
4. Put the cooked beef between the buns
5. Serve the burger

If these steps are synchronous, you’ll be looking at a function that resembles this:

  const makeBurger = () => {
    const beef = getBeef();
    const patty = cookBeef(beef);
    const buns = getBuns();
    const burger = putBeefBetweenBuns(buns, beef);
    return burger;
  };

  const burger = makeBurger();
  serve(burger);

However, in our scenario, let’s say we can’t make the burger ourselves. We have to instruct a helper on the steps to make the burger. After we instruct the helper, we have to WAIT for the helper to finish before we begin the next step.

If we want to wait for something in JavaScript, we need to use a callback. To make the burger, we have to get the beef first. We can only cook the beef after we get the beef.

const makeBurger = () => {
  getBeef(function(beef) {
    // We can only cook beef after we get it.
  });
};

To cook the beef, we need to pass beef into the cookBeef function. Otherwise, there’s nothing to cook! Then, we have to wait for the beef to get cooked.

Once the beef gets cooked, we get buns.

const makeBurger = () => {
  getBeef(function(beef) {
    cookBeef(beef, function(cookedBeef) {
      getBuns(function(buns) {
        // Put patty in bun
      });
    });
  });
};

After we get the buns, we need to put the patty between the buns. This is where a burger gets formed.

const makeBurger = () => {
  getBeef(function(beef) {
    cookBeef(beef, function(cookedBeef) {
      getBuns(function(buns) {
        putBeefBetweenBuns(buns, beef, function(burger) {
            // Serve the burger
        });
      });
    });
  });
};

Finally, we can serve the burger! But we can’t return burger from makeBurger because it’s asynchronous. We need to accept a callback to serve the burger.

const makeBurger = nextStep => {
  getBeef(function (beef) {
    cookBeef(beef, function (cookedBeef) {
      getBuns(function (buns) {
        putBeefBetweenBuns(buns, beef, function(burger) {
          nextStep(burger)
        })
      })
    })
  })
}

// Make and serve the burger
makeBurger(function (burger) => {
  serve(burger)
})

References for Callback function

• Callback Hell in Node.js by GeeksforGeeks
• Deal with Callback Hell by freecodecamp.com

Promise

Prototype

fetch()

this

Event Delegation

JSON

localStorage

Progress

- Day 01 - 19/09/2020: **2** *projects*. => 02/31    => 0% |#                   | 100%
- Day 02 - 20/09/2020: **2** *projects*. => 04/31    => 0% |##                  | 100%
- Day 03 - 21/09/2020: **4** *projects*. => 08/31    => 0% |#####               | 100%
- Day 04 - 22/09/2020: **3** *projects*. => 11/31    => 0% |#######             | 100%
- Day 05 - 23/09/2020: **4** *projects*. => 15/31    => 0% |#########           | 100%
- Day 06 - 24/09/2020: **3** *projects*. => 18/31    => 0% |###########         | 100%
- Day 07 - 25/09/2020: **4** *projects*. => 22/31    => 0% |##############      | 100%
- Day 08 - 26/09/2020: **0** *projects*. => 22/31    => 0% |##############      | 100%
- Day 09 - 27/09/2020: **0** *projects*. => 22/31    => 0% |##############      | 100%
- Day 10 - 28/09/2020: **0** *projects*. => 22/31    => 0% |##############      | 100%
- Day 11 - 29/09/2020: **4** *projects*. => 26/31    => 0% |################    | 100%

References

• How to Run a Simple HTML/CSS/Javascript Application on Heroku