My-Journal/index.html at main · acf-code/My-Journal · 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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html>
  <head>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");
      * {
        padding: 0;
        margin: 0;
      }

      h1,
      h2,
      h3 {
        font-family: "Courier New", Courier, monospace;
      }

      p {
        font-family: "Montserrat", sans-serif;
      }

      nav {
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
        background: #f7ab78;
        color: white;
        font-size: 30px;
      }

      .entries {
        padding: 10px 5px;
        margin: 2% 3%;
        border: 2px dashed black;
        color: rgb(25, 122, 226);
      }

      .entries:nth-child(even) {
        background-color: violet;
        color: #222255;
      }

      .entries h1 {
        margin: 12px 0 12px 18px;
        color: #17ff0f;
      }

      .entries p {
        margin: 0 12px 0 18px;
      }

      img {
        width: 250px;
        margin: 7px auto 12px 18px;
        border: 2px solid rgb(66, 56, 56);
      }

      #secret1p,
      #secret2p,
      #secret3p {
        display: none;
        color: #e67f1e;
        font-weight: 600;
        font-style: italic;
      }

      button {
        float: right;
        color: rgb(212, 216, 219);
        background-color: #237c88;
        padding: 5px 10px;
        margin-top: 2%;
        margin-right: 5%;
        margin-bottom: 5%;
        font-weight: 600;
        border-radius: 10px;
      }

      footer {
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #0c0c34;
        color: white;
        text-align: center;
        padding: 10px 0;
        margin-top: 50px;
      }
    </style>
  </head>

  <body>
    <nav>
      <h1>My Journal</h1>
    </nav>
    <main>
      <div class="entries">
        <h1>My Favorite Song, On Autoplay- 08/31/2022</h1>
        <p>
          Today was full of small happy miracles! To state that one miracle
          which really made my day, there was this one song by Ellie Goulding
          that I used to listen to on loop in my high school days. Today, while
          I was working out, I actually thought about this song randomly.
          Believe it or not, it has been more than five years since I last
          listened to this song and yet randomly enough, Spotify played just
          this number for me on radio. Is this magic, or can AI finally read our
          minds now? Anyway, it made my day.
        </p>
        <img src="hearingsong.gif" alt="Simpson listening to music" />
        <br />
        <button id="secret1btn" onclick="secret1reveal()">
          Show Top Secret
        </button>
        <br />
        <p id="secret1p">
          The song actually reminded me of this fictional character that I
          fangirled.
        </p>
      </div>
      <div class="entries">
        <h1>Dancing By Myself- 09/01/2022</h1>
        <p>
          There was a city-wide powercut today, and in this excuse, I took some
          time off from my laptop and smartphone and went to the rooftop for a
          nice one-hour long walk. The moon was out, and so were the stars. The
          lack of city lights made it look even more beautiful. It was then that
          I noticed my shadow, look somewhat eery and large on the wall- I took
          this time to dance by myself, with my shadow.
        </p>
        <img src="dancingdog.gif" alt="A dancing dog" />
        <br />
        <p id="secret2p">
          This was actually a creepy thing to do, I'll be honest.
        </p>
        <br />
        <button id="secret2btn">Show Top Secret</button>
        <br />
      </div>
      <div class="entries">
        <h1>Dreaming About Food- 09/02/2022</h1>
        <p>
          Today started off kind of weird, when I had a dream very early in the
          morning that I was eating pizza in my sleep. It was very cheesy and
          had lots of onions and mushroom for toppings- so yum but then, I woke
          up right before I could savour it. Pretty much then, I realized that
          it was actually time for me to go to the gym instead. What a sad
          reality check. :( Later on, I also ran for five extra minutes on the
          treadmill.
        </p>
        <img src="eatingpizza.gif" alt="A DJ cat doing cool stuff with pizza" />
        <br />
        <p id="secret3p">I honestly don't even like Pizza that much. :/</p>
        <br />
        <button id="secret3btn" onclick="secret3reveal()">
          Show Top Secret
        </button>
        <br />
      </div>
    </main>
    <footer>
      <p>Made with Love by Swatilekha, 2022. ©</p>
    </footer>
    <script>
      function secret1reveal() {
        var secret1p = document.querySelector("#secret1p");
        var secret1btn = document.querySelector("#secret1btn");
        if (secret1p.style.display == "none") {
          secret1p.style.display = "block";
          secret1btn.innerHTML = "Hide Top Secret";
        } else {
          secret1p.style.display = "none";
          secret1btn.innerHTML = "Show Top Secret";
        }
      }

      // To experiment with different ways in which we can make a button clickable in JavaScript
      var secret2btn = document.querySelector("#secret2btn");
      secret2btn.addEventListener("click", function secret2reveal() {
        var secret2p = document.querySelector("#secret2p");
        if (secret2p.style.display == "none") {
          secret2p.style.display = "block";
          secret2btn.innerHTML = "Hide Top Secret";
        } else {
          secret2p.style.display = "none";
          secret2btn.innerHTML = "Show Top Secret";
        }
      });

      function secret3reveal() {
        var secret3p = document.querySelector("#secret3p");
        var secret3btn = document.querySelector("#secret3btn");
        if (secret3p.style.display == "none") {
          secret3p.style.display = "block";
          secret3btn.innerHTML = "Hide Top Secret";
        } else {
          secret3p.style.display = "none";
          secret3btn.innerHTML = "Show Top Secret";
        }
      }
    </script>
  </body>
</html>