50 Components with different functions

1. Component name: displayhelloworld
   Display the text "Hello World" on the screen using a variable from the TypeScript file.

import { Component } from '@angular/core';

@Component({
  selector: 'app-displayhelloworld',
  templateUrl: './displayhelloworld.component.html',
  styleUrl: './displayhelloworld.component.css'
})
export class DisplayhelloworldComponent {
  message: string = 'Hello World!';
}

<p>{{message}}</p>

2. component name: showhellobutton
   Create a button, and when the user clicks the button, "Hello World" is displayed on the screen.

import { Component } from '@angular/core';

@Component({
  selector: 'app-showhellobutton',
  templateUrl: './showhellobutton.component.html',
  styleUrl: './showhellobutton.component.css'
})
export class ShowhellobuttonComponent {

}

<p>Hello World!</p>

3. component name: displayname
   User inputs their name, and when the button is clicked, their name is displayed on the screen.

import { Component } from '@angular/core';

@Component({
  selector: 'app-displayname',
  templateUrl: './displayname.component.html',
  styleUrl: './displayname.component.css'
})
export class DisplaynameComponent {
  name: string = '';
  result: string = '';

  show() : void {
    this.result = this.name;
  }
}

<input type="text" placeholder="Input your name" [(ngModel)]="name">
<button type="button" (click)="show()">Submit</button>
<br>
<p>{{result}}</p>

4. component name: counter
   Create a counter that increases by 1 when the user clicks a button.

import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrl: './counter.component.css'
})
export class CounterComponent {
  count: number = 0;

  increment(): void {
    this.count++;
  }
}

<div class="counter-container">
    <h2>Counter: {{ count }}</h2>
    <button (click)="increment()">Increase</button>
  </div>

5. component name: simpleform
   Create a form with text inputs and a submit button, display the submitted input data.

import { Component } from '@angular/core';

@Component({
  selector: 'app-simpleform',
  templateUrl: './simpleform.component.html',
  styleUrl: './simpleform.component.css'
})
export class SimpleformComponent {
  submittedData: { name: string, email: string } | null = null;

  onSubmit(): void {
    const form = document.querySelector('form') as HTMLFormElement;
    const formData = new FormData(form);

    this.submittedData = {
      name: formData.get('name') as string,
      email: formData.get('email') as string,
    };
  }
}

