# ACTIVITY: 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:
        
        ```yaml
        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!

**#1 component name: displayhelloworld**

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

**#2 component name: showhellobutton**

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

**#3 component name: displayname**

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

**#4 component name: counter**

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

**#5 component name: simpleform**

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

**#6 component name: userage**

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

**#7 component name: usergreeting**

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

**#8 component name: calculator**

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

**#9 component name: textlength**

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

**#10 component name: currencyconverter**

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

**#11 component name: evenoddchecker**

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

**#12 component name: wordreverser**

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

**#13 component name: showdate**

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

**#14 component name: showusername**

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

**#15 component name: multiplicationtable**

Input a number and generate its multiplication table.

**#16 component name: simplelogin**

Create a simple login form with email and password fields.

**#17 component name: fahrenheittocelsius**

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

**#18 component name: bookmarklist**

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

**#19 component name: charactercounter**

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

**#20 component name: palindromechecker**

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

**#21 component name: temperatureconverter**

Convert temperature from Celsius to Fahrenheit and vice versa.

**#22 component name: shoppinglist**

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

**#23 component name: factorialcalculator**

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

**#24 component name: todomanager**

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

**#25 component name: guessnumbergame**

Create a number guessing game where the user inputs guesses.

**#26 component name: wordcounter**

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

**#27 component name: randomnumbergenerator**

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

**#28 component name: multiplicationchecker**

Check if a number is a multiple of another number.

**#29 component name: uppercaseconverter**

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

**#30 component name: wordshuffler**

Input a word and shuffle its letters randomly.

**#31 component name: bmisolver**

Input height and weight, calculate and display the BMI.

**#32 component name: usernamevalidator**

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

**#33 component name: interestcalculator**

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

**#34 component name: compoundinterestcalculator**

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

**#35 component name: fibonaccigenerator**

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

**#36 component name: oddsumcalculator**

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

**#37 component name: currencyformatter**

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

**#38 component name: randomquotedisplay**

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

**#39 component name: uppercasegreeting**

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

**#40 component name: divisiblechecker**

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