Skip to content

Instantly share code, notes, and snippets.

@anthonydmays

anthonydmays/restaurant.html

Created April 26, 2024 16:38
Show Gist options
  • Save anthonydmays/9b05691019efd989d62096d6b116baea to your computer and use it in GitHub Desktop.
Save anthonydmays/9b05691019efd989d62096d6b116baea to your computer and use it in GitHub Desktop.
Download ZIP
Raw
restaurant.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurants</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="restaurant.css" />
</head>
<body>
<div class="sidebar">
<h1 class="logo">FoodDifferently</h1>
<div class="sidebar-menus">
<a href="#"><ion-icon name="storefront-outline"></ion-icon>Home</a>
<a href="#"><ion-icon name="receipt-outline"></ion-icon>Orders</a>
<a href="#"><ion-icon name="wallet-outline"></ion-icon>Wallet</a>
<a href="#"><ion-icon name="notifications-outline"></ion-icon>Notification</a>
<a href="#"><ion-icon name="settings-outline"></ion-icon>Settings</a>
</div>
<div class="sidebar-logout">
<a href="#"><ion-icon name="log-out-outline"></ion-icon>Logout</a>
</div>
</div>
<div class="main">
<div class="main-navbar">
<ion-icon class="menu-toggle" name="menu-outline"></ion-icon>
<div class="search">
<input type="text" placeholder="What do you want to eat?">
<button class="search-btn">Search</button>
</div>
<div class="profile">
<a class="cart" href="#"><ion-icon name="cart-outline"></ion-icon></a>
<a class="user" href="#"><ion-icon name="person-outline"></ion-icon></a>
</div>
</div>
<div class="main-highlight">
<div class="main-header">
<h2 class="main-title">Recommendations</h2>
<div class="main-arrow">
<ion-icon class="back" name="chevron-back-circle-outline"></ion-icon>
<ion-icon class="next" name="chevron-forward-circle-outline"></ion-icon>
</div>
</div>
<div class="highlight-wrapper">
<div class="highlight-card">
<img class="highlight-img" src="images/greek-salad.jpeg">
<div class="highlight-desc">
<h4>Greek Salad</h4>
<p>$12</p>
</div>
</div>
<div class="highlight-card">
<img class="highlight-img" src="images/sushi.jpeg">
<div class="highlight-desc">
<h4>Sushi</h4>
<p>$15</p>
</div>
</div>
<div class="highlight-card">
<img class="highlight-img" src="images/pizza1.jpeg">
<div class="highlight-desc">
<h4>Pizza</h4>
<p>$18</p>
</div>
</div>
<div class="highlight-card">
<img class="highlight-img" src="images/burger.jpeg">
<div class="highlight-desc">
<h4>Burger</h4>
<p>$12</p>
</div>
</div>
</div>
</div>
<div class="main-menus">
<div class="main-filter">
<div> <h2 class="main-title">Menu <br> Category</h2>
<div class="main-arrow">
<ion-icon class="back-menus" name="chevron-back-circle-outline"></ion-icon>
<ion-icon class="next-menus" name="chevron-forward-circle-outline"></ion-icon>
</div>
</div>
<div class="filter-wrapper">
<div class="filter-card">
<div class="filter-icon">
<ion-icon name="restaurant-outline"></ion-icon>
</div>
<p>All Menus</p>
</div>
<div class="filter-card">
<div class="filter-icon">
<ion-icon name="fast-food-outline"></ion-icon>
</div>
<p>Burger</p>
</div>
<div class="filter-card">
<div class="filter-icon">
<ion-icon name="pizza-outline"></ion-icon>
</div>
<p>Pizza</p>
</div>
<div class="filter-card">
<div class="filter-icon">
<ion-icon name="wine-outline"></ion-icon>
</div>
<p>Wine</p>
</div>
<div class="filter-card">
<div class="filter-icon">
<ion-icon name="ice-cream-outline"></ion-icon>
</div>
<p>Ice-cream</p>
</div>
<div class="filter-card">
<div class="filter-icon">
<ion-icon name="cafe-outline"></ion-icon>
</div>
<p>Coffee</p>
</div>
<div class="filter-card">
<div class="filter-icon">
<ion-icon name="fish-outline"></ion-icon>
</div>
<p>Seafood</p>
</div>
<div class="filter-card">
<div class="filter-icon">
<ion-icon name="nutrition-outline"></ion-icon>
</div>
<p>Healthy</p>
</div>
</div>
</div>
<hr class="divider">
<div clas="main-detail">
<h2 class="main-title">Choose Order</h2>
<div class="detail-wrapper">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="restaurant.js"></script>
</html>
Raw
restuarant.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: sans-serif;
}
body {
width: 100%;
height: auto;
display: flex;
}
.logo{
font-size: 30px;
}
.sidebar {
height: 100%;
width: 250px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
padding: 2%;
background-color: antiquewhite;
color: black;
}
.sidebar-menus {
display: flex;
flex-direction: column;
}
.sidebar-menus a , .sidebar-logout a {
padding: 5% 8%;
margin: 0.5rem;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1rem;
text-decoration: none;
color: black
}
.sidebar-menus a ion-icon , .sidebar-logout a ion-icon{
font-size: 20px;
}
.sidebar-menus a:hover , .sidebar-logout a:hover {
background-color: #ffc107;
border-radius: 50px;
}
.main{
width: 100%;
height: max-content;
min-height: 100vh ;
padding: 2%;
background-color: white;
margin-left: 250px;
}
.main-navbar{
display: flex;
justify-content: space-between;
align-items: center;
}
.menu-toggle {
display: none;
}
.search {
width: 60%;
height: 40px;
display: flex;
justify-content: space-around;
background-color: white;
border-radius: 20px;
}
.search input {
width: 80%;
height: 100%;
padding: 20px;
border: none;
border-radius: 20px;
}
.search-btn{
background-color: #ffc107;
color: black;
border: none;
border-radius: 20px;
width: 120px;
cursor: pointer;
}
.search:hover {
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.search-btn:hover{
background-color: #FFA500;
}
.profile{
display: flex;
align-items: center;
gap: 0.5rem ;
}
.cart, .user{
display: flex;
justify-content: center;
align-items: center;
background-color: white;
font-size: 20px;
color:#ffc107;
text-decoration: none;
padding-left: 0 10px;
height: 40px;
border-radius: 50%;
}
.cart:hover, user:hover{
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.main-highlight{
margin:3% 0;
padding: 2%;
background-color: #ffc107;
border-radius: 8px;
}
.main-header{
display: flex;
width: 100%;
justify-content: space-between;
align-items:center ;
}
.main-title {
font-size: 20px;
}
.main-arrow{
font-size: 24px;
}
.back, .next {
cursor: pointer;
}
.back:hover, .next:hover{
color: antiquewhite;
}
.highlight-wrapper{
width: 100%;
display: flex;
padding: 1%;
border-radius: 8px;
gap: 1.5rem;
overflow-x: hidden;
}
.highlight-card{
display: flex;
flex-direction: row;
min-width: 200px;
width: 80%;
height: 100%;
gap: 1rem;
border-radius: 8px;
padding: 1%;
background-color: white;
cursor: pointer;
}
.highlight-img{
width: 50px;
height: 50px;
border-radius: 8px;
object-fit: cover;
object-position: center;
}
.highlight-desc h4{
color: black;
font-size: 18px;
}
.highlight-desc p{
color: black;
font-size: 13px;
}
.highlight-card:hover{
background-color: white;
box-shadow: rgba(176, 176, 176, 0.2) 0px 2px 8px 0px;
}
.main-menus{
min-height: 100%;
background-color: whitesmoke;
padding: 2%;
border-radius: 8px;
}
.main-filter{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
margin: 1.5rem;
gap: 1rem;
}
.back-menus, .next-menus{
cursor: pointer;
}
.back-menus:hover, .next-menus:hover{
color:#ffc107;
}
.filter-wrapper{
display: flex;
justify-content: flex-start;
overflow-x: hidden;
width: 100%;
height: 100px;
gap:1.2rem;
}
.filter-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
min-width: 80px;
height: 100%;
background-color: white;
color: black;
border-radius: 8px;
border: 1px solid #ffc107;
font-size: 14px;
cursor: pointer;
}
.filter-icon{
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 50%;
font-size: 30px;
background-color: #ffc107;
color: black;
border-radius: 8px;
}
.filter-card:hover{
background-color: #FFA500;
color: white;
}
.filter-card:hover .filter-icon{
background-color: white;
}
.divider{
margin: 1rem 0;
height: 1px;
width: 100%;
background-color: #ffc107;
}
.main-detail{
margin: 1rem 0 1.5rem 0;
}
.detail-wrapper{
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 100%;
margin-top: 1rem;
gap: 2%;
border-radius: 8px;
}
.detail-card{
min-height: 280px;
height: 100%;
background-color: white;
border-radius: 8px;
margin: 1% 0;
box-shadow: rgba(176, 176, 176, 0.2) 0px 2px 8px 0px;
cursor: pointer;
}
.detail-img{
width: 100%;
height: 180px;
border-radius: 8px;
object-fit: cover;
object-position: center;
filter: brightness(0.8);
}
.detail-desc {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 3%;
width: 100%;
}
.detail-sub {
font-size: 12px;
columns: grey;
letter-spacing: 0.5;
margin: 1% 0;
}
.price{
color: #FFA500;
}
.detail-favorite{
font-size: 24px;
}
.detail-card:hover{
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.detail-card:hover .detail-img:hover{
filter: opacity(1);
}
.detail-card:hover .detail-name h4{
color:#FFA500
}
.detail-card:hover .price{
letter-spacing: 1.5;
}
/*mobile view*/
@media screen and (max-width: 640px){
.sidebar{
display: none;
}
.main{
margin-left: 0;
}
}
.menu-toggle{
display: block;
text-decoration: none;
font-size: 20px;
background-color: white;
color: #FFA500;
display: flex;
justify-content: center;
align-items: center;
padding: 0 10px;
height: 40px;
border-radius: 50%;
z-index: 3;
}
.sidebar.active{
display: flex;
z-index: 10;
}
Raw
restuarant.js
(() => {
document.addEventListener('DOMContentLoaded', async () => {
const restuarants = await fetchRestaurants();
renderRestaurants(restuarants);
});
async function fetchRestaurants() {
return Promise.resolve([
{
name: 'McDonalds',
description: 'Fast food',
price: '$20.00',
url: 'https://www.mcdonalds.com',
image: "images/shrimp-soup.jpeg"
},
{
name: 'Wendy\'s',
description: 'Fast food',
price: '$40.00',
url: 'https://www.wendys.com',
image: "images/burger.jpeg"
},
{
name: 'Weinerschnitzel',
description: 'Fast food',
price: '$25.00',
url: 'https://www.weinerschnitzel.com',
image: "images/shrimp-soup.jpeg"
}
]);
}
async function renderRestaurants(restaurants) {
// Get the wrapper so I can add new cards to it.
const restaurantContainer = document.querySelector('.detail-wrapper');
// Add a card for each restaurant.
restaurants.forEach(restaurant => {
const restaurantElement = document.createElement('div');
restaurantElement.classList.add('detail-card');
restaurantElement.innerHTML = `
<img class="detail-img" src="${restaurant.image}">
<div class="detail-desc">
<div class="detail-name">
<a href="${restaurant.url}"><h4>${restaurant.name}</h4></a>
<p class="detail-sub">${restaurant.description}</p>
<p class="price">${restaurant.price}</p>
</div>
<ion-icon class="detail-favorites" name="bookmark-outline"></ion-icon>
</div>
`;
restaurantElement.addEventListener('click', () => showMessage(restaurant.name));
restaurantContainer.appendChild(restaurantElement);
});
}
function showMessage(name) {
alert(`You clicked on ${name}`);
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment