Dinner Decider

Hi Everyone,

In this tutorial I am going to create one dinner decider app, This app will help the user to decide one item from may.

Moreover, This app will help you out to decide what to eat from multiple options.

So Let’s Start with the designing part, I am using Bootstrap and Jquery to make it easy:

Our Designing output will looks as follow :

Dinner Decider
Dinner Decider

Here is the HTML Code for the same:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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>
<title>Document</title>
</head>
<body class="bg-dark">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto p-5 bg-danger mt-5 text-white">
<h1 class="text-center">Dinner Decider</h1>
<hr/>
<div class="main_output"></div>
<label>Enter Name</label>
<input type="text" class="form-control" id="item_name" />
<input type="button" class="btn btn-success mt-3 add_button" value="Add Item"/>
<input type="button" class="btn btn-success mt-3 float-right decide_button" value="Decide for me"/>
<div class="output"></div>
</div>
</div>
</div>
</body>
</html>

After This HTML Code we need to code in Javascript to make it happen.

In the Javascript I have to do following works :

  • Add Options from which user have to decide
  • Create Button to chose one item from all the options.

Let’s start coding in JS :

<script>
$(document).ready(function(){
var a = [];
$('.add_button').click(function(){
var aa = $('#item_name').val();
a.push(aa);
var items = '<ul class="list-group text-dark mt-4">';
for(b in a){
items += "<li class='list-group-item'>"+a[b]+"</li>";
}
items += "</ul>";
$('.output').html(items);
$('#item_name').val('').focus();
});
$('.decide_button').click(function(){
var rand = a[Math.floor(Math.random() * a.length)];
var out = "You should try : <strong>" + rand + "</strong>";
$('.main_output').html(out);
$('.main_output').addClass('alert alert-success');
}); 
});
</script>

In the above code I have create and empty array with name a.

Then Store values into an array using add_button class

And make a function which called when we click on decide. to make it happen.

Here is the working output for the following code.

Dinner Decider
Dinner Decider

Here is the final Code for Dinner Decider App:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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>
$(document).ready(function(){
var a = [];
$('.add_button').click(function(){
var aa = $('#item_name').val();
a.push(aa);
var items = '<ul class="list-group text-dark mt-4">';
for(b in a){
items += "<li class='list-group-item'>"+a[b]+"</li>";
}
items += "</ul>";
$('.output').html(items);
$('#item_name').val('').focus();
});
$('.decide_button').click(function(){
var rand = a[Math.floor(Math.random() * a.length)];
var out = "You should try : <strong>" + rand + "</strong>";
$('.main_output').html(out);
$('.main_output').addClass('alert alert-success');
}); 
});
</script>
<title>Document</title>
</head>
<body class="bg-dark">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto p-5 bg-danger mt-5 text-white">
<h1 class="text-center">Dinner Decider</h1>
<hr/>
<div class="main_output"></div>
<label>Enter Name</label>
<input type="text" class="form-control" id="item_name" />
<input type="button" class="btn btn-success mt-3 add_button" value="Add Item"/>
<input type="button" class="btn btn-success mt-3 float-right decide_button" value="Decide for me"/>
<div class="output"></div>
</div>
</div>
</div>
</body>
</html>

So that’s all for today hope you guys enjoy my tutorial stay tuned for my further updates.

26 thoughts on “Dinner Decider

Leave a Reply

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

  1. With havin so much written content do you ever run into any problems of plagorism or copyright violation? My
    website has a lot of completely unique content I’ve either created myself or outsourced but it
    seems a lot of it is popping it up all over the web without my agreement.
    Do you know any ways to help reduce content from being ripped
    off? I’d really appreciate it.

  2. I just want to tell you that I am just newbie to blogs and actually savored you’re website. Most likely I’m going to bookmark your blog . You amazingly have terrific articles. Thank you for sharing with us your web-site.

  3. Good blog! I really love how it is easy on my eyes and the data are well written. I’m wondering how I could be notified when a new post has been made. I’ve subscribed to your feed which must do the trick! Have a great day!

  4. I precisely had to thank you so much all over again. I’m not certain what I would have carried out without the type of suggestions discussed by you relating to this area. Completely was an absolute frustrating difficulty for me personally, but looking at the specialised strategy you handled it took me to weep over delight. Extremely happier for your service and in addition expect you are aware of a great job you are always undertaking instructing men and women using your blog. I am sure you have never come across any of us.

  5. I’m not sure exactly why but this blog is loading extremely slow for me. Is anyone else having this issue or is it a issue on my end? I’ll check back later on and see if the problem still exists.

  6. certainly like your website but you have to check the spelling on quite a few of your posts. Many of them are rife with spelling issues and I find it very bothersome to tell the truth nevertheless I will certainly come back again.

  7. Hiya, I’m really glad I have found this info. Today bloggers publish only about gossips and internet and this is really irritating. A good blog with interesting content, this is what I need. Thank you for keeping this web-site, I will be visiting it. Do you do newsletters? Can not find it.

  8. Have you ever thought about publishing an ebook or guest authoring on other websites? I have a blog centered on the same topics you discuss and would really like to have you share some stories/information. I know my readers would enjoy your work. If you’re even remotely interested, feel free to send me an e-mail.

  9. Hey are using WordPress for your site platform? I’m new to the blog world but I’m trying to get started and create my own. Do you need any coding knowledge to make your own blog? Any help would be greatly appreciated!

  10. Sweet blog! I found it while surfing around on Yahoo News.

    Do you have any suggestions on how to get listed in Yahoo News?
    I’ve been trying for a while but I never seem to get there!
    Thanks

  11. Hey there! I simply wish to give you a big thumbs up for your excellent information you have here on this post.
    I’ll be coming back to your blog for more soon.

  12. Hi there outstanding website! Does running a blog similar to this take a lot of work?

    I’ve virtually no knowledge of computer programming but I had been hoping to start my own blog in the near
    future. Anyhow, if you have any recommendations or techniques for
    new blog owners please share. I understand this is off subject however I just needed to ask.
    Thanks a lot!

  13. You can certainly see your skills in the work you
    write. The sector hopes for even more passionate writers like you who are not afraid to mention how they believe.

    All the time follow your heart.

  14. I’m not sure where you’re getting your info, but good
    topic. I needs to spend some time learning more or
    understanding more. Thanks for wonderful info I was looking
    for this information for my mission.

  15. Useful information.. video vlogger terfavorit Privileged us I recently found your web site inadvertently, with this particular astonished the key reason why that twist of fate wouldn’t transpired before hand! I personally book marked that.

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.