Food Roulette
How do I make an food roulette?
My housemates and I can never decide on what we want to eat. So, because of this issue, we finally settled to try and have an updated list that we could seek for random suggestions of places we like.. What is a food roulette? How do you make a food roulette? This script and codes were developed by Saysora on 26 August 2022, Friday.
Food Roulette - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Food Roulette</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="title"> <div class="padding"> <h1>What Should We Eat?</h1> </div> </div> <div class="response"> <div class="padding"> <h2>Fastfood:</h2> <h2 id="fastfood"></h2> </div> </div> <div class="quality"> <div class="padding"> <h2>Restaurant:</h2> <h2 id="restaurant"></h2> </div> </div> <div class="dessert"> <div class="padding"> <h2>Dessert:</h2> <h2 id="dessert"></h2> </div> </div> <div class="re-roll" onclick="reRoll()"> <div class="padding"> <h2>Roll</h2> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Food Roulette - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
* { margin: 0; padding: 0;
}
body { background: #2c3e50; color: #ecf0f1; font-family: 'Roboto', sans-serif; font-size: 1em;
}
.title { padding-top: 70px; padding-bottom: 70px; margin-left: auto; margin-right: auto; text-align: center; background: #e74c3c;
}
.title h1 { font-size: 3.5em;
}
.response { margin-top: 70px; margin-bottom: 20px; margin-left: auto; margin-right: auto; max-width: 500px; background: #27ae60; text-align: center;
}
.quality { margin-top: 20px; margin-bottom: 20px; margin-left: auto; margin-right: auto; max-width: 500px; background: #f39c12; text-align: center;
}
.dessert { margin-top: 20px; margin-bottom: 20px; margin-left: auto; margin-right: auto; max-width: 500px; background: #2980b9; text-align: center;
}
.re-roll { margin-top: 20px; margin-bottom: 70px; margin-left: auto; margin-right: auto; max-width: 200px; background: #8e44ad; text-align: center; cursor: pointer; webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all .1s linear; -moz-transition: all .1s linear; -o-transition: all .1s linear; transition: all .1s linear;
}
.re-roll:hover { background: #9b59b6;
}
.re-roll:active { background: #703689;
}
.padding { padding: 20px;
}
Food Roulette - Script Codes JS Codes
//Thanks for all the likes! Be sure to check out the new pen with geolocation based results!
//http://codepen.io/azureknight/pen/VYEBGZ
var $fastfood = ['In N Out', 'Mitsuwa', 'The Habit', 'Chipotle', 'Lil\' Pickle', 'Buffalo Wild Wings', 'Dominos', 'Haus of Pizza', 'Baja Fish', 'Chic Fil A', 'Flame Broiler', 'Jerry\'s Dogs', 'Jersey Mike\'s', 'Panera', 'Rooster Cafe', 'Corner Bakery', 'Laventinas', 'Bagelmania', 'Tommy\'s Pastrami', 'Costco']; var $fastRandom = Math.floor($fastfood.length * Math.random()); var $randomFast = $fastfood[$fastRandom]; var $restaurant = ['In N Out', 'Mitsuwa', 'The Habit', 'Chipotle', 'Souplantation', 'Baja Fish', 'Panera', 'Shinsengumi', 'Ajisen', 'Tokyo Table', 'Coco Ichibanya', 'IHOP', 'KBBQ', 'Pizza D\'Oro', 'Lucille\'s','Wahoo\'s', 'TGIF', 'Claim Jumper', 'Yardhouse', 'Mimis Cafe', 'Stonefire Grill', 'Anqi', 'California Pizza Kitchen', 'Acapulco', 'Haute Cakes']; var $restRandom = Math.floor($restaurant.length * Math.random()); var $randomRest = $restaurant[$restRandom]; var $dessert = ['Donuts', 'Frostbites', 'That Boba Place', 'Confetti', 'Yorgurtland', 'Alta', "Choco XO", 'Keane']; var $dessertRandom = Math.floor($dessert.length * Math.random()); var $randomDest = $dessert[$dessertRandom]; function reRoll(){ $('#fastfood').text($fastfood[Math.floor($fastfood.length * Math.random())]); $('#restaurant').text($restaurant[Math.floor($restaurant.length * Math.random())]); $('#dessert').text($dessert[Math.floor($dessert.length * Math.random())]); } $(document).ready(function(){ $('#fastfood').text($randomFast); $('#restaurant').text($randomRest); $('#dessert').text($randomDest); });
Developer | Saysora |
Username | azureknight |
Uploaded | August 26, 2022 |
Rating | 4 |
Size | 3,581 Kb |
Views | 22,264 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Legend of Zelda - Triforce | 2,530 Kb |
CSS Full Width Content Menu | 3,712 Kb |
Ralph Lauren Mimic | 3,067 Kb |
Flat UI Login | 3,358 Kb |
Responsive Background | 2,168 Kb |
Simple Video Lightbox | 3,103 Kb |
Beautiful Ribbon | 1,985 Kb |
Life Mottos | 3,352 Kb |
CSS Tab Holder | 3,445 Kb |
Value vs Placeholder | 2,244 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Svg sky | Omodev | 7,070 Kb |
A Pen by Matt Popovich | Mpopv | 3,349 Kb |
3D Text in Sass | Bookcasey | 2,766 Kb |
Clock with full screen background | Owebboy | 2,415 Kb |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
JS Countdown Timer | Ayoungh | 2,435 Kb |
TigerWoods Freecodecamp Page | Baileytj | 2,869 Kb |
Video Player Custom Controls | EleftheriaBatsou | 3,665 Kb |
Magnus 3 | ARocketfish | 7,944 Kb |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!