Skip to content

Latest commit

 

History

History
48 lines (36 loc) · 1.78 KB

README.md

File metadata and controls

48 lines (36 loc) · 1.78 KB
Raw

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

Good luck with the refactoring!