# Tempest-online

HTML, JavaScript, and Bootstrap CSS have been used for developing the frontend part of Tempest-online.

## Modules and Libraries Used

- **toastify-js** for showing toast messages (input errors).
- **viz-js** for showing `.dot` files in the frontend as SVG graphs.
- **CodeMirror** for making custom syntax highlighting.

There is one custom CSS file, `prism.css`, where colors for CodeMirror syntax highlighting and heights of two text editors are defined.

## JavaScript Folder

The JavaScript folder contains 4 `.js` files:

- **filesHandling.js**: Contains functions for downloading content from two text editors and saving them in a `.txt` file. It also contains functions for uploading `.txt` file content to two text editors and functions that upload `.dot` files and show their content as graphs in SVG.

- **syntax.js**: Contains functions that create rules/tokens for syntax highlighting using CodeMirror. The token names are used to define what color the text should be with that token. Token examples include: variable, keyword, etc.

- **zoom.js**: Contains functions for zooming in, zooming out, centering, and dragging SVG files in the frontend.

- **index.js**: Contains initialization of CodeMirror text editors, a main `run()` function that runs when the user clicks on the run button, and functions used for updating text area output based on which tab is active. The output tab shows content of the output function, the simulator of the simulator function, and the graph shows an SVG of the uploaded `.dot` file. The main `run()` function checks if input fields are empty; if they aren’t, it runs output and simulator functions and shows the content of the active tab.

## Basic Visual Format

The basic visual format of the application consists of one container with one row that contains two columns. In the left column, there is a navbar containing the title and run button, two text editors, and a row for `.dot` file input. Next to the two titles are two buttons for downloading and uploading files.

The right column consists of a navbar with tabs/links, an output text area, and zoom in/out and center buttons. The output text area changes based on the active tab/link.

For creating columns, rows, containers, etc., Bootstrap classes were used.