---
# Goal

Create a simple text editor in a PHP page.

---
# Specification

In this section, we will discuss the specification of the project.

---
## Directory Structure

The root directory of this application is designated as {root-dir}.
The acutall value of {root-dir} is "stedit".

The root directory contains the following folders:

### FOLDER: info

The path of this folder is '{root-dir}/info'.
The info folder stores information regarding this project.

### FOLDER: data

The path of this folder is '{root-dir}/data'.

#### FILE: storage.txt
The path of this file is '{root-dir}/data/storage.txt'.
This is a text file. It is readable and writable.

## PHP FILES

### PHP File: stedit.php
The path of this file is '{root-dir}/stedit.php'.

It has one textarea in the page.
Initially, the script loads text from storage.txt into the textarea.
Below the textarea, there are the following buttons:

- "Save": If you click it, the script will save the text in the textarea into storage.txt. Note that storage.txt is entirely overwritten.

- "Select all": If you click it, all the text in the textarea will be selected.

- "Copy": If you click it, the selected text in the textarea will be copied to the clipboard.

- "Cut": If you click it, the selected text in the textarea will be cut to the clipboard.

- "Paste": If you click it, the text in the clipboard wil be inserted at the insertion point in the textarea.

- "Undo": If you click it, the textarea will undo itself.

The font family of the textarea is monospace. The font-size is 20px.
The style of the buttons should look like Bootstrap.

---
# Output

## Output as a zip file

Put all the files you create into a zip file and allow me to download it.
If you cannot make a zip file for some reason, create a HTML file that produces the zip file, which will be explained below.

## Create a HTML file that produces the zip file

I will explain how to create a HTML file that produces the zip file.

### Create a JSZip instance

The first step is create a JSZip instance like this:

```javascript
const zip = new JSZip();
```

JSZip can be loaded onto the page using the following tag:

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
```

### Put the contents of each file to the JSZip instance.

Next, put the contents of each file to the JSZip instance.
Below, I will explain how to put the contents of a file to the JSZip instance.

#### 1. Declear a temporary variable

Declear a temporary variable like this:

```javascript
let tmp = '';
```

#### 2. Assign the contents of a file to the temporary variable.

Assign the contents of a file to the temporary variable like this:

```javascript
tmp = `
................
................
................
`;
```

Note that any occurences of the word 'script' in the template literal must be replaced with 's@c@r@i@p@t' because leaving the word 'script' in the template literal might break down the JavaScript code. Do not replace any 'script' outside of the template literal.

Make sure that you really understand what a template literal is. Some people call it a backtik string becuase it is a string enclosed with two backticks( ` ). When you replace 'script', make sure that the word is inside a backtik string. If it's ouside of a backtick string, you should leave it intact.

#### 3. Replace all occurences of 's@c@r@i@p@t' with 'script'

Excute the following code to replace all occurences of 's@c@r@i@p@t' with 'script' in the variable.

```javascript
tmp = tmp.replaceAll('s@c@r@i@p@t','script');
```
#### 4. Put the value of the variable to the JSZip instance

Put the value of the variable to the JSZip instance like this:

```javascript
zip.file("path/to/file", tmp);
```
Now you finish putting the contents of a file to the JSZip instance.
Do the same thing for all the files you have created.

### Add a button for downloading the zip file.

Finally, add a button that initiates downloading the zip file.

---
# Closing Notes

If you have any questions regarding the specification, feel free to ask me. Thank you.