Decision Maker using JavaScript

Hello Everyone,

In my today’s task I am going to create one program to decide whether we have to do something or not.

Where will this code help us?

When you have to decide something where you are stuck with 2 options.

When you have to decide between Burger or Noodles

So Let’s start with the coding part to make it happen.

First I am going to start with designing part for the same.

I have used bootstrap and jquery to make this process easier and looks beautiful.

Lets Code in HTML with bootstrap :

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Decision Maker</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body class="bg-warning">
<div class="container">
<div class="row">
<div class="col-md-6 bg-dark text-white mt-5 p-5 mx-auto">
<h1 class="text-center">Decision Maker</h1>
<hr class="border"/>
<label>Enter Question : </label>
<input type="text" class="form-control" placeholder="ex : Should I buy samsung mobile ?" />
<input type="button" class="btn btn-success mt-3" value="Decide" onclick="decision();" />
<div class="p-3 mt-5 decision display-1 text-center bg-light text-dark">Result</div>
</div>
</div>
</div>
</body>
</html>
Decision Maker using JavaScript
Decision Maker using JavaScript

Output for the above code as follow :

Our design is complete now I have to create a function using javascript to print yes or no randomly.

<script>
function decision(){
var min = 1
var max = 2
var dec = Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive
if(dec==1){
$('.decision').text('Yes');
$('.decision').removeClass('bg-danger');
$('.decision').removeClass('bg-light').addClass('bg-success');
}else{
$('.decision').text('No');
$('.decision').removeClass('bg-success');
$('.decision').removeClass('bg-light').addClass('bg-danger');
}
}
</script>

Int the above code I have done following things:

  1. generate random number between 1 and 2
  2. check if the number will be 1 then show yes and add class bg-success to it
  3. If the number is equals to 2 then print no as per else condition

Output for this code looks as following image:

Decision Maker using JavaScript
Decision Maker using JavaScript

Here is the final code for Decision Maker using JavaScript:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Decision Maker</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function decision(){
var min = 1
var max = 2
var dec = Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive
if(dec==1){
$('.decision').text('Yes');
$('.decision').removeClass('bg-danger');
$('.decision').removeClass('bg-light').addClass('bg-success');
}else{
$('.decision').text('No');
$('.decision').removeClass('bg-success');
$('.decision').removeClass('bg-light').addClass('bg-danger');
}
}
</script>
</head>
<body class="bg-warning">
<div class="container">
<div class="row">
<div class="col-md-6 bg-dark text-white mt-5 p-5 mx-auto">
<h1 class="text-center">Decision Maker</h1>
<hr class="border"/>
<label>Enter Question : </label>
<input type="text" class="form-control" placeholder="ex : Should I buy samsung mobile ?" />
<input type="button" class="btn btn-success mt-3" value="Decide" onclick="decision();" />
<div class="p-3 mt-5 decision display-1 text-center bg-light text-dark">Result</div>
</div>
</div>
</div>
</body>
</html>

So that’s all for today, hope you enjoy this tutorial. Stay tuned for my upcoming updates.

22 thoughts on “Decision Maker using JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Hey! I know this is kinda off topic but I’d figured I’d ask. Would you be interested in trading links or maybe guest writing a blog article or vice-versa? My blog discusses a lot of the same subjects as yours and I think we could greatly benefit from each other. If you’re interested feel free to shoot me an e-mail. I look forward to hearing from you! Wonderful blog by the way!

  2. I simply want to mention I am just new to blogging and honestly loved this web-site. More than likely I’m planning to bookmark your blog . You absolutely come with remarkable articles. With thanks for sharing your blog.

  3. I’m writing to let you understand of the remarkable experience my wife’s child undergone reading yuor web blog. She discovered lots of details, which include what it’s like to possess an incredible helping heart to have most people with ease comprehend chosen advanced subject matter. You really surpassed my expected results. Thank you for offering those good, trustworthy, educational as well as unique thoughts on this topic to Sandra.

  4. I wish to show my thanks to this writer just for rescuing me from this type of circumstance. Right after scouting throughout the the net and seeing suggestions that were not productive, I was thinking my entire life was gone. Living minus the answers to the difficulties you have resolved through this report is a critical case, and the ones which could have negatively damaged my career if I had not come across your blog post. Your personal natural talent and kindness in dealing with the whole thing was invaluable. I’m not sure what I would have done if I hadn’t encountered such a step like this. It’s possible to at this time look forward to my future. Thanks very much for the reliable and results-oriented guide. I will not be reluctant to suggest your web page to anybody who should get counselling on this topic.

  5. The very root of your writing while sounding agreeable at first, did not really work well with me personally after some time. Someplace within the sentences you actually managed to make me a believer but only for a short while. I however have a problem with your jumps in assumptions and you might do nicely to fill in all those gaps. In the event that you actually can accomplish that, I could definitely be fascinated.

  6. Thanks for another informative website. Where else could I get that kind of information written in such an ideal way? I’ve a project that I’m just now working on, and I have been on the look out for such info.

  7. We’re a group of volunteers and starting a new
    scheme in our community. Your website provided us with valuable information to work on. You have done a formidable
    job and our whole community will be thankful to you.

  8. Heya! I’m at work surfing around your blog from
    my new iphone! Just wanted to say I love reading through your blog and look forward to all your posts!
    Carry on the fantastic work!

  9. Greetings! This is my first visit to your blog!
    We are a collection of volunteers and starting a
    new initiative in a community in the same niche.

    Your blog provided us valuable information to work on. You have done a
    outstanding job!

  10. While writing a software, there may be a situation whilst you need to undertake one out of a given set of paths. In such cases, you need to apply conditional statements that permit your application to make accurate selections and carry out proper movements.Javascript helps conditional statements that are used to perform one of a kind actions primarily based on different situations. Right here we can provide an explanation for the if..Else assertion.

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.