ethanyxchen.github.io/journal-entry.html at master · ethanyxchen/ethanyxchen.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html class="journal-html">
    <head>
        <title>My Journal Space</title>

        <link rel="stylesheet" type="text/css" href="assets/css/style.css">

        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;600&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Karla:wght@300&display=swap" rel="stylesheet">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="utf-8">
    </head>
    <body class="journal">

        <div id="container">
            <div id="writing-area">
                <textarea id="title-area" placeholder="Title your day here"></textarea>

                <textarea id="text-area" placeholder="Write about your day here"></textarea>

            </div>

            <div id="others-area" >

                <div id="add-image-caption">Choose an image for today's entry!</div>


                <!-- Javascript from online sources to upload journal image

                    The following stack overflow sites were used for this code:
                    https://stackoverflow.com/questions/12368910/html-display-image-after-selecting-filename
                    https://stackoverflow.com/a/55544625
                -->

                <input type='file' accept="image/*" onchange="readURL(this);" />
                <img id="journal-image" alt="your image goes here" height="300" width = "400" />


            </div>
        </div>

        <button id="dark-theme-button">GO TO THE DARK SIDE</button>
        <button id="light-theme-button">GO TO THE LIGHT SIDE</button>
        <button id="go-home-button">RETURN TO HOMEPAGE</button>

        <!-- this following button is ignored on this page -->
        <button id="write-option">click here to start journaling again</button>

        <script src="assets/js/script.js"></script>

    </body>
</html>