Foodar Code Sample:

Javascript

<script>
	
	//---------
	//getting the page to work properly
	//---------
	
	var emailTxtBx = document.getElementById('email');
	var restTxtBx = document.getElementById('rest');
	var totalText = document.getElementById('total');
	var mainButton = document.getElementById('mainBtn');
	var userTotal = 0;
	var userCost = 0;
	var userTipAmount = 0;
	
	function CalcTotal() {
		
		//event.preventDefault();
		
		if (document.getElementById('clas').checked == true)
		{
			userCost = Number(document.getElementById('clas').value);
			userTotal = userCost;
			userTotal *= userTipAmount;
			userTotal += userCost;
			totalText.innerHTML = "Total: $" + userTotal.toString();
		}
		else if (document.getElementById('prem').checked == true)
		{
			userCost = Number(document.getElementById('prem').value);
			userTotal = userCost;
			userTotal *= userTipAmount;
			userTotal += userCost;
			totalText.innerHTML = "Total: $" + userTotal.toString();
		}
		else if(document.getElementById('roy').checked == true)
		{
			userCost = Number(document.getElementById('roy').value);
			userTotal = userCost;
			userTotal *= userTipAmount;
			userTotal += userCost;
			totalText.innerHTML = "Total: $" + userTotal.toString();
		}
		
		if(document.getElementById('ten').checked == true)
		{
			userTipAmount = Number(document.getElementById('ten').value);
			userTotal = userCost;
			userTotal *= userTipAmount;
			userTotal += userCost;
			totalText.innerHTML = "Total: $" + userTotal.toString();
		}
		else if(document.getElementById('fif').checked == true)
		{
			userTipAmount = Number(document.getElementById('fif').value);
			userTotal = userCost;
			userTotal *= userTipAmount;
			userTotal += userCost;
			totalText.innerHTML = "Total: $" + userTotal.toString();
		}
		else if(document.getElementById('twen').checked == true)
		{
			userTipAmount = Number(document.getElementById('twen').value);
			userTotal = userCost;
			userTotal *= userTipAmount;
			userTotal += userCost;
			totalText.innerHTML = "Total: $" + userTotal.toString();
		}
		
      }
	  
	  function SendReq()
	  {
	  console.log(userTotal);
		if (userTotal > 0)
		{
			alert("Your request for $" + userTotal + " is being processed.");
		}
	  }
</script>

CSS

.featured-rest
{
	display: flex;
	position: relative;
	width: 1000px;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

.img-rest
{
	position: realtive;
	width: 500px;
	height: 250px;
	overflow: hidden;
}

.img-rest-text1
{
	 position: absolute;
	 top: 80%;
	 left: 19%;
	 transform: translate(-50%, -50%);
	 text-align: center;
	 
	 color: #FFFFFF;
	 font-size: 85%;
	 font-family: sans-serif;
	 
	 background-color: rgba(0, 0, 0, 0.55);
	 border-radius: 5px;
	 padding: 3px;
}