Public-API-Consumer/index.html at main · saadondaniella/Public-API-Consumer · 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
<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>World of Words</title>
    <meta
      name="description"
      content="Översätt ord och fraser direkt eller slumpa fram användbara reseuttryck! Perfekt inför din nästa resa."
    />
    <meta
      property="og:title"
      content="World of Words – Resefraser och snabböversättningar"
    />
    <meta
      property="og:description"
      content="Översätt ord och fraser direkt eller slumpa fram användbara reseuttryck! Perfekt inför din nästa resa."
    />
    <meta property="og:image" content="https://din-doman.se/og-image.jpg" />
    <meta property="og:url" content="https://developedbydaniella.se" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="World of Words" />

    <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=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="page-layout">
      <section class="app">
        <h1>World of Words</h1>
        <p class="tagline">
          Res med självförtroende! Översätt viktiga ord och meningar – eller
          slumpa fram reseord som du kan ha nytta av på resan.
        </p>

        <section class="controls">
          <label for="language">Välj språk</label>
          <select id="language">
            <option value="" disabled selected>🌍 Välj språk</option>
            <option value="en_US">🇺🇸 Engelska (US)</option>
            <option value="it">🇮🇹 Italienska</option>
            <option value="es">🇪🇸 Spanska</option>
            <option value="fr">🇫🇷 Franska</option>
            <option value="de">🇩🇪 Tyska</option>
            <option value="zh">🇨🇳 Kinesiska</option>
            <option value="he">🇮🇱 Hebreiska</option>
            <option value="ja">🇯🇵 Japanska</option>
          </select>
          <label for="custom-word">Eget ord eller mening (valfritt)</label>
          <input
            id="custom-word"
            type="text"
            placeholder="Skriv ett ord eller en mening du vill översätta"
          />
          <button id="random-btn">Slumpa orden</button>
        </section>

        <section id="result" class="card">
          <div class="word-row">
            <h2 id="word">Inget ord ännu</h2>
            <span id="phonetic" class="phonetic"></span>
          </div>
          <p id="definition" class="definition">
            Skriv ett ord eller en mening, eller klicka på knappen för att
            slumpa fram ett reseord att översätta.
          </p>
        </section>
      </section>

      <figure class="illustration">
        <img
          id="language-image"
          src="pictures/travelCouple.jpg"
          alt="a couple planning a trip"
        />
      </figure>
      <section class="tips card">
        <h3>
          Tips på bra ord eller meningar att kunna när du är på resande fot
        </h3>
        <p id="tips-list"></p>
      </section>
    </main>
    <script src="script.js"></script>
  </body>
</html>