index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Morse Code Translator</title>
        <link rel="stylesheet" href="styles.css" />
        <script src="./javascript/main.js" type="module" defer></script>
    </head>
    <body>
        <main>
            <header>
                <h1>Morse Code Translator</h1>
            </header>
            <form>
                <label for="input">Enter message to translate:</label>
                <textarea
                    name="input"
                    id="input"
                    cols="30"
                    rows="8"
                    placeholder="Type message to translate here: English text or Morse code - using '.' for dot, '-' for dash, a space between each morse letter, and a '/' between each word."
                ></textarea>
                <label for="output">Output...</label>
                <p id="output"></p>
                <div class="buttons">
                    <button id="clear">Clear</button>
                    <button id="translate">Translate</button>
                </div>
            </form>
        </main>
    </body>
</html>