-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (124 loc) · 7.17 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signo del Zodiaco</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav class="navbar bg-body-tertiary">
<div class="container" style="justify-content: center; align-items: center;">
<a class="navbar-brand" href="#" style="position: relative;">
<img id="logo" src="/css/assets/javascript-logo-big.png" alt="Bootstrap" width="100px" height="100px">
</a>
</div>
</nav>
</header>
<main>
<section class="section-zodic" style="background-color: #ffc107; height:500px;">
<br><br><br>
<div class="container text-center">
<h1 class="p-3">Descubre tu signo del zodiaco</h1>
<div class="row justify-content-center">
<div class="col-auto">
<select id="mes" class="form-select" onchange="cambiarDias()">
<option value="1">Enero</option>
<option value="2">Febrero</option>
<option value="3">Marzo</option>
<option value="4">Abril</option>
<option value="5">Mayo</option>
<option value="6">Junio</option>
<option value="7">Julio</option>
<option value="8">Agosto</option>
<option value="9">Septiembre</option>
<option value="10">Octubre</option>
<option value="11">Noviembre</option>
<option value="12">Diciembre</option>
</select>
</div>
<div class="col-auto">
<select id="dia" class="form-select">
<option value="1">1</option>
<!-- Resto de opciones generadas dinámicamente -->
</select>
</div>
<div class="col-auto">
<button onclick="calcularSigno()" class="btn btn-outline-dark">Calcular</button>
</div>
<p id="result"></p>
</div>
</div>
<br><br><br>
</section>
<hr>
<section>
<br><br><br>
<h1>Otras funcionalidades en javascript</h1>
<br>
<div class="card-group p-3">
<div class="card m-3 justify-content-center">
<div class="card-body">
<h5 class="card-title">DOM</h5>
<h6 class="card-subtitle">(Juego de dados)</h6><br>
<p class="card-text">El Document Object Model (DOM) HTML en JavaScript es una representación del contenido de una página web como un árbol de objetos. Permite a los programadores acceder, modificar y manipular los elementos HTML de una página web utilizando JavaScript. </p>
<button class="btn btn-warning"><a href="/pages/DOM/dom.html">Ver practica en consola</a> </button>
</div>
</div>
<div class="card m-3 justify-content-center">
<div class="card-body">
<h5 class="card-title">BOM</h5>
<h6 class="card-subtitle">(Reloj y detector de navegador)</h6><br>
<p class="card-text">El BOM en JavaScript proporciona una serie de objetos que permiten interactuar con las funciones específicas del navegador y la ventana del navegador, lo que permite crear aplicaciones web más interactivas y dinámicas.</p>
<button class="btn btn-warning"><a href="/pages/BOM/bom.html">Ver practica en consola</a> </button>
</div>
</div>
</div>
<div class="card-group p-3">
<div class="card m-3 justify-content-center">
<div class="card-body">
<h5 class="card-title">BUCLE - FOR </h5>
<p class="card-text">Es una estructura de control de flujo que se utiliza para repetir un bloque de código un número específico de veces. (El más utilizado)</p>
<button class="btn btn-warning"> <a href="/pages/bucles/bucle-for.html">Ver practica en consola</a></button>
</div>
</div>
<div class="card m-3 justify-content-center">
<div class="card-body">
<h5 class="card-title">BUCLE - WHILE </h5>
<p class="card-text">Ejecuta un bloque de código mientras la condición especificada sea verdadera.</p>
<button class="btn btn-warning"> <a href="/pages/bucles/bucle-while.html">Ver practica en consola</a> </button>
</div>
</div>
<div class="card m-3 justify-content-center">
<div class="card-body">
<h5 class="card-title">BUCLE - DO WHILE</h5>
<p class="card-text">La diferencia clave es que do-while garantiza al menos una ejecución del bloque de código, mientras que while puede omitir la ejecución del bloque si la condición es falsa desde el principio. (No se usa mucho)</p>
<button class="btn btn-warning"> <a href="/pages/bucles/dowhile-califications.html">Ver practica en consola</a> </button>
</div>
</div>
</div>
<div class="card-group p-3">
<div class="card m-3 justify-content-center">
<div class="card-body">
<h5 class="card-title">ARRAYS</h5>
<p class="card-text">Son estructuras de datos que nos permiten almacenar una colección de elementos de forma ordenada. Cada elemento en un array tiene un índice numérico que indica su posición dentro del arreglo (empezando por 0). Existen distintos métodos que se pueden utilizar</p>
<button class="btn btn-warning"><a href="/pages/array/metodos-array.html">Ver practica en consola</a> </button>
</div>
</div>
<div class="card m-3 justify-content-center">
<div class="card-body">
<h5 class="card-title">POO</h5>
<p class="card-text">La Programación Orientada a Objetos (OOP) es una forma de escribir programas informáticos que se basa en el concepto de "objetos". Imagina que cada parte de tu programa es como un objeto en la vida real, con características (como color, tamaño) y acciones (como moverse, cambiar de forma).</p>
<button class="btn btn-warning"><a href="/pages/POO/poo.html">Ver practica en consola</a> </button>
</div>
</div>
</div>
</section>
</main>
<footer>
</footer>
<script src="/js/switch/zodiac.js"></script>
</body>
</html>