# ACTIVITY #8: Angular Components

**Goal:**

Create 50 Angular components, each with different functionality, based on the provided list and your own examples. Ensure all components are well organized and navigable from the main app component.

### **Instructions:**

1. **Create 50 Components:**
    
    * Implement 40 components from the provided instructions.
        
    * Create 10 additional components based on your own unique ideas.
        
    * In the app.component, add a header or navbar that includes links to all 50 components. This will allow users to easily navigate between them.
        
    * **Note:** Focus on using only **HTML** and **TypeScript**. For now, avoid using any CSS or external designs. The purpose is to practice functionality, not design.
        
2. **Commit and Push to GitHub:**
    
    * For each component, create a separate commit with the following format:
        
        Example commit message: #1displayhelloworld
        
    * Ensure there are 50 commits in total, each corresponding to a different component.
        
    * Push the entire project to a GitHub repository.
        
3. **Documentation on Hashnode:**
    
    * Write a short blog post on [Hashnode](https://hashnode.com/) explaining the project and components you built.
        
    * Include code snippets where necessary and explain the functionality of the components briefly.
        
    * Provide the link to your GitHub repository in the post so that others can access your code.
        
4. **Share on Portal:**
    
    * Once you’ve completed the Hashnode documentation, share the link to your post on our portal.
        

### **Important Notes:**

* This is a **practice activity** to help you master Angular.
    
* You **must not use AI** to genrate any of the code. However, you are free to search for solutions on platforms like Google if needed.
    
* Focus on functionality first and **do not use CSS or external design tools**. Stick to **HTML** and **TypeScript** only.
    
* You are allowed to use AI tools only for writing documentation, like the Hashnode blog post.
    

Good luck, and have fun mastering Angular!

Step 1: I created a folder named `AngularComponents` for this activity in the command prompt and install the needed packages.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727712715589/5d6996a1-50a6-4457-82b7-a0a210466dd4.png align="center")

Step 2: inside the `src folder`, the `app folder` , I created a folder named `components`

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727712793669/0bdb6749-6b64-424c-81c1-61264ea463bb.png align="center")

Step 3: Inside this of `components` folder, I use the terminal to generate 50 components each.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727712821393/983b9432-392e-4412-8894-bc54881ae0d0.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727712852184/b77cfd73-a35b-4a94-9967-9de3b96ac026.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727712888977/d17fc5d5-09fd-4e17-b4a8-b2d959127efc.png align="center")

Step 4: I created a `app.module.ts` to set up, and configure the routes, imports, and declarations.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727712912901/be814c83-3e64-4cbd-abc6-9b56a3ea0668.png align="center")

