├── src
├── assets
│ └── .gitkeep
├── app
│ ├── pages
│ │ ├── pages.component.html
│ │ ├── pages.module.ts
│ │ ├── pages.routes.ts
│ │ ├── sundays
│ │ │ ├── sundays.component.html
│ │ │ ├── sundays.module.ts
│ │ │ └── sundays.component.ts
│ │ └── pages.component.ts
│ ├── app.component.html
│ ├── app.component.ts
│ ├── app.component.scss
│ ├── app-routing.module.ts
│ ├── app.routes.ts
│ ├── app.module.ts
│ └── app.component.spec.ts
├── favicon.ico
├── main.ts
├── styles.scss
└── index.html
├── .vscode
├── extensions.json
├── launch.json
└── tasks.json
├── tsconfig.app.json
├── tsconfig.spec.json
├── .editorconfig
├── .gitignore
├── tsconfig.json
├── README.md
├── package.json
└── angular.json
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/pages/pages.component.html:
--------------------------------------------------------------------------------
1 | Pages Component
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shark12062410/Sundays-Chanllenge/HEAD/src/favicon.ico
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3 | "recommendations": ["angular.ng-template"]
4 | }
5 |
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Angular Code Challenge
4 |
5 |
6 |
7 |
8 |
9 |
2 | This is sundays project
3 |
4 |
5 | Choose Date Range
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | {{ errorMessage }}
16 |
17 |
18 | Number of Sundays: {{ result }}
19 |
20 |
21 |
--------------------------------------------------------------------------------
/src/app/pages/sundays/sundays.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
4 | import { ReactiveFormsModule } from '@angular/forms';
5 | import { MatDatepickerModule } from '@angular/material/datepicker';
6 | import { MatFormFieldModule } from '@angular/material/form-field';
7 | import { MatNativeDateModule } from '@angular/material/core';
8 | import { SundaysComponent } from './sundays.component';
9 | @NgModule({
10 | declarations: [SundaysComponent],
11 | imports: [
12 | BrowserModule,
13 | BrowserAnimationsModule,
14 | ReactiveFormsModule,
15 | MatDatepickerModule,
16 | MatFormFieldModule,
17 | MatNativeDateModule,
18 | ],
19 | exports: [SundaysComponent],
20 | })
21 | export class SundaysModule {}
22 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { AppRoutingModule } from './app-routing.module';
3 | import { AppComponent } from './app.component';
4 | import { BrowserModule } from '@angular/platform-browser';
5 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
6 | import { ReactiveFormsModule } from '@angular/forms';
7 | import { MatDatepickerModule } from '@angular/material/datepicker';
8 | import { MatFormFieldModule } from '@angular/material/form-field';
9 | import { MatNativeDateModule } from '@angular/material/core';
10 | @NgModule({
11 | declarations: [AppComponent],
12 | imports: [
13 | BrowserModule,
14 | BrowserAnimationsModule,
15 | ReactiveFormsModule,
16 | AppRoutingModule,
17 | MatDatepickerModule,
18 | MatFormFieldModule,
19 | MatNativeDateModule,
20 | ],
21 | providers: [],
22 | bootstrap: [AppComponent],
23 | })
24 | export class AppModule {}
25 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "forceConsistentCasingInFileNames": true,
8 | "strict": true,
9 | "noImplicitOverride": true,
10 | "noPropertyAccessFromIndexSignature": true,
11 | "noImplicitReturns": true,
12 | "noFallthroughCasesInSwitch": true,
13 | "sourceMap": true,
14 | "declaration": false,
15 | "downlevelIteration": true,
16 | "experimentalDecorators": true,
17 | "moduleResolution": "node",
18 | "importHelpers": true,
19 | "target": "ES2022",
20 | "module": "ES2022",
21 | "useDefineForClassFields": false,
22 | "lib": [
23 | "ES2022",
24 | "dom"
25 | ]
26 | },
27 | "angularCompilerOptions": {
28 | "enableI18nLegacyMessageIdFormat": false,
29 | "strictInjectionParameters": true,
30 | "strictInputAccessModifiers": true,
31 | "strictTemplates": true
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
3 | "version": "2.0.0",
4 | "tasks": [
5 | {
6 | "type": "npm",
7 | "script": "start",
8 | "isBackground": true,
9 | "problemMatcher": {
10 | "owner": "typescript",
11 | "pattern": "$tsc",
12 | "background": {
13 | "activeOnStart": true,
14 | "beginsPattern": {
15 | "regexp": "(.*?)"
16 | },
17 | "endsPattern": {
18 | "regexp": "bundle generation complete"
19 | }
20 | }
21 | }
22 | },
23 | {
24 | "type": "npm",
25 | "script": "test",
26 | "isBackground": true,
27 | "problemMatcher": {
28 | "owner": "typescript",
29 | "pattern": "$tsc",
30 | "background": {
31 | "activeOnStart": true,
32 | "beginsPattern": {
33 | "regexp": "(.*?)"
34 | },
35 | "endsPattern": {
36 | "regexp": "bundle generation complete"
37 | }
38 | }
39 | }
40 | }
41 | ]
42 | }
43 |
--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 | import { RouterTestingModule } from '@angular/router/testing';
3 | import { AppComponent } from './app.component';
4 |
5 | describe('AppComponent', () => {
6 | beforeEach(() => TestBed.configureTestingModule({
7 | imports: [RouterTestingModule],
8 | declarations: [AppComponent]
9 | }));
10 |
11 | it('should create the app', () => {
12 | const fixture = TestBed.createComponent(AppComponent);
13 | const app = fixture.componentInstance;
14 | expect(app).toBeTruthy();
15 | });
16 |
17 | it(`should have as title 'sundays'`, () => {
18 | const fixture = TestBed.createComponent(AppComponent);
19 | const app = fixture.componentInstance;
20 | expect(app.title).toEqual('sundays');
21 | });
22 |
23 | it('should render title', () => {
24 | const fixture = TestBed.createComponent(AppComponent);
25 | fixture.detectChanges();
26 | const compiled = fixture.nativeElement as HTMLElement;
27 | expect(compiled.querySelector('.content span')?.textContent).toContain('sundays app is running!');
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Angular Code Challengs - Sundays
2 |
3 | This code challenge requires you to complete the following
4 | 1. Add a new route for /pages/sundays and ensure that all pages redirect to that page by default
5 | 2. Create a new component under the "sundays" directory that does the following
6 | 1. Displays a material date range picker and apply the following validaation rules
7 | 1. Dates must be at least two years apart
8 | 2. The start must be in the future and cannot be a sunday
9 | 2. Watch for changes to the picking of dates and when two valid dates are selected then display the number of Sundays between the two dates (including the days selected) excluding any sunday that falls on or after the 28th of the month. You can just output this to the screen below the date picker
10 |
11 | Notes:
12 | 1. You can choose whichever date adapater you like
13 | 2. Don't worry about styling, just use the default material one provided
14 | 3. Extra marks if you use a Reactive Form and watch for the value changes using a RxJS stream.
15 |
16 | ## Timeframe
17 |
18 | This should take between 30 - 60 minutes to complete
19 |
20 | ## When finished
21 |
22 | Create your own public repository and upload to there and provide the link
23 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sundays",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "^16.2.0",
14 | "@angular/cdk": "^16.2.7",
15 | "@angular/common": "^16.2.0",
16 | "@angular/compiler": "^16.2.0",
17 | "@angular/core": "^16.2.0",
18 | "@angular/forms": "^16.2.0",
19 | "@angular/material": "^16.2.7",
20 | "@angular/platform-browser": "^16.2.0",
21 | "@angular/platform-browser-dynamic": "^16.2.0",
22 | "@angular/router": "^16.2.0",
23 | "rxjs": "~7.8.0",
24 | "tslib": "^2.3.0",
25 | "zone.js": "~0.13.0"
26 | },
27 | "devDependencies": {
28 | "@angular-devkit/build-angular": "^16.2.1",
29 | "@angular/cli": "~16.2.1",
30 | "@angular/compiler-cli": "^16.2.0",
31 | "@types/jasmine": "~4.3.0",
32 | "jasmine-core": "~4.6.0",
33 | "karma": "~6.4.0",
34 | "karma-chrome-launcher": "~3.2.0",
35 | "karma-coverage": "~2.2.0",
36 | "karma-jasmine": "~5.1.0",
37 | "karma-jasmine-html-reporter": "~2.1.0",
38 | "typescript": "~5.1.3"
39 | }
40 | }
--------------------------------------------------------------------------------
/src/app/pages/pages.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, OnDestroy, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
2 | import { Subject } from 'rxjs';
3 |
4 | @Component({
5 | selector: 'pages',
6 | templateUrl: './pages.component.html',
7 | encapsulation: ViewEncapsulation.None,
8 | })
9 | export class PagesComponent implements OnInit, OnDestroy {
10 |
11 |
12 | // @Private Properties
13 | private _unsubscribeAll: Subject = new Subject;
14 |
15 |
16 | /**
17 | * Constructor
18 | */
19 | constructor() { }
20 |
21 |
22 | //--------------------------------------------------------------------------------
23 | // @Lifecycle Hooks
24 | //--------------------------------------------------------------------------------
25 |
26 | /**
27 | * OnInit
28 | */
29 | ngOnInit(): void {
30 |
31 | }
32 |
33 | /**
34 | * OnDestroy
35 | */
36 | ngOnDestroy() {
37 | this._unsubscribeAll.next(null);
38 | this._unsubscribeAll.complete();
39 | }
40 |
41 |
42 | //--------------------------------------------------------------------------------
43 | // @Public Methods
44 | //--------------------------------------------------------------------------------
45 |
46 |
47 | }
--------------------------------------------------------------------------------
/src/app/pages/sundays/sundays.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {
3 | FormControl,
4 | FormBuilder,
5 | FormGroup,
6 | Validators,
7 | } from '@angular/forms';
8 | import { __values } from 'tslib';
9 | import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
10 |
11 | @Component({
12 | selector: 'sundays-component',
13 | templateUrl: './sundays.component.html',
14 | })
15 | export class SundaysComponent implements OnInit {
16 | dateRange = new FormGroup({
17 | start: new FormControl(),
18 | end: new FormControl(),
19 | });
20 | result: number | null = null;
21 | errorMessage: string | null = null;
22 |
23 | constructor(private formBuilder: FormBuilder) {}
24 |
25 | ngOnInit(): void {
26 | this.dateRange = this.formBuilder.group({
27 | start: ['', [Validators.required]],
28 | end: ['', [Validators.required]],
29 | });
30 |
31 | this.dateRange.valueChanges
32 | .pipe(debounceTime(300), distinctUntilChanged())
33 | .subscribe(() => {
34 | this.calculateSundays();
35 | });
36 | }
37 |
38 | calculateSundays(): void {
39 | const startDate = new Date(this.dateRange.value.start);
40 | const endDate = new Date(this.dateRange.value.end);
41 |
42 | if (!this.isValidDateRange(startDate, endDate)) {
43 | this.result = null;
44 | return;
45 | }
46 |
47 | const sundaysCount = this.countSundays(startDate, endDate);
48 | this.result = sundaysCount;
49 | this.errorMessage = null;
50 | }
51 |
52 | isValidDateRange(startDate: Date, endDate: Date): boolean {
53 | if (!startDate || !endDate) {
54 | return false;
55 | }
56 |
57 | if (
58 | endDate < startDate ||
59 | endDate.getFullYear() - startDate.getFullYear() < 2
60 | ) {
61 | this.errorMessage = 'Dates must be at least two years apart';
62 | return false;
63 | }
64 |
65 | if (startDate.getDay() === 0 || startDate < new Date()) {
66 | this.errorMessage =
67 | 'The start must be in the future and cannot be a sunday';
68 | return false;
69 | }
70 | this.errorMessage = 'Please select valid dates.';
71 | return true;
72 | }
73 |
74 | countSundays(startDate: Date, endDate: Date): number {
75 | let count = 0;
76 | let currentDate = new Date(startDate);
77 |
78 | while (currentDate <= endDate) {
79 | if (currentDate.getDay() === 0 && currentDate.getDate() < 28) {
80 | count++;
81 | }
82 | //this is Sunday calculation
83 | currentDate.setDate(currentDate.getDate() + 1);
84 |
85 | }
86 |
87 | return count;
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "sundays": {
7 | "projectType": "application",
8 | "schematics": {
9 | "@schematics/angular:component": {
10 | "style": "scss"
11 | }
12 | },
13 | "root": "",
14 | "sourceRoot": "src",
15 | "prefix": "app",
16 | "architect": {
17 | "build": {
18 | "builder": "@angular-devkit/build-angular:browser",
19 | "options": {
20 | "outputPath": "dist/sundays",
21 | "index": "src/index.html",
22 | "main": "src/main.ts",
23 | "polyfills": [
24 | "zone.js"
25 | ],
26 | "tsConfig": "tsconfig.app.json",
27 | "inlineStyleLanguage": "scss",
28 | "assets": [
29 | "src/favicon.ico",
30 | "src/assets"
31 | ],
32 | "styles": [
33 | "@angular/material/prebuilt-themes/indigo-pink.css",
34 | "src/styles.scss"
35 | ],
36 | "scripts": []
37 | },
38 | "configurations": {
39 | "production": {
40 | "budgets": [
41 | {
42 | "type": "initial",
43 | "maximumWarning": "500kb",
44 | "maximumError": "1mb"
45 | },
46 | {
47 | "type": "anyComponentStyle",
48 | "maximumWarning": "2kb",
49 | "maximumError": "4kb"
50 | }
51 | ],
52 | "outputHashing": "all"
53 | },
54 | "development": {
55 | "buildOptimizer": false,
56 | "optimization": false,
57 | "vendorChunk": true,
58 | "extractLicenses": false,
59 | "sourceMap": true,
60 | "namedChunks": true
61 | }
62 | },
63 | "defaultConfiguration": "production"
64 | },
65 | "serve": {
66 | "builder": "@angular-devkit/build-angular:dev-server",
67 | "configurations": {
68 | "production": {
69 | "browserTarget": "sundays:build:production"
70 | },
71 | "development": {
72 | "browserTarget": "sundays:build:development"
73 | }
74 | },
75 | "defaultConfiguration": "development"
76 | },
77 | "extract-i18n": {
78 | "builder": "@angular-devkit/build-angular:extract-i18n",
79 | "options": {
80 | "browserTarget": "sundays:build"
81 | }
82 | },
83 | "test": {
84 | "builder": "@angular-devkit/build-angular:karma",
85 | "options": {
86 | "polyfills": [
87 | "zone.js",
88 | "zone.js/testing"
89 | ],
90 | "tsConfig": "tsconfig.spec.json",
91 | "inlineStyleLanguage": "scss",
92 | "assets": [
93 | "src/favicon.ico",
94 | "src/assets"
95 | ],
96 | "styles": [
97 | "@angular/material/prebuilt-themes/indigo-pink.css",
98 | "src/styles.scss"
99 | ],
100 | "scripts": []
101 | }
102 | }
103 | }
104 | }
105 | },
106 | "cli": {
107 | "analytics": "77521ca5-0bb8-4b16-b657-bada04469769"
108 | }
109 | }
110 |
--------------------------------------------------------------------------------