Refactor code structure for improved readability and maintainability
Elyes
BIN
public/Cow_Eats_Cheeseburger_in_Netherlands.mp4
Normal file
|
Before Width: | Height: | Size: 911 KiB |
|
Before Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 15 KiB |
BIN
public/favicon.png
Normal file
|
After Width: | Height: | Size: 150 KiB |
BIN
public/krabsburger.png
Normal file
|
After Width: | Height: | Size: 1.5 MiB |
BIN
public/rindburger.png
Normal file
|
After Width: | Height: | Size: 1.6 MiB |
BIN
public/veggieburger.png
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
@@ -6,9 +6,9 @@ import { Injectable } from '@angular/core';
|
|||||||
export class Products {
|
export class Products {
|
||||||
getProductList() {
|
getProductList() {
|
||||||
return [
|
return [
|
||||||
{ id: 1, name: 'Rindburger', price: 14.95, img: '/burger.webp' },
|
{ id: 1, name: 'Rindburger', price: 14.95, img: '/rindburger.png' },
|
||||||
{ id: 2, name: 'Pouletburger', price: 16.95, img: '/burger.webp' },
|
{ id: 2, name: 'Pouletburger', price: 16.95, img: '/krabsburger.png' },
|
||||||
{ id: 3, name: 'Veggieburger', price: 20.95, img: '/burgerveggie.png' },
|
{ id: 3, name: 'Veggieburger', price: 20.95, img: '/veggieburger.png' },
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +1,7 @@
|
|||||||
|
<div class="navbar">
|
||||||
|
<img src="/favicon.png" alt="Logo">
|
||||||
|
<h1>Burgers</h1>
|
||||||
|
</div>
|
||||||
<div class="products">
|
<div class="products">
|
||||||
|
|
||||||
@for (item of productList; track $index) {
|
@for (item of productList; track $index) {
|
||||||
|
|||||||
@@ -1,3 +1,19 @@
|
|||||||
|
.navbar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #333;
|
||||||
|
border-bottom: #333 2px solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.products {
|
.products {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@@ -8,6 +24,6 @@
|
|||||||
|
|
||||||
sdx-card {
|
sdx-card {
|
||||||
height: auto;
|
height: auto;
|
||||||
width: 75%;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
<title>Burgerladen</title>
|
<title>Burgerladen</title>
|
||||||
<base href="/">
|
<base href="/">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
<link rel="icon" type="image/x-icon" href="favicon.png">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="sdx">
|
<body class="sdx">
|
||||||
|
|||||||