Morse Translator

Matthew Chhay's Morse Translator. Open Live Preview

Preview

Table of Contents

• Introduction
• Features
• Technologies Used
• Screenshots
• MVP
• Setup
  • For viewing locally
  • For running unit tests
  • For further development
• Tools Used
• Project Status
• Room for Improvement

Introduction

Translating English text into International Morse Code and vice versa using JS methods.

Features

• Automatically detects Morse or English text input and translates accordingly
• Supports basic English punctuation
• Ability to separate Morse words by | and *
• Copy to clipboard and clear input buttons
• English Text to Speech
• Responsive design and created unit tests

Technologies Used

• HTML
• SCSS/CSS
• JavaScript
• Jest & Babel

Screenshots

MVP

• User interface allows user to input English text or Morse code
• JS functions to translate English text to Morse code and vice versa
• Morse code handles spaces appropriately
• Morse code handles some other characters
• JS is split between data, logic and DOM functions
• Units tests are developed

Setup

For viewing locally

1. Git clone this repo git clone [email protected]:chhaymatt/morsetranslator.git
2. Get Live Server for VS Code
3. Open index.html and Press Go Live in the bottom right corner in VS Code

For running unit tests

1. Git clone this repo git clone [email protected]:chhaymatt/morsetranslator.git
2. Run npm install
3. Run npm test

For further development

1. Git clone this repo git clone [email protected]:chhaymatt/morsetranslator.git
2. Install sass in Terminal npm install -g sass
3. Get Prettier and Live Server for VS Code (links below)
4. Run npm install
5. Run SASS watch command from the /styles folder in Terminal sass --watch --no-source-map style.scss style.css
6. Open index.html and Press Go Live in the bottom right corner in VS Code

Tools Used

• Jest - creating and running unit tests.
• Babel - required for running unit tests because code is split into different modules.
• Live Server - to see live locally without refreshing. Get Live Server Extension
• Prettier - to tidy up code in spacing and structure. Get Prettier Extension
• Font Awesome - a library of icons that can be imported easily. Get Font Awesome icons
• Favicon.io - generate a favicon. Generate favicon
• Meta Tags - generate metadata. Generate metadata

Project Status

Project is ongoing

Room for Improvement

• Error handling for unsupported characters
• Morse to Speech