```typescript
import {RouterModule, Routes} from "@angular/router";
import {CommonModule} from "@angular/common";
import {Component, NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {AppComponent} from "./app.component";
import {DisplayhelloworldComponent} from "./components/displayhelloworld/displayhelloworld.component";
import { FormsModule } from "@angular/forms";
import { ShowbellbuttonComponent } from "./components/showbellbutton/showbellbutton.component";
import {DisplaynameComponent} from "./components/displayname/displayname.component";
import {CounterComponent} from "./components/counter/counter.component";
import {SimpleformComponent} from "./components/simpleform/simpleform.component";
import {UserageComponent} from "./components/userage/userage.component";
import {UsergreetingComponent} from "./components/usergreeting/usergreeting.component";
import {CalculatorComponent} from "./components/calculator/calculator.component";
import {TextlengthComponent} from "./components/textlength/textlength.component";
import {CurrencyconverterComponent} from "./components/currencyconverter/currencyconverter.component";
import {EvenoddcheckerComponent} from "./components/evenoddchecker/evenoddchecker.component";
import {WordreverserComponent} from "./components/wordreverser/wordreverser.component";
import {ShowdateComponent} from "./components/showdate/showdate.component";
import {ShowusernameComponent} from "./components/showusername/showusername.component";
import {MultiplicationtableComponent} from "./components/multiplicationtable/multiplicationtable.component";
import {SimpleloginComponent} from "./components/simplelogin/simplelogin.component";
import {FahrenheittocelsiusComponent} from "./components/fahrenheittocelsius/fahrenheittocelsius.component";
import {BookmarklistComponent} from "./components/bookmarklist/bookmarklist.component";
import {CharactercounterComponent} from "./components/charactercounter/charactercounter.component";
import {PalindromecheckerComponent} from "./components/palindromechecker/palindromechecker.component";
import {TemperatureconverterComponent} from "./components/temperatureconverter/temperatureconverter.component";
import {ShoppinglistComponent} from "./components/shoppinglist/shoppinglist.component";
import {FactorialcalculatorComponent} from "./components/factorialcalculator/factorialcalculator.component";
import {TodomanagerComponent} from "./components/todomanager/todomanager.component";
import {GuessnumbergameComponent} from "./components/guessnumbergame/guessnumbergame.component";
import {WordcounterComponent} from "./components/wordcounter/wordcounter.component";
import {RandomnumbergeneratorComponent} from "./components/randomnumbergenerator/randomnumbergenerator.component";
import {MultiplicationCheckerComponent} from "./components/multiplicationchecker/multiplicationchecker.component";
import {UppercaseconverterComponent} from "./components/uppercaseconverter/uppercaseconverter.component";
import {WordshufflerComponent} from "./components/wordshuffler/wordshuffler.component";
import {BmisolverComponent} from "./components/bmisolver/bmisolver.component";
import {UsernameValidatorComponent} from "./components/usernamevalidator/usernamevalidator.component";
import {InterestcalculatorComponent} from "./components/interestcalculator/interestcalculator.component";
import {
  CompoundinterestcalculatorComponent
} from "./components/compoundinterestcalculator/compoundinterestcalculator.component";
import {FibonacciGeneratorComponent} from "./components/fibonaccigenerator/fibonaccigenerator.component";
import {OddsumcalculatorComponent} from "./components/oddsumcalculator/oddsumcalculator.component";
import {CurrencyformatterComponent} from "./components/currencyformatter/currencyformatter.component";
import {RandomquotedisplayComponent} from "./components/randomquotedisplay/randomquotedisplay.component";
import {UppercasegreetingComponent} from "./components/uppercasegreeting/uppercasegreeting.component";
import {DivisiblecheckerComponent} from "./components/divisiblechecker/divisiblechecker.component";
import {GradeCalculatorComponent} from "./components/gradecalculator/gradecalculator.component";
import {SpeedConverterComponent} from "./components/speedconverter/speedconverter.component";
import {ColorChangerComponent} from "./components/colorchanger/colorchanger.component";
import {LeapYearCheckerComponent} from "./components/leapyearchecker/leapyearchecker.component";
import {TemperatureAlertComponent} from "./components/temperaturealert/temperaturealert.component";
import {DiscountCalculatorComponent} from "./components/discountcalculator/discountcalculator.component";
import {LetterReplacerComponent} from "./components/letterreplacer/letterreplacer.component";
import {SimpleSliderComponent} from "./components/simpleslider/simpleslider.component";
import {PasswordStrengthCheckerComponent} from "./components/passwordstrengthchecker/passwordstrengthchecker.component";
import {MemoryMatchGameComponent} from "./components/memorymatchgame/memorymatchgame.component";

const routes: Routes =[
  {path:'',component: DisplayhelloworldComponent},
  {path:'showbellbutton',component: ShowbellbuttonComponent},
  {path:'displayname',component: DisplaynameComponent},
  {path:'counter',component: CounterComponent},
  {path: 'simpleform', component: SimpleformComponent},
  {path: 'userage', component: UserageComponent},
  {path: 'usergreeting',component: UsergreetingComponent},
  {path: 'calculator',component:CalculatorComponent},
  {path: 'textlength',component:TextlengthComponent},
  {path: 'currencyconverter',component:CurrencyconverterComponent},
  {path: 'evenoddchecker',component:EvenoddcheckerComponent},
  {path: 'wordreverser',component:WordreverserComponent},
  {path: 'showdate',component: ShowdateComponent},
  {path: 'showusername',component: ShowusernameComponent},
  {path: 'multiplicationtable',component: MultiplicationtableComponent},
  {path: 'simplelogin',component: SimpleloginComponent},
  {path: 'fahrenheittocelsius',component: FahrenheittocelsiusComponent},
  {path: 'bookmarklist',component: BookmarklistComponent},
  {path: 'charactercounter',component: CharactercounterComponent},
  {path: 'palindromechecker',component: PalindromecheckerComponent},
  {path: 'temperatureconverter',component: TemperatureconverterComponent},
  {path: 'shoppinglist',component: ShoppinglistComponent},
  {path: 'factorialcalculator',component: FactorialcalculatorComponent},
  {path: 'todomanager',component:TodomanagerComponent},
  {path: 'guessnumbergame',component:GuessnumbergameComponent},
  {path: 'wordcounter',component: WordcounterComponent},
  {path: 'randomnumbergenerator',component: RandomnumbergeneratorComponent},
  {path: 'multiplicationchecker',component: MultiplicationCheckerComponent},
  {path: 'uppercaseconverter',component:UppercaseconverterComponent},
  {path: 'wordshuffler',component:WordshufflerComponent},
  {path: 'bmisolver',component: BmisolverComponent},
  {path: 'usernamevalidator',component: UsernameValidatorComponent},
  {path: 'interestcalculator',component: InterestcalculatorComponent},
  {path: 'compoundinterestcalculator',component: CompoundinterestcalculatorComponent},
  {path: 'fibonaccigenerator',component: FibonacciGeneratorComponent},
  {path: 'oddsumcalculator',component: OddsumcalculatorComponent},
  {path: 'currencyformatter',component: CurrencyformatterComponent},
  {path: 'randomquotedisplay',component: RandomquotedisplayComponent},
  {path: 'uppercasegreeting',component:UppercasegreetingComponent},
  {path: 'divisiblechecker',component: DivisiblecheckerComponent},
  {path: 'gradecalculator',component: GradeCalculatorComponent},
  {path: 'speedconverter',component: SpeedConverterComponent},
  {path: 'colorchanger',component: ColorChangerComponent},
  {path: 'leapyearchecker',component:LeapYearCheckerComponent},
  {path: 'temperaturealert',component:TemperatureAlertComponent},
  {path: 'discountcalculator',component: DiscountCalculatorComponent},
  {path: 'letterreplacer',component: LetterReplacerComponent},
  {path: 'simpleslider',component: SimpleSliderComponent},
  {path: 'passwordstrengthchecker',component: PasswordStrengthCheckerComponent},
  {path: 'memorymatchgame',component: MemoryMatchGameComponent},



]

@NgModule({
  imports: [

    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes, {enableTracing: true}),
    FormsModule,
  ],
  declarations: [
    AppComponent,
    DisplayhelloworldComponent,
    ShowbellbuttonComponent,
    DisplaynameComponent,
    CounterComponent,
    SimpleformComponent,
    UserageComponent,
    UsergreetingComponent,
    CalculatorComponent,
    TextlengthComponent,
    CurrencyconverterComponent,
    EvenoddcheckerComponent,
    WordreverserComponent,
    ShowdateComponent,
    ShowusernameComponent,
    MultiplicationtableComponent,
    SimpleloginComponent,
    FahrenheittocelsiusComponent,
    BookmarklistComponent,
    CharactercounterComponent,
    PalindromecheckerComponent,
    TemperatureconverterComponent,
    ShoppinglistComponent,
    FactorialcalculatorComponent,
    TodomanagerComponent,
    GuessnumbergameComponent,
    WordcounterComponent,
    RandomnumbergeneratorComponent,
    MultiplicationCheckerComponent,
    UppercaseconverterComponent,
    WordshufflerComponent,
    BmisolverComponent,
    UsernameValidatorComponent,
    InterestcalculatorComponent,
    CompoundinterestcalculatorComponent,
    FibonacciGeneratorComponent,
    OddsumcalculatorComponent,
    CurrencyformatterComponent,
    RandomquotedisplayComponent,
    UppercasegreetingComponent,
    DivisiblecheckerComponent,
    GradeCalculatorComponent,
    SpeedConverterComponent,
    ColorChangerComponent,
    LeapYearCheckerComponent,
    TemperatureAlertComponent,
    DiscountCalculatorComponent,
    LetterReplacerComponent,
    SimpleSliderComponent,
    PasswordStrengthCheckerComponent,
    MemoryMatchGameComponent,

  ],
  providers: [

  ],
  bootstrap: [
    AppComponent
  ]

})
export class AppModule {}
```

