Skip to content

Commit f994028

Browse files
t1m4lct1m4lc
committed
feat: create challenge 48 without solution
1 parent 5413b9e commit f994028

31 files changed

+918
-641
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ If you would like to propose a challenge, this project is open source, so feel f
2424
2525
## Challenges
2626

27-
Check [all 47 challenges](https://angular-challenges.vercel.app/)
27+
Check [all 48 challenges](https://angular-challenges.vercel.app/)
2828

2929
## Contributors ✨
3030

‎apps/angular/dialog-alert-form/.eslintrc.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"extends": ["../../../.eslintrc.json"],
3+
"ignorePatterns": ["!**/*"],
4+
"overrides": [
5+
{
6+
"files": ["*.ts"],
7+
"extends": [
8+
"plugin:@nx/angular",
9+
"plugin:@angular-eslint/template/process-inline-templates"
10+
],
11+
"rules": {
12+
"@angular-eslint/directive-selector": [
13+
"error",
14+
{
15+
"type": "attribute",
16+
"prefix": "app",
17+
"style": "camelCase"
18+
}
19+
],
20+
"@angular-eslint/component-selector": [
21+
"error",
22+
{
23+
"type": "element",
24+
"prefix": "app",
25+
"style": "kebab-case"
26+
}
27+
]
28+
}
29+
},
30+
{
31+
"files": ["*.html"],
32+
"extends": ["plugin:@nx/angular-template"],
33+
"rules": {}
34+
}
35+
]
36+
}

‎apps/angular/dialog-alert-form/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Save your form's bacon: with the navigation alert
2+
3+
> author: [Timothy Alcaide](https://github.com/alcaidio)
4+
5+
### Run Application
6+
7+
```bash
8+
npx nx serve angular-dialog-alert-form
9+
```
10+
11+
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/48-dialog-alert-form/).

‎apps/angular/dialog-alert-form/project.json

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
{
2+
"name": "angular-dialog-alert-form",
3+
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
4+
"projectType": "application",
5+
"prefix": "app",
6+
"sourceRoot": "apps/angular/dialog-alert-form/src",
7+
"tags": [],
8+
"targets": {
9+
"build": {
10+
"executor": "@angular-devkit/build-angular:application",
11+
"outputs": ["{options.outputPath}"],
12+
"options": {
13+
"outputPath": "dist/apps/angular/dialog-alert-form",
14+
"index": "apps/angular/dialog-alert-form/src/index.html",
15+
"browser": "apps/angular/dialog-alert-form/src/main.ts",
16+
"polyfills": ["zone.js"],
17+
"tsConfig": "apps/angular/dialog-alert-form/tsconfig.app.json",
18+
"inlineStyleLanguage": "scss",
19+
"assets": [
20+
"apps/angular/dialog-alert-form/src/favicon.ico",
21+
"apps/angular/dialog-alert-form/src/assets"
22+
],
23+
"styles": ["apps/angular/dialog-alert-form/src/styles.scss"],
24+
"scripts": []
25+
},
26+
"configurations": {
27+
"production": {
28+
"budgets": [
29+
{
30+
"type": "initial",
31+
"maximumWarning": "500kb",
32+
"maximumError": "1mb"
33+
},
34+
{
35+
"type": "anyComponentStyle",
36+
"maximumWarning": "2kb",
37+
"maximumError": "4kb"
38+
}
39+
],
40+
"outputHashing": "all"
41+
},
42+
"development": {
43+
"optimization": false,
44+
"extractLicenses": false,
45+
"sourceMap": true
46+
}
47+
},
48+
"defaultConfiguration": "production"
49+
},
50+
"serve": {
51+
"executor": "@angular-devkit/build-angular:dev-server",
52+
"configurations": {
53+
"production": {
54+
"buildTarget": "angular-dialog-alert-form:build:production"
55+
},
56+
"development": {
57+
"buildTarget": "angular-dialog-alert-form:build:development"
58+
}
59+
},
60+
"defaultConfiguration": "development"
61+
},
62+
"extract-i18n": {
63+
"executor": "@angular-devkit/build-angular:extract-i18n",
64+
"options": {
65+
"buildTarget": "angular-dialog-alert-form:build"
66+
}
67+
},
68+
"lint": {
69+
"executor": "@nx/eslint:lint"
70+
}
71+
}
72+
}

‎apps/angular/dialog-alert-form/src/app/app.component.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Component } from '@angular/core';
2+
import { RouterOutlet } from '@angular/router';
3+
import { NavComponent } from './ui/nav.component';
4+
5+
@Component({
6+
standalone: true,
7+
imports: [RouterOutlet, NavComponent],
8+
selector: 'app-root',
9+
template: `
10+
<div class="h-screen bg-gray-50">
11+
<app-nav
12+
class="mx-auto flex w-full items-center justify-center pb-2 pt-8" />
13+
14+
<main class="px-4 py-16 sm:px-6 lg:px-8">
15+
<router-outlet></router-outlet>
16+
</main>
17+
</div>
18+
`,
19+
})
20+
export class AppComponent {}

