In this activity, I created 40 components using HTML and TYPESCRIPT and 10 components of basic programming fundamentals that beginners should know. These components, with different functions, will help you understand the logic of the systems. I have included fundamentals so that a reviewer can study the basics.
50 Components with different functions
#1 component name: displayhelloworld
Display the text "Hello World" on the screen using a variable from the TypeScript file.
TypeScript:
HTML:
#2 component name: showhellobutton
Create a button, and when the user clicks the button, "Hello World" is displayed on the screen.
TypeScript:
HTML:
#3 component name: displayname
User inputs their name, and when the button is clicked, their name is displayed on the screen.
TypeScript:
HTML:
#4 component name: counter
Create a counter that increases by 1 when the user clicks a button.
TypeScript:
HTML:
#5 component name: simpleform
Create a form with text inputs and a submit button, display the submitted input data.
TypeScript:
HTML:
#6 component name: userage
Input user’s birth year, and when the button is clicked, display their age.
TypeScript:
HTML:
#7 component name: usergreeting
User inputs their name, and when clicked, display a personalized greeting.
TypeScript:
HTML:
#8 component name: calculator
Create a simple calculator with add, subtract, multiply, and divide functionalities.
TypeScript:
HTML:
#9 component name: textlength
Input a string, and when the button is clicked, display the length of the string.
TypeScript:
HTML:
#10 component name: currencyconverter
Input a value in one currency, convert it to another currency on button click (1 dollar = 56 Php).
TypeScript:
HTML:
#11 component name: evenoddchecker
Input a number and check if it is even or odd.
TypeScript:
HTML:
#12 component name: wordreverser
Input a word, and when the button is clicked, display the word reversed.
TypeScript:
HTML:
#13 component name: showdate
Create a button that shows the current date and time when clicked.
TypeScript:
HTML:
#14 component name: showusername
User inputs their username, and on clicking a button, their username is displayed on the screen.
TypeScript:
HTML:
#15 component name: multiplicationtable
Input a number and generate its multiplication table.
TypeScript:
HTML:
#16 component name: simplelogin
Create a simple login form with email and password fields.
TypeScript:
HTML:
#17 component name: fahrenheittocelsius
Convert temperature from Fahrenheit to Celsius when the user inputs a value.
TypeScript:
HTML:
#18 component name: bookmarklist
Allow users to input URLs and display them using anchor tags.
TypeScript:
HTML:
#19 component name: charactercounter
Input a string and count the number of characters in it.
TypeScript:
HTML:
#20 component name: palindromechecker
Input a word and check if it's a palindrome.
TypeScript:
HTML:
#21 component name: temperatureconverter
Convert temperature from Celsius to Fahrenheit and vice versa.
TypeScript:
HTML:
#22 component name: shoppinglist
Create a shopping list where users can add and remove items (use list data structure).
TypeScript:
HTML:
#23 component name: factorialcalculator
Input a number and calculate its factorial when a button is clicked.
TypeScript:
HTML:
#24 component name: todomanager
Create a simple to-do list where users can add and remove tasks (use list data structure).
TypeScript:
HTML:
#25 component name: guessnumbergame
Create a number guessing game where the user inputs guesses.
TypeScript:
HTML:
#26 component name: wordcounter
Input a string and count the number of words in it.
TypeScript:
HTML:
#27 component name: randomnumbergenerator
Generate and display a random number between a specified range when a button is clicked.
TypeScript:
HTML:
#28 component name: multiplicationchecker
Check if a number is a multiple of another number.
TypeScript:
HTML:
#29 component name: uppercaseconverter
Input a string and convert it to uppercase when the button is clicked.
TypeScript:
HTML:
#30 component name: wordshuffler
Input a word and shuffle its letters randomly.
TypeScript:
HTML:
#31 component name: bmisolve
Input height and weight, calculate and display the BMI.
TypeScript:
HTML:
#32 component name: usernamevalidator
Input a username and check its validity based on predefined rules (Create a variable).
TypeScript:
HTML:
#33 component name: interestcalculator
Input principal, rate, and time, and calculate simple interest.
TypeScript:
HTML:
#34 component name: compoundinterestcalculator
Calculate compound interest when principal, rate, time, and frequency are input.
TypeScript:
HTML:
#35 component name: fibonaccigenerator
Generate and display the first N Fibonacci numbers when a button is clicked.
TypeScript:
HTML:
#36 component name: oddsumcalculator
Input a number, and calculate the sum of odd numbers up to that number.
TypeScript:
HTML:
#37 component name: currencyformatter
Input a number and format it as currency when a button is clicked (Dollar, Php, Euro - search euro conversion).
TypeScript:
HTML:
#38 component name: randomquotedisplay
Display a random quote when a button is clicked (use list data structures).
TypeScript:
HTML:
#39 component name: uppercasegreeting
User inputs their name, and when the button is clicked, display the name in uppercase.
TypeScript:
HTML:
#40 component name: divisiblechecker
Input two numbers, and check if the first is divisible by the second.
TypeScript:
HTML:
#41 component name: ifelsestatement
TypeScript:
import { Component } from '@angular/core'; @Component({ selector: 'app-ifelsestatement', templateUrl: './ifelsestatement.component.html', styleUrl: './ifelsestatement.component.css' }) export class IfelsestatementComponent { number: number | null = null; message: string = ''; checkNumber(): void { if (this.number !== null) { if (this.number > 0) { this.message = 'The number is positive'; } else if (this.number < 0) { this.message = 'The number is negative'; } else { this.message = 'The number is zero'; } } else { this.message = 'Please enter a number'; } } }
HTML:
<div> <label for="numberInput">Enter a number: </label> <input type="number" id="numberInput" [(ngModel)]="number" placeholder="Enter a number"> </div> <br> <div> <button (click)="checkNumber()">Check Number</button> </div> <div *ngIf="message"> <p>Result: {{ message }}</p> </div>
#42 component name: switchcasestatement
TypeScript:
import { Component } from '@angular/core'; @Component({ selector: 'app-switchcasestatement', templateUrl: './switchcasestatement.component.html', styleUrl: './switchcasestatement.component.css' }) export class SwitchcasestatementComponent { dayNumber: number | null = null; dayName: string = ''; findDay(): void { if (this.dayNumber !== null) { switch (this.dayNumber) { case 1: this.dayName = 'Sunday'; break; case 2: this.dayName = 'Monday'; break; case 3: this.dayName = 'Tuesday'; break; case 4: this.dayName = 'Wednesday'; break; case 5: this.dayName = 'Thursday'; break; case 6: this.dayName = 'Friday'; break; case 7: this.dayName = 'Saturday'; break; default: this.dayName = 'Invalid day number. Please enter a number between 1 and 7.'; } } } }
HTML:
<div> <label for="dayInput">Enter a number (1-7) for the day of the week: </label> <input type="number" id="dayInput" [(ngModel)]="dayNumber" placeholder="Enter day number"> </div> <br> <div> <button (click)="findDay()">Find Day</button> </div> <div *ngIf="dayName"> <p>Day: {{ dayName }}</p> </div>
#43 component name: whileloop
TypeScript:
import { Component } from '@angular/core'; @Component({ selector: 'app-whileloop', templateUrl: './whileloop.component.html', styleUrl: './whileloop.component.css' }) export class WhileloopComponent { inputNumber: number | null = null; result: string = ''; generateNumbers(): void { if (this.inputNumber !== null && this.inputNumber > 0) { let i = 1; this.result = ''; while (i <= this.inputNumber) { this.result += i + ' '; i++; } } else { this.result = 'Please enter a valid number greater than 0.'; } } }
HTML:
<div> <label for="numberInput">Enter a number: </label> <input type="number" id="numberInput" [(ngModel)]="inputNumber" placeholder="Enter a number"> </div> <br> <div> <button (click)="generateNumbers()">Generate Numbers</button> </div> <div *ngIf="result"> <p>Result: {{ result }}</p> </div>
#44 component name: dowhileloop
TypeScript:
import { Component } from '@angular/core'; @Component({ selector: 'app-dowhileloop', templateUrl: './dowhileloop.component.html', styleUrl: './dowhileloop.component.css' }) export class DowhileloopComponent { inputNumber: number | null = null; result: string = ''; generateNumbers(): void { if (this.inputNumber !== null && this.inputNumber > 0) { let i = 1; this.result = ''; do { this.result += i + ' '; i++; } while (i <= this.inputNumber); } else { this.result = 'Please enter a valid number greater than 0.'; } } }
HTML:
<div> <label for="numberInput">Enter a number: </label> <input type="number" id="numberInput" [(ngModel)]="inputNumber" placeholder="Enter a number"> </div> <br> <div> <button (click)="generateNumbers()">Generate Numbers</button> </div> <div *ngIf="result"> <p>Result: {{ result }}</p> </div>
#45 component name: forloop
TypeScript:
import { Component } from '@angular/core'; @Component({ selector: 'app-forloop', templateUrl: './forloop.component.html', styleUrl: './forloop.component.css' }) export class ForloopComponent { inputNumber: number | null = null; result: string = ''; generateNumbers(): void { if (this.inputNumber !== null && this.inputNumber > 0) { this.result = ''; for (let i = 1; i <= this.inputNumber; i++) { this.result += i + ' '; } } else { this.result = 'Please enter a valid number greater than 0.'; } } }
HTML:
<div> <label for="numberInput">Enter a number: </label> <input type="number" id="numberInput" [(ngModel)]="inputNumber" placeholder="Enter a number"> </div> <br> <div> <button (click)="generateNumbers()">Generate Numbers</button> </div> <div *ngIf="result"> <p>Result: {{ result }}</p> </div>
#46 component name: nestedforloop
TypeScript:
import { Component } from '@angular/core'; @Component({ selector: 'app-nestedforloop', templateUrl: './nestedforloop.component.html', styleUrl: './nestedforloop.component.css' }) export class NestedforloopComponent { rows: number | null = null; columns: number | null = null; grid: string[][] = []; generateGrid(): void { this.grid = []; if (this.rows !== null && this.columns !== null && this.rows > 0 && this.columns > 0) { for (let i = 1; i <= this.rows; i++) { const row: string[] = []; for (let j = 1; j <= this.columns; j++) { row.push(`${i}-${j}`); } this.grid.push(row); } } else { this.grid = [['Please enter valid numbers for rows and columns.']]; } } }
HTML:
<div> <label for="rowsInput">Number of rows: </label> <input type="number" id="rowsInput" [(ngModel)]="rows" placeholder="Enter number of rows"> </div> <br> <div> <label for="columnsInput">Number of columns: </label> <input type="number" id="columnsInput" [(ngModel)]="columns" placeholder="Enter number of columns"> </div> <br> <div> <button (click)="generateGrid()">Generate Grid</button> </div> <div ngIf="grid.length > 0"> <p>Grid:</p> <table border="1"> <tr ngFor="let row of grid"> <td *ngFor="let cell of row">{{ cell }}</td> </tr> </table> </div>
#47 component name: forinloop
TypeScript:
import { Component } from '@angular/core'; @Component({ selector: 'app-forinloop', templateUrl: './forinloop.component.html', styleUrl: './forinloop.component.css' }) export class ForinloopComponent { data: { [key: string]: any } = { 'Name': 'Walter Mark', 'Age': 22, 'Occupation': 'Developer', 'Country': 'PH' }; properties: string[] = []; values: any[] = []; extractData(): void { this.properties = []; this.values = []; for (let key in this.data) { if (this.data.hasOwnProperty(key)) { this.properties.push(key); this.values.push(this.data[key]); } } } }
HTML:
<div> <button (click)="extractData()">Extract Data</button> </div> <div ngIf="properties.length > 0"> <p>Object Properties:</p> <ul> <li ngFor="let property of properties; let i = index"> {{ property }}: {{ values[i] }} </li> </ul> </div>
#48 component name: forofloop
TypeScript:
import { Component } from '@angular/core'; @Component({ selector: 'app-forofloop', templateUrl: './forofloop.component.html', styleUrl: './forofloop.component.css' }) export class ForofloopComponent { numbers: number[] = [1, 2, 3, 4, 5]; elements: number[] = []; extractElements(): void { this.elements = []; for (const number of this.numbers) { this.elements.push(number); } } }
HTML:
<div> <button (click)="extractElements()">Extract Elements</button> </div> <div ngIf="elements.length > 0"> <p>Array Elements:</p> <p ngFor="let element of elements"> {{ element }} </p> </div>
#49 component name: booleanchecker
TypeScript:
import { Component } from '@angular/core'; @Component({ selector: 'app-booleanchecker', templateUrl: './booleanchecker.component.html', styleUrl: './booleanchecker.component.css' }) export class BooleancheckerComponent { inputValue: string = ''; result: string = ''; checkBoolean(): void { const lowerCaseValue = this.inputValue.toLowerCase(); const booleanValue = lowerCaseValue === 'true' ? true : lowerCaseValue === 'false' ? false : null; if (booleanValue === true) { this.result = 'The value is TRUE'; } else if (booleanValue === false) { this.result = 'The value is FALSE'; } else { this.result = 'No value provided'; } } }
HTML:
<div> <label for="booleanInput">Enter a boolean value (true/false): </label> <input type="text" id="booleanInput" [(ngModel)]="inputValue" name="booleanInput" required> <button type="button" (click)="checkBoolean()">Check</button> </div> <div *ngIf="result"> <p>{{ result }}</p> </div>
#50 component name: stringmanipulator
TypeScript:
import { Component } from '@angular/core'; @Component({ selector: 'app-stringmanipulator', templateUrl: './stringmanipulator.component.html', styleUrl: './stringmanipulator.component.css' }) export class StringmanipulatorComponent { inputString: string = ''; reversedString: string = ''; uppercaseString: string = ''; manipulateString(): void { this.reversedString = this.reverse(this.inputString); this.uppercaseString = this.inputString.toUpperCase(); } private reverse(str: string): string { return str.split('').reverse().join(''); } }
HTML:
<div> <label for="stringInput">Enter a string:</label> <input type="text" id="stringInput" [(ngModel)]="inputString" name="stringInput" required> <button type="button" (click)="manipulateString()">Manipulate</button> </div> <div *ngIf="reversedString || uppercaseString"> <p>Reversed String: {{ reversedString }}</p> <p>Uppercase String: {{ uppercaseString }}</p> </div>
Github link: https://github.com/Walterific/50-AngularComponents.git