Step 5: I modified the `app.component.html` to connect all of the components using `navbar` and `routerlink`.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1727713214461/66eccf69-0278-4549-ad00-636e144e17e3.png align="center")

```typescript
<p>
  <a routerLink="">Display Hello World</a><br>
  <a routerLink="showbellbutton">Show Hello Button</a><br>
  <a routerLink="displayname">Display Name</a><br>
  <a routerLink="counter">Counter</a> <br>
  <a routerLink="simpleform">Simple Form</a><br>
  <a routerLink="userage">User Age</a><br>
  <a routerLink="usergreeting">User Greeting</a><br>
  <a routerLink="calculator">Calculator</a><br>
  <a routerLink="textlength">Text Length</a><br>
  <a routerLink="currencyconverter">Currency Converter</a><br>
  <a routerLink="evenoddchecker">Even Odd Checker</a><br>
  <a routerLink="wordreverser">Word Reverser</a><br>
  <a routerLink="showdate">Show Date</a><br>
  <a routerLink="showusername">SHow Username</a><br>
  <a routerLink="multiplicationtable">Multiplication Table</a><br>
  <a routerLink="simplelogin">Simple Login</a><br>
  <a routerLink="fahrenheittocelsius">Fahrenheit to celsius</a><br>
  <a routerLink="bookmarklist">Bookmark List</a><br>
  <a routerLink="charactercounter">Character Counter</a><br>
  <a routerLink="palindromechecker">Palindrome Checker</a><br>
  <a routerLink="temperatureconverter">Temperature Converter</a><br>
  <a routerLink="shoppinglist">Shopping List</a><br>
  <a routerLink="factorialcalculator">Factorial Calculator</a><br>
  <a routerLink="todomanager">To do List</a><br>
  <a routerLink="guessnumbergame">Guess Number Game</a><br>
  <a routerLink="wordcounter">Word Counter</a><br>
  <a routerLink="randomnumbergenerator">Random Number Generator</a><br>
  <a routerLink="multiplicationchecker">Multiplication Checker</a><br>
  <a routerLink="uppercaseconverter">Uppercase Converter</a><br>
  <a routerLink="wordshuffler">Word Shuffler</a><br>
  <a routerLink="bmisolver">BMI Solver</a><br>
  <a routerLink="usernamevalidator">Username Validator</a><br>
  <a routerLink="interestcalculator">Interest Calculator</a><br>
  <a routerLink="compoundinterestcalculator">Compound Interest Calculator</a><br>
  <a routerLink="fibonaccigenerator">Fibonacci Generator</a><br>
  <a routerLink="oddsumcalculator">Odd Sum Calculator</a><br>
  <a routerLink="currencyformatter">Currency Formatter</a><br>
  <a routerLink="randomquotedisplay">Random Quote Display</a><br>
  <a routerLink="uppercasegreeting">Uppercase Greeting</a><br>
  <a routerLink="divisiblechecker">Divisible Checker</a><br>
  <a routerLink="gradecalculator">Grade Calculator</a><br>
  <a routerLink="speedconverter">Speed Converter</a><br>
  <a routerLink="colorchanger">Color Changer</a><br>
  <a routerLink="leapyearchecker">Leap Year Checker</a><br>
  <a routerLink="temperaturealert">Temperature Alert</a><br>
  <a routerLink="discountcalculator">Discount Calculator</a><br>
  <a routerLink="letterreplacer">Letter Replacer</a><br>
  <a routerLink="simpleslider">Simple Slider</a><br>
  <a routerLink="passwordstrengthchecker">Password Strength Checker</a><br>
  <a routerLink="memorymatchgame">Memory Match Game</a><br>
  <a routerlink="Sample">Shoping List</a>


  <br>

</p>
<router-outlet></router-outlet>
```