‎apps/angular/dialog-alert-form/src/app/app.config.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { ApplicationConfig } from '@angular/core';
2+
import { provideRouter } from '@angular/router';
3+
import { appRoutes } from './app.routes';
4+
5+
export const appConfig: ApplicationConfig = {
6+
providers: [provideRouter(appRoutes)],
7+
};

‎apps/angular/dialog-alert-form/src/app/app.routes.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Route } from '@angular/router';
2+
import { JoinComponent } from './pages/join.component';
3+
import { PageComponent } from './pages/page.component';
4+
5+
export const appRoutes: Route[] = [
6+
{
7+
path: '',
8+
pathMatch: 'full',
9+
redirectTo: 'form',
10+
},
11+
{
12+
path: 'form',
13+
loadComponent: () => JoinComponent,
14+
},
15+
{
16+
path: 'page-1',
17+
data: {
18+
title: 'Page 1',
19+
},
20+
loadComponent: () => PageComponent,
21+
},
22+
{
23+
path: 'page-2',
24+
data: {
25+
title: 'Page 2',
26+
},
27+
loadComponent: () => PageComponent,
28+
},
29+
];

‎apps/angular/dialog-alert-form/src/app/pages/join.component.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { FormComponent } from '../ui/form.component';
3+
4+
@Component({
5+
standalone: true,
6+
imports: [FormComponent],
7+
template: `
8+
<section class="mx-auto max-w-screen-sm">
9+
<div class="rounded-lg bg-white p-8 shadow-lg lg:p-12">
10+
<app-form />
11+
</div>
12+
</section>
13+
`,
14+
changeDetection: ChangeDetectionStrategy.OnPush,
15+
})
16+
export class JoinComponent {}

‎apps/angular/dialog-alert-form/src/app/pages/page.component.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
2+
import { toSignal } from '@angular/core/rxjs-interop';
3+
import { ActivatedRoute } from '@angular/router';
4+
import { map } from 'rxjs';
5+
6+
@Component({
7+
standalone: true,
8+
template: `
9+
<section>
10+
<h1>{{ title() }}</h1>
11+
</section>
12+
`,
13+
changeDetection: ChangeDetectionStrategy.OnPush,
14+
})
15+
export class PageComponent {
16+
title = toSignal(inject(ActivatedRoute).data.pipe(map((d) => d['title'])));
17+
}

‎apps/angular/dialog-alert-form/src/app/ui/form.component.ts

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-form',
5+
standalone: true,
6+
template: `
7+
<form class="space-y-4">
8+
<div>
9+
<label class="sr-only" for="name">Name</label>
10+
<input
11+
class="w-full rounded-lg border-gray-200 p-3 text-sm"
12+
placeholder="Name"
13+
type="text"
14+
id="name" />
15+
</div>
16+
17+
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
18+
<div>
19+
<label class="sr-only" for="email">Email</label>
20+
<input
21+
class="w-full rounded-lg border-gray-200 p-3 text-sm"
22+
placeholder="Email address"
23+
type="email"
24+
id="email" />
25+
</div>
26+
27+
<div>
28+
<label class="sr-only" for="phone">Phone</label>
29+
<input
30+
class="w-full rounded-lg border-gray-200 p-3 text-sm"
31+
placeholder="Phone Number"
32+
type="tel"
33+
id="phone" />
34+
</div>
35+
</div>
36+
37+
<div>
38+
<label class="sr-only" for="message">Message</label>
39+
40+
<textarea
41+
class="w-full rounded-lg border-gray-200 p-3 text-sm"
42+
placeholder="Message"
43+
rows="8"
44+
id="message"></textarea>
45+
</div>
46+
47+
<div class="mt-4">
48+
<button
49+
type="submit"
50+
class="inline-block w-full rounded-lg border bg-gray-50 px-5 py-3 font-medium text-gray-900 sm:w-auto">
51+
Submit
52+
</button>
53+
</div>
54+
</form>
55+
`,
56+
changeDetection: ChangeDetectionStrategy.OnPush,
57+
})
58+
export class FormComponent {}

0 commit comments

Comments
 (0)