CodePen Embed - Starbucks Order Generator

<head>
<link href="db.onlinewebfonts.com/c/aa4fa7317c478848a62cc69bdbd47f0f?family=Santana-Black" rel="stylesheet" type="text/css"/>
</head>
<div class = "container">
<img id="logo" src="https://upload.wikimedia.org/wikipedia/en/thumb/d/d3/Starbucks_Corporation_Logo_2011.svg/1200px-Starbucks_Corporation_Logo_2011.svg.png">
  <h1>Random Starbucks Order Generator</h1>
<img id="logo" src="https://upload.wikimedia.org/wikipedia/en/thumb/d/d3/Starbucks_Corporation_Logo_2011.svg/1200px-Starbucks_Corporation_Logo_2011.svg.png">
</div>
<div>
<p id="intro">
Tired of indecisive people holding up the line at Starbucks?
<br>I was too.<br>That's why I created this Random Starbucks Order Generator. <br> Simply press the button, read out your random Starbucks order, and hurry the fuck along 😌
</p> 
</div>
<br>
<div class = "button-container">
<button id="generate">Generate your order</button>
</div>
<br>
<p id="order">Your order will appear here.</p>

<p id="forgot"></p>

@import url(//db.onlinewebfonts.com/c/aa4fa7317c478848a62cc69bdbd47f0f?family=Santana-Black);
@font-face {font-family: "Santana-Black"; src: url("//db.onlinewebfonts.com/t/aa4fa7317c478848a62cc69bdbd47f0f.eot"); src: url("//db.onlinewebfonts.com/t/aa4fa7317c478848a62cc69bdbd47f0f.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/aa4fa7317c478848a62cc69bdbd47f0f.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/aa4fa7317c478848a62cc69bdbd47f0f.woff") format("woff"), url("//db.onlinewebfonts.com/t/aa4fa7317c478848a62cc69bdbd47f0f.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/aa4fa7317c478848a62cc69bdbd47f0f.svg#Santana-Black") format("svg"); }

body {
  background-color: #006241;
  color: white;
  overflow: auto;
}

#intro {
  padding-top: 4.375rem;
  padding-bottom: 2rem;
  font-size: 1.6rem;
  line-height: 190%;
  display: box;
  max-width: 65%;
  margin: 0 auto;
  text-align: center;
  text-shadow: 1px 3px black;

}

#logo {
  height: 4.4375rem;
  margin: 0.625rem;
}

#generate {
background-color: black;
color: white;
display: inline-block;
font-size: 1.25rem;
cursor: pointer; 
margin-bottom: 2.5rem;  
padding: 1rem;
font-family: 'Santana-Black', Times;
}

.container {
display: flex;
  justify-content: center;
  align-items: center;
  height: 3.125rem;
  margin-top: 2.875rem;
  margin-bottom: 0.4rem;
  }

.button-container {
display: flex;
  justify-content: center;
  align-items: center;
  height: 3.125rem;
  margin-top: 1.875rem;
  } 

#order {
font-size: 1.4rem;
background-color: white;
color: black;
display: flex;
justify-content: center;
align-items: center;
padding: 0.625rem;
border: 5px solid black;
 max-width: 70%;
 margin: 0 auto;
 margin-top: 1.3rem;
}

button {
    font-family : inherit;
    font-size: 0.5rem;
   box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

button:focus {
  outline:0;
}


h1 {
  text-align: center;
  font-family: 'Santana-Black', Times;
  font-size: 2.5rem;
  text-shadow: 5px 5px black;  
}

#forgot {
 font-size: 1.25rem;
display: flex;
justify-content: center;
align-items: center;
}

/*Make responsive on mobile*/

@media screen and (max-width: 530px) {
  h1 {
    float: none;
    width: 100%;
    font-size: 1.5rem;
    padding-top: 1.5rem;
  }
 
  .container {
    margin-bottom: 0.001rem;
  }
  
  
  #logo {
    height: 150%;
  }
  
  #intro {
    font-size: 1.1rem;
    padding-top: 5.5rem;
    padding-bottom: 1rem;
    text-align: left;
    line-height: 2.2rem;
  }
  
  #generate {
  width: 70%;
  font-size: 1rem;
  padding: 1rem;
  }
  
  #order {
  font-size: 0.8rem;  
  line-height: 1.3rem;
  margin-top: 0.1rem;
  }
  
  #forgot {
  font-size: 0.9rem;    
  }
}

//Calling DOM

let generateButton = document.getElementById('generate');

let order = document.getElementById('order');

let forgot = document.getElementById('forgot')

const buttonPress = () => {
  generate.style.backgroundColor = 'white';
  generate.style.color = 'black';
}

const buttonRelease = () => {
  generate.style.backgroundColor = '';
  generate.style.color = '';
}


const starbucksSize = ["tall", "venti", "grande"]
const starbucksDrink = ["tea", "latte", "coffee", "cold brew", "espresso", "refresher", "hot chocolate", "flat white", "crème"]
const starbucksType = ["frappe", "mocha", "frappuccino", "kiwi starfruit", "mango dragonfruit"]
const starbucksAdjective = ["vanilla bean", "cinnamon", "salted caramel", "pumpkin spice", "Irish cream"]

const starbucksExtra = ["with extra whip", "with extra ice", "with less ice", "no foam", "half sweet"]

const starbucksForgot = ["ginger molasses cookie", "oat fudge bar", "cheese and fruit protein box", "butter croissant", "cake pop", "peanut butter cookie brownie", "snowman cookie", "gingerbread biscotti"]


const starbucksOrder = () => {
  let size = starbucksSize[Math.floor(Math.random() * starbucksSize.length)];
  let drink = starbucksDrink[Math.floor(Math.random() * starbucksDrink.length)];
  let type = starbucksType[Math.floor(Math.random() * starbucksType.length)];
  let adjective = starbucksAdjective[Math.floor(Math.random() * starbucksAdjective.length)];
  let extra = starbucksExtra[Math.floor(Math.random() * starbucksExtra.length)];  
  let ohforgot = starbucksForgot[Math.floor(Math.random() * starbucksForgot.length)];
  
order.innerHTML= ("Can I order a " + size + ' ' + adjective +' ' + type + ' ' + drink + ' '+ extra + '?'); 
  
forgot.innerHTML = (`Oh, and a ${ohforgot} too please🖤`);

}

generateButton.addEventListener("mousedown", buttonPress);


generateButton.addEventListener("mouseup", buttonRelease);


generateButton.addEventListener("click", starbucksOrder);

This Pen is owned by braveen kumar 🤔 on CodePen.

See more by @braveenk on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.