Step 6: Lastly, I pushed and committed each of the components in my GitHub repository.

```typescript
git add . 
git commit -m "#name of components" 
git push -u origin main
```

**<mark>#1 component name: displayhelloworld</mark>**

Display the text "Hello World" on the screen using a variable from the TypeScript file.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726731414402/8acb412f-cbd2-4051-9283-49876394646d.png align="center")

**<mark>#2 component name: showhellobutton</mark>**

Create a button, and when the user clicks the button, "Hello World" is displayed on the screen.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726737954104/1d18ff26-929f-4096-9833-9b035532d283.png align="center")

**<mark>#3 component name: displayname</mark>**

User inputs their name, and when the button is clicked, their name is displayed on the screen.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726739295645/7e487be9-c9ce-4f67-9b1b-19b77bcd9df1.png align="center")

**<mark>#4 component name: counter</mark>**

Create a counter that increases by 1 when the user clicks a button.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726741167592/42ebc359-87b8-4a72-a1e9-279703136b33.png align="center")

**<mark>#5 component name: simpleform</mark>**

Create a form with text inputs and a submit button, display the submitted input data.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726742994475/b4693b19-30c7-4a2e-b4c8-904b77d5862a.png align="center")

**<mark>#6 component name: userage</mark>**

Input user’s birth year, and when the button is clicked, display their age.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726746006998/52544d66-4156-46ab-a5c9-0fd50b5bbd32.png align="center")

