dev-challenges/vanilla/multi-step-form/index.html at master · Hdoc1509/dev-challenges · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Multi-step Register Form - DevChallenges</title>
  </head>
  <body>
    <main>
      <form id="register-form" class="form-card" novalidate>
        <div class="steps-container">
          <fieldset class="register-step step step--current" data-step="1">
            <legend class="step__title">Register</legend>
            <label>
              <span>Name<span aria-hidden="true"> *</span></span>
              <input name="name" placeholder="enter your name" required />
              <span class="error-message hidden"></span>
            </label>
            <label>
              <span>Email<span aria-hidden="true"> *</span></span>
              <input
                name="email"
                type="email"
                placeholder="example@gmail.com"
                required
              />
              <span class="error-message hidden"></span>
            </label>
          </fieldset>
          <fieldset aria-required="true" class="topics-step step" data-step="2">
            <legend class="step__title">
              Which topics you are interested in?
              <span id="topics-legend-error" class="visually-hidden"></span>
            </legend>
            <div class="topics-step__group" aria-label="Topic options">
              <label class="topic-option">
                <input
                  type="checkbox"
                  name="topics"
                  value="software-development"
                />
                <span class="topic-option__label">Software Development</span>
              </label>
              <label class="topic-option">
                <input type="checkbox" name="topics" value="user-experience" />
                <span class="topic-option__label">User Experience</span>
              </label>
              <label class="topic-option">
                <input type="checkbox" name="topics" value="graphic-design" />
                <span class="topic-option__label">Graphic Design</span>
              </label>
            </div>
            <span aria-hidden="true" class="error-message hidden"></span>
          </fieldset>
          <section class="summary-step step" data-step="3">
            <h2 class="step__title">Summary</h2>
            <div class="summary-step__group">
              <section class="summary-register">
                <p>Name: <span class="summary-register__name"></span></p>
                <p>Email: <span class="summary-register__email"></span></p>
              </section>
              <section class="summary-topics">
                <p>Topics:</p>
                <ul class="summary-topics__list"></ul>
              </section>
            </div>
          </section>
        </div>
        <button id="submit-register" class="action-button">Continue</button>
        <button
          id="restart"
          type="button"
          class="action-button hidden"
          disabled
        >
          Restart
        </button>
      </form>
    </main>
    <section class="stepper-indicator">
      <p>Step <span id="current-step-label">1</span> of 3</p>
      <div class="stepper" aria-hidden="true">
        <span class="stepper__step" data-current data-step="1"></span>
        <span class="stepper__step" data-step="2"></span>
        <span class="stepper__step" data-step="3"></span>
      </div>
    </section>
    <div id="alert" class="alert">
      <span class="alert__text"></span>
      <div class="alert__time-bar"></div>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>