From d4cabf8ce816e15348538b0311fb84afc880f8b9 Mon Sep 17 00:00:00 2001 From: erika-hortencia Date: Thu, 3 Apr 2025 19:34:58 -0300 Subject: [PATCH 1/3] Components created --- angular-blog/src/app/app.component.html | 337 +----------------- angular-blog/src/app/app.component.spec.ts | 29 -- .../big-card/big-card.component.css | 0 .../big-card/big-card.component.html | 1 + .../components/big-card/big-card.component.ts | 11 + .../menu-bar/menu-bar.component.css | 0 .../menu-bar/menu-bar.component.html | 1 + .../components/menu-bar/menu-bar.component.ts | 11 + .../menu-title/menu-title.component.css | 0 .../menu-title/menu-title.component.html | 1 + .../menu-title/menu-title.component.ts | 11 + .../small-card/small-card.component.css | 0 .../small-card/small-card.component.html | 1 + .../small-card/small-card.component.ts | 11 + angular-blog/src/styles.css | 6 + 15 files changed, 55 insertions(+), 365 deletions(-) delete mode 100644 angular-blog/src/app/app.component.spec.ts create mode 100644 angular-blog/src/app/components/big-card/big-card.component.css create mode 100644 angular-blog/src/app/components/big-card/big-card.component.html create mode 100644 angular-blog/src/app/components/big-card/big-card.component.ts create mode 100644 angular-blog/src/app/components/menu-bar/menu-bar.component.css create mode 100644 angular-blog/src/app/components/menu-bar/menu-bar.component.html create mode 100644 angular-blog/src/app/components/menu-bar/menu-bar.component.ts create mode 100644 angular-blog/src/app/components/menu-title/menu-title.component.css create mode 100644 angular-blog/src/app/components/menu-title/menu-title.component.html create mode 100644 angular-blog/src/app/components/menu-title/menu-title.component.ts create mode 100644 angular-blog/src/app/components/small-card/small-card.component.css create mode 100644 angular-blog/src/app/components/small-card/small-card.component.html create mode 100644 angular-blog/src/app/components/small-card/small-card.component.ts diff --git a/angular-blog/src/app/app.component.html b/angular-blog/src/app/app.component.html index 36093e1..0680b43 100644 --- a/angular-blog/src/app/app.component.html +++ b/angular-blog/src/app/app.component.html @@ -1,336 +1 @@ - - - - - - - - - - - -
-
-
- -

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/angular-blog/src/app/app.component.spec.ts b/angular-blog/src/app/app.component.spec.ts deleted file mode 100644 index 8607126..0000000 --- a/angular-blog/src/app/app.component.spec.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [AppComponent], - }).compileComponents(); - }); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should have the 'angular-blog' title`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('angular-blog'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-blog'); - }); -}); diff --git a/angular-blog/src/app/components/big-card/big-card.component.css b/angular-blog/src/app/components/big-card/big-card.component.css new file mode 100644 index 0000000..e69de29 diff --git a/angular-blog/src/app/components/big-card/big-card.component.html b/angular-blog/src/app/components/big-card/big-card.component.html new file mode 100644 index 0000000..c2c639e --- /dev/null +++ b/angular-blog/src/app/components/big-card/big-card.component.html @@ -0,0 +1 @@ +

big-card works!

diff --git a/angular-blog/src/app/components/big-card/big-card.component.ts b/angular-blog/src/app/components/big-card/big-card.component.ts new file mode 100644 index 0000000..f2864e2 --- /dev/null +++ b/angular-blog/src/app/components/big-card/big-card.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-big-card', + imports: [], + templateUrl: './big-card.component.html', + styleUrl: './big-card.component.css' +}) +export class BigCardComponent { + +} diff --git a/angular-blog/src/app/components/menu-bar/menu-bar.component.css b/angular-blog/src/app/components/menu-bar/menu-bar.component.css new file mode 100644 index 0000000..e69de29 diff --git a/angular-blog/src/app/components/menu-bar/menu-bar.component.html b/angular-blog/src/app/components/menu-bar/menu-bar.component.html new file mode 100644 index 0000000..c4298a8 --- /dev/null +++ b/angular-blog/src/app/components/menu-bar/menu-bar.component.html @@ -0,0 +1 @@ +

menu-bar works!

diff --git a/angular-blog/src/app/components/menu-bar/menu-bar.component.ts b/angular-blog/src/app/components/menu-bar/menu-bar.component.ts new file mode 100644 index 0000000..e200d14 --- /dev/null +++ b/angular-blog/src/app/components/menu-bar/menu-bar.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-menu-bar', + imports: [], + templateUrl: './menu-bar.component.html', + styleUrl: './menu-bar.component.css' +}) +export class MenuBarComponent { + +} diff --git a/angular-blog/src/app/components/menu-title/menu-title.component.css b/angular-blog/src/app/components/menu-title/menu-title.component.css new file mode 100644 index 0000000..e69de29 diff --git a/angular-blog/src/app/components/menu-title/menu-title.component.html b/angular-blog/src/app/components/menu-title/menu-title.component.html new file mode 100644 index 0000000..874394f --- /dev/null +++ b/angular-blog/src/app/components/menu-title/menu-title.component.html @@ -0,0 +1 @@ +

menu-title works!

diff --git a/angular-blog/src/app/components/menu-title/menu-title.component.ts b/angular-blog/src/app/components/menu-title/menu-title.component.ts new file mode 100644 index 0000000..284070f --- /dev/null +++ b/angular-blog/src/app/components/menu-title/menu-title.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-menu-title', + imports: [], + templateUrl: './menu-title.component.html', + styleUrl: './menu-title.component.css' +}) +export class MenuTitleComponent { + +} diff --git a/angular-blog/src/app/components/small-card/small-card.component.css b/angular-blog/src/app/components/small-card/small-card.component.css new file mode 100644 index 0000000..e69de29 diff --git a/angular-blog/src/app/components/small-card/small-card.component.html b/angular-blog/src/app/components/small-card/small-card.component.html new file mode 100644 index 0000000..ecfbaab --- /dev/null +++ b/angular-blog/src/app/components/small-card/small-card.component.html @@ -0,0 +1 @@ +

small-card works!

diff --git a/angular-blog/src/app/components/small-card/small-card.component.ts b/angular-blog/src/app/components/small-card/small-card.component.ts new file mode 100644 index 0000000..6ef185e --- /dev/null +++ b/angular-blog/src/app/components/small-card/small-card.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-small-card', + imports: [], + templateUrl: './small-card.component.html', + styleUrl: './small-card.component.css' +}) +export class SmallCardComponent { + +} diff --git a/angular-blog/src/styles.css b/angular-blog/src/styles.css index 90d4ee0..698649d 100644 --- a/angular-blog/src/styles.css +++ b/angular-blog/src/styles.css @@ -1 +1,7 @@ /* You can add global styles to this file, and also import other style files */ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + background-color: blueviolet; +} \ No newline at end of file From beddc5da1697126a99010377884fc72166e4201e Mon Sep 17 00:00:00 2001 From: erika-hortencia Date: Thu, 3 Apr 2025 19:36:06 -0300 Subject: [PATCH 2/3] Update gitignore --- .gitignore | 57 ++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 38 insertions(+), 19 deletions(-) diff --git a/.gitignore b/.gitignore index 524f096..50b67e6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,24 +1,43 @@ -# Compiled class file -*.class +/.ideas -# Log file -*.log +# Compiled output +/dist +/tmp +/out-tsc +/bazel-out -# BlueJ files -*.ctxt +# Node +/node_modules -# Mobile Tools for Java (J2ME) -.mtj.tmp/ +npm-debug.log +yarn-error.log -# Package Files # -*.jar -*.war -*.nar -*.ear -*.zip -*.tar.gz -*.rar +# IDEs and editors +.idea/ +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace -# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml -hs_err_pid* -replay_pid* +# Visual Studio Code +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +.history/* + +# Miscellaneous +/.angular/cache +.sass-cache/ +/connect.lock +/coverage +/libpeerconnection.log +testem.log +/typings + +# System files +.DS_Store +Thumbs.db \ No newline at end of file From b7d226474a944971691a7c6cd430fc34cf9f480f Mon Sep 17 00:00:00 2001 From: erika-hortencia Date: Thu, 3 Apr 2025 21:54:12 -0300 Subject: [PATCH 3/3] Components created --- angular-blog/src/app/app.component.html | 1 + angular-blog/src/app/app.component.ts | 3 ++- .../big-card/big-card.component.css | 26 +++++++++++++++++++ .../big-card/big-card.component.html | 20 +++++++++++++- .../menu-title/menu-title.component.css | 18 +++++++++++++ .../menu-title/menu-title.component.html | 6 ++++- .../menu-title/menu-title.component.ts | 13 ++++++---- .../small-card/small-card.component.ts | 3 +-- .../src/app/pages/home/home.component.css | 0 .../src/app/pages/home/home.component.html | 9 +++++++ .../src/app/pages/home/home.component.ts | 13 ++++++++++ angular-blog/src/styles.css | 4 ++- 12 files changed, 105 insertions(+), 11 deletions(-) create mode 100644 angular-blog/src/app/pages/home/home.component.css create mode 100644 angular-blog/src/app/pages/home/home.component.html create mode 100644 angular-blog/src/app/pages/home/home.component.ts diff --git a/angular-blog/src/app/app.component.html b/angular-blog/src/app/app.component.html index 0680b43..6697b29 100644 --- a/angular-blog/src/app/app.component.html +++ b/angular-blog/src/app/app.component.html @@ -1 +1,2 @@ + diff --git a/angular-blog/src/app/app.component.ts b/angular-blog/src/app/app.component.ts index fa68d83..331eb47 100644 --- a/angular-blog/src/app/app.component.ts +++ b/angular-blog/src/app/app.component.ts @@ -1,9 +1,10 @@ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; +import { HomeComponent } from './pages/home/home.component'; @Component({ selector: 'app-root', - imports: [RouterOutlet], + imports: [RouterOutlet, HomeComponent], templateUrl: './app.component.html', styleUrl: './app.component.css' }) diff --git a/angular-blog/src/app/components/big-card/big-card.component.css b/angular-blog/src/app/components/big-card/big-card.component.css index e69de29..bf13361 100644 --- a/angular-blog/src/app/components/big-card/big-card.component.css +++ b/angular-blog/src/app/components/big-card/big-card.component.css @@ -0,0 +1,26 @@ +.container__big-card{ + border: solid white 2px; + width: 453px; + height: 750px; + margin-left: 10px; + margin-right: 10px; + + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; +} + +.big-card__title > h1{ + font-size: 40px; + margin-top: 15px; +} + +.big-card__description > p{ + color: grey; + margin-top: 10px; +} + +.big-card__image{ + width: 453px; +} \ No newline at end of file diff --git a/angular-blog/src/app/components/big-card/big-card.component.html b/angular-blog/src/app/components/big-card/big-card.component.html index c2c639e..f41873c 100644 --- a/angular-blog/src/app/components/big-card/big-card.component.html +++ b/angular-blog/src/app/components/big-card/big-card.component.html @@ -1 +1,19 @@ -

big-card works!

+
+
+ +
+
+

News:

+
+
+

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

+
+
\ No newline at end of file diff --git a/angular-blog/src/app/components/menu-title/menu-title.component.css b/angular-blog/src/app/components/menu-title/menu-title.component.css index e69de29..1fd1ea2 100644 --- a/angular-blog/src/app/components/menu-title/menu-title.component.css +++ b/angular-blog/src/app/components/menu-title/menu-title.component.css @@ -0,0 +1,18 @@ +.container__menu-title{ + color: white; +} + +.container__menu-title > h1 { + margin-top: 10px; + margin-bottom: 10px; + font-size: 150px; + font-weight: bolder; + font-family:'Trebuchet MS'; + display: flex; + justify-content: center; +} + +.container__menu-title > hr { + margin-top: 5px; + margin-bottom: 5px; +} \ No newline at end of file diff --git a/angular-blog/src/app/components/menu-title/menu-title.component.html b/angular-blog/src/app/components/menu-title/menu-title.component.html index 874394f..dfee167 100644 --- a/angular-blog/src/app/components/menu-title/menu-title.component.html +++ b/angular-blog/src/app/components/menu-title/menu-title.component.html @@ -1 +1,5 @@ -

menu-title works!

+
+
+

TESTING 1,2,3...

+
+
\ No newline at end of file diff --git a/angular-blog/src/app/components/menu-title/menu-title.component.ts b/angular-blog/src/app/components/menu-title/menu-title.component.ts index 284070f..4169c0d 100644 --- a/angular-blog/src/app/components/menu-title/menu-title.component.ts +++ b/angular-blog/src/app/components/menu-title/menu-title.component.ts @@ -1,11 +1,14 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-menu-title', - imports: [], - templateUrl: './menu-title.component.html', - styleUrl: './menu-title.component.css' + templateUrl: './menu-title.component.html', + styleUrls: ['./menu-title.component.css'] }) -export class MenuTitleComponent { +export class MenuTitleComponent implements OnInit{ + nconstructor() { } + + ngOnInit(): void { + } } diff --git a/angular-blog/src/app/components/small-card/small-card.component.ts b/angular-blog/src/app/components/small-card/small-card.component.ts index 6ef185e..3399b66 100644 --- a/angular-blog/src/app/components/small-card/small-card.component.ts +++ b/angular-blog/src/app/components/small-card/small-card.component.ts @@ -2,9 +2,8 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-small-card', - imports: [], templateUrl: './small-card.component.html', - styleUrl: './small-card.component.css' + styleUrls: ['./small-card.component.css'] }) export class SmallCardComponent { diff --git a/angular-blog/src/app/pages/home/home.component.css b/angular-blog/src/app/pages/home/home.component.css new file mode 100644 index 0000000..e69de29 diff --git a/angular-blog/src/app/pages/home/home.component.html b/angular-blog/src/app/pages/home/home.component.html new file mode 100644 index 0000000..4d270aa --- /dev/null +++ b/angular-blog/src/app/pages/home/home.component.html @@ -0,0 +1,9 @@ + +
+
+ +
+
+ +
+
\ No newline at end of file diff --git a/angular-blog/src/app/pages/home/home.component.ts b/angular-blog/src/app/pages/home/home.component.ts new file mode 100644 index 0000000..14209d4 --- /dev/null +++ b/angular-blog/src/app/pages/home/home.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { MenuTitleComponent } from '../../components/menu-title/menu-title.component'; +import { BigCardComponent } from '../../components/big-card/big-card.component'; + +@Component({ + selector: 'app-home', + imports: [MenuTitleComponent, BigCardComponent], + templateUrl: './home.component.html', + styleUrl: './home.component.css' +}) +export class HomeComponent { + +} diff --git a/angular-blog/src/styles.css b/angular-blog/src/styles.css index 698649d..340f6c4 100644 --- a/angular-blog/src/styles.css +++ b/angular-blog/src/styles.css @@ -3,5 +3,7 @@ margin: 0; padding: 0; box-sizing: border-box; - background-color: blueviolet; + background-color:midnightblue; + color: white; + font-family:'Trebuchet MS'; } \ No newline at end of file