This is a Web App that simulates a store that sells beverages to its customers. Here, they can order fresh juices, alcohol, and alcohol-free drinks. There is also a contact form for any questions. Let's see the index.html which is the section responsible for fresh juices.
💡
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sprits - Drink's Leisure</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bad+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css" type="text/css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="./index.html"><img src="./images/sprits-white.png" alt="" width="60" height="20"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="./index.html">Juices</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./alcohol.html">Alcohol Drinks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./free.html">Alcohol Free Drinks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact.html">Contact</a>
</li>
<button type="button" class="btn btn-light position-relative">
Cart
<span class="position-absolute top-0 start-0 translate-middle badge rounded-pill bg-danger">
<span id="countShow">0</span>
<span class="visually-hidden">unread messages</span>
</span>
</button>
</ul>
</div>
</div>
</nav>
<h3 class="text-center title">Sprits - Drink's Leisure</h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb m-3">
<li class="breadcrumb-item"><a href="./index.html">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Juices</li>
</ol>
</nav>
</header>
<main>
<div class="row text-center mt-5">
<div class="col-6 d-flex justify-content-end">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/orange-juice.jpg" alt="Buy Orange Juice">
<div class="card-body">
<div class="card-title text-center"><b>Order Orange Juice</b></div>
<div class="card-text text-center">Orange juice is a liquid extract of the orange tree fruit, produced by squeezing or reaming oranges. It comes in several different varieties, including blood orange, navel oranges, valencia orange, clementine, and tangerine.</div>
<button type="button" class="btn btn-dark" id="liveToastBtnOrange">Order</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToastOrange" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="./images/sprits.png" width="40" class="rounded me-2" alt="Notification Icon">
<strong class="me-auto"></strong>
<small>1 second ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Success! You have ordered an Orange Juice.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 d-flex justify-content-start">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/lemonade.jpg" alt="Buy Lemonade">
<div class="card-body">
<div class="card-title text-center"><b>Order Lemonade</b></div>
<div class="card-text text-center">Lemonade is a sweetened lemon-flavored beverage.
There are varieties of lemonade found throughout the world.[1] In North America and South Asia, cloudy lemonade dominates. It is traditionally a homemade drink using lemon juice, water, and a sweetener.</div>
<button type="button" class="btn btn-dark" id="liveToastBtnLemonade">Order</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToastLemonade" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="./images/sprits.png" width="40" class="rounded me-2" alt="Notification Icon">
<strong class="me-auto"></strong>
<small>1 second ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Success! You have ordered an Lemonade.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row text-center mt-5">
<div class="col-6 d-flex justify-content-end">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/cherry-juice.jpg" alt="Buy Cherry Juice">
<div class="card-body">
<div class="card-title text-center"><b>Order Cherry Juice</b></div>
<div class="card-text text-center">Cherry juice is a fruit juice consisting of the juice of cherries. It is consumed as a beverage and used as an ingredient in various foods, processed foods and beverages. It is also marketed as a health supplement. It is produced by hot- or cold-pressing cherries, collecting the juice, and then filtering and pasteurizing it.</div>
<button type="button" class="btn btn-dark" id="liveToastBtnCherry">Order</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToastCherry" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="./images/sprits.png" width="40" class="rounded me-2" alt="Notification Icon">
<strong class="me-auto"></strong>
<small>1 second ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Success! You have ordered an Cherry Juice.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 d-flex justify-content-start">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/apple-juice.jpg" alt="Buy Apple Juice">
<div class="card-body">
<div class="card-title text-center"><b>Order Apple Juice</b></div>
<div class="card-text text-center">Apple juice is a fruit juice made by the maceration and pressing of an apple. The resulting expelled juice may be further treated by enzymatic and centrifugal clarification to remove the starch and pectin, which holds fine particulate in suspension.</div>
<button type="button" class="btn btn-dark" id="liveToastBtnApple">Order</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToastApple" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="./images/sprits.png" width="40" class="rounded me-2" alt="Notification Icon">
<strong class="me-auto"></strong>
<small>1 second ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Success! You have ordered an Apple Juice.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="text-center p-2">
<small>© Copyright 2022 - Sprits - Drink's Leisure</small>
<br>
<small>Created with ❤️ and Enthusiasm by <a href="https://github.com/mariosdaskalas" target="_blank">@mariosdaskalas</a></small>
</footer>
<script src="./main.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>
We are using Bootstrap to create a 2x2 Grid in order to display our content. We present an image, the type of beverage, a short description, and the Order button which the user can click on it to order it. We are using the 'card' class in order to display our data. Let's now see the logic of the page, which lives inside our Javascript file.
💡
main.js
// Orange
var toastTrigger = document.getElementById('liveToastBtnOrange');
var toastLiveExampleOrange = document.getElementById('liveToastOrange');
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExampleOrange);
toast.show();
})
}
let count = 0;
let display = document.getElementById("countShow");
liveToastBtnOrange.onclick = function() {
count++;
display.innerHTML = count;
}
// Lemonade
var toastTrigger = document.getElementById('liveToastBtnLemonade');
var toastLiveExampleLemonade = document.getElementById('liveToastLemonade');
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExampleLemonade);
toast.show();
})
}
liveToastBtnLemonade.onclick = function() {
count++;
display.innerHTML = count;
}
// Cherry
var toastTrigger = document.getElementById('liveToastBtnCherry');
var toastLiveExampleCherry = document.getElementById('liveToastCherry');
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExampleCherry);
toast.show();
})
}
liveToastBtnCherry.onclick = function() {
count++;
display.innerHTML = count;
}
// Apple
var toastTrigger = document.getElementById('liveToastBtnApple');
var toastLiveExampleApple = document.getElementById('liveToastApple');
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExampleApple);
toast.show();
})
}
liveToastBtnApple.onclick = function() {
count++;
display.innerHTML = count;
}
At first, there is a trigger, that executes at the click of a button and displays as a popup somewhere on the screen. That is accomplished with the use of Toast inside the Bootstrap library. We also create a function that counts the orders being made.
The other 2 pages, Alcohol and Alcohol Free Drinks follow the same logic both on the HTML and Javascript files as the above one. Here is the Source Code.
💡
alcohol.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sprits - Drink's Leisure</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bad+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css" type="text/css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="./index.html"><img src="./images/sprits-white.png" alt="" width="60" height="20"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="./index.html">Juices</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="./alcohol.html">Alcohol Drinks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./free.html">Alcohol Free Drinks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact.html">Contact</a>
</li>
<button type="button" class="btn btn-light position-relative">
Cart
<span class="position-absolute top-0 start-0 translate-middle badge rounded-pill bg-danger">
<span id="countShow">0</span>
<span class="visually-hidden">unread messages</span>
</span>
</button>
</ul>
</div>
</div>
</nav>
<h3 class="text-center title">Sprits - Drink's Leisure</h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb ms-3">
<li class="breadcrumb-item"><a href="./index.html">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Alcohol Drinks</li>
</ol>
</nav>
</header>
<main>
<div class="row text-center mt-5">
<div class="col-6 d-flex justify-content-end">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/heineken.jpg" alt="Buy Heineken Beer">
<div class="card-body">
<div class="card-title text-center"><b>Order Heineken Beer</b></div>
<div class="card-text text-center">Heineken Lager Beer (Dutch: Heineken Pilsener), or simply Heineken (pronounced [ˈɦɛinəkə(n)]) is a pale lager beer with 5% alcohol by volume produced by the Dutch brewing company Heineken N.V. Heineken beer is sold in a green bottle with a red star.</div>
<button type="button" class="btn btn-dark" id="liveToastBtnHeineken">Order</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToastHeineken" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="./images/sprits.png" width="40" class="rounded me-2" alt="Notification Icon">
<strong class="me-auto"></strong>
<small>1 second ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Success! You have ordered an Heineken Beer.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 d-flex justify-content-start">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/amstel.jpg" alt="Buy Amstel Beer">
<div class="card-body">
<div class="card-title text-center"><b>Order Amstel Beer</b></div>
<div class="card-text text-center">Amstel Brewery (Dutch: Amstelbrouwerij, Dutch pronunciation: [ˈɑmstəlbrʌwəˌrɛi̯]) is a Dutch brewery founded in 1870 on the Mauritskade in Amsterdam. It was taken over by Heineken International in 1968, and the brewing plant closed down in 1982, with production moving to the main Heineken plant at Zoeterwoude.</div>
<button type="button" class="btn btn-dark" id="liveToastBtnAmstel">Order</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToastAmstel" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="./images/sprits.png" width="40" class="rounded me-2" alt="Notification Icon">
<strong class="me-auto"></strong>
<small>1 second ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Success! You have ordered an Amstel Beer.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row text-center mt-5">
<div class="col-6 d-flex justify-content-end">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/jack-daniels.jpg" alt="Buy Jack Daniels">
<div class="card-body">
<div class="card-title text-center"><b>Order Jack Daniels</b></div>
<div class="card-text text-center">Jack Daniel's is a brand of Tennessee whiskey. It is produced in Lynchburg, Tennessee, by the Jack Daniel Distillery, which has been owned by the Brown–Forman Corporation since 1956.
Packaged in square bottles, Jack Daniel's "Black Label" Tennessee whiskey sold 12.5 million nine-liter cases in the fiscal year ending on April 30, 2017.</div>
<button type="button" class="btn btn-dark" id="liveToastBtnJack">Order</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToastJack" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="./images/sprits.png" width="40" class="rounded me-2" alt="Notification Icon">
<strong class="me-auto"></strong>
<small>1 second ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Success! You have ordered an Jack Daniels.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 d-flex justify-content-start">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/lola-beer.jpg" alt="Buy Lola Beer">
<div class="card-body">
<div class="card-title text-center"><b>Order Lola Beer</b></div>
<div class="card-text text-center">Beer is one of the oldest and most widely consumed alcoholic drinks in the world, and the third most consumed drink overall after water and tea. It is produced by the brewing and fermentation of starches, mainly derived from cereal grains.</div>
<button type="button" class="btn btn-dark" id="liveToastBtnLola">Order</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToastLola" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="./images/sprits.png" width="40" class="rounded me-2" alt="Notification Icon">
<strong class="me-auto"></strong>
<small>1 second ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Success! You have ordered a Lola Beer.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="text-center p-2">
<small>© Copyright 2022 - Sprits - Drink's Leisure</small>
<br>
<small>Created with ❤️ and Enthusiasm by <a href="https://github.com/mariosdaskalas" target="_blank">@mariosdaskalas</a></small>
</footer>
<script src="./alcohol.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>
💡
alcohol.js
// Heineken
var toastTrigger = document.getElementById('liveToastBtnHeineken');
var toastLiveExampleHeineken = document.getElementById('liveToastHeineken');
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExampleHeineken);
toast.show();
})
}
let count = 0;
let display = document.getElementById("countShow");
liveToastBtnHeineken.onclick = function() {
count++;
display.innerHTML = count;
}
// Amstel
var toastTrigger = document.getElementById('liveToastBtnAmstel');
var toastLiveExampleAmstel = document.getElementById('liveToastAmstel');
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExampleAmstel);
toast.show();
})
}
liveToastBtnAmstel.onclick = function() {
count++;
display.innerHTML = count;
}
// Jack Daniels
var toastTrigger = document.getElementById('liveToastBtnJack');
var toastLiveExampleJack = document.getElementById('liveToastJack');
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExampleJack);
toast.show();
})
}
liveToastBtnJack.onclick = function() {
count++;
display.innerHTML = count;
}
// Lola Beer
var toastTrigger = document.getElementById('liveToastBtnLola');
var toastLiveExampleLola = document.getElementById('liveToastLola');
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExampleLola);
toast.show();
})
}
liveToastBtnLola.onclick = function() {
count++;
display.innerHTML = count;
}
💡
free.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sprits - Drink's Leisure</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bad+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css" type="text/css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="./index.html"><img src="./images/sprits-white.png" alt="" width="60" height="20"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="./index.html">Juices</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./alcohol.html">Alcohol Drinks</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="./free.html">Alcohol Free Drinks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact.html">Contact</a>
</li>
<button type="button" class="btn btn-light position-relative">
Cart
<span class="position-absolute top-0 start-0 translate-middle badge rounded-pill bg-danger">
<span id="countShow">0</span>
<span class="visually-hidden">unread messages</span>
</span>
</button>
</ul>
</div>
</div>
</nav>
<h3 class="text-center title">Sprits - Drink's Leisure</h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb ms-3">
<li class="breadcrumb-item"><a href="./index.html">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Alcohol Free Drinks</li>
</ol>
</nav>
</header>
<main>
<div class="row text-center mt-5">
<div class="col-6 d-flex justify-content-end">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/iced-tea.jpg" alt="Buy Iced Tea">
<div class="card-body">
<div class="card-title text-center"><b>Order Iced Tea</b></div>
<div class="card-text text-center">Iced tea (or ice tea) is a form of cold tea. Though usually served in a glass with ice, it can refer to any tea that has been chilled or cooled. It may be sweetened with sugar, syrup and/or apple slices.</div>
<button type="button" class="btn btn-dark" id="liveToastBtnTea">Order</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToastTea" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="./images/sprits.png" width="40" class="rounded me-2" alt="Notification Icon">
<strong class="me-auto"></strong>
<small>1 second ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Success! You have ordered an Iced Tea.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 d-flex justify-content-start">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/mocktail.jpg" alt="Buy Mocktail">
<div class="card-body">
<div class="card-title text-center"><b>Order Mocktail</b></div>
<div class="card-text text-center">An alcohol-free or non-alcoholic drink, also known as a temperance drink, is a version of an alcoholic drink made without alcohol, or with the alcohol removed or reduced to almost zero.</div>
<button type="button" class="btn btn-dark" id="liveToastBtnMock">Order</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToastMock" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="./images/sprits.png" width="40" class="rounded me-2" alt="Notification Icon">
<strong class="me-auto"></strong>
<small>1 second ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Success! You have ordered a Mocktail.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row text-center mt-5">
<div class="col-6 d-flex justify-content-end">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid pina" src="./images/pina-colada.jpg" alt="Buy Piña colada">
<div class="card-body">
<div class="card-title text-center"><b>Order Piña colada</b></div>
<div class="card-text text-center">The piña colada (/ˌpiːnjə koʊˈlɑːdə, -nə-, -kə-/; Spanish: piña [ˈpiɲa], "pineapple", and colada [koˈlaða], "strained") is a cocktail made with rum, cream of coconut or coconut milk, and pineapple juice, usually served either blended or shaken with ice. It may be garnished with either a pineapple wedge, maraschino cherry, or both. </div>
<button type="button" class="btn btn-dark" id="liveToastBtnPina">Order</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToastPina" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="./images/sprits.png" width="40" class="rounded me-2" alt="Notification Icon">
<strong class="me-auto"></strong>
<small>1 second ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Success! You have ordered a Piña colada.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 d-flex justify-content-start">
<div class="card" style="width: 40rem;">
<img class="rounded img-fluid" src="./images/coca-cola.jpg" alt="Buy Coca Cola">
<div class="card-body">
<div class="card-title text-center"><b>Order Coca Cola</b></div>
<div class="card-text text-center">Coca-Cola, or Coke, is a carbonated soft drink manufactured by the Coca-Cola Company. Originally marketed as a temperance drink and intended as a patent medicine, it was invented in the late 19th century by John Stith Pemberton in Atlanta, Georgia.</div>
<button type="button" class="btn btn-dark" id="liveToastBtnCoca">Order</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToastCoca" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="./images/sprits.png" width="40" class="rounded me-2" alt="Notification Icon">
<strong class="me-auto"></strong>
<small>1 second ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Success! You have ordered a Coca Cola.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="text-center p-2">
<small>© Copyright 2022 - Sprits - Drink's Leisure</small>
<br>
<small>Created with ❤️ and Enthusiasm by <a href="https://github.com/mariosdaskalas" target="_blank">@mariosdaskalas</a></small>
</footer>
<script src="./free.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>
💡
free.js
// Iced Tea
var toastTrigger = document.getElementById('liveToastBtnTea');
var toastLiveExampleTea = document.getElementById('liveToastTea');
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExampleTea);
toast.show();
})
}
let count = 0;
let display = document.getElementById("countShow");
liveToastBtnTea.onclick = function() {
count++;
display.innerHTML = count;
}
// Mocktail
var toastTrigger = document.getElementById('liveToastBtnMock');
var toastLiveExampleMock = document.getElementById('liveToastMock');
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExampleMock);
toast.show();
})
}
liveToastBtnMock.onclick = function() {
count++;
display.innerHTML = count;
}
// Pina Colada
var toastTrigger = document.getElementById('liveToastBtnPina');
var toastLiveExamplePina = document.getElementById('liveToastPina');
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExamplePina);
toast.show();
})
}
liveToastBtnPina.onclick = function() {
count++;
display.innerHTML = count;
}
// Coca Cola
var toastTrigger = document.getElementById('liveToastBtnCoca');
var toastLiveExampleCoca = document.getElementById('liveToastCoca');
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExampleCoca);
toast.show();
})
}
liveToastBtnCoca.onclick = function() {
count++;
display.innerHTML = count;
}
Finally, there is a Contact page, that is being made with Bootstrap. It uses the form-group class for the presentation of data. It presents the user the ability to fill in the First and Last Name, the Email, the type of issue, and a short message. That's all. Here is the HTML code.
💡
contact.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sprits - Drink's Leisure</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bad+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css" type="text/css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="./index.html"><img src="./images/sprits-white.png" alt="" width="60" height="20"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="./index.html">Juices</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./alcohol.html">Alcohol Drinks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./free.html">Alcohol Free Drinks</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="./contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<h3 class="text-center title">Sprits - Drink's Leisure</h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb ms-3">
<li class="breadcrumb-item"><a href="./index.html">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Contact</li>
</ol>
</nav>
</header>
<main>
<div class="container"> <div class=" text-center mt-5 ">
<h1>Sprits Contact Form</h1>
</div>
<div class="row ">
<div class="col-lg-7 mx-auto">
<div class="card mt-2 mx-auto p-4 bg-light">
<div class="card-body bg-light">
<div class="container">
<form id="contact-form" role="form">
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group"> <label for="form_name">Firstname *</label> <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required."> </div>
</div>
<div class="col-md-6">
<div class="form-group"> <label for="form_lastname">Lastname *</label> <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required."> </div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group"> <label for="form_email">Email *</label> <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required."> </div>
</div>
<div class="col-md-6">
<div class="form-group"> <label for="form_need">Please specify your need *</label> <select id="form_need" name="need" class="form-control" required="required" data-error="Please specify your need.">
<option value="" selected disabled>--Select Your Issue--</option>
<option>Make an order</option>
<option>Request receipt</option>
<option>My order has not arrived yet</option>
<option>Other</option>
</select> </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group"> <label for="form_message">Message *</label> <textarea id="form_message" name="message" class="form-control" placeholder="Write your message here." rows="4" required="required" data-error="Please, leave us a message."></textarea> </div>
</div>
<div class="col-md-12 text-center"> <input type="submit" class="btn btn-dark btn-send mt-2 pt-2 btn-block" value="Send Message"> </div>
</div>
</div>
</form>
</div>
</div>
</div> <!-- /.8 -->
</div> <!-- /.row-->
</div>
</div>
</main>
<footer class="text-center p-2">
<small>© Copyright 2022 - Sprits - Drink's Leisure</small>
<br>
<small>Created with ❤️ and Enthusiasm by <a href="https://github.com/mariosdaskalas" target="_blank">@mariosdaskalas</a></small>
</footer>
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>
Well, not quite. Well, all the styling was made possible with Bootstrap, except for a 10-liner CSS file.
💡
style.css
body {
font-family: 'Bad Script', cursive;
}
img:hover {
transform: scale(1.05);
cursor: pointer;
}
.title {
margin-top: 4.5rem;
}
.pina {
filter: brightness(200%);
}
💡
Github
GitHub - mariosdaskalas/sprits: Beverage Website made with Bootstrap
Beverage Website made with Bootstrap. Contribute to mariosdaskalas/sprits development by creating an account on GitHub.
mariosdaskalas💡
Live Demo
Subscribe to our email newsletter and unlock access to members-only content and exclusive updates.
Comments