MY FAST-FOOD WEBSITE BLOG

Dev.to is a great community for developers that can help make any project easier. Before diving into the code, it’s important to plan the structure of your fast food website. For mine, I focused on these essential components: Menu Section: Display food items, categories Contact Information: Give customers easy ways to contact the restaurant. I decided to use HTML, CSS, and Javascript for the designing of the webpage. Once all the features were in place, I deployed the website through GitHub for it to be live.` Below is the HTML code Fresh Fast-foods Website Fresh-Fast Foods App Welcome To Our Page Home About Menu Contact We Prepare and Deliver our Fresh Meals Have you ever wondered on how you could get fresh,hot,yummy and delicious food at the place of your own comfort?Well,you don't have to worry about that anymore!We prepare all kinds of foods depending on the orders made by our customers and deliver them to their workplaces,homeplaces or wherever they are currently located. About Us We are a group of local chefs that are trying to compete with the restaurant indusry as we believe we have the potential to do better. Our Menu Select a food category: Beef Chicken Vegetarian Seafood Pasta Contact Us Place your order here by dialing the number below 0732353764 / 0774506579 Thanks For Visiting Our Page! @2025 | FRESH FAST-FOODS | ALL RIGHTS RESERVED Below is the CSS code`body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: whitesmoke; } header { background-color: chocolate; padding: 20px; color: white; text-align: center; } header nav ul { list-style-type: none; padding: 0; } header nav ul li { display: inline; margin-right: 15px; } header nav ul li a { color: white; text-decoration: none; font-weight: bold; } home { text-align: center; } about { text-align: center; } menu { padding: 20px; text-align: center; } food-items { display: flex; justify-content: space-around; flex-wrap: wrap; } .food-item { background-color: white; border: 1px solid #ddd; margin: 10px; padding: 15px; width: 200px; text-align: center; border-radius: 8px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); } .food-item img { width: 100%; border-radius: 8px; } footer { background-color: grey; color: white; text-align: center; } Below is the Index.js codeconst API_URL = 'http://localhost:3000/foods'; function fetchFoodItems() { const category = document.getElementById('category').value; console.log(Fetching food items for category: ${category}); fetch(`${API_URL}?category=${category}`) .then(response => response.json()) .then(data => { console.log('Fetched food data:', data); const foodItemsContainer = document.getElementById('food-items'); foodItemsContainer.innerHTML = ''; if (data.length === 0) { foodItemsContainer.innerHTML = `No items found for this category.`; } else { data.forEach(food => { const foodItemDiv = document.createElement('div'); foodItemDiv.classList.add('food-item'); foodItemDiv.innerHTML = ` ${food.name} `; foodItemsContainer.appendChild(foodItemDiv); }); } }) .catch(error => { console.error('Error fetching food items:', error); }); } document.getElementById('category').addEventListener('change', fetchFoodItems); ` Below is the db.json code`{ "foods": [ { "id": 1, "name": "Beef Burger", "category": "Beef", "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyaMhdk3xX5HR_uLh5LY6FzKhaE138Xow6oA&s", "description": "A delicious beef burger." }, { "id": 2, "name": "Chicken Sandwich", "category": "Chicken", "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWHx2BO0NsPumEnOmQoJba0hSbKS4PdSYe-w&s", "description": "A tasty chicken sandwich." }, { "id": 3, "name": "Vegetarian Pizza", "category": "Vegetarian", "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzDXUJ38GqbEnLh0wJbXfEz2tV6thEpGHCdw&s", "description": "A fresh vegetarian pizza." }, { "id": 4, "name": "Shrimp Pasta", "category": "Seafood", "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTSWNdWIH2seFK8YJhwggcsCHkNGpYOMKuVw&s", "description": "A creamy shrimp pasta." }, { "id": 5, "name": "Grilled Salmon", "category": "Seafood", "image": "https://encrypted-tbn0.gstatic.com/i

Mar 27, 2025 - 17:04

Dev.to is a great community for developers that can help make any project easier.

Before diving into the code, it’s important to plan the structure of your fast food website. For mine, I focused on these essential components:

Menu Section: Display food items, categories
Contact Information: Give customers easy ways to contact the restaurant.

I decided to use HTML, CSS, and Javascript for the designing of the webpage.

Once all the features were in place, I deployed the website through GitHub for it to be live.`

Below is the HTML code

Fresh Fast-foods Website

Fresh-Fast Foods App

Welcome To Our Page

Home
About
Menu
Contact

We Prepare and Deliver our Fresh Meals

Have you ever wondered on how you could get fresh,hot,yummy and delicious food at the place of your own comfort?Well,you don't have to worry about that anymore!We prepare all kinds of foods depending on the orders made by our customers and deliver them to their workplaces,homeplaces or wherever they are currently located.

About Us

We are a group of local chefs that are trying to compete with the restaurant indusry as we believe we have the potential to do better.

Our Menu

Select a food category: Beef Chicken Vegetarian Seafood Pasta


    Contact Us
    Place your order here by dialing the number below
    
0732353764 / 0774506579

Below is the CSS code`body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: whitesmoke;
}

