1. HTML Structure

The HTML structure defines the layout and components of the editor. Here’s a breakdown:

Title Section

The title section includes an input field for the editor's title and a help button for additional support.

<div id="title-contents">
    <input id="title" type="text" placeholder="Title..." value="The real Moby Dick">
    <span id="help"><a href="help.html" style="text-decoration: none; color: rgb(0, 110, 255);">!</a></span>
</div>

Editor Section

The main editable area is made with the contenteditable attribute, allowing users to directly edit text.

<div id="editor" contenteditable="true">...</div>

Controls Section

The control section contains buttons for styling (bold, italic, underline) and menus for advanced styling and speech options.

<div id="controls">...</div>

2. CSS Styling

The CSS file styles.css provides layout and styling for each component.

Title and Notice

The title and notice holder are styled with inline properties to control their appearance and layout.

#title-contents {
    display: flex;
    align-items: center;
    ...
}

Editor

The editor area uses a border and padding for a neat, accessible look and feel.

#editor {
    border: 1px solid #ccc;
    padding: 10px;
    ...
}

Control Buttons

Buttons are styled with distinct properties to enhance usability, like font weight and style for bold, italic, and underline.

button {
    cursor: pointer;
    ...
}

3. JavaScript Functionality

The JavaScript files script.js and speech.js control editor functions like bold, italic, and speech-to-text.

Text Formatting

Functions allow text formatting by using execCommand to make text bold, italic, or underlined.

document.getElementById('boldButton').onclick = function() {
    document.execCommand('bold');
};

Font and Color Selection

Dropdown menus allow changing font family, font size, text color, and highlighting.

document.getElementById('fontSelect').addEventListener('change', function() {
    document.execCommand('fontName', false, this.value);
});

Speech Recognition

The speech.js file includes speech-to-text and text-to-speech functions, enabling accessibility options.

const recognition = new webkitSpeechRecognition();
recognition.onresult = function(event) {
    document.getElementById('editor').innerText += event.results[0][0].transcript;
};