**<mark>#7 component name: usergreeting</mark>**

User inputs their name, and when clicked, display a personalized greeting.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726746699232/68be07d1-9b16-4e38-b8c5-5fe03cf5f794.png align="center")

**<mark>#8 component name: calculator</mark>**

Create a simple calculator with add, subtract, multiply, and divide functionalities.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726747305350/45d1c8be-43c0-484a-8935-66c3994d77fe.png align="center")

**<mark>#9 component name: textlength</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726747808557/64483ea9-4e49-44a7-85eb-914e8aebdd9b.png align="center")

**<mark>#10 component name: currencyconverter</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726748357450/ead0b287-0751-4bff-b93b-d9531af6fc42.png align="center")

**<mark>#11 component name: evenoddchecker</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726748747920/37b0fc7b-2367-4ef6-81a9-c2dbb466d164.png align="center")

**<mark>#12 component name: wordreverser</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726749148921/6ec994e6-55fd-4743-b0cc-cd78d2b563e9.png align="center")

**<mark>#13 component name: showdate</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726749538606/3cdebf9a-c17b-4117-b7e8-1993b952906d.png align="center")

**<mark>#14 component name: showusername</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726749821812/f1507757-163c-4511-904f-1ce1289563d4.png align="center")

**<mark>#15 component name: multiplicationtable</mark>**

Input a number and generate its multiplication table.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726752932836/e635ba7c-332b-404a-8cf3-f91db990019b.png align="center")

**<mark>#16 component name: simplelogin</mark>**

Create a simple login form with email and password fields.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726753295805/016c4bcb-c1e0-46fa-847f-3cd8ed4aa636.png align="center")

**<mark>#17 component name: fahrenheittocelsius</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726753726462/64ad3ae3-eb5b-4e43-99eb-408a6f566a73.png align="center")

**<mark>#18 component name: bookmarklist</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726754155362/9236eb19-94d4-4260-954b-586874fa0f39.png align="center")

**<mark>#19 component name: charactercounter</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726754564841/0c7409b0-0dcf-44e9-b3fa-393c1affcc6b.png align="center")

**<mark>#20 component name: palindromechecker</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726755111791/2bb1dd76-4e8f-4e7c-a09f-3cbaef6d139d.png align="center")

**<mark>#21 component name: temperatureconverter</mark>**

Convert temperature from Celsius to Fahrenheit and vice versa.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726765129274/7e4283e6-f33f-4206-aaa2-206b10b6e4fe.png align="center")

**<mark>#22 component name: shoppinglist</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726765517078/559a98eb-c4b9-4015-a021-bcde7c5e3073.png align="center")

**<mark>#23 component name: factorialcalculator</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726766008583/c6d23dd7-400f-4099-b44d-bdfccd0086ae.png align="center")

**<mark>#24 component name: todomanager</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726766962633/1920a758-a6e3-4bec-aecc-1fbd4bb8687b.png align="center")

**<mark>#25 component name: guessnumbergame</mark>**

Create a number guessing game where the user inputs guesses.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726767606575/04b16a41-aa80-4b96-bb7e-4e48aad76856.png align="center")

**<mark>#26 component name: wordcounter</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726768355326/dce9cd46-947a-4c03-8228-48a93caa6bb8.png align="center")

**<mark>#27 component name: randomnumbergenerator</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726768719189/a67b33a0-8933-42c3-971b-33e64a51a5e1.png align="center")

**<mark>#28 component name: multiplicationchecker</mark>**

