devChallenges/2_JavaScript_Developer/04_qrcode_generator/index.html at main · jorgeguedess/devChallenges · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="This challenge provides an excellent opportunity to practice your JavaScript skills by creating a simple QR code generator application that requires the use of an external library.
      "
    />
    <meta
      name="keywords"
      content="Qr code, Library, Challenge, HTML, CSS, Saas, JavaScript"
    />

    <!-- FONTS -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />

    <!-- STYLES -->
    <link href="./styles/index.css" rel="stylesheet" />

    <link
      rel="icon"
      href="assets/favicon.ico"
      type="image/x-icon"
      sizes="any"
    />
    <title>QR Code Generator</title>
  </head>
  <body>
    <main class="qr__code">
      <!-- Search Page -->
      <section class="qr__code__search active">
        <picture class="logo">
          <img
            src="/assets/imgs/logo-qr-generator.svg"
            alt="Logo QRCODE Generator"
          />
        </picture>
        <div class="input_group">
          <input type="url" id="inputUrl" placeholder="Enter an url" required />
          <button class="button" id="qrCodeButton">QR code</button>
        </div>

        <div id="alertError" class="alert error">
          <p class="alert_message"></p>
          <button class="closeButton">&times;</button>
        </div>
      </section>

      <!-- QR Code Page -->
      <section class="qr_code_result">
        <picture id="result">
          <img src="" alt="Result Qr Code" id="qrCodeImage" />
        </picture>

        <div class="actions">
          <button id="downloadButton" class="button">
            Download
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
              <path
                d="M169.4 502.6c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 402.7 224 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 370.7L86.6 329.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128z"
              />
            </svg>
          </button>
          <button id="shareButton" class="button">
            Share
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
              <path
                d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"
              />
            </svg>
          </button>
        </div>

        <div id="printUrl"></div>

        <div id="alertCopy" class="alert copy">
          <p class="alert_message"></p>
          <button class="closeButton">&times;</button>
        </div>
      </section>
    </main>
    <script src="./js/script.js" type="module"></script>
  </body>
</html>