`<div class="form-container">
    <form (ngSubmit)="onSubmit()" #simpleForm="ngForm">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" ngModel required>

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" ngModel required>

      <button type="submit" [disabled]="!simpleForm.form.valid">Submit</button>
    </form>

    <div *ngIf="submittedData">
      <h3>Submitted Data:</h3>
      <p><strong>Name:</strong> {{submittedData.name}}</p>
      <p><strong>Email:</strong> {{submittedData.email}}</p>
    </div>
  </div>

6. component name: userage
   Input user’s birth year, and when the button is clicked, display their age.

import { Component } from '@angular/core';

@Component({
  selector: 'app-userage',
  templateUrl: './userage.component.html',
  styleUrl: './userage.component.css'
})
export class UserageComponent {
  birthYear: number | null = null;
  age: number | null = null;

  calculateAge() {
    if (this.birthYear) {
      const currentYear = new Date().getFullYear();
      this.age = currentYear - this.birthYear;
    }
  }
}

<div>
    <h2>Age Calculator</h2>
    <input type="number" [(ngModel)]="birthYear" placeholder="Enter your birth year">
    <button (click)="calculateAge()">Calculate Age</button>
    <p *ngIf="age !== null">Your age is: {{ age }}</p>
  </div>

7. component name: usergreeting
   User inputs their name, and when clicked, display a personalized greeting.

import { Component } from '@angular/core';

@Component({
  selector: 'app-usergreeting',
  templateUrl: './usergreeting.component.html',
  styleUrls: ['./usergreeting.component.css'] // Use 'styleUrls' for an array
})
export class UsergreetingComponent {  
  name: string = '';
  greeting: string = '';

  generateGreeting(): void {
    if (this.name.trim()) {
      this.greeting = `Hello, ${this.name}! Welcome to my project about Angular Components.`;
    } else {
      this.greeting = 'Please enter your name.';
    }
  }
}

<div>
  <h2>Enter Your Name:</h2>
  <input type="text" [(ngModel)]="name" placeholder="Enter your name">
  <button (click)="generateGreeting()">Greet Me</button>

  <p *ngIf="greeting">{{ greeting }}</p>
</div>

8. component name: calculator
   Create a simple calculator with add, subtract, multiply, and divide functionalities.

import { Component } from '@angular/core';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrl: './calculator.component.css'
})
export class CalculatorComponent {
  num1: number | null = null;
  num2: number | null = null;
  operation: string = 'add';
  result: number | null = null;

  calculate(): void {
    if (this.num1 !== null && this.num2 !== null) {
      switch (this.operation) {
        case 'add':
          this.result = this.num1 + this.num2;
          break;
        case 'subtract':
          this.result = this.num1 - this.num2;
          break;
        case 'multiply':
          this.result = this.num1 * this.num2;
          break;
        case 'divide':
          this.result = this.num1 / this.num2;
          break;
        default:
          this.result = null;
          break;
      }
    }
  }
}

<div class="calculator-container">
    <form (ngSubmit)="calculate()">
      <label for="num1">Enter first number:</label>
      <input type="number" id="num1" [(ngModel)]="num1" name="num1" required>

      <label for="num2">Enter second number:</label>
      <input type="number" id="num2" [(ngModel)]="num2" name="num2" required>

      <label for="operation">Operation:</label>
      <select [(ngModel)]="operation" name="operation" required>
        <option value="add">Add</option>
        <option value="subtract">Subtract</option>
        <option value="multiply">Multiply</option>
        <option value="divide">Divide</option>
      </select>

      <button type="submit">Calculate</button>
    </form>

    <div *ngIf="result !== null">
      <h3>Result: {{ result }}</h3>
    </div>
  </div>

9. component name: textlength

   Input a string, and when the button is clicked, display the length of the string.

import { Component } from '@angular/core';

@Component({
  selector: 'app-textlength',
  templateUrl: './textlength.component.html',
  styleUrl: './textlength.component.css'
})
export class TextlengthComponent {
  inputText: string = '';
  textLength: number | null = null;

  calculateLength(): void {
    this.textLength = this.inputText.length;
  }
}

<div class="textlength-container">
    <form (ngSubmit)="calculateLength()">
      <label for="text">Enter a string:</label>
      <input type="text" id="text" [(ngModel)]="inputText" name="text" required>

      <button type="submit">Get Length</button>
    </form>

    <div *ngIf="textLength !== null">
      <h3>Length: {{ textLength }}</h3>
    </div>
  </div>

10. component name: currencyconverter

    Input a value in one currency, convert it to another currency on button click (1 dollar = 56 Php).

import { Component } from '@angular/core';

@Component({
  selector: 'app-currencyconverter',
  templateUrl: './currencyconverter.component.html',
  styleUrl: './currencyconverter.component.css'
})
export class CurrencyconverterComponent {
  usdValue: number | null = null;
  phpValue: number | null = null;
  conversionRate: number = 56;  // 1 USD = 56 PHP

  convertCurrency(): void {
    if (this.usdValue !== null) {
      this.phpValue = this.usdValue * this.conversionRate;
    }
  }
}

<div class="currencyconverter-container">
    <form (ngSubmit)="convertCurrency()">
      <label for="usd">Enter value in USD:</label>
      <input type="number" id="usd" [(ngModel)]="usdValue" name="usdValue" required>

      <button type="submit">Convert to PHP</button>
    </form>

    <div *ngIf="phpValue !== null">
      <h3>PHP Value: {{ phpValue }}</h3>
    </div>
  </div>

11. component name: evenoddchecker

    Input a number and check if it is even or odd.

import { Component } from '@angular/core';

@Component({
  selector: 'app-evenoddchecker',
  templateUrl: './evenoddchecker.component.html',
  styleUrl: './evenoddchecker.component.css'
})
export class EvenoddcheckerComponent {
  numberInput: number | null = null;
  result: string = '';

  checkEvenOdd(): void {
    if (this.numberInput !== null) {
      this.result = this.numberInput % 2 === 0 ? 'Even' : 'Odd';
    }
  }
}

<div>
    <h3>Even or Odd Checker</h3>
    <input type="number" [(ngModel)]="numberInput" placeholder="Enter a number">
    <button (click)="checkEvenOdd()">Check</button>
    <p *ngIf="result">{{ result }}</p>
  </div>

12. component name: wordreverser

    Input a word, and when the button is clicked, display the word reversed.

import { Component } from '@angular/core';

@Component({
  selector: 'app-wordreverser',
  templateUrl: './wordreverser.component.html',
  styleUrls: ['./wordreverser.component.css']
})
export class WordreverserComponent {
  inputWord: string = '';
  reversedWord: string | null = null;

  reverseWord(): void {
    this.reversedWord = this.inputWord.split('').reverse().join('');
  }
}

<div>
    <h3>Word Reverser</h3>
    <input type="text" id="inputWord" [(ngModel)]="inputWord" placeholder="Enter a word">
    <button (click)="reverseWord()">Reverse</button>
    <p *ngIf="reversedWord">Reversed Word: {{ reversedWord }}</p>
  </div>

13. component name: showdate

    Create a button that shows the current date and time when clicked.

import { Component } from '@angular/core';

@Component({
  selector: 'app-showdate',
  templateUrl: './showdate.component.html',
  styleUrl: './showdate.component.css'
})
export class ShowdateComponent {
  currentDate: string | null = null;

  showDate(): void {
    const now = new Date();
    this.currentDate = now.toLocaleString();
  }
}

<div>
    <h3>Show Current Date and Time</h3>
    <button (click)="showDate()">Show Date</button>
    <p *ngIf="currentDate">Current Date and Time: {{ currentDate }}</p>
  </div>

14. component name: showusername

    User inputs their username, and on clicking a button, their username is displayed on the screen.

import { Component } from '@angular/core';

@Component({
  selector: 'app-showusername',
  templateUrl: './showusername.component.html',
  styleUrl: './showusername.component.css'
})
export class ShowusernameComponent {
  username: string = '';
  displayedUsername: string | null = null;

  showUsername(): void {
    this.displayedUsername = this.username;
  }
}

<div>
    <h3>Show Username</h3>
    <input type="text" [(ngModel)]="username" placeholder="Enter your username">
    <button (click)="showUsername()">Show Username</button>
    <p *ngIf="displayedUsername">Hello, {{ displayedUsername }}!</p>
  </div>

15. component name: multiplicationtable

    Input a number and generate its multiplication table.

import { Component } from '@angular/core';

@Component({
  selector: 'app-multiplicationtable',
  templateUrl: './multiplicationtable.component.html',
  styleUrl: './multiplicationtable.component.css'
})
export class MultiplicationtableComponent {
  numberInput: number | null = null;
  table: number[] = [];

  generateTable(): void {
    if (this.numberInput !== null) {
      this.table = Array.from({ length: 10 }, (_, i) => this.numberInput! * (i + 1));
    }
  }
}

<div>
    <h3>Multiplication Table</h3>
    <input type="number" [(ngModel)]="numberInput" placeholder="Enter a number">
    <button (click)="generateTable()">Generate Table</button>

    <ul *ngIf="table.length > 0">
      <li *ngFor="let result of table; let i = index">{{ numberInput }} x {{ i + 1 }} = {{ result }}</li>
    </ul>
  </div>

16. component name: simplelogin

    Create a simple login form with email and password fields.

import { Component } from '@angular/core';

@Component({
  selector: 'app-simplelogin',
  templateUrl: './simplelogin.component.html',
  styleUrl: './simplelogin.component.css'
})
export class SimpleloginComponent {
  email: string = '';
  password: string = '';
  loginMessage: string | null = null;

  login(): void {
    this.loginMessage = `Logged in as: ${this.email}`;
  }
}

<div>
    <h3>Simple Login</h3>
    <input type="email" [(ngModel)]="email" placeholder="Enter email">
    <input type="password" [(ngModel)]="password" placeholder="Enter password">
    <button (click)="login()">Login</button>
    <p *ngIf="loginMessage">{{ loginMessage }}</p>
  </div>

17. component name: fahrenheittocelsius

    Convert temperature from Fahrenheit to Celsius when the user inputs a value.

import { Component } from '@angular/core';

@Component({
  selector: 'app-fahrenheittocelsius',
  templateUrl: './fahrenheittocelsius.component.html',
  styleUrl: './fahrenheittocelsius.component.css'
})
export class FahrenheittocelsiusComponent {
  fahrenheit: number | null = null;
  celsius: number | null = null;

  convert(): void {
    if (this.fahrenheit !== null) {
      this.celsius = (this.fahrenheit - 32) * 5 / 9;
    }
  }
}

<div>
    <h3>Fahrenheit to Celsius Converter</h3>
    <input type="number" [(ngModel)]="fahrenheit" placeholder="Enter Fahrenheit">
    <button (click)="convert()">Convert</button>
    <p *ngIf="celsius !== null">Temperature in Celsius: {{ celsius.toFixed(2) }}°C</p>
  </div>

18. component name: bookmarklist

    Allow users to input URLs and display them using anchor tags.

import { Component } from '@angular/core';

@Component({
  selector: 'app-bookmarklist',
  templateUrl: './bookmarklist.component.html',
  styleUrl: './bookmarklist.component.css'
})
export class BookmarklistComponent {
  url: string = '';
  bookmarks: string[] = [];

  addBookmark(): void {
    if (this.url) {
      this.bookmarks.push(this.url);
      this.url = '';
    }
  }
}

<div>
    <h3>Bookmark List</h3>
    <input type="text" [(ngModel)]="url" placeholder="Enter URL">
    <button (click)="addBookmark()">Add Bookmark</button>

    <ul>
      <li *ngFor="let bookmark of bookmarks">
        <a [href]="bookmark" target="_blank">{{ bookmark }}</a>
      </li>
    </ul>
  </div>

19. component name: charactercounter

    Input a string and count the number of characters in it.

import { Component } from '@angular/core';

@Component({
  selector: 'app-charactercounter',
  templateUrl: './charactercounter.component.html',
  styleUrl: './charactercounter.component.css'
})
export class CharactercounterComponent {
  inputText: string = '';
  characterCount: number = 0;

  countCharacters(): void {
    this.characterCount = this.inputText.length;
  }
}

<div>
    <h3>Character Counter</h3>
    <input type="text" [(ngModel)]="inputText" (input)="countCharacters()" placeholder="Enter text">
    <p>Character Count: {{ characterCount }}</p>
  </div>

20. component name: palindromechecker

    Input a word and check if it's a palindrome.

import { Component } from '@angular/core';

@Component({
  selector: 'app-palindromechecker',
  templateUrl: './palindromechecker.component.html',
  styleUrl: './palindromechecker.component.css'
})
export class PalindromecheckerComponent {
  inputWord: string = '';
  result: string | null = null;

  checkPalindrome(): void {
    const reversedWord = this.inputWord.split('').reverse().join('');
    this.result = this.inputWord === reversedWord ? 'It is a palindrome!' : 'It is not a palindrome.';
  }
}

<div>
    <h3>Palindrome Checker</h3>
    <input type="text" [(ngModel)]="inputWord" placeholder="Enter a word">
    <button (click)="checkPalindrome()">Check</button>
    <p *ngIf="result">{{ result }}</p>
  </div>

21. component name: temperatureconverter

    Convert temperature from Celsius to Fahrenheit and vice versa.

import { Component } from '@angular/core';

@Component({
  selector: 'app-temperatureconverter',
  templateUrl: './temperatureconverter.component.html',
  styleUrl: './temperatureconverter.component.css'
})
export class TemperatureconverterComponent {
  celsius: number | null = null;
  fahrenheit: number | null = null;

  convertToFahrenheit(): void {
    if (this.celsius !== null) {
      this.fahrenheit = (this.celsius * 9 / 5) + 32;
    }
  }

  convertToCelsius(): void {
    if (this.fahrenheit !== null) {
      this.celsius = (this.fahrenheit - 32) * 5 / 9;
    }
  }
}

<div>
    <h3>Temperature Converter</h3>
    <div>
      <input type="number" [(ngModel)]="celsius" placeholder="Celsius">
      <button (click)="convertToFahrenheit()">Convert to Fahrenheit</button>
      <p *ngIf="fahrenheit !== null">{{ celsius }}°C = {{ fahrenheit.toFixed(2) }}°F</p>
    </div>

    <div>
      <input type="number" [(ngModel)]="fahrenheit" placeholder="Fahrenheit">
      <button (click)="convertToCelsius()">Convert to Celsius</button>
      <p *ngIf="celsius !== null">{{ fahrenheit }}°F = {{ celsius.toFixed(2) }}°C</p>
    </div>
  </div>

22. component name: shoppinglist

    Create a shopping list where users can add and remove items (use list data structure).

import { Component } from '@angular/core';

@Component({
  selector: 'app-shoppinglist',
  templateUrl: './shoppinglist.component.html',
  styleUrl: './shoppinglist.component.css'
})
export class ShoppinglistComponent {
  item: string = '';
  shoppingList: string[] = [];

  addItem(): void {
    if (this.item) {
      this.shoppingList.push(this.item);
      this.item = '';
    }
  }

  removeItem(index: number): void {
    this.shoppingList.splice(index, 1);
  }
}

<div>
    <h3>Shopping List</h3>
    <input type="text" [(ngModel)]="item" placeholder="Add an item">
    <button (click)="addItem()">Add</button>

    <ul>
      <li *ngFor="let listItem of shoppingList; let i = index">
        {{ listItem }} <button (click)="removeItem(i)">Remove</button>
      </li>
    </ul>
  </div>

23. component name: factorialcalculator

    Input a number and calculate its factorial when a button is clicked.

import { Component } from '@angular/core';

@Component({
  selector: 'app-factorialcalculator',
  templateUrl: './factorialcalculator.component.html',
  styleUrl: './factorialcalculator.component.css'
})
export class FactorialcalculatorComponent {
  numberInput: number | null = null;
  result: number | null = null;

  calculateFactorial(): void {
    if (this.numberInput !== null && this.numberInput >= 0) {
      this.result = this.factorial(this.numberInput);
    }
  }

  factorial(n: number): number {
    if (n === 0 || n === 1) {
      return 1;
    }
    return n * this.factorial(n - 1);
  }
}

<div>
    <h3>Factorial Calculator</h3>
    <input type="number" [(ngModel)]="numberInput" placeholder="Enter a number">
    <button (click)="calculateFactorial()">Calculate</button>
    <p *ngIf="result !== null">Factorial of {{ numberInput }} = {{ result }}</p>
  </div>

24. component name: todomanager

    Create a simple to-do list where users can add and remove tasks (use list data structure).

import { Component } from '@angular/core';

@Component({
  selector: 'app-todomanager',
  templateUrl: './todomanager.component.html',
  styleUrl: './todomanager.component.css'
})
export class TodomanagerComponent {
  task: string = '';
  todoList: string[] = [];

  addTask(): void {
    if (this.task) {
      this.todoList.push(this.task);
      this.task = '';
    }
  }

  removeTask(index: number): void {
    this.todoList.splice(index, 1);
  }
}

<div>
    <h3>Todo Manager</h3>
    <input type="text" [(ngModel)]="task" placeholder="Add a task">
    <button (click)="addTask()">Add Task</button>

    <ul>
      <li *ngFor="let taskItem of todoList; let i = index">
        {{ taskItem }} <button (click)="removeTask(i)">Remove</button>
      </li>
    </ul>
  </div>

25. component name: guessnumbergame

    Create a number guessing game where the user inputs guesses.

import { Component } from '@angular/core';

@Component({
  selector: 'app-guessnumbergame',
  templateUrl: './guessnumbergame.component.html',
  styleUrl: './guessnumbergame.component.css'
})
export class GuessnumbergameComponent {
  randomNumber: number = Math.floor(Math.random() * 100) + 1;
  guess: number | null = null;
  message: string | null = null;

  checkGuess(): void {
    if (this.guess !== null) {
      if (this.guess > this.randomNumber) {
        this.message = 'Too high!';
      } else if (this.guess < this.randomNumber) {
        this.message = 'Too low!';
      } else {
        this.message = 'Correct! You guessed the number!';
      }
    }
  }

  resetGame(): void {
    this.randomNumber = Math.floor(Math.random() * 100) + 1;
    this.guess = null;
    this.message = null;
  }
}

<div>
    <h3>Guess the Number Game</h3>
    <input type="number" [(ngModel)]="guess" placeholder="Enter your guess">
    <button (click)="checkGuess()">Check Guess</button>
    <p *ngIf="message">{{ message }}</p>
    <button (click)="resetGame()">Reset Game</button>
  </div>

26. component name: wordcounter

    Input a string and count the number of words in it.

import { Component } from '@angular/core';

@Component({
  selector: 'app-wordcounter',
  templateUrl: './wordcounter.component.html',
  styleUrl: './wordcounter.component.css'
})
export class WordcounterComponent {
  inputText: string = '';
  wordCount: number = 0;

  countWords() {
    if (this.inputText.trim().length > 0) {
      this.wordCount = this.inputText.trim().split(/\s+/).length;
    } else {
      this.wordCount = 0;
    }
  }
}

<div>
    <h2>Word Counter</h2>
    <textarea [(ngModel)]="inputText" rows="4" placeholder="Enter your text here"></textarea>
    <button (click)="countWords()">Count Words</button>
    <p>Word count: {{ wordCount }}</p>
  </div>

27. component name: randomnumbergenerator

    Generate and display a random number between a specified range when a button is clicked.

import { Component } from '@angular/core';

@Component({
  selector: 'app-randomnumbergenerator',
  templateUrl: './randomnumbergenerator.component.html',
  styleUrl: './randomnumbergenerator.component.css'
})
export class RandomnumbergeneratorComponent {
  min: number = 0;
  max: number = 100;
  randomNumber: number | null = null;

  generateRandomNumber() {
    this.randomNumber = Math.floor(Math.random() * (this.max - this.min + 1)) + this.min;
  }
}

<div>
    <h2>Random Number Generator</h2>
    <input type="number" [(ngModel)]="min" placeholder="Min">
    <input type="number" [(ngModel)]="max" placeholder="Max">
    <button (click)="generateRandomNumber()">Generate Random Number</button>
    <p>Random number: {{ randomNumber }}</p>
  </div>

28. component name: multiplicationchecker

    Check if a number is a multiple of another number.

import { Component } from '@angular/core';

@Component({
  selector: 'app-multiplicationchecker',
  templateUrl: './multiplicationchecker.component.html',
  styleUrl: './multiplicationchecker.component.css'
})
export class MultiplicationcheckerComponent {
  number1: number = 0;
  number2: number = 0;
  resultMessage: string = '';

  checkMultiplication(): void {
    if (this.number2 !== 0 && this.number1 % this.number2 === 0) {
      this.resultMessage = `${this.number1} is a multiple of ${this.number2}.`;
    } else {
      this.resultMessage = `${this.number1} is not a multiple of ${this.number2}.`;
    }
  }
}

<div class="multiplication-checker">
    <h2>Multiplication Checker</h2>

    <div>
      <label for="number1">Enter a number:</label>
      <input type="number" [(ngModel)]="number1" id="number1">
    </div>

    <div>
      <label for="number2">Enter another number:</label>
      <input type="number" [(ngModel)]="number2" id="number2">
    </div>

    <button (click)="checkMultiplication()">Check Multiplication</button>

    <p>{{ resultMessage }}</p>
  </div>

29. component name: uppercaseconverter

    Input a string and convert it to uppercase when the button is clicked.

import { Component } from '@angular/core';

@Component({
  selector: 'app-uppercaseconverter',
  templateUrl: './uppercaseconverter.component.html',
  styleUrl: './uppercaseconverter.component.css'
})
export class UppercaseconverterComponent {
  inputText: string = '';
  convertedText: string = '';

  convertToUppercase() {
    this.convertedText = this.inputText.toUpperCase();
  }
}

<div>
    <h2>Uppercase Converter</h2>
    <input type="text" [(ngModel)]="inputText" placeholder="Enter text">
    <button (click)="convertToUppercase()">Convert to Uppercase</button>
    <p>Uppercase text: {{ convertedText }}</p>
  </div>

30. component name: wordshuffler

    Input a word and shuffle its letters randomly.

import { Component } from '@angular/core';

@Component({
  selector: 'app-wordshuffler',
  templateUrl: './wordshuffler.component.html',
  styleUrl: './wordshuffler.component.css'
})
export class WordshufflerComponent {
  inputText: string = '';
  shuffledText: string = '';

  shuffleWord() {
    this.shuffledText = this.inputText.split('').sort(() => 0.5 - Math.random()).join('');
  }
}

<div>
    <h2>Word Shuffler</h2>
    <input type="text" [(ngModel)]="inputText" placeholder="Enter word">
    <button (click)="shuffleWord()">Shuffle Word</button>
    <p>Shuffled word: {{ shuffledText }}</p>
  </div>

31. component name: bmisolver

    Input height and weight, calculate and display the BMI.

import { Component } from '@angular/core';

@Component({
    selector: 'app-bmisolver',
    templateUrl: './bmisolver.component.html',
    styleUrl: './bmisolver.component.css'
})
export class BmisolverComponent {
    height: number | null = null;
    weight: number | null = null;
    bmi: number | null = null;
    category: string = '';

    calculateBMI(): void {
        if (this.height && this.weight) {
            this.bmi = this.weight / (this.height = this.height);
            this.setBMICategory();
        } else {
            this.bmi = null;
            this.category = '';
        }
    }

    setBMICategory(): void {
        if (this.bmi) {
            if(this.bmi < 18.5) {
                this.category = 'Underweight';
            } else if (this.bmi >= 18.5 && this.bmi < 24.9) {
                this.category = 'Normal weight';
            } else if (this.bmi >= 25 && this.bmi < 29.9) {
                this.category = 'Overweight';
            } else {
                this.category = 'Obese';
            }
        }
    }
}

<div class="bmi-solver">
    <h2>BMI Calculator</h2>

    <label for="height">Height (cm):</label>
    <input type="number" [(ngModel)]="height" id="height">

    <label for="weight">Weight (kg):</label>
    <input type="number" [(ngModel)]="weight" id="weight">

    <button (click)="calculateBMI()">Calculate BMI</button>

    <p *ngIf="bmi">Your BMI is: {{ bmi.toFixed(2) }}</p>
    <p *ngIf="!bmi && (height <= 0 || weight <= 0)">Please enter valid values for height and weight.</p>
  </div>

32. component name: usernamevalidator

    Input a username and check its validity based on predefined rules (Create a variable).

import { Component } from '@angular/core';

@Component({
  selector: 'app-usernamevalidator',
  templateUrl: './usernamevalidator.component.html',
  styleUrl: './usernamevalidator.component.css'
})
export class UsernamevalidatorComponent {
  username: string = '';
  isValid: boolean | null = null;

  validateUsername(): void {
    const minLength = 5;
    const hasNumber = /\d/;
    this.isValid = this.username.length >= minLength && hasNumber.test(this.username);
  }
}

<div class="username-validator">
    <h2>Username Validator</h2>

    <label for="username">Enter a username:</label>
    <input type="text" [(ngModel)]="username" id="username">

    <button (click)="validateUsername()">Validate Username</button>

    <p *ngIf="isValid === true">Valid Username</p>
    <p *ngIf="isValid === false">Invalid Username: Must be at least 5 characters long and contain a number.</p>
  </div>

33. component name: interestcalculator

    Input principal, rate, and time, and calculate simple interest.

import { Component } from '@angular/core';

@Component({
  selector: 'app-interestcalculator',
  templateUrl: './interestcalculator.component.html',
  styleUrl: './interestcalculator.component.css'
})
export class InterestcalculatorComponent {
  principal: number = 0;
  rate: number = 0;
  time: number = 0;
  interest: number | null = null;

  calculateInterest(): void {
    this.interest = (this.principal * this.rate * this.time) / 100;
  }
}

<div class="interest-calculator">
    <h2>Simple Interest Calculator</h2>

    <label for="principal">Principal:</label>
    <input type="number" [(ngModel)]="principal" id="principal">

    <label for="rate">Rate (%):</label>
    <input type="number" [(ngModel)]="rate" id="rate">

    <label for="time">Time (years):</label>
    <input type="number" [(ngModel)]="time" id="time">

    <button (click)="calculateInterest()">Calculate Interest</button>

    <p *ngIf="interest">Simple Interest: {{ interest | currency }}</p>
  </div>

34. component name: compoundinterestcalculator

    Calculate compound interest when principal, rate, time, and frequency are input.

import { Component } from '@angular/core'

@Component ({
    selector: 'app-compoundinterestcalculator',
    templateUrl: './compoundinterestcalculator.component.html',
    styleUrl: './compoundinterestcalculator.component.css'
})
export class CompoundinterestcalculatorComponent {
    principal: number | null = null;
    rate: number | null = null;
    time: number | null = null;
    frequency: number | null = null;
    compoundingInterest: number | null = null;

    calculateCompoundingInterest(): void {
        if (this.principal !== null && this.rate !== null && this.rate !== null && this.time !== null && this.frequency !==null) {
            const r = this.rate / 100;
            const n = this.frequency;
            const t = this.time;

            const amount = this.principal * Math.pow((1 + r / n), n * t);
            this.compoundingInterest = amount - this.principal
        } else {
            this.compoundingInterest = null;
        }
    }
}

<div>
    <label for="principatInput">Principal (Amount): </label>
    <input type="number" id="principatInput" [(ngModel)]="Principal" placeholder="Enter Principal amount">

    <label for="rateInput">Rate of Interest (%): </label>
    <input type="number" id="rateInput" [(ngModel)]="rate" placeholder="Enter interest rate">

    <label for="timeInput">Time (Years): </label>
    <input type="number" id="timeInput" [(ngModel)]="time" placeholder="Enter time period in years">

    <label for="frequencyInput"> Compounding frequency (e.g., 12 for monthly, 4 for quarterly, 1 for yearly): </label>
    <input type="number" id="frequencyInput" [(ngModel)]="frequency" placeholder="Enter compounding frequency">

    <button (click)="calculateCompoudingInterest()"> Calculate Compound Interest</button>

</div>

<div *ngIf="compoundingInterest !== null">
    <p>Compound Interest: {{ compoundInterest | currency }}</p>
</div>

35. component name: fibonaccigenerator

    Generate and display the first N Fibonacci numbers when a button is clicked.

import { Component } from '@angular/core';

@Component({
  selector: 'app-fibonaccigenerator',
  templateUrl: './fibonaccigenerator.component.html',
  styleUrl: './fibonaccigenerator.component.css'
})
export class FibonaccigeneratorComponent {
  count: number = 0;
  fibonacciSequence: number[] = [];

  generateFibonacci(): void {
    this.fibonacciSequence = [];
    let a = 0, b = 1;
    for (let i = 0; i < this.count; i++) {
      this.fibonacciSequence.push(a);
      [a, b] = [b, a + b];
    }
  }
}

<div class="fibonacci-generator">
    <h2>Fibonacci Sequence Generator</h2>

    <label for="count">Enter number of terms:</label>
    <input type="number" [(ngModel)]="count" id="count">

    <button (click)="generateFibonacci()">Generate Fibonacci Sequence</button>

    <p *ngIf="fibonacciSequence.length">Fibonacci Sequence: {{ fibonacciSequence.join(', ') }}</p>
  </div>

36. component name: oddsumcalculator

    Input a number, and calculate the sum of odd numbers up to that number.

import { Component } from '@angular/core';

@Component({
  selector: 'app-oddsumcalculator',
  templateUrl: './oddsumcalculator.component.html',
  styleUrl: './oddsumcalculator.component.css'
})
export class OddsumcalculatorComponent {
  number = 0;
  oddSum = 0;

  calculateOddSum() {
    this.oddSum = 0;
    for (let i = 1; i <= this.number; i++) {
      if (i % 2 !== 0) {
        this.oddSum += i;
      }
    }
  }
}

<div>
    <label for="number">Enter a number:</label>
    <input type="number" [(ngModel)]="number" id="number" />

    <button (click)="calculateOddSum()">Calculate Odd Sum</button>

    <p>Sum of odd numbers: {{ oddSum }}</p>
  </div>

37. component name: currencyformatter

    Input a number and format it as currency when a button is clicked (Dollar, Php, Euro - search euro conversion).

import { Component } from '@angular/core';

@Component({
  selector: 'app-currencyformatter',
  templateUrl: './currencyformatter.component.html',
  styleUrl: './currencyformatter.component.css'
})
export class CurrencyformatterComponent {
  amount = 0;
  formattedCurrency = '';

  formatCurrency(currencyType: string) {
    switch (currencyType) {
      case 'USD':
        this.formattedCurrency = `$${this.amount.toFixed(2)}`;
        break;
      case 'PHP':
        this.formattedCurrency = `₱${this.amount.toFixed(2)}`;
        break;
      case 'EUR':
        this.formattedCurrency = `€${this.amount.toFixed(2)}`;
        break;
    }
  }
}

<div>
    <label for="amount">Enter amount:</label>
    <input type="number" [(ngModel)]="amount" id="amount" />

    <button (click)="formatCurrency('USD')">Format as USD</button>
    <button (click)="formatCurrency('PHP')">Format as PHP</button>
    <button (click)="formatCurrency('EUR')">Format as EUR</button>

    <p>Formatted amount: {{ formattedCurrency }}</p>
  </div>

38. component name: randomquotedisplay

    Display a random quote when a button is clicked (use list data structures).

import { Component } from '@angular/core';

@Component({
  selector: 'app-randomquotedisplay',
  templateUrl: './randomquotedisplay.component.html',
  styleUrl: './randomquotedisplay.component.css'
})
export class RandomquotedisplayComponent {
  quotes: string[] = [
    'The best way to predict the future is to create it.',
    'Life is what happens when you’re busy making other plans.',
    'The purpose of our lives is to be happy.',
    'Success is not final, failure is not fatal: It is the courage to continue that counts.'
  ];
  displayedQuote = '';

  displayRandomQuote() {
    const randomIndex = Math.floor(Math.random() * this.quotes.length);
    this.displayedQuote = this.quotes[randomIndex];
  }
}

<div>
    <button (click)="displayRandomQuote()">Show Random Quote</button>

    <p>{{ displayedQuote }}</p>
  </div>

39. component name: uppercasegreeting

    User inputs their name, and when the button is clicked, display the name in uppercase.

import { Component } from '@angular/core';

@Component({
  selector: 'app-uppercasegreeting',
  templateUrl: './uppercasegreeting.component.html',
  styleUrl: './uppercasegreeting.component.css'
})
export class UppercasegreetingComponent {
  name = '';
  uppercaseName = '';

  convertToUppercase() {
    this.uppercaseName = this.name.toUpperCase();
  }
}

<div>
    <label for="name">Enter your name:</label>
    <input type="text" [(ngModel)]="name" id="name" />

    <button (click)="convertToUppercase()">Convert to Uppercase</button>

    <p>Your name in uppercase: {{ uppercaseName }}</p>
  </div>

40. component name: divisiblechecker

    Input two numbers, and check if the first is divisible by the second.

import { Component } from '@angular/core';

@Component({
  selector: 'app-divisiblechecker',
  templateUrl: './divisiblechecker.component.html',
  styleUrl: './divisiblechecker.component.css'
})
export class DivisiblecheckerComponent {
  num1 = 0;
  num2 = 1;
  isDivisible = false;

  checkDivisibility() {
    this.isDivisible = this.num1 % this.num2 === 0;
  }
}

<div>
    <label for="num1">Enter first number:</label>
    <input type="number" [(ngModel)]="num1" id="num1" />

    <label for="num2">Enter second number:</label>
    <input type="number" [(ngModel)]="num2" id="num2" />

    <button (click)="checkDivisibility()">Check Divisibility</button>

    <p *ngIf="isDivisible">Yes, {{ num1 }} is divisible by {{ num2 }}.</p>
    <p *ngIf="!isDivisible">No, {{ num1 }} is not divisible by {{ num2 }}.</p>
  </div>

41. component name: emailvalidator

import { Component } from '@angular/core';

@Component({
  selector: 'app-emailvalidator',
  templateUrl: './emailvalidator.component.html',
  styleUrls: ['./emailvalidator.component.css']
})
export class EmailValidatorComponent {
  email: string = '';
  isValid: boolean | null = null;

  validateEmail() {
    const regex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g;
    this.isValid = regex.test(this.email);
  }
}

<div>
<input type="email" [(ngModel)]="email" placeholder="Enter email"/>
<button (click)="validateEmail()">Validate Email</button>
<p *ngIf="isValid !== null">{{ isValid ? 'Valid' : 'Invalid' }} email</p>
</div>

42. component name: areacalculator

import { Component } from '@angular/core';

@Component({
  selector: 'app-areacalculator',
  templateUrl: './areacalculator.component.html',
  styleUrls: ['./areacalculator.component.css']
})
export class AreaCalculatorComponent {
  length: number = 0;
  width: number = 0;
  area: number | null = null;

  calculateArea() {
    this.area = this.length * this.width;
  }
}

<div>
<input type="number" [(ngModel)]="length" placeholder="Enter length"/>
<input type="number" [(ngModel)]="width" placeholder="Enter width"/>
<button (click)="calculateArea()">Calculate Area</button>
<p *ngIf="area !== null">Area: {{ area }} sq. units</p>
</div>

43. component name: lengthconverter

import { Component } from '@angular/core';

@Component({
  selector: 'app-lengthconverter',
  templateUrl: './lengthconverter.component.html',
  styleUrls: ['./lengthconverter.component.css']
})
export class LengthConverterComponent {
  meters: number = 0;
  kilometers: number | null = null;

  convertToKilometers() {
    this.kilometers = this.meters / 1000;
  }
}

<div>
<input type="number" [(ngModel)]="meters" placeholder="Enter length in meters"/>
<button (click)="convertToKilometers()">Convert to Kilometers</button>
<p *ngIf="kilometers !== null">Length: {{ kilometers }} km</p>
</div>

44. component name: emailobfuscator

import { Component } from '@angular/core';

@Component({
  selector: 'app-emailobfuscator',
  templateUrl: './emailobfuscator.component.html',
  styleUrls: ['./emailobfuscator.component.css']
})
export class EmailObfuscatorComponent {
  email: string = '';
  obfuscatedEmail: string = '';

  obfuscateEmail() {
    this.obfuscatedEmail = this.email.replace(/@/g, '[at]').replace(/\./g, '[dot]');
  }
}

<div>
<input type="email" [(ngModel)]="email" placeholder="Enter email"/>
<button (click)="obfuscateEmail()">Obfuscate Email</button>
<p *ngIf="obfuscatedEmail">Obfuscated: {{ obfuscatedEmail }}</p>
</div>

45. component name: dayofweekdisplay

import { Component } from '@angular/core';

@Component({
  selector: 'app-dayofweekdisplay',
  templateUrl: './dayofweekdisplay.component.html',
  styleUrls: ['./dayofweekdisplay.component.css']
})
export class DayOfWeekDisplayComponent {
  day: string = '';

  showDay() {
    const today = new Date();
    const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    this.day = days[today.getDay()];
  }
}

<div>
<button (click)="showDay()">Show Day of the Week</button>
<p *ngIf="day">Today is: {{ day }}</p>
</div>

46. component name: percentcalculator

import { Component } from '@angular/core';

@Component({
  selector: 'app-percentcalculator',
  templateUrl: './percentcalculator.component.html',
  styleUrls: ['./percentcalculator.component.css']
})
export class PercentCalculatorComponent {
  total: number = 0;
  percentage: number = 0;
  result: number | null = null;

  calculatePercentage() {
    this.result = (this.percentage / 100) * this.total;
  }
}

<div>
<input type="number" [(ngModel)]="total" placeholder="Enter total value"/>
<input type="number" [(ngModel)]="percentage" placeholder="Enter percentage"/>
<button (click)="calculatePercentage()">Calculate Percentage</button>
<p *ngIf="result !== null">Result: {{ result }}</p>
</div>

47. component name: primechecker

import { Component } from '@angular/core';

@Component({
  selector: 'app-primechecker',
  templateUrl: './primechecker.component.html',
  styleUrls: ['./primechecker.component.css']
})
export class PrimeCheckerComponent {
  number: number = 0;
  isPrime: boolean | null = null;

  checkPrime() {
    if (this.number <= 1) {
      this.isPrime = false;
      return;
    }
    for (let i = 2; i < this.number; i++) {
      if (this.number % i === 0) {
        this.isPrime = false;
        return;
      }
    }
    this.isPrime = true;
  }
}

<div>
<input type="number" [(ngModel)]="number" placeholder="Enter number"/>
<button (click)="checkPrime()">Check Prime</button>
<p *ngIf="isPrime !== null">{{ number }} is {{ isPrime ? '' : 'not' }} a prime number.</p>
</div>

48. component name: cubecalculator

import { Component } from '@angular/core';

@Component({
  selector: 'app-cubecalculator',
  templateUrl: './cubecalculator.component.html',
  styleUrls: ['./cubecalculator.component.css']
})
export class CubeCalculatorComponent {
  number: number = 0;
  cube: number | null = null;

  calculateCube() {
    this.cube = Math.pow(this.number, 3);
  }
}

<div>
<input type="number" [(ngModel)]="number" placeholder="Enter number" />
<button (click)="calculateCube()">Calculate Cube</button>
<p *ngIf="cube !== null">The cube of {{ number }} is {{ cube }}</p>
</div>

49. component name: randomcolorgenerator

import { Component } from '@angular/core';

@Component({
  selector: 'app-randomcolorgenerator',
  templateUrl: './randomcolorgenerator.component.html',
  styleUrls: ['./randomcolorgenerator.component.css']
})
export class RandomColorGeneratorComponent {
  color: string = '#ffffff';

  generateRandomColor() {
    this.color = '#' + Math.floor(Math.random()*16777215).toString(16);
  }
}

<div>
<button (click)="generateRandomColor()">Generate Random Color</button>
<p [style.background]="color">Random
</div>

50. component name: gradecalculator

import { Component } from '@angular/core';

@Component({
  selector: 'app-gradecalculator',
  templateUrl: './gradecalculator.component.html',
  styleUrls: ['./gradecalculator.component.css']
})
export class GradeCalculatorComponent {
  score: number = 0;
  grade: string = '';

  calculateGrade() {
    if (this.score >= 90) {
      this.grade = 'A';
    } else if (this.score >= 80) {
      this.grade = 'B';
    } else if (this.score >= 70) {
      this.grade = 'C';
    } else if (this.score >= 60) {
      this.grade = 'D';
    } else {
      this.grade = 'F';
    }
  }
}

<div>
<input type="number" [(ngModel)]="score" placeholder="Enter score" />
<button (click)="calculateGrade()">Calculate Grade</button>
<p *ngIf="grade">Your grade is {{ grade }}</p>
</div>

github

This command initializes a new Git repository in your project directory. It creates a hidden .git folder to track changes in your project.

Step #2 — git status

The git status command shows the current state of your project, listing any untracked files or changes that have not yet been staged for commit.

Step #3 — git add .

The git add . command stages all modified or newly added files in your project, preparing them for a commit.

Step #4 — git commit -m “message”

This command commits the staged changes and includes a message describing what changes were made. Be sure to write meaningful messages that summarize the work done.

Step #5 — git pull

The git pull command fetches updates from a remote repository and merges them into your local branch. This is useful to ensure your local work is up-to-date with the remote project.

Step #6 — git push

The git push command uploads your local commits to a remote repository. Make sure you've committed all changes locally before pushing.

Step #7 — git log

This command displays the commit history of the repository, showing commit IDs, messages, and authors. You can scroll through the log to review past commits.

Step 1: Creating the Database denormalized_db

This command creates a new database named denormalized_db. You can name it according to your project's needs.

Step 2: Using the Database

After creating the database, you need to switch to it using the USE command.

Step 3: Defining Tables

This table holds employee details. The employee_id is the primary key, which auto-increments with each new entry.

This table holds student details. student_id serves as the primary key.

This table contains product information, with product_id as the primary key.

This table records orders, with order_id as the primary key and a foreign key reference to the producttbl.

This table tracks sales, linking to ordertbl via the order_id foreign key.

Step 4: Inserting Dummy Data into Each Table

This command inserts one sample employee record into the employeetbl.

This command inserts one sample student record.

This command inserts one product record.

This command logs one sale.

Step 5: Results!

Step 1: Name your new repository AngularBasicRouting.

Step 2: Inside Angular Files, create a Components Folder.

Step #3: Create four components by going to your angular folder files and using the command "ng generate component foldername/filename."

Step #4: In your Angular Files, now create an app.module.ts file.

Step #5: Apply this code

Step #6: Remove the standalone and imports code from your app.component.ts file, then import RouterOutlet.

Step #7: Create a route or path.

Step #8: Proceed to the components folder, select each component folder, and remove all standalone and imports from each typescript component.

Step #9: Include the statements on each component.

Step #10: Put this code in place of the main TypeScript

Step #11: Include the routerlink with each component and give it a name.

Step #12: Using Command Prompt, navigate to the Angular folder files and execute the ng serve command to launch the application. The output will look like this.

Step #13: Finally, publish the project to your Github repository.

In this article, I will guide you through the version control using Git on PythonAnywhere. Committing changes: This guide does include several sections like initializing a Git repository, making changes and committing to it for multiple times, and finally pushing the project at GitHub. At the end of this topic, you will be able to identify and explain how to use Git to optimize working with files in your project.

Outline:

1. Initializing Git

   The first step was to initialize a Git repository in my project folder. This was done in a PythonAnywhere Bash console.

    # Navigate to the project directory
    cd /home/yourusername/projects
   
    # Initialize Git in the folder
    git init
   
    # Verify Git initialization
    ls -a
   

   Initializing Git created a .git folder, indicating that version control was now active in the project directory.

2. It is very time consuming to make changes to the file and commit 10 times.
   It was after initiating Git that I created a file that is, Project_file. txt and made a change, committed it ten times. This enabled me to take track on every version of my file.

   1. Commands Used:

      Create a new file and make the first commit:Create a new file and make the first commit:

       echo "Initial content" > project_file.txt
       git add project_file.txt
       git commit -m "Initial commit: add project_file.txt"
      

   2. Modify the file and commit changes: For each subsequent change, I followed this process:

       echo "Change 1" >> project_file.txt
       git add project_file.txt
       git commit -m "Commit #1: added Change 1"
      
       # Repeat for all 10 commits:
       echo "Change 2" >> project_file.txt
       git add project_file.txt
       git commit -m "Commit #2: added Change 2"
      

3. Adding a Remote Repository and Pushing the Code to GitHub

   All commits were then done locally, after which the author linked their local Git repository to a remote repository on GitHub to host the code online.

   1. Add a remote repository: I was able to create a new repository on GitHub and connect it with my local folder with the project:

       git remote add origin https://github.com/yourusername/ACT3.git
      

   2. Push the changes to GitHub: Finally, synchronized all commits in the local repository with the remote repository:

       git push -u origin main
      

In this post, I’ll explain what directories and files are, how you can create, handle, and delete them with Bash commands on PythonAnywhere. Phrased as these commands they are relevant to any operating system based on Linux since they will help the users to organize, modify and manage directories and files, as well as clean them up. In this part, I will provide insight on how to go about the Basic bash commands like how to create more than one directory, how to add files and how to delete them.

Creating Directories

First, I started with the formation of 20 directories for various usages (documents, music, images, etc. ) in the Bash console using the mkdir command.

mkdir documents pictures downloads music videos projects notes backups reports logs work templates drafts code images scripts tests archives configs keys resources

The command that is used to create new directories is mkdir. It is done this way because all the directory names that are listed are created at the same time. The folders are as follows and each folder can be used for a specific type of data: Documents sub-folder for text files, music sub-folder for audio files, backups sub-folder for backup data.

Verification: To ensure that the directories were created well, I had to use a linux command known is

ls

This lists all the folders in the current directory including the hidden ones and also the subdirectories.

Adding Files

Then, I typed “cd docs” to go to the documents directory then created 10 text files using the command “touch filename”. Here’s how I did it: Here’s how I did it:

1. First, I moved into the documents directory:

    cd documents
   

2. Then, I created 10 files in one go using:

touch file{1..10}.txt

The touch command for creating zero bytes files, or alter timestamps on files. Compiling the languages using the {1..10} syntax yields the names of the files as file1. txt to file10. txt automatically.

Verification: To verify the creation of the files, I listed the contents of the documents folder with:

ls

Removing Files and Directories

For cleaning up I had to delete certain files and directories.

1. Removing Files: I deleted a file using the rm command from the documents directory. For example, to delete file5.

    rm file5.txt
   

   This command removes the file, The rm command is undesirable for recovery as it deletes the file permanently from the OS.

2. Removing Directories: I also had no choice but to delete root..documents and all the sub directories that were within it. Since the directory contained files, I used the rm -r command, which allows recursive deletion of a directory and its files:Since the directory contained files, I used the rm -r command, which allows recursive deletion of a directory and its files:

    cd ..
    rm -r documents
   

   The -r flag makes the overall command recursive therefore, it is able to delete the folder and all its sub-folder or files.