fs-html-css-js-base-lab/index.html at main · codezelaca/fs-html-css-js-base-lab · 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
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Title of the webpage that appears in the browser tab -->
    <title>CCA LAB SESSION 2802</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <!-- ===== Site Header (Component: SiteHeader) ===== -->
    <header class="SiteHeader">
      <a href="./" class="Logo" aria-label="CCA home">CCA LAB</a>
      <button
        class="IconButton"
        id="menuBtn"
        type="button"
        aria-expanded="false"
        aria-controls="nav"
      >
        ☰ <span class="sr-only">Open menu</span>
      </button>
      <nav id="nav" class="Nav" aria-label="Primary">
        <a href="#features">Features</a>
        <a href="#pricing">Pricing</a>
        <a href="#signup">Sign up</a>
      </nav>
    </header>
    <main class="Page">
      <!-- ===== Hero (Component: Hero) ===== -->
      <section class="Hero" aria-label="Hero">
        <div class="Hero__Content">
          <h1>Build Fast. Ship Clean.</h1>
          <p>
            This is a simple fundamental Lab session to understand the basics of
            HTML, CSS, and JavaScript. We will be building a simple webpage that
            demonstrates the use of these technologies. We will also add some
            interactivity using JavaScript to enhance the user experience.
          </p>
          <div class="Hero__actions">
            <a class="Btn Btn--primary" href="#signup">Get Started</a>
            <a class="Btn Btn--ghost" href="#features">See Features</a>
          </div>
        </div>
        <div class="Hero__card" aria-hidden="true">
          <div class="Stat">
            <div class="Stat__value" id="liveUsers">128</div>
            <div class="Stat__label">Active users</div>
          </div>
        </div>
      </section>
      <!-- ===== Features (Component: Features) ===== -->
      <section id="features" class="Features">
        <h2>Features</h2>

        <!-- Tabs container -->
        <div class="Tabs">
          <!-- The tab buttons
             We’ll toggle .is-active with JS
             data-tab = key we use to choose content from our data object
        -->
          <div class="Tabs__list" role="tablist" aria-label="Feature tabs">
            <button
              class="Tab is-active"
              type="button"
              role="tab"
              data-tab="speed"
              aria-selected="true"
            >
              Speed
            </button>
            <button
              class="Tab"
              type="button"
              role="tab"
              data-tab="quality"
              aria-selected="false"
            >
              Quality
            </button>
            <button
              class="Tab"
              type="button"
              role="tab"
              data-tab="scale"
              aria-selected="false"
            >
              Scale
            </button>
          </div>

          <!-- Tab panel where JS renders content (state-driven rendering) -->
          <div class="Tabs__panel" id="tabPanel" role="tabpanel"></div>
        </div>
      </section>
      <!-- ===== Pricing (Component: Pricing) ===== -->
      <section id="pricing" class="Pricing">
        <div class="Pricing__top">
          <h2>Pricing</h2>

          <!-- Billing switch (monthly/annual)
             JS reads this input and updates state.billing
        -->
          <label class="Switch">
            <input type="checkbox" id="billingToggle" />
            <span>Annual billing</span>
          </label>
        </div>

        <!-- Pricing cards are rendered by JS from data (not hardcoded) -->
        <div class="Cards" id="pricingCards" aria-label="Pricing plans"></div>
      </section>

      <!-- ===== Signup (Component: SignupForm) ===== -->
      <section id="signup" class="Signup">
        <h2>Sign up</h2>

        <!-- novalidate: we handle validation ourselves for learning -->
        <form id="signupForm" novalidate>
          <div class="Field">
            <label for="name">Name</label>
            <input id="name" name="name" autocomplete="name" />
            <!-- Inline error container controlled by JS -->
            <small class="Field__error" data-error-for="name"></small>
          </div>

          <div class="Field">
            <label for="email">Email</label>
            <input id="email" name="email" autocomplete="email" />
            <small class="Field__error" data-error-for="email"></small>
          </div>

          <div class="Field">
            <label for="track">Track</label>
            <select id="track" name="track">
              <option value="">Select one</option>
              <option>Full-Stack</option>
              <option>Software Engineer</option>
            </select>
            <small class="Field__error" data-error-for="track"></small>
          </div>

          <button class="Btn Btn--primary" type="submit">Create account</button>

          <!-- Status message area (success / prompts) -->
          <p class="Form__msg" id="formMsg" role="status"></p>
        </form>
      </section>
    </main>

    <!-- ===== Site Footer (Component: SiteFooter) ===== -->
    <footer class="SiteFooter">
      <small>Built during CCA Lab Session - HTML, CSS, and JS Essentials</small>
    </footer>

    <!-- Our JavaScript file where we handle all interactivity -->
    <script src="./app.js" defer></script>
  </body>
</html>