Add comments

Author: lulunac27a

server.ts

@@ -20,12 +20,9 @@ export function app(): express.Express {
   // Example Express Rest API endpoints
   // server.get('/api/**', (req, res) => { });
   // Serve static files from /browser
-  server.get(
-    '*.*',
-    express.static(browserDistFolder, {
-      maxAge: '1y',
-    }),
-  );
+  server.get('*.*', express.static(browserDistFolder, {
+    maxAge: '1y'
+  }));
 
   // All regular routes use the Angular engine
   server.get('*', (req, res, next) => {

src/app/app.component.html

@@ -1,2 +1,3 @@
 <h1>Angular Clicker Game</h1>
-<clicker-button></clicker-button>
+<!--clicker button component--><clicker-button
+></clicker-button>

src/app/app.component.less

@@ -1,3 +1,3 @@
 clicker-button {
-    line-height: 250%;
-}
+  line-height: 250%; //set line height to 250% for clicker button component
+}

src/app/app.component.spec.ts

@@ -9,29 +9,29 @@ describe('AppComponent', () => {
   });
 
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
+    const fixture = TestBed.createComponent(AppComponent); //crease app component
     const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
+    expect(app).toBeTruthy(); //assert app exists and is truthy
   });
 
   it(`should have the 'angular-clicker-game' title`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('angular-clicker-game');
+    expect(app.title).toEqual('angular-clicker-game'); //assert app title is `angular-clicker-game`
   });
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
+    const compiled = fixture.nativeElement as HTMLElement; //get native element
     expect(compiled.querySelector('h1')?.textContent).toContain(
       'Angular Clicker Game',
-    );
+    ); //assert h1 (heading 1) text content is `Angular Clicker Game`
   });
   it('should display counter text', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('span')?.textContent).toContain('Count: 0');
+    expect(compiled.querySelector('span')?.textContent).toContain('Count: 0'); //assert count test to 0
   });
 });

src/app/app.config.server.ts

@@ -3,7 +3,9 @@ import { provideServerRendering } from '@angular/platform-server';
 import { appConfig } from './app.config';
 
 const serverConfig: ApplicationConfig = {
-  providers: [provideServerRendering()],
+  providers: [
+    provideServerRendering()
+  ]
 };
 
 export const config = mergeApplicationConfig(appConfig, serverConfig);

src/app/clicker-button/clicker-button.component.html

@@ -1,5 +1,5 @@
 Amount to increase:
-<input
+<!--set amount to increase value to integer from 1 to 9--><input
   type="number"
   min="1"
   max="9"
@@ -9,11 +9,13 @@
   (change)="changeValue(+amount.value)"
   #amount
 /><br />
-<button (click)="increaseCount()">Increase Counter 1 Count</button>
+<!--increase count buttons--><button (click)="increaseCount()">
+  Increase Counter 1 Count
+</button>
 <button (click)="increaseCount(true)">
   Increase Counter 1 Count by Amount
 </button>
-<span>Count: {{ count }}</span
+<!--counter values text--><span>Count: {{ count }}</span
 ><br />
 <button (click)="increaseCount2()">Increase Counter 2 Count</button>
 <button (click)="increaseCount2(true)">

src/app/clicker-button/clicker-button.component.less

@@ -1,7 +1,10 @@
-@button-normal-width: 5px;
+@button-normal-width: 5px; //normal width for button
 button {
-    margin: @button-normal-width;
-    border-width: (@button-normal-width / 2);
-    border-color: black;
-    font-variant-numeric: tabular-nums;
+  //set all buttons
+  margin: @button-normal-width; //set to margin normal width of button
+  border-width: (
+    @button-normal-width / 2
+  ); //set border width to half of normal width of button
+  border-color: black; //set border color to black
+  font-variant-numeric: tabular-nums; //set font variant for buttons to tabular numbers
 }

src/app/clicker-button/clicker-button.component.spec.ts

