wakeuptimes-app/index.html at main · c9zA/wakeuptimes-app · 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
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8"/><!--declare character encoding-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /><!--gives the browser instructions on how to control the page’s dimensions and to scale.
    It is needed for responsive web design, which aims to make your web page look good on all devices.-->
    <title>WakeUpTimes App</title>
    <!--link rel="stylesheet" type="text/css" href="index.css"--><!--link an external resource such as a CSS stylesheet, to an HTML document-->
    <link rel="icon" type="image/x-icon" href="favicon.png" />
    <!--Added a favicon to the webpage by linking to a local favicon.png file in the <head> section. This will display the icon in the browser tab.-->
    <link
      href="https://fonts.googleapis.com/css?family=Roboto"
      rel="stylesheet"
    />
    <!--Added the Roboto font from the Google Fonts API in the <head> section. This will make the text on the webpage appear in the Roboto font.-->
    <link rel="stylesheet" href="index.css"/>

    <!--rel attribute specifies the relationship between the HTML and the linked resource. this case linked resource is a stylesheet
    type attribute specifies the MIME type of the linked resource
    href attribute specifies the location of the linked resource-->
    <!--style>
    /*css style config, the same thing can be put into index.css*/
    To style different HTML elements in CSS, use a selector followed by curly braces containing one or more property-value pairs.
    selector can be an element name(body, h1, and p.), class name, ID, or a combination of these.*/
      /*body {/*settign the style for body tag
        font-size: 16px;
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        text-align: center;
        color: #333;
      }

      h1 {
        color: red;
      }

      p {
        line-height: 1.5;
      }
      #calc-btn {/* # means select an element with a specific id attribute. In this case, the id is calc-btn*/
        font-size: 1.5rem;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        border: 1px solid #333;
        background-color: #fff;
        color: #333;
        cursor: pointer;/*sets the cursor to “pointer” to indicate that it is clickable*/
      }

      #calc-btn:hover {
        background-color: #333;
        color: #fff;
      }

      .cycle {/* leading . in this case is used to select elements with a specific class attribute. the class is cycle.*/
        font-size: 1.5rem;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        border: 1px solid #333;
        background-color: #fff;
        color: #333;
        margin: 0.5rem;
      }
        */
    </style-->
  </head>
  <!--body style="text-align: center;"-->
    <!--h1 style="color: red;">WakeUpTimes App</h1-->
    <body>
      <main id="app"><!--put a unique id on HTML elemnt
        Wrapped all content in the <body> tag inside a <main> tag with the id app. This is the main container for the application.-->
        <section id="prompt-section">
            <h1>WakeUpTimes</h1>
            <p>
            A sleep cycle lasts about 90 minutes, and a good night's sleep consists of
            5-6 sleep cycles.
            </p>
            <p>
            If you wake up in the middle of a sleep cycle, you will feel groggy, even
            if you've completed several cycles prior to waking up.
            </p>
            <p>If you go to bed now, when should you wake up?</p>
            <button id="calc-btn">Calculate</button>
        </section>

        <div id="img-container">
            <img src="moon.png" alt="Sleep Cycle" />
        </div>
        <section id="result-section" class="hidden"><!--This section is initially hidden and will be shown after the user clicks the Calculate button.-->
            <div class="button-group">
                <button id="return-btn">←</button>
                <button id="refresh-btn">Refresh</button>
            </div>

            <p>
                If you go to bed right now<sup>*</sup>, try to wake up at one of these times:
            </p>

            <div id="wakeup-hours-div" class="wakeup-hours">
                <div id="cycle-1" class="cycle">12:15 AM</div>
                <div id="cycle-2" class="cycle">1:45 AM</div>
                <div id="cycle-3" class="cycle">3:15 AM</div>
                <div id="cycle-4" class="cycle">4:45 AM</div>
                <div id="cycle-5" class="cycle">6:15 AM</div>
                <div id="cycle-6" class="cycle">7:45 AM</div>
            </div>

            <p>
                <sup>*</sup>It takes the average human fourteen minutes to fall asleep.
            </p>
        </section>
    </main>


    <script src="index.js"></script> <!--imports the index.js func, has eventhandler-->
            <!--
            <script>
                // document object represents the entire HTML document. It's root node of the HTML document object model (DOM).
                const calcBtn = document.getElementById("calc-btn");//DOM method that returns the element that has the ID attribute with the specified value
                //selecting the button element with the ID calc-btn and assigning it to the calcBtn variable.
                calcBtn.onclick = handleClick;
                //adding () means function will be executed immediately when the script is loaded, not when the button is clicked
                //You want to assign the function itself to the onclick event, not the result of calling the function

                function handleClick() {
                    console.log("Bam!");
                    window.alert("Boo!");
                }
            </script>
        -->
  </body>
</html>