From 0c4b9aceb08021e394b54a83b71e9ab84f636a40 Mon Sep 17 00:00:00 2001 From: jgiroso Date: Wed, 25 Aug 2021 19:07:27 -0400 Subject: [PATCH 01/11] styled login page --- package-lock.json | 22 ++++++++--------- package.json | 2 +- src/app/app.component.ts | 2 +- src/app/components/login/login.component.css | 24 ++++++++++++++++++- src/app/components/login/login.component.html | 5 +++- 5 files changed, 40 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index 37097a9..8da3987 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3192,12 +3192,12 @@ "dev": true }, "core-js-compat": { - "version": "3.16.2", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.16.2.tgz", - "integrity": "sha512-4lUshXtBXsdmp8cDWh6KKiHUg40AjiuPD3bOWkNVsr1xkAhpUqCjaZ8lB1bKx9Gb5fXcbRbFJ4f4qpRIRTuJqQ==", + "version": "3.16.3", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.16.3.tgz", + "integrity": "sha512-A/OtSfSJQKLAFRVd4V0m6Sep9lPdjD8bpN8v3tCCGwE0Tmh0hOiVDm9tw6mXmWOKOSZIyr3EkywPo84cJjGvIQ==", "dev": true, "requires": { - "browserslist": "^4.16.7", + "browserslist": "^4.16.8", "semver": "7.0.0" }, "dependencies": { @@ -6974,9 +6974,9 @@ } }, "needle": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/needle/-/needle-2.8.0.tgz", - "integrity": "sha512-ZTq6WYkN/3782H1393me3utVYdq2XyqNUFBsprEE3VMAT0+hP/cItpnITpqsY6ep2yeFE4Tqtqwc74VqUlUYtw==", + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/needle/-/needle-2.9.0.tgz", + "integrity": "sha512-UBLC4P8w9to3rAhWOQYXIXzTUio9yVnDzIeKxfGbF+Hngy+2bXTqqFK+6nF42EAQKfJdezXK6vzMsefUa1Y3ag==", "dev": true, "optional": true, "requires": { @@ -10326,9 +10326,9 @@ } }, "sockjs-client": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.5.1.tgz", - "integrity": "sha512-VnVAb663fosipI/m6pqRXakEOw7nvd7TUgdr3PlR/8V2I95QIdwT8L4nMxhyU8SmDBHYXU1TOElaKOmKLfYzeQ==", + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.5.2.tgz", + "integrity": "sha512-ZzRxPBISQE7RpzlH4tKJMQbHM9pabHluk0WBaxAQ+wm/UieeBVBou0p4wVnSQGN9QmpAZygQ0cDIypWuqOFmFQ==", "dev": true, "requires": { "debug": "^3.2.6", @@ -10336,7 +10336,7 @@ "faye-websocket": "^0.11.3", "inherits": "^2.0.4", "json3": "^3.3.3", - "url-parse": "^1.5.1" + "url-parse": "^1.5.3" }, "dependencies": { "debug": { diff --git a/package.json b/package.json index 64edb14..a702142 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "zone.js": "~0.11.4" }, "devDependencies": { - "@angular-devkit/build-angular": "~12.2.2", + "@angular-devkit/build-angular": "^12.2.2", "@angular/cli": "~12.2.2", "@angular/compiler-cli": "~12.2.0", "@types/jasmine": "~3.8.0", diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 3fa2be5..d413351 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -21,7 +21,7 @@ export class AppComponent implements OnInit, AfterViewInit{ } ngAfterViewInit(){ - this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = "#C0CFEA"; + this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = "#7ea381"; } // public getEmployees(): void { diff --git a/src/app/components/login/login.component.css b/src/app/components/login/login.component.css index 501eff4..563273d 100644 --- a/src/app/components/login/login.component.css +++ b/src/app/components/login/login.component.css @@ -3,18 +3,40 @@ src: url(http://fonts.cdnfonts.com/css/liberation-sans) format("truetype"); } +html { + max-height: fit-content; +} + +body { + height: 70vh; + margin-top: 3%; + margin-bottom: 3%; + margin-left: -1%; + margin-right: -1%; + padding-top: 3%; + padding-bottom: 3%; + background-image: url(https://c.stocksy.com/a/QDR400/z9/1057932.jpg); + background-size: cover; +} + .loginForm { + color: rgb(250, 253, 237); text-align: center; margin-top:5% } h1 { text-align: center; - margin-top:20%; + margin-top: 8%; + color: rgb(250, 253, 237); + font-size: 600%; font-family: 'Liberation Sans', sans-serif; + text-shadow: 0px 0px 20px black; } label{ + color: rgb(250, 253, 237); + text-shadow: 0px 0px 20px black; position: relative; right: 2%; } \ No newline at end of file diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index cda5cda..f891f8a 100644 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -1,4 +1,5 @@ -

Food Blog

+ +

Food Blog


@@ -8,3 +9,5 @@

Food Blog

+ + From c5e546d90155e2d538d086df5d73a6b7d5e14b65 Mon Sep 17 00:00:00 2001 From: rfitz1995 Date: Wed, 25 Aug 2021 20:16:37 -0400 Subject: [PATCH 02/11] added header html --- src/app/components/header/header.component.css | 7 +++++++ src/app/components/header/header.component.html | 11 ++++++++++- src/app/components/header/header.component.ts | 1 + tsconfig.json | 2 +- 4 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/app/components/header/header.component.css b/src/app/components/header/header.component.css index e69de29..43f8514 100644 --- a/src/app/components/header/header.component.css +++ b/src/app/components/header/header.component.css @@ -0,0 +1,7 @@ +#navigation ul{ + list-style: none; +} + +#navigation li{ + display: inline; +} \ No newline at end of file diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index 4f5a95d..c3810d7 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -1 +1,10 @@ -

header works!

+
+

{{ title }}

+ +
\ No newline at end of file diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts index a093fe7..ef60175 100644 --- a/src/app/components/header/header.component.ts +++ b/src/app/components/header/header.component.ts @@ -6,6 +6,7 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./header.component.css'] }) export class HeaderComponent implements OnInit { +title: string = 'Food Blog'; constructor() { } diff --git a/tsconfig.json b/tsconfig.json index 12fb7bd..d22b443 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,7 +15,7 @@ "moduleResolution": "node", "importHelpers": true, "target": "es2017", - "module": "es2020", + "module": "es2015", "lib": [ "es2018", "dom" From f57f110e386d2e37b24b5e953073fee9fcbea1b4 Mon Sep 17 00:00:00 2001 From: jgiroso Date: Wed, 25 Aug 2021 20:24:45 -0400 Subject: [PATCH 03/11] changed fonts and name --- src/app/components/login/login.component.css | 20 ++++++------------- src/app/components/login/login.component.html | 5 ++++- 2 files changed, 10 insertions(+), 15 deletions(-) diff --git a/src/app/components/login/login.component.css b/src/app/components/login/login.component.css index 563273d..48a3bfd 100644 --- a/src/app/components/login/login.component.css +++ b/src/app/components/login/login.component.css @@ -1,12 +1,3 @@ -@font-face { - font-family: liberation-sans; - src: url(http://fonts.cdnfonts.com/css/liberation-sans) format("truetype"); - } - -html { - max-height: fit-content; -} - body { height: 70vh; margin-top: 3%; @@ -22,21 +13,22 @@ body { .loginForm { color: rgb(250, 253, 237); text-align: center; - margin-top:5% + margin-top: 4% } h1 { text-align: center; - margin-top: 8%; + margin-top: 9%; color: rgb(250, 253, 237); font-size: 600%; - font-family: 'Liberation Sans', sans-serif; - text-shadow: 0px 0px 20px black; + font-family: 'UnJamoBatang', sans-serif; + text-shadow: 0px -5px 20px black; } label{ color: rgb(250, 253, 237); - text-shadow: 0px 0px 20px black; + text-shadow: 0px 0px 10px black; + font-family: 'UnJamoBatang', sans-serif; position: relative; right: 2%; } \ No newline at end of file diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index f891f8a..fa608d1 100644 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -1,5 +1,8 @@ + -

Food Blog

+

Sublime Kitchen


From bd3b9d9bac9340d0dec55f72d930f604561839f9 Mon Sep 17 00:00:00 2001 From: Zach Date: Wed, 25 Aug 2021 20:34:27 -0400 Subject: [PATCH 04/11] Added base structure for About Us page, via generated about component --- src/app/app.component.html | 1 + src/app/app.module.ts | 4 ++- src/app/components/about/about.component.css | 0 src/app/components/about/about.component.html | 15 +++++++++++ .../components/about/about.component.spec.ts | 25 +++++++++++++++++++ src/app/components/about/about.component.ts | 15 +++++++++++ 6 files changed, 59 insertions(+), 1 deletion(-) create mode 100644 src/app/components/about/about.component.css create mode 100644 src/app/components/about/about.component.html create mode 100644 src/app/components/about/about.component.spec.ts create mode 100644 src/app/components/about/about.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 1b3c70a..7349e4c 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -4,3 +4,4 @@
{{recipe.instructions}}
--> + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e94dc4c..ef49286 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -9,6 +9,7 @@ import { RecipeComponent } from './components/recipe/recipe.component'; import { LoginComponent } from './components/login/login.component'; import { HeaderComponent } from './components/header/header.component'; import { RouterModule, Routes } from '@angular/router'; +import { AboutComponent } from './components/about/about.component'; const approutes: Routes = [ {path: '', component: AppComponent} @@ -20,7 +21,8 @@ const approutes: Routes = [ // EmployeeComponent, RecipeComponent, LoginComponent, - HeaderComponent + HeaderComponent, + AboutComponent ], imports: [ BrowserModule, diff --git a/src/app/components/about/about.component.css b/src/app/components/about/about.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/about/about.component.html b/src/app/components/about/about.component.html new file mode 100644 index 0000000..654c077 --- /dev/null +++ b/src/app/components/about/about.component.html @@ -0,0 +1,15 @@ +
+About us +
+
+

Sublime Kitchen was created in 2021.

+

Our blog is dedicated to bringing people who love food, together in one place.

+

However, not just anyone can create a Sublime Kitchen user account.

+

There is a strict vetting process, including a background check, an

+

assessment and one or more physical challenges.


+

Many have been killed, maimed or seriously injured in this process

+

Those that make it through, however can expect a friendly, cooking oriented

+

community, filled with people who love food, and cooking, working together

+

and sharing their kitchen secrets.


+
+ diff --git a/src/app/components/about/about.component.spec.ts b/src/app/components/about/about.component.spec.ts new file mode 100644 index 0000000..0e0d812 --- /dev/null +++ b/src/app/components/about/about.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AboutComponent } from './about.component'; + +describe('AboutComponent', () => { + let component: AboutComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AboutComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AboutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/about/about.component.ts b/src/app/components/about/about.component.ts new file mode 100644 index 0000000..e4ae6d9 --- /dev/null +++ b/src/app/components/about/about.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-about', + templateUrl: './about.component.html', + styleUrls: ['./about.component.css'] +}) +export class AboutComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} From 2039471246efebd7d7ef8736802397e61799a7a0 Mon Sep 17 00:00:00 2001 From: Zach Date: Wed, 25 Aug 2021 20:55:27 -0400 Subject: [PATCH 05/11] Added contact us page, including generated contact component --- src/app/app.component.html | 1 + src/app/app.module.ts | 4 ++- .../components/contact/contact.component.css | 0 .../components/contact/contact.component.html | 15 +++++++++++ .../contact/contact.component.spec.ts | 25 +++++++++++++++++++ .../components/contact/contact.component.ts | 15 +++++++++++ 6 files changed, 59 insertions(+), 1 deletion(-) create mode 100644 src/app/components/contact/contact.component.css create mode 100644 src/app/components/contact/contact.component.html create mode 100644 src/app/components/contact/contact.component.spec.ts create mode 100644 src/app/components/contact/contact.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 7349e4c..522f146 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -4,4 +4,5 @@
{{recipe.instructions}}
--> + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ef49286..fc2abd0 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -10,6 +10,7 @@ import { LoginComponent } from './components/login/login.component'; import { HeaderComponent } from './components/header/header.component'; import { RouterModule, Routes } from '@angular/router'; import { AboutComponent } from './components/about/about.component'; +import { ContactComponent } from './components/contact/contact.component'; const approutes: Routes = [ {path: '', component: AppComponent} @@ -22,7 +23,8 @@ const approutes: Routes = [ RecipeComponent, LoginComponent, HeaderComponent, - AboutComponent + AboutComponent, + ContactComponent ], imports: [ BrowserModule, diff --git a/src/app/components/contact/contact.component.css b/src/app/components/contact/contact.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/contact/contact.component.html b/src/app/components/contact/contact.component.html new file mode 100644 index 0000000..c1c1732 --- /dev/null +++ b/src/app/components/contact/contact.component.html @@ -0,0 +1,15 @@ +
+ Contact us +
+
+ +
+

+
+

+
+
+ + +
+ diff --git a/src/app/components/contact/contact.component.spec.ts b/src/app/components/contact/contact.component.spec.ts new file mode 100644 index 0000000..2f386db --- /dev/null +++ b/src/app/components/contact/contact.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ContactComponent } from './contact.component'; + +describe('ContactComponent', () => { + let component: ContactComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ContactComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ContactComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/contact/contact.component.ts b/src/app/components/contact/contact.component.ts new file mode 100644 index 0000000..bdb4bda --- /dev/null +++ b/src/app/components/contact/contact.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-contact', + templateUrl: './contact.component.html', + styleUrls: ['./contact.component.css'] +}) +export class ContactComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} From a371146e2f03f894f82faf1502ff5caaf5074568 Mon Sep 17 00:00:00 2001 From: Zach Date: Wed, 25 Aug 2021 21:25:16 -0400 Subject: [PATCH 06/11] Added placeholder image to have element floating to the right --- src/app/app.component.html | 4 ++-- src/app/components/contact/contact.component.css | 8 ++++++++ src/app/components/contact/contact.component.html | 4 +++- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 522f146..65987d4 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -3,6 +3,6 @@
{{recipe.ingredients}}
{{recipe.instructions}}
--> - - + + diff --git a/src/app/components/contact/contact.component.css b/src/app/components/contact/contact.component.css index e69de29..053710e 100644 --- a/src/app/components/contact/contact.component.css +++ b/src/app/components/contact/contact.component.css @@ -0,0 +1,8 @@ +img { + /* display: inline-block; */ + float: right; +} + +.contactForm { + display: inline-block; +} \ No newline at end of file diff --git a/src/app/components/contact/contact.component.html b/src/app/components/contact/contact.component.html index c1c1732..892f0f6 100644 --- a/src/app/components/contact/contact.component.html +++ b/src/app/components/contact/contact.component.html @@ -1,7 +1,8 @@
Contact us
-
+
+



@@ -12,4 +13,5 @@
+ From 68b13344e73c946c828f460ad3b131941328fee7 Mon Sep 17 00:00:00 2001 From: Zach Date: Wed, 25 Aug 2021 21:29:12 -0400 Subject: [PATCH 07/11] Wrapped img tag in div tag with class to allow for individual css settings --- src/app/components/contact/contact.component.css | 2 +- src/app/components/contact/contact.component.html | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/components/contact/contact.component.css b/src/app/components/contact/contact.component.css index 053710e..4c88415 100644 --- a/src/app/components/contact/contact.component.css +++ b/src/app/components/contact/contact.component.css @@ -1,4 +1,4 @@ -img { +.rightSide { /* display: inline-block; */ float: right; } diff --git a/src/app/components/contact/contact.component.html b/src/app/components/contact/contact.component.html index 892f0f6..b1b2af6 100644 --- a/src/app/components/contact/contact.component.html +++ b/src/app/components/contact/contact.component.html @@ -13,5 +13,7 @@
+
+
From e9247b9a69c50ff59d803016f23d3c99a0d9c48f Mon Sep 17 00:00:00 2001 From: Zach Date: Wed, 25 Aug 2021 21:51:37 -0400 Subject: [PATCH 08/11] Added thank you page, placeholder message until final message decided. Imported header, component ready for styling --- src/app/app.component.html | 3 ++- src/app/app.module.ts | 4 ++- .../thankyou/thankyou.component.css | 0 .../thankyou/thankyou.component.html | 16 ++++++++++++ .../thankyou/thankyou.component.spec.ts | 25 +++++++++++++++++++ .../components/thankyou/thankyou.component.ts | 16 ++++++++++++ 6 files changed, 62 insertions(+), 2 deletions(-) create mode 100644 src/app/components/thankyou/thankyou.component.css create mode 100644 src/app/components/thankyou/thankyou.component.html create mode 100644 src/app/components/thankyou/thankyou.component.spec.ts create mode 100644 src/app/components/thankyou/thankyou.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 65987d4..315377a 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -4,5 +4,6 @@
{{recipe.instructions}}
--> - + + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index fc2abd0..8ad42c3 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,6 +11,7 @@ import { HeaderComponent } from './components/header/header.component'; import { RouterModule, Routes } from '@angular/router'; import { AboutComponent } from './components/about/about.component'; import { ContactComponent } from './components/contact/contact.component'; +import { ThankyouComponent } from './components/thankyou/thankyou.component'; const approutes: Routes = [ {path: '', component: AppComponent} @@ -24,7 +25,8 @@ const approutes: Routes = [ LoginComponent, HeaderComponent, AboutComponent, - ContactComponent + ContactComponent, + ThankyouComponent ], imports: [ BrowserModule, diff --git a/src/app/components/thankyou/thankyou.component.css b/src/app/components/thankyou/thankyou.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/thankyou/thankyou.component.html b/src/app/components/thankyou/thankyou.component.html new file mode 100644 index 0000000..f4e6932 --- /dev/null +++ b/src/app/components/thankyou/thankyou.component.html @@ -0,0 +1,16 @@ + +
+

Thank you for your feedback!

+

Sublime Kitchen is committed to responding to each user in a timely manner.

+

If you do not hear back from us soon, like, say....I dunno.....3 weeks? Give or take?

+

Whatever, just don't like, try to submit more feedback.


+

Do you know how annoying that is? Like, we have lives. We don't just sit here all day

+

and read your dumb feedback. I swear to God, everyone thinks their complaint or compliment

+

is the most important, and if we don't get back to them soon enough, they're all -

+

"Oh, you didn't respond back, don't you care about your users?"


+

No, I don't care about no user! You don't pay me! Get off my back, this site is free!

+

You know damn well you don't watch the ads, so we don't even get paid half the time.

+

But that doesn't stop you from submitting your dumb recipe for boiled clams,

+

or whatever the hell it is you people are out there making.

+
+ \ No newline at end of file diff --git a/src/app/components/thankyou/thankyou.component.spec.ts b/src/app/components/thankyou/thankyou.component.spec.ts new file mode 100644 index 0000000..ffc0e72 --- /dev/null +++ b/src/app/components/thankyou/thankyou.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ThankyouComponent } from './thankyou.component'; + +describe('ThankyouComponent', () => { + let component: ThankyouComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ThankyouComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ThankyouComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/thankyou/thankyou.component.ts b/src/app/components/thankyou/thankyou.component.ts new file mode 100644 index 0000000..e25786d --- /dev/null +++ b/src/app/components/thankyou/thankyou.component.ts @@ -0,0 +1,16 @@ +import { Component, OnInit } from '@angular/core'; +import { HeaderComponent } from '../header/header.component'; + +@Component({ + selector: 'app-thankyou', + templateUrl: './thankyou.component.html', + styleUrls: ['./thankyou.component.css'] +}) +export class ThankyouComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} From b5d0bd94fa48a83a77b8439efee00415b01e1bba Mon Sep 17 00:00:00 2001 From: rfitz1995 Date: Wed, 25 Aug 2021 22:20:05 -0400 Subject: [PATCH 09/11] added blog post --- src/app/app.module.ts | 4 ++- src/app/components/blogs/blogs.component.css | 3 +++ src/app/components/blogs/blogs.component.html | 17 +++++++++++++ .../components/blogs/blogs.component.spec.ts | 25 +++++++++++++++++++ src/app/components/blogs/blogs.component.ts | 15 +++++++++++ 5 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 src/app/components/blogs/blogs.component.css create mode 100644 src/app/components/blogs/blogs.component.html create mode 100644 src/app/components/blogs/blogs.component.spec.ts create mode 100644 src/app/components/blogs/blogs.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index fc2abd0..e9ad405 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,6 +11,7 @@ import { HeaderComponent } from './components/header/header.component'; import { RouterModule, Routes } from '@angular/router'; import { AboutComponent } from './components/about/about.component'; import { ContactComponent } from './components/contact/contact.component'; +import { BlogsComponent } from './components/blogs/blogs.component'; const approutes: Routes = [ {path: '', component: AppComponent} @@ -24,7 +25,8 @@ const approutes: Routes = [ LoginComponent, HeaderComponent, AboutComponent, - ContactComponent + ContactComponent, + BlogsComponent ], imports: [ BrowserModule, diff --git a/src/app/components/blogs/blogs.component.css b/src/app/components/blogs/blogs.component.css new file mode 100644 index 0000000..f854973 --- /dev/null +++ b/src/app/components/blogs/blogs.component.css @@ -0,0 +1,3 @@ +#postTypes div{ + +} \ No newline at end of file diff --git a/src/app/components/blogs/blogs.component.html b/src/app/components/blogs/blogs.component.html new file mode 100644 index 0000000..1ac1f21 --- /dev/null +++ b/src/app/components/blogs/blogs.component.html @@ -0,0 +1,17 @@ + +
+
+ +
+
+
+ + +
+ + + + + + +
\ No newline at end of file diff --git a/src/app/components/blogs/blogs.component.spec.ts b/src/app/components/blogs/blogs.component.spec.ts new file mode 100644 index 0000000..f86ff1d --- /dev/null +++ b/src/app/components/blogs/blogs.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BlogsComponent } from './blogs.component'; + +describe('BlogsComponent', () => { + let component: BlogsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ BlogsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(BlogsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/blogs/blogs.component.ts b/src/app/components/blogs/blogs.component.ts new file mode 100644 index 0000000..1abebcf --- /dev/null +++ b/src/app/components/blogs/blogs.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-blogs', + templateUrl: './blogs.component.html', + styleUrls: ['./blogs.component.css'] +}) +export class BlogsComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} From 06edf8d674462cbcf83668e5843b42d7230ff206 Mon Sep 17 00:00:00 2001 From: rfitz1995 Date: Thu, 26 Aug 2021 17:17:33 -0400 Subject: [PATCH 10/11] sidebar added --- src/app/app.module.ts | 4 ++- .../components/sidebar/sidebar.component.css | 3 +++ .../components/sidebar/sidebar.component.html | 11 ++++++++ .../sidebar/sidebar.component.spec.ts | 25 +++++++++++++++++++ .../components/sidebar/sidebar.component.ts | 15 +++++++++++ 5 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 src/app/components/sidebar/sidebar.component.css create mode 100644 src/app/components/sidebar/sidebar.component.html create mode 100644 src/app/components/sidebar/sidebar.component.spec.ts create mode 100644 src/app/components/sidebar/sidebar.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8ee2738..96b3f76 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -13,6 +13,7 @@ import { AboutComponent } from './components/about/about.component'; import { ContactComponent } from './components/contact/contact.component'; import { BlogsComponent } from './components/blogs/blogs.component'; import { ThankyouComponent } from './components/thankyou/thankyou.component'; +import { SidebarComponent } from './components/sidebar/sidebar.component'; const approutes: Routes = [ {path: '', component: AppComponent} @@ -28,7 +29,8 @@ const approutes: Routes = [ AboutComponent, ContactComponent, BlogsComponent, - ThankyouComponent + ThankyouComponent, + SidebarComponent ], imports: [ BrowserModule, diff --git a/src/app/components/sidebar/sidebar.component.css b/src/app/components/sidebar/sidebar.component.css new file mode 100644 index 0000000..9ca19d4 --- /dev/null +++ b/src/app/components/sidebar/sidebar.component.css @@ -0,0 +1,3 @@ +#sidebar div{ + display: inline-block; +} \ No newline at end of file diff --git a/src/app/components/sidebar/sidebar.component.html b/src/app/components/sidebar/sidebar.component.html new file mode 100644 index 0000000..6c36b5a --- /dev/null +++ b/src/app/components/sidebar/sidebar.component.html @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/src/app/components/sidebar/sidebar.component.spec.ts b/src/app/components/sidebar/sidebar.component.spec.ts new file mode 100644 index 0000000..1f932e2 --- /dev/null +++ b/src/app/components/sidebar/sidebar.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SidebarComponent } from './sidebar.component'; + +describe('SidebarComponent', () => { + let component: SidebarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SidebarComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SidebarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/sidebar/sidebar.component.ts b/src/app/components/sidebar/sidebar.component.ts new file mode 100644 index 0000000..a9b4922 --- /dev/null +++ b/src/app/components/sidebar/sidebar.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-sidebar', + templateUrl: './sidebar.component.html', + styleUrls: ['./sidebar.component.css'] +}) +export class SidebarComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} From 8af1c2c8df114a269ba140928e74b84e3109bd61 Mon Sep 17 00:00:00 2001 From: rfitz1995 Date: Thu, 26 Aug 2021 17:19:51 -0400 Subject: [PATCH 11/11] sidebar added --- package.json | 2 +- src/app/app.component.html | 8 ++- src/app/app.component.ts | 10 +++- src/app/app.module.ts | 9 ++-- src/app/blogPost.ts | 5 ++ src/app/components/about/about.component.css | 52 +++++++++++++++++++ src/app/components/about/about.component.html | 37 ++++++++----- src/app/components/login/login.component.css | 19 +++++-- src/app/components/login/login.component.html | 6 +-- .../components/recipe/recipe.component.html | 19 ++++++- src/app/components/recipe/recipe.component.ts | 1 + src/app/services/blog-post.service.spec.ts | 16 ++++++ src/app/services/blog-post.service.ts | 30 +++++++++++ src/app/services/tag.service.spec.ts | 16 ++++++ src/app/services/tag.service.ts | 30 +++++++++++ src/app/services/user.service.spec.ts | 16 ++++++ src/app/services/user.service.ts | 30 +++++++++++ src/app/tag.ts | 4 ++ src/app/user.ts | 5 ++ 19 files changed, 288 insertions(+), 27 deletions(-) create mode 100644 src/app/blogPost.ts create mode 100644 src/app/services/blog-post.service.spec.ts create mode 100644 src/app/services/blog-post.service.ts create mode 100644 src/app/services/tag.service.spec.ts create mode 100644 src/app/services/tag.service.ts create mode 100644 src/app/services/user.service.spec.ts create mode 100644 src/app/services/user.service.ts create mode 100644 src/app/tag.ts create mode 100644 src/app/user.ts diff --git a/package.json b/package.json index a702142..bff58d7 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "@angular/platform-browser-dynamic": "~12.2.0", "@angular/router": "~12.2.0", "rxjs": "~6.6.0", - "tslib": "^2.3.0", + "tslib": "^2.3.1", "zone.js": "~0.11.4" }, "devDependencies": { diff --git a/src/app/app.component.html b/src/app/app.component.html index 315377a..d5c3642 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -4,6 +4,12 @@
{{recipe.instructions}}
--> + + + - + + + + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index d413351..01a8d1f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -2,6 +2,9 @@ import { HttpErrorResponse } from '@angular/common/http'; import { AfterViewInit, Component, ElementRef, OnInit } from '@angular/core'; import { Recipe } from './recipe'; import { RecipeService } from './services/recipe.service'; +import { UserService } from './services/user.service'; +import { BlogPostService } from './services/blog-post.service'; +import { TagService } from './services/tag.service'; @Component({ selector: 'app-root', @@ -13,7 +16,12 @@ export class AppComponent implements OnInit, AfterViewInit{ // public employees: Employee[]; public recipes: Recipe[]; - constructor(/*private empoloyeeService: EmployeeService,*/ private recipeService: RecipeService, private elementRef: ElementRef){} + constructor( + private recipeService: RecipeService, + private userService: UserService, + private blogPostService: BlogPostService, + private tagService: TagService, + private elementRef: ElementRef){} ngOnInit() { //this.getEmployees(); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 96b3f76..14eb289 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -16,7 +16,10 @@ import { ThankyouComponent } from './components/thankyou/thankyou.component'; import { SidebarComponent } from './components/sidebar/sidebar.component'; const approutes: Routes = [ - {path: '', component: AppComponent} + {path: '', component: LoginComponent}, + {path: 'about', component: AboutComponent}, + {path: 'thankyou', component: ThankyouComponent}, + {path: 'contact', component: ContactComponent} ] @NgModule({ @@ -34,8 +37,8 @@ const approutes: Routes = [ ], imports: [ BrowserModule, - HttpClientModule//, - //RouterModule.forRoot(approutes) + HttpClientModule, + RouterModule.forRoot(approutes) ], providers: [/*EmployeeService*/], bootstrap: [AppComponent] diff --git a/src/app/blogPost.ts b/src/app/blogPost.ts new file mode 100644 index 0000000..008591b --- /dev/null +++ b/src/app/blogPost.ts @@ -0,0 +1,5 @@ +export interface BlogPost { + id: number; + title: string; + imageUrl: string; +} \ No newline at end of file diff --git a/src/app/components/about/about.component.css b/src/app/components/about/about.component.css index e69de29..3a91c6b 100644 --- a/src/app/components/about/about.component.css +++ b/src/app/components/about/about.component.css @@ -0,0 +1,52 @@ +.banner { + height: 500px; + background: url(https://c8.alamy.com/comp/TB2Y8M/border-leaves-of-fern-and-tropical-friuts-orange-lemon-lime-on-punchy-yellow-top-view-and-space-for-text-summer-travel-concept-TB2Y8M.jpg); + background-size: cover; +} + +h1 { + text-align: center; + padding-top: 8%; + margin-top: -0.5%; + font-size: 400%; + font-family: 'UnPenheulim', sans-serif; + text-shadow: -5px 0px 10px rgb(255, 250, 244); +} + +body { + background-color: rgb(255, 250, 244); + margin-top: -12%; + margin-left: 13%; + margin-right: 13%; +} + +.aboutSection { + text-align: center; + margin-top: 7%; + margin-bottom: 4%; + font-size: large; + padding-bottom: 3%; + font-family: 'UnJamoBatang', sans-serif; +} + +.border-top { + position: relative; + bottom: -30px; + width: 60%; + left: 20%; + right: 10%; + border: 3px; + border-color: black; + border-style: solid; +} + +.border-bottom { + position: relative; + top: -30px; + width: 60%; + left: 20%; + right: 10%; + border: 3px; + border-color: black; + border-style: solid; +} diff --git a/src/app/components/about/about.component.html b/src/app/components/about/about.component.html index 654c077..e8a9925 100644 --- a/src/app/components/about/about.component.html +++ b/src/app/components/about/about.component.html @@ -1,15 +1,24 @@ -
-About us + + + -
-

Sublime Kitchen was created in 2021.

-

Our blog is dedicated to bringing people who love food, together in one place.

-

However, not just anyone can create a Sublime Kitchen user account.

-

There is a strict vetting process, including a background check, an

-

assessment and one or more physical challenges.


-

Many have been killed, maimed or seriously injured in this process

-

Those that make it through, however can expect a friendly, cooking oriented

-

community, filled with people who love food, and cooking, working together

-

and sharing their kitchen secrets.


-
- + +
+
+

Sublime Kitchen was created in 2021.

+

Our blog is dedicated to bringing people who love food together in one place.

+

However, not just anyone can create a Sublime Kitchen user account.

+

There is a strict vetting process, including a background check, an

+

assessment, and one or more physical challenges.


+

Many have been killed, maimed, or seriously injured in this process,

+

which has been fondly named "The Hunger Games."

+

Those that make it through, however, can expect a friendly, cooking oriented

+

community filled with people who love food and cooking, working together,

+

and sharing their kitchen secrets.


+ +
+
+ diff --git a/src/app/components/login/login.component.css b/src/app/components/login/login.component.css index 48a3bfd..e45e981 100644 --- a/src/app/components/login/login.component.css +++ b/src/app/components/login/login.component.css @@ -10,10 +10,22 @@ body { background-size: cover; } +.login { + height: 22px; + width: 12%; +} + +.login-button { + margin-top: 0.25%; + height: 22px; + width: 5%; +} + .loginForm { color: rgb(250, 253, 237); text-align: center; margin-top: 4% + } h1 { @@ -25,10 +37,11 @@ h1 { text-shadow: 0px -5px 20px black; } -label{ +label { + position: relative; + right: 4%; + font-size: 100%; color: rgb(250, 253, 237); text-shadow: 0px 0px 10px black; font-family: 'UnJamoBatang', sans-serif; - position: relative; - right: 2%; } \ No newline at end of file diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index fa608d1..a4f7bc3 100644 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -6,10 +6,10 @@

Sublime Kitchen


-

+


-

- +

+
diff --git a/src/app/components/recipe/recipe.component.html b/src/app/components/recipe/recipe.component.html index 8cab4a7..4f24c14 100644 --- a/src/app/components/recipe/recipe.component.html +++ b/src/app/components/recipe/recipe.component.html @@ -1 +1,18 @@ -

recipe works!

+ +
+ diff --git a/src/app/components/recipe/recipe.component.ts b/src/app/components/recipe/recipe.component.ts index 27b5706..f92c82a 100644 --- a/src/app/components/recipe/recipe.component.ts +++ b/src/app/components/recipe/recipe.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; + @Component({ selector: 'app-recipe', templateUrl: './recipe.component.html', diff --git a/src/app/services/blog-post.service.spec.ts b/src/app/services/blog-post.service.spec.ts new file mode 100644 index 0000000..dae4ceb --- /dev/null +++ b/src/app/services/blog-post.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { BlogPostService } from './blog-post.service'; + +describe('BlogPostService', () => { + let service: BlogPostService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(BlogPostService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/blog-post.service.ts b/src/app/services/blog-post.service.ts new file mode 100644 index 0000000..9daa869 --- /dev/null +++ b/src/app/services/blog-post.service.ts @@ -0,0 +1,30 @@ +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { HttpClient } from '@angular/common/http' +import { environment } from 'src/environments/environment'; +import { BlogPost } from '../blogPost'; + +@Injectable({ + providedIn: 'root' +}) +export class BlogPostService { + private apiServerUrl = environment.apiBaseUrl; + + constructor(private http: HttpClient) { } + + public getRecipes(): Observable { + return this.http.get(`${this.apiServerUrl}/blogPostController/read`); + } + + public addRecipe(blogPost: BlogPost): Observable { + return this.http.post(`${this.apiServerUrl}/blogPostController/create`, blogPost) + } + + public updateRecipe(blogPost: BlogPost, blogPostId: number): Observable { + return this.http.put(`${this.apiServerUrl}/blogPostController/update/${blogPostId}`, blogPost); + } + + public deleteRecipe(blogPostId: number) : Observable { + return this.http.delete(`${this.apiServerUrl}/blogPostController/delete/${blogPostId}`); + } +} diff --git a/src/app/services/tag.service.spec.ts b/src/app/services/tag.service.spec.ts new file mode 100644 index 0000000..f091e93 --- /dev/null +++ b/src/app/services/tag.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { TagService } from './tag.service'; + +describe('TagService', () => { + let service: TagService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(TagService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/tag.service.ts b/src/app/services/tag.service.ts new file mode 100644 index 0000000..d538ec8 --- /dev/null +++ b/src/app/services/tag.service.ts @@ -0,0 +1,30 @@ +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { HttpClient } from '@angular/common/http' +import { environment } from 'src/environments/environment'; +import { Tag } from '../tag'; + +@Injectable({ + providedIn: 'root' +}) +export class TagService { + private apiServerUrl = environment.apiBaseUrl; + + constructor(private http: HttpClient) { } + + public getRecipes(): Observable { + return this.http.get(`${this.apiServerUrl}/recipeController/read`); + } + + public addRecipe(tag: Tag): Observable { + return this.http.post(`${this.apiServerUrl}/recipeController/create`, tag) + } + + public updateRecipe(tag: Tag, tagId: number): Observable { + return this.http.put(`${this.apiServerUrl}/recipeController/update/${tagId}`, tag); + } + + public deleteRecipe(tagId: number) : Observable { + return this.http.delete(`${this.apiServerUrl}/recipeController/delete/${tagId}`); + } +} diff --git a/src/app/services/user.service.spec.ts b/src/app/services/user.service.spec.ts new file mode 100644 index 0000000..3f804c9 --- /dev/null +++ b/src/app/services/user.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { UserService } from './user.service'; + +describe('UserService', () => { + let service: UserService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(UserService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/user.service.ts b/src/app/services/user.service.ts new file mode 100644 index 0000000..eeefdeb --- /dev/null +++ b/src/app/services/user.service.ts @@ -0,0 +1,30 @@ +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs'; +import { HttpClient } from '@angular/common/http'; +import { environment } from 'src/environments/environment'; +import { User } from '../user'; + +@Injectable({ + providedIn: 'root' +}) +export class UserService { + private apiServerUrl = environment.apiBaseUrl; + + constructor(private http: HttpClient) { } + + public getRecipes(): Observable { + return this.http.get(`${this.apiServerUrl}/userController/read`); + } + + public addRecipe(user: User): Observable { + return this.http.post(`${this.apiServerUrl}/userController/create`, user) + } + + public updateRecipe(user: User, userId: number): Observable { + return this.http.put(`${this.apiServerUrl}/userController/update/${userId}`, user); + } + + public deleteRecipe(userId: number) : Observable { + return this.http.delete(`${this.apiServerUrl}/userController/delete/${userId}`); + } +} diff --git a/src/app/tag.ts b/src/app/tag.ts new file mode 100644 index 0000000..1436052 --- /dev/null +++ b/src/app/tag.ts @@ -0,0 +1,4 @@ +export interface Tag { + id: number; + name: string; +} \ No newline at end of file diff --git a/src/app/user.ts b/src/app/user.ts new file mode 100644 index 0000000..fccb0e9 --- /dev/null +++ b/src/app/user.ts @@ -0,0 +1,5 @@ +export interface User { + id: number; + name: string; + password: string; +} \ No newline at end of file