24 |
--------------------------------------------------------------------------------
/temperature-basic/src/app/temperatureConverter/temperatureConverter.component.scss:
--------------------------------------------------------------------------------
1 | section {
2 | padding-top: 20px;
3 | width: 300px;
4 | }
5 |
--------------------------------------------------------------------------------
/temperature-basic/src/app/temperatureConverter/temperatureConverter.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from "@angular/core/testing";
2 | import { TemperatureConverter } from "./temperatureConverter.component";
3 | import { RouterTestingModule } from "@angular/router/testing";
4 | import { FormsModule } from "@angular/forms";
5 | import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
6 |
7 | fdescribe("TemperatureConverter", () => {
8 | let component: TemperatureConverter;
9 | let fixture: ComponentFixture;
10 | let compiled;
11 | let celsiusInput;
12 | let fahrenheitInput;
13 |
14 | const pushCelsiusValue = async (value) => {
15 | celsiusInput.value = value;
16 | celsiusInput.dispatchEvent(new Event("change"));
17 | celsiusInput.dispatchEvent(new Event("input"));
18 | await fixture.whenStable();
19 | await fixture.detectChanges();
20 | };
21 |
22 | const pushFahrenheitValue = async (value) => {
23 | fahrenheitInput.value = value;
24 | fahrenheitInput.dispatchEvent(new Event("change"));
25 | fahrenheitInput.dispatchEvent(new Event("input"));
26 | await fixture.whenStable();
27 | await fixture.detectChanges();
28 | };
29 |
30 | const getByTestId = (testId: string) => {
31 | return compiled.querySelector(`[data-test-id="${testId}"]`);
32 | };
33 |
34 | beforeEach(async(() => {
35 | TestBed.configureTestingModule({
36 | imports: [RouterTestingModule, FormsModule],
37 | declarations: [TemperatureConverter],
38 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
39 | }).compileComponents();
40 | }));
41 |
42 | beforeEach(() => {
43 | fixture = TestBed.createComponent(TemperatureConverter);
44 | fixture.autoDetectChanges(true);
45 | compiled = fixture.debugElement.nativeElement;
46 | component = fixture.componentInstance;
47 | celsiusInput = getByTestId("celsius-input");
48 | fahrenheitInput = getByTestId("fahrenheit-input");
49 | fixture.detectChanges();
50 | });
51 |
52 | it("Typing value in Celsius field gets correct Fahrenheit value", async () => {
53 | await pushCelsiusValue(500);
54 | fahrenheitInput = getByTestId("fahrenheit-input");
55 | expect(Number(fahrenheitInput.value)).toEqual(932);
56 | });
57 |
58 | it("Typing value in Celsius field gets correct Fahrenheit value upto 1 decimal values", async () => {
59 | await pushCelsiusValue(32);
60 | fahrenheitInput = getByTestId("fahrenheit-input");
61 | expect(Number(fahrenheitInput.value)).toEqual(89.6);
62 | });
63 |
64 | it("Typing value in Fahrenheit field gets correct Celsius value", async () => {
65 | await pushFahrenheitValue(932);
66 | celsiusInput = getByTestId("celsius-input");
67 | expect(Number(celsiusInput.value)).toEqual(500);
68 | });
69 |
70 | it("Typing value in Fahrenheit field gets correct Celsius value upto 1 decimal values", async () => {
71 | await pushFahrenheitValue(100);
72 | celsiusInput = getByTestId("celsius-input");
73 | expect(Number(celsiusInput.value)).toEqual(37.8);
74 | });
75 |
76 | it("Perform series of actions", async () => {
77 | await pushFahrenheitValue(10);
78 | celsiusInput = getByTestId("celsius-input");
79 | expect(Number(celsiusInput.value)).toEqual(-12.2);
80 |
81 | await pushCelsiusValue(10);
82 | fahrenheitInput = getByTestId("fahrenheit-input");
83 | expect(Number(fahrenheitInput.value)).toEqual(50);
84 |
85 | await pushFahrenheitValue(200);
86 | celsiusInput = getByTestId("celsius-input");
87 | expect(Number(celsiusInput.value)).toEqual(93.3);
88 |
89 | await pushCelsiusValue(248);
90 | fahrenheitInput = getByTestId("fahrenheit-input");
91 | expect(Number(fahrenheitInput.value)).toEqual(478.4);
92 | });
93 | });
94 |
--------------------------------------------------------------------------------
/temperature-basic/src/app/temperatureConverter/temperatureConverter.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from "@angular/core";
2 |
3 | @Component({
4 | selector: "temperature-converter",
5 | templateUrl: "./temperatureConverter.component.html",
6 | styleUrls: ["./temperatureConverter.component.scss"],
7 | })
8 | export class TemperatureConverter implements OnInit {
9 | c = "";
10 | f = "";
11 | constructor() {}
12 |
13 | ngOnInit() {}
14 |
15 | onChange(value: string | null, type: "c" | "f") {
16 | if (value === null) {
17 | this.c = "";
18 | this.f = "";
19 | return;
20 | }
21 |
22 | const temperature = Number(value);
23 | if (type === "c") {
24 | this.f = ((temperature * 9) / 5 + 32).toFixed(1);
25 | } else {
26 | this.c = (((temperature - 32) * 5) / 9).toFixed(1);
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/temperature-basic/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | .gitkeep
2 |
--------------------------------------------------------------------------------
/temperature-basic/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/temperature-basic/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
--------------------------------------------------------------------------------
/temperature-basic/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ashket980/HackerRank-Angular-basic/49f57121bef3e2219750f7105977864c0639cdf2/temperature-basic/src/favicon.ico
--------------------------------------------------------------------------------
/temperature-basic/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Temperature Converter
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/temperature-basic/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 | import {applyPolyfills, defineCustomElements} from "h8k-components/loader";
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.error(err));
13 |
14 | applyPolyfills()
15 | .then(() => {
16 | defineCustomElements()
17 | })
18 |
--------------------------------------------------------------------------------
/temperature-basic/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
23 |
24 | /**
25 | * Web Animations `@angular/platform-browser/animations`
26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 | */
29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
30 |
31 | /**
32 | * By default, zone.js will patch all possible macroTask and DomEvents
33 | * user can disable parts of macroTask/DomEvents patch by setting following flags
34 | * because those flags need to be set before `zone.js` being loaded, and webpack
35 | * will put import in the top of bundle, so user need to create a separate file
36 | * in this directory (for example: zone-flags.ts), and put the following flags
37 | * into that file, and then add the following code before importing zone.js.
38 | * import './zone-flags';
39 | *
40 | * The flags allowed in zone-flags.ts are listed here.
41 | *
42 | * The following flags will work for all browsers.
43 | *
44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 | *
48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
50 | *
51 | * (window as any).__Zone_enable_cross_context_check = true;
52 | *
53 | */
54 |
55 | /***************************************************************************************************
56 | * Zone JS is required by default for Angular itself.
57 | */
58 | import 'zone.js/dist/zone'; // Included with Angular CLI.
59 |
60 |
61 | /***************************************************************************************************
62 | * APPLICATION IMPORTS
63 | */
64 |
--------------------------------------------------------------------------------
/temperature-basic/src/styles.scss:
--------------------------------------------------------------------------------
1 | @import "node_modules/h8k-design/lib/index";
2 |
3 | body {
4 | margin: 0;
5 | }
6 |
--------------------------------------------------------------------------------
/temperature-basic/src/text.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: {
11 | context(path: string, deep?: boolean, filter?: RegExp): {
12 | keys(): string[];
13 | (id: string): T;
14 | };
15 | };
16 |
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 | BrowserDynamicTestingModule,
20 | platformBrowserDynamicTesting()
21 | );
22 | // Then we find all the tests.
23 | const context = require.context('./', true, /\.spec\.ts$/);
24 | // And load the modules.
25 | context.keys().map(context);
26 |
--------------------------------------------------------------------------------
/temperature-basic/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "./out-tsc/app",
5 | "types": []
6 | },
7 | "files": [
8 | "src/main.ts",
9 | "src/polyfills.ts"
10 | ],
11 | "include": [
12 | "src/**/*.d.ts"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/temperature-basic/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "baseUrl": "./",
5 | "outDir": "./dist/out-tsc",
6 | "sourceMap": true,
7 | "declaration": false,
8 | "downlevelIteration": true,
9 | "experimentalDecorators": true,
10 | "module": "esnext",
11 | "moduleResolution": "node",
12 | "importHelpers": true,
13 | "allowSyntheticDefaultImports": true,
14 | "target": "es2015",
15 | "lib": [
16 | "es2018",
17 | "dom"
18 | ]
19 | },
20 | "angularCompilerOptions": {
21 | "fullTemplateTypeCheck": true,
22 | "strictInjectionParameters": true
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/temperature-basic/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "./out-tsc/spec",
5 | "types": [
6 | "jasmine",
7 | "node"
8 | ]
9 | },
10 | "files": [
11 | "src/test.ts",
12 | "src/polyfills.ts"
13 | ],
14 | "include": [
15 | "src/**/*.spec.ts",
16 | "src/**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/weather-details/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/weather-details/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | # Only exists if Bazel was run
8 | /bazel-out
9 |
10 | # dependencies
11 | /node_modules
12 |
13 | # profiling files
14 | chrome-profiler-events*.json
15 | speed-measure-plugin*.json
16 |
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 |
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 |
34 | # misc
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 |
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 |
--------------------------------------------------------------------------------
/weather-details/README.md:
--------------------------------------------------------------------------------
1 | # Angular: Weather Component
2 |
3 | ## Environment
4 |
5 | - Angular CLI Version: 10.0.4
6 | - Angular Core Version: 10.0.4
7 | - Node Version: 12.18.3
8 | - Default Port: 8000
9 |
10 | ## Application Demo:
11 |
12 | 
13 |
14 | ## Functionality Requirements
15 |
16 | - An array of objects is passed as a prop to the component, where each object is a weather record for a single city. The object has 4 properties:
17 | 1. name: The name of the city. [STRING]
18 | 2. temperature: The temperature in the city. [STRING]
19 | 3. wind: The wind in the city. [STRING]
20 | 4. humidity: The humidity in the cit.y [STRING]
21 |
22 | - There is an input field for the city name where the user can type the name of a city to search the weather data for. (The city name is case-insensitive.)
23 |
24 | - If data exists for the typed input, render the weather details `
` as below, inside `
`.
25 | 1. `{temperature}`, where {temperature} is the value from the weather record.
26 | 2. `
Wind: {wind}
`, where {wind} is the value from the weather record.
27 | 3. `
Humidity: {humidity}
`, where {humidity} is the value from the weather record.
28 |
29 | - If no data exists for the typed input, do not render the weather details `
`, but instead render `
No Results Found
`.
30 |
31 | - At component render, since nothing is typed, do not render above 2 divs.
32 |
33 | ## Testing Requirements
34 |
35 | - The city name input should have the data-test-id attribute 'app-input'.
36 |
37 | - The `
` containing weather details should have the data-test-id attribute 'weather-details'.
38 |
39 | - The `` containing the temperature should have the data-test-id attribute 'output-temperature'.
40 |
41 | - The `
` containing the wind information should have the data-test-id attribute 'output-wind'.
42 |
43 | - The `
` containing the humidity information should have the data-test-id attribute 'output-humidity'.
44 |
45 | - The 'No Results Found' `
.
15 |
16 | {temperature}, where {temperature} is the value from the weather record.
17 |
Wind: {wind}
, where {wind} is the value from the weather record.
18 |
Humidity: {humidity}
, where {humidity} is the value from the weather record.
19 |
20 |
21 | If no data exists for the typed input, do not render the weather details
, but instead render
No Results Found
.
22 |
23 | At component render, since nothing is typed, do not render the above two
elements ("weather-details" and "no-results").
24 |
25 | The following data-test-id attributes are required in the component for the tests to pass:
26 | The city name input should have the data-test-id attribute 'app-input'.
27 | The
containing weather details should have the data-test-id attribute 'weather-details'.
28 | The containing the temperature should have the data-test-id attribute 'output-temperature'.
29 | The
containing the wind information should have the data-test-id attribute 'output-wind'.
30 | The
containing the humidity information should have the data-test-id attribute 'output-humidity'.
31 | The 'No Results Found'