@@ -3,32 +3,32 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ClickerButtonComponent } from './clicker-button.component';
 
 describe('ClickerButtonComponent', () => {
-  let component: ClickerButtonComponent;
-  let fixture: ComponentFixture<ClickerButtonComponent>;
+  let component: ClickerButtonComponent; //clicker button component
+  let fixture: ComponentFixture<ClickerButtonComponent>; //component fixture
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ClickerButtonComponent],
-    }).compileComponents();
+    }).compileComponents(); //compile components
 
     fixture = TestBed.createComponent(ClickerButtonComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    fixture.detectChanges(); //detect changes in fixture
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    expect(component).toBeTruthy(); //assert component exists and is truthy
   });
   it('should initialize values when app is loaded', () => {
-    expect(component.count).toEqual(0);
+    expect(component.count).toEqual(0); //assert all component values to 0
     expect(component.count2).toEqual(0);
     expect(component.count3).toEqual(0);
   });
   it('should update counts', () => {
-    component.increaseCount();
+    component.increaseCount(); //increase count
     expect(component.count).toEqual(1);
-    component.changeValue(5);
-    component.increaseCount(true);
+    component.changeValue(5); //change amount value
+    component.increaseCount(true); //increase count by specified amount value
     expect(component.count).toEqual(6);
     component.increaseCount2(true);
     expect(component.count2).toEqual(30);
@@ -39,15 +39,18 @@ describe('ClickerButtonComponent', () => {
     expect(component.count3).toEqual(240);
   });
   it('should update non-integer amount values', () => {
-    component.changeValue(3.75);
+    //assert non-integer amount values
+    component.changeValue(3.75); //non-integer value
     expect(component.amount).toEqual(3);
   });
   it('should update amount values greater than 9', () => {
-    component.changeValue(25);
+    //assert large amount values
+    component.changeValue(25); //number greater than 9
     expect(component.amount).toEqual(9);
   });
   it('should update amount values less than 1', () => {
-    component.changeValue(-7);
+    //assert negative amount values
+    component.changeValue(-7); //number less than 1
     expect(component.amount).toEqual(1);
   });
 });

src/app/clicker-button/clicker-button.component.ts

@@ -8,20 +8,24 @@ import { Component } from '@angular/core';
   styleUrl: './clicker-button.component.less',
 })
 export class ClickerButtonComponent {
-  count: number = 0;
+  count: number = 0; //set counter variables to 0
   count2: number = 0;
   count3: number = 0;
-  amount: number = 1;
+  amount: number = 1; //set default amount to 1
   increaseCount(amountSpecified: boolean = false): void {
-    this.count += amountSpecified ? this.amount : 1;
+    //if amount is specified, increase by specified amount, else increase by 1
+    this.count += amountSpecified ? this.amount : 1; //increase first count
   }
   increaseCount2(amountSpecified: boolean = false): void {
-    this.count2 += amountSpecified ? this.amount * this.count : this.count;
+    //if amount is specified, increase by specified amount times first count, else increase by first count
+    this.count2 += amountSpecified ? this.amount * this.count : this.count; //increase second count
   }
   increaseCount3(amountSpecified: boolean = false): void {
-    this.count3 += amountSpecified ? this.amount * this.count2 : this.count2;
+    //if amount is specified, increase by specified amount times second count, else increase by second count
+    this.count3 += amountSpecified ? this.amount * this.count2 : this.count2; //increase third count
   }
   changeValue(newValue: number) {
-    this.amount = parseInt(String(Math.min(9, Math.max(1, newValue))));
+    //set amount value based on new value number
+    this.amount = parseInt(String(Math.min(9, Math.max(1, newValue)))); //set amount to integer from 1 to 9
   }
 }

src/styles.less

@@ -1,3 +1,3 @@
 * {
-    font-family: system-ui, sans-serif;
-}
+  font-family: system-ui, sans-serif; //set whole content to system-ui or sans=serif font text
+}