Skip to content

Fabio-Vicente/Mistery-Letter

Repository files navigation

Mistery Letter

Write your letter and see it in a new and surprisingly way

HMTL CSS Javascript

Project Web Page

See a screenshot
Project Screenshot

About

A letter maker that will ever generate this in a new and unexpected formatting.

This project development is part of Trybe course program.

Development Skills

  • HTML;
  • CSS;
  • Javascript;
  • DOM;
  • Events.

Getting Started

Prerequisites

  • Web Browser compatible with HTML5, CSS3 and EcmaScript 6.

Instalation

Use one of these three ways to install the project locally.

1. Download ZIP:

  • Click on the Code green button at repository top;

    Code Button

  • Click on Download ZIP button;

    Code Button

  • Unzip files in a choosen directory;

2. Clone repository via HTTPS:

  • Use https://github.com/Fabio-Vicente/Mistery-Letter.git endpoint for clonning via HTTPS (credencials may be needed);

3. Clone repository via SSH:

  • Use git@github.com:Fabio-Vicente/Mistery-Letter.git endpoint for clonning via SSH (it must be need set a SSH Key);

Initialization

Once you have procedure on the installation process, open the index.html downloaded file on your browser to start use the program.

Don't want to install the project locally? No worries! You can acess the web project by this link:

https://fabio-vicente.github.io/Mistery-Letter/


Usage

Write any kind of letter on field input seen on the screen. Click on the Send button button, and see:

  • Your letter showed in a randomic format that resembles a journal collage;
  • Right above, a word counter.

Hint: did you not like the assiged format? Try press the Send button button again, and get a new and randomic format.

After your letter is outputted, click the  Clear button in order to clear screen.


Lint

The project was staticly tested using ESLint and StyleLint, whose appoints no error on code analyses. These tools enforces code readbility and standart development style such on CSS (StyleLint) as on Javascript coding (ESLint).

Check ESLint

You can verify ESLint rules attendance running following command:

  npm run lint

Check StyleLint

You can verify StyleLint rules attendance running following command:

  npm run lint:styles

For both analyzis, you must have NPM >= 8.1.0 previously installed, and have been installed project dependencies by running command:

  npm install
Obs: you'll probably have no response on your analyzis. It occurs whenever is found no errors on the code styling. Try to make some mess 💩 on formatting and run this command again. Now you must see some errors pointed in your terminal.

Authors & contributors

The development of this project, as well all documentation, was made by Fábio Vicente(Me).


Acknowledgements

  • Trybe by porpose this project, specify requirements and provide a initial configuration;
  • Amazing Github Template which provides a Readme Template for inspiration.




Code with love by Fábio Vicente