coderhouse-javascript/index.html at main · CirmiFrancis/coderhouse-javascript · 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
<!DOCTYPE html>

<html lang="es">

<head>
    <!-- Default Config -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Title -->
    <title>JavaScript | Proyecto Final</title>
    <!-- Custom Style CSS -->
    <link rel="stylesheet" href="./assets/style.css">
    <!-- Icon -->
    <link rel="icon" href="./assets/media/icon.png" type="image/x-icon">
</head>

<body>

    <main>
        <!-- Título & Descripción -->
        <div class="section1" id="sectionTop">
            <h1> <a href="./index.html"> BIBLIOTECA-DE-VIDEOJUEGOS </a> </h1>
            <p>Puedes ver el catálogo completo de videojuegos, así también como buscar/agregar/eliminar un videojuego.</p>
        </div>

        <!-- Botones y Operaciones (Mostrar/Buscar/Agregar/Eliminar un videojuego.) -->
        <div class="section2">
            <div class="section2-botones">
                <button type="submit" id="mostrarJuegos">MOSTRAR_JUEGOS</button>
                <button type="submit" id="buscarJuego">BUSCAR_JUEGO</button>
                <button type="submit" id="agregarJuego">AGREGAR_JUEGO</button>
                <button type="submit" id="eliminarJuego">ELIMINAR_JUEGO</button>
            </div>

            <div class="section2-funciones">
                <!-- En esta parte se agregan elementos a través de JavaScript -->
            </div>
        </div>

        <!-- Audio & API -->
        <div class="audio-container">
            <audio loop id="reproductor">
                <source src="./assets/media/bg-ost.mp3" type="audio/mp3">
                Tu navegador no soporta la etiqueta de audio.
            </audio>
            <img src="./assets/media/soundOff-icon.png" alt="Ícono para alternar el sonido." id="imagenBoton">
        </div>

        <div class="weather-container">
            <div class="weather-content">
                <h2>API CLIMA</h2>
                <div class="result">
                    <!-- Acá irían las características del clima: Nombre de la ciudad, imagen del clima, temperatura en centígrados -->
                </div>
                <form action="" method="POST" class="getWeather">
                    <select name="" id="country">
                        <option disabled selected value="">Elige un país</option>
                        <option value="AR">Argentina</option>
                        <option value="AU">Australia</option>
                        <option value="ES">España</option>
                        <option value="US">Estados Unidos</option>
                        <option value="JP">Japón</option>
                        <option value="ZA">Sudáfrica</option>
                    </select>
                    <br>
                    <input type="text" name="city" id="city" placeholder="Escribe una ciudad...">
                    <br><br>
                    <input class="btnWeather" type="submit" name="" id="" value="Obtener Clima">
                </form>
            </div>
        </div>

    </main>

    <!-- Snow -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js"></script>
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- Local JS -->
    <script src="./assets/script.js"></script>

</body>

</html>