DEV Community

loading...
Cover image for Enough JavaScript to get you Started : #7 Conditionals

Enough JavaScript to get you Started : #7 Conditionals

whoadarshpandya profile image Adarsh Pandya ・2 min read

Story Time

πŸ‘‰ Enough of these boring theories , let's start to understand something very useful which is used on day to day basic and useful to programming in general.

πŸ‘‰ Let's start with a fun story , let's say you were reading this block and your friend pinged you to play a game with him. you got excited and honestly who doesn't ? but after that you remembered that you gave committed a movie night with your girlfriend. now you got confused and you said to your friend that if she doesn't remember the promise we made , we'll definitely play video games or else i have to go...

Congratulations! You just learnt the concept of conditionals πŸŽ‰

πŸ‘‰ Conditionals are nothing but if else conditions which are used in coding

πŸ‘‰ Conditionals are used to drive your code's logic part , (ex. you want to give license if age is greater than 18)

πŸ‘‰ If-Else condition gives flow to your program , in which you can decide where i want my code to flow after certain conditions

Diagram of if else condition

Artboard – 5.png

πŸ‘‰ As we can see in diagram , if condition evaluated as True, the code block (piece of code) written inside if block is going to be executed

πŸ‘‰ In the free fall code written , if condition doesn't evaluate as True then else part is going to be executed

Let's get our hands dirty with code ✨

πŸ‘‰ So far , we've executed JS inside console only, but now we want a piece of code to be executed

πŸ‘‰ for that - we need a code editor , we'll be using Vs Code

Making Tinder πŸ˜‚

πŸ‘‰ Idea behind creating tinder is that we'll only allow 16+ y/o guys to use our app

πŸ‘‰ Create a new project inside vs code and create 2 files namely index.html and app.js

πŸ‘‰ just link js file with html file using src

πŸ‘‰ inside index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tinder</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ we'll use prompt() for taking input from user , which will return age as string ,so that we can use it throughout our program

var age = +prompt("hey, Enter your age : ");

if (age >= 16) {
  //? known as if block
  alert("welcome to dev tinder πŸ˜‚");
} else {
  // ? known as else block
  alert("try maybe after sometime :)");
}

Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Notice , we've used + sign in front of prompt which will convert our string to number for smoother operations

πŸ‘‰ now as the flow suggests , if the input is greater than or equal to 16
it will display welcome to dev tinder πŸ˜‚ or else it will show
try maybe after sometime :)

πŸ‘‰ go ahead and paste full url of index.html in your browser , our app will ask for prompt first and go through if else condition.

Let me know in comment section if you have any doubt or feedback. it's always worth to give time to the thriving developer community :)

Keep Coding ❀

Hey , Let' ConnectπŸ‘‹

Twitter /
Github

Discussion

pic
Editor guide