Check if a number is a multiple of another number.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726769290188/1552161b-f5bc-4296-b938-4ed4f019cbab.png align="center")

**<mark>#29 component name: uppercaseconverter</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726769663657/7c2bd695-7c8e-425e-a68d-639d782477ad.png align="center")

**<mark>#30 component name: wordshuffler</mark>**

Input a word and shuffle its letters randomly.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726769982539/c1399e77-51bf-4016-a647-920d98380219.png align="center")

**<mark>#31 component name: bmisolver</mark>**

Input height and weight, calculate and display the BMI.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726770546082/9b8741c5-26ca-4ec3-a821-837d2c2f4257.png align="center")

**<mark>#32 component name: usernamevalidator</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726770913065/5d2e6090-b24f-4722-83d5-81f358cb5be7.png align="center")

**<mark>#33 component name: interestcalculator</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726771293654/60996473-c0c0-49da-bbed-d03742b13e6c.png align="center")

**<mark>#34 component name: compoundinterestcalculator</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726772077389/6ae5f226-fe32-42e3-827c-8e42ca33733b.png align="center")

**<mark>#35 component name: fibonaccigenerator</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726772730053/d5bd1de4-76b4-45cc-805a-8a14e10096b1.png align="center")

**<mark>#36 component name: oddsumcalculator</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726773807777/6ff7d560-613a-4c0d-9167-07b12092345b.png align="center")

**<mark>#37 component name: currencyformatter</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726775026626/88f13629-8e4b-4c25-8d8a-37b648f62baa.png align="center")

**<mark>#38 component name: randomquotedisplay</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726775996892/7ad72492-b530-4b01-9224-329109e7553b.png align="center")

**<mark>#39 component name: uppercasegreeting</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726821167600/06a11490-875a-4c6b-8b44-ef3f48af04ed.png align="center")

**<mark>#40 component name: divisiblechecker</mark>**

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726821463568/52f93b76-a477-42a7-995d-22cb5caf7e28.png align="center")

**<mark>#41 component name: gradecalculator</mark>**

Input student grades and calculate the average, then display the corresponding letter grade.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726821923520/3e87a12e-1815-49c6-b4db-000f7977e29f.png align="center")

**<mark>#42 component name: speedconverter</mark>**

Input a speed in kilometers per hour and convert it to miles per hour.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726822393194/e8a5e9f9-1806-4fe9-858f-25353dcaad12.png align="center")

**<mark>#43 component name: colorchanger</mark>**

Create buttons to change the background color of a div.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726822986894/3336be0a-1b7c-4842-9948-42361b223c6a.png align="center")

**<mark>#44 component name: leapyear</mark>**

allows users to input a year and checks whether it's a leap year or not

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726823625795/80968b4e-bbd8-4bfc-8b0f-99c39b266c50.png align="center")

**<mark>#45 component name: temperaturealert</mark>**

allows users to input a temperature and display a message indicating whether it's too hot, too cold, or just right,

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726823990201/cfcd5d68-1780-4b3f-8733-3f719ddbd0ae.png align="center")

**<mark>#46 component name: discountcalculator</mark>**

Input a price and discount rate, then calculate the discounted price.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726824345161/06a0f1db-ce1b-40da-a80b-f3b8b7968e82.png align="center")

**<mark>#47 component name: letterreplacer</mark>**

allows users to input a word, specify a letter to replace, and replace it with another letter

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726825278894/d453e533-ca3d-49fa-ac88-f8b9efc85b34.png align="center")

**<mark>#48 component name: simpleslider</mark>**

A slider input to adjust a volume

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726825763279/b238d542-deba-4288-b307-11a6ad2898df.png align="center")

**<mark>#49 component name: passwordstrengthchecker</mark>**

Input a password and display its strength (weak, medium, strong) based on length and character types.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726826167771/9259d15a-d9b1-4beb-b510-7d4c8a116559.png align="center")

**<mark>#50 component name: memorymatchgame</mark>**

users flip “?“ to find matching pairs. If the two image match, they remain flipped; otherwise, they turn back over.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726826786429/9d173e03-01c9-4229-8c47-ec9a5807e488.png align="center")

Github repository: [https://github.com/RodelDecio/Activity8.git](https://github.com/RodelDecio/Activity8.git)