The Problem Statement

Create a function that answers the question "Are you playing banjo?".

If your name starts with the letter "R" or lower case "r", you are playing banjo!

The function takes a name as its only argument, and returns one of the following strings:

name + " plays banjo"

name + " does not play banjo"

Names given are always valid strings.

Let’s Analyse The Question

We are asked to write a function that takes a name as a parameter and if the first letter starts with “R” or “r”, you play banjo. Otherwise, you don't play banjo.

It might seem simple at first but names can start with any alphabet.

So we need to get hold of the first letter of the parameter and check whether it is matching with “R” or “r”.

There are two conditions to check, so we will use the if condition to solve this challenge.

The Syntax for Solving The Problem

//Syntax
if (condition) {
  // This code will get executed.
} else {
  // if the above code is false, this block of code will be executed automatically.
}

The Solution

function areYouPlayingBanjo(){

}

We have created a basic function and let's add the name as a parameter to the function as shown below

function areYouPlayingBanjo(name){

}

Now, we need to check whether the first letter is either “r” or “R”. For that, we have to use the if-condition.

But the question here is how can we only check for the first letter. Let’s find out.

We can use the name[0] to get the first letter. So let’s see it in action.

function areYouPlayingBanjo(name) {
  if (condition) {
  // This code will get executed.
} else {
  // if the above code is false, this block of code will be executed automatically.
}
 }

Copy the above syntax into the function or type it out. You can place your condition to check for “R” or “r” after the if as below.

function areYouPlayingBanjo(name) {
  if (name[0] =="r" || name[0] == "R") {
      return name + " plays banjo";
} else {
  // if the above code is false, this block of code will be executed automatically.
}
 }

Let’s talk javascript in plain English for a moment here. What we are saying is to check the first letter (name[0]) is equal to "R” or “r”,

If it is true, then return whatever the name is passed into this function and add - plays banjo to that name.

function areYouPlayingBanjo(name) {
    if(name[0] =="r" || name[0] == "R"){
      return name + " plays banjo";
    }else{
      return name + " does not play banjo"
    }
  }

If the first condition is not true then, it will check the else and return the name passed into the function and adds -does not play the banjo.

Examples:

Let’s see how our code works.

function areYouPlayingBanjo(name) {
    if(name[0] =="r" || name[0] == "R"){
      return name + " plays banjo";
    }else{
      return name + " does not play banjo"
    }
  }
areYouPlayingBanjo("Kiran");

This time we are calling the function with my name “Kiran” and the results will be:

areYouPlayingBanjo("Kiran"); //Kiran does not play banjo.
areYouPlayingBanjo("Robin"); //Robin plays banjo

I have created a simple vanilla JavaScript app to check whether the user plays banjo or not.

Here is the source code.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- stylesheet -->
    <link rel="stylesheet" href="style.css" />

    <!-- title -->
    <title>Document</title>

    <!-- javascript -->
    <script src="script.js" defer></script>
  </head>

  <body>
   <h1>Do You Play Banjo?</h1>
   <input id="banjotext" type="text">
   <button id="checkbanjo">Check Banjo</button>
   <p id="para"> </p>
  </body>
</html>

const input = document.getElementById("banjotext");
const btn = document.getElementById("checkbanjo");
const p = document.getElementById("para");

btn.addEventListener("click", (name) => {
  if (input.value[0] == "r" || input.value[0] == "R") {
    return (p.textContent = input.value + " plays banjo");
  } else {
    return (p.textContent = input.value + " does not play banjo");
  }
});

I haven't applied any CSS to this app but feel free to add your styles as you prefer.

It looks like below

The purpose of this experiment is to implement JavaScript in vanilla JS projects. I hope you liked it.

Final Words

Have you ever played banjo? If you ask me the same question: I didn't play banjo. What about you? Let me know in the comments?

If you have come this far, show some appreciation through liking, commenting or sharing this post.

That Coding Guy