Word Transformer Exercise

Project Overview

This project is a simple word transformation tool built with HTML, CSS, and JavaScript. The goal of this exercise is to refactor the existing code into TypeScript.

Current Structure

• index.html: The main HTML file
• styles.css: Contains all the styling for the application
• word-transformer.js: Contains the JavaScript logic for word transformation

Exercise Goals

1. Set up TypeScript in the project
2. Convert word-transformer.js to TypeScript
3. Add type annotations to improve code quality and catch potential errors
4. Ensure the refactored TypeScript code works as expected

Steps to Refactor

1. Set up TypeScript

• Install TypeScript globally: npm install -g typescript
• Initialize a tsconfig.json file: tsc --init
• Adjust tsconfig.json as needed (e.g., set "target": "es6")

2. Convert JavaScript to TypeScript

• Rename word-transformer.js to word-transformer.ts
• Do the changes to make it Typescript great! 💃🏼

3. Compile TypeScript

• Run tsc to compile the TypeScript file to JavaScript
• Update the <script> tag in index.html to point to the compiled JS file

4. Test and Debug

• Open index.html in a browser and test all functionalities
• Fix any issues that arise during testing

5. Optimize and Refactor (Optional)

• Look for opportunities to use more advanced TypeScript features

Tips

• Start by adding basic type annotations (string, number, etc.)
• Use the any type sparingly and only when necessary
• Take advantage of TypeScript's static typing to catch potential errors early

Resources

• TypeScript Documentation
• TypeScript Playground for quick experimentation

Good luck with the refactoring!