diff --git a/src/app/app.component.html b/src/app/app.component.html index 36093e1..0a4efe3 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,336 +1,5 @@ - - - - - - - - + - - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - - +
+ +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index cd53e73..e7b055e 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,11 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import {TopBarComponent} from './top-bar/top-bar.component'; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet], + imports: [RouterOutlet, TopBarComponent], templateUrl: './app.component.html', styleUrl: './app.component.css' }) diff --git a/src/app/app.config.ts b/src/app/app.config.ts index a1e7d6f..c778438 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,6 +1,5 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; - import { routes } from './app.routes'; export const appConfig: ApplicationConfig = { diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index dc39edb..6aeb858 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,3 +1,6 @@ import { Routes } from '@angular/router'; +import {ProductListComponent} from './product-list/product-list.component'; -export const routes: Routes = []; +export const routes: Routes = [ + { path: '', component: ProductListComponent }, +]; diff --git a/src/app/product-list/product-list.component.css b/src/app/product-list/product-list.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/product-list/product-list.component.html b/src/app/product-list/product-list.component.html new file mode 100644 index 0000000..1007667 --- /dev/null +++ b/src/app/product-list/product-list.component.html @@ -0,0 +1 @@ +

Products

diff --git a/src/app/product-list/product-list.component.spec.ts b/src/app/product-list/product-list.component.spec.ts new file mode 100644 index 0000000..dbd54fb --- /dev/null +++ b/src/app/product-list/product-list.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProductListComponent } from './product-list.component'; + +describe('ProductListComponent', () => { + let component: ProductListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ProductListComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ProductListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/product-list/product-list.component.ts b/src/app/product-list/product-list.component.ts new file mode 100644 index 0000000..5bfe608 --- /dev/null +++ b/src/app/product-list/product-list.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; +import { products } from '../products'; + +@Component({ + selector: 'app-product-list', + standalone: true, + imports: [], + templateUrl: './product-list.component.html', + styleUrl: './product-list.component.css' +}) +export class ProductListComponent { + products = [...products]; + + share() { + window.alert('The product has been shared!'); + } +} diff --git a/src/app/products.ts b/src/app/products.ts new file mode 100644 index 0000000..1bd45bd --- /dev/null +++ b/src/app/products.ts @@ -0,0 +1,27 @@ +export interface Product { + id: number; + name: string; + price: number; + description: string; +} + +export const products = [ + { + id: 1, + name: 'Phone XL', + price: 799, + description: 'A large phone with one of the best screens' + }, + { + id: 2, + name: 'Phone Mini', + price: 699, + description: 'A great phone with one of the best cameras' + }, + { + id: 3, + name: 'Phone Standard', + price: 299, + description: '' + } +]; diff --git a/src/app/top-bar/top-bar.component.css b/src/app/top-bar/top-bar.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/top-bar/top-bar.component.html b/src/app/top-bar/top-bar.component.html new file mode 100644 index 0000000..86bbf82 --- /dev/null +++ b/src/app/top-bar/top-bar.component.html @@ -0,0 +1,5 @@ + +

My Store

+ + +shopping_cartCheckout diff --git a/src/app/top-bar/top-bar.component.spec.ts b/src/app/top-bar/top-bar.component.spec.ts new file mode 100644 index 0000000..c805394 --- /dev/null +++ b/src/app/top-bar/top-bar.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TopBarComponent } from './top-bar.component'; + +describe('TopBarComponent', () => { + let component: TopBarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [TopBarComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(TopBarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/top-bar/top-bar.component.ts b/src/app/top-bar/top-bar.component.ts new file mode 100644 index 0000000..7e97a68 --- /dev/null +++ b/src/app/top-bar/top-bar.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; +import {RouterLink} from '@angular/router'; + +@Component({ + selector: 'app-top-bar', + standalone: true, + imports: [ + RouterLink + ], + templateUrl: './top-bar.component.html', + styleUrl: './top-bar.component.css' +}) +export class TopBarComponent { + +} diff --git a/src/assets/shipping.json b/src/assets/shipping.json new file mode 100644 index 0000000..d8390c4 --- /dev/null +++ b/src/assets/shipping.json @@ -0,0 +1,14 @@ +[ + { + "type": "Overnight", + "price": 25.99 + }, + { + "type": "2-Day", + "price": 9.99 + }, + { + "type": "Postal", + "price": 2.99 + } +] diff --git a/src/index.html b/src/index.html index ab51dce..7dbfcda 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,18 @@ - + - - OnlineShop - - - + + Angular Getting Started + + + + + - + diff --git a/src/styles.css b/src/styles.css index 90d4ee0..f7abf45 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1 +1,145 @@ -/* You can add global styles to this file, and also import other style files */ +/* Global Styles */ + +* { + font-family: 'Roboto', Arial, sans-serif; + color: #616161; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + margin: 0; +} + +.container { + display: flex; + flex-direction: row; +} + +router-outlet + * { + padding: 0 16px; +} + +/* Text */ + +h1 { + font-size: 32px; +} + +h2 { + font-size: 20px; +} + +h1, h2 { + font-weight: lighter; +} + +p { + font-size: 14px; +} + +/* Hyperlink */ + +a { + cursor: pointer; + color: #1976d2; + text-decoration: none; +} + +a:hover { + opacity: 0.8; +} + +/* Input */ + +input { + font-size: 14px; + border-radius: 2px; + padding: 8px; + margin-bottom: 16px; + border: 1px solid #BDBDBD; +} + +label { + font-size: 12px; + font-weight: bold; + margin-bottom: 4px; + display: block; + text-transform: uppercase; +} + +/* Button */ +.button, button { + display: inline-flex; + align-items: center; + padding: 8px 16px; + border-radius: 2px; + font-size: 14px; + cursor: pointer; + background-color: #1976d2; + color: white; + border: none; +} + +.button:hover, button:hover { + opacity: 0.8; + font-weight: normal; +} + +.button:disabled, button:disabled { + opacity: 0.5; + cursor: auto; +} + +/* Fancy Button */ + +.fancy-button { + background-color: white; + color: #1976d2; +} + +.fancy-button i.material-icons { + color: #1976d2; + padding-right: 4px; +} + +/* Top Bar */ + +app-top-bar { + width: 100%; + height: 68px; + background-color: #1976d2; + padding: 16px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +app-top-bar h1 { + color: white; + margin: 0; +} + +/* Checkout Cart, Shipping Prices */ + +.cart-item, .shipping-item { + width: 100%; + min-width: 400px; + max-width: 450px; + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 16px 32px; + margin-bottom: 8px; + border-radius: 2px; + background-color: #EEEEEE; +} + + +/* +Copyright Google LLC. All Rights Reserved. +Use of this source code is governed by an MIT-style license that +can be found in the LICENSE file at https://angular.io/license +*/