header {
background-color: chocolate;
padding: 20px;
color: white;
text-align: center;
}

header nav ul {
list-style-type: none;
padding: 0;
}

header nav ul li {
display: inline;
margin-right: 15px;
}

header nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}

home {

text-align: center;

}

about {

text-align: center;

}

menu {

padding: 20px;
text-align: center;

}

food-items {

display: flex;
justify-content: space-around;
flex-wrap: wrap;

}

.food-item {
background-color: white;
border: 1px solid #ddd;
margin: 10px;
padding: 15px;
width: 200px;
text-align: center;
border-radius: 8px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.food-item img {
width: 100%;
border-radius: 8px;
}

footer {
background-color: grey;
color: white;
text-align: center;

}
Below is the Index.js codeconst API_URL = 'http://localhost:3000/foods';

function fetchFoodItems() {
const category = document.getElementById('category').value;
console.log(Fetching food items for category: ${category});

fetch(`${API_URL}?category=${category}`)
    .then(response => response.json())
    .then(data => {
        console.log('Fetched food data:', data);  
        const foodItemsContainer = document.getElementById('food-items');
        foodItemsContainer.innerHTML = '';
        if (data.length === 0) {
            foodItemsContainer.innerHTML = `No items found for this category.`;
        } else {
            data.forEach(food => {
                const foodItemDiv = document.createElement('div');
                foodItemDiv.classList.add('food-item');
                foodItemDiv.innerHTML = `
                    
                    
${food.name}
                `;
                foodItemsContainer.appendChild(foodItemDiv);
            });
        }
    })
    .catch(error => {
        console.error('Error fetching food items:', error);
    });

}

document.getElementById('category').addEventListener('change', fetchFoodItems);

Below is the db.json code`{
"foods": [
{
"id": 1,
"name": "Beef Burger",
"category": "Beef",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSyaMhdk3xX5HR_uLh5LY6FzKhaE138Xow6oA&s",
"description": "A delicious beef burger."
},
{
"id": 2,
"name": "Chicken Sandwich",
"category": "Chicken",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWHx2BO0NsPumEnOmQoJba0hSbKS4PdSYe-w&s",
"description": "A tasty chicken sandwich."
},
{
"id": 3,
"name": "Vegetarian Pizza",
"category": "Vegetarian",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzDXUJ38GqbEnLh0wJbXfEz2tV6thEpGHCdw&s",
"description": "A fresh vegetarian pizza."
},

{
  "id": 4,
  "name": "Shrimp Pasta",
  "category": "Seafood",
  "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTSWNdWIH2seFK8YJhwggcsCHkNGpYOMKuVw&s",
  "description": "A creamy shrimp pasta."
},
{
  "id": 5,
  "name": "Grilled Salmon",
  "category": "Seafood",
  "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1EMVBqSZJkKeVkyNP6vEXwYDTp_bhGsjRzA&s",
  "description": "Grilled salmon with fresh herbs."
},
{
  "id": 6,
  "name": "Penne Arrabbiata",
  "category": "Pasta",
  "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT25Trkh6444t3HiaaoDfJrxEh2kMncLXq5sA&s",
  "description": "Penne pasta in a spicy tomato sauce."
},
{
  "id": 7,
  "name": "Lasagna",
  "category": "Pasta",
  "image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRJblMsAcqpr1tf8JYIwiRVoJwx1L_GwnZqVw&s",
  "description": "Classic Italian lasagna."
}

]
}
`