Spaces:
Sleeping
Sleeping
remarcar nombre
Browse files- app/index.php +9 -23
- app/main.css +10 -0
- app/main.js +20 -0
app/index.php
CHANGED
|
@@ -1,13 +1,18 @@
|
|
| 1 |
<?php
|
| 2 |
$edad = 23;
|
| 3 |
-
$nombre = "Norberto";
|
| 4 |
?>
|
| 5 |
|
| 6 |
<html>
|
| 7 |
<link rel="stylesheet" href="main.css">
|
| 8 |
<h1>Welcome to my page</h1>
|
| 9 |
-
|
| 10 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 11 |
</p>
|
| 12 |
|
| 13 |
<div class="contador">
|
|
@@ -18,25 +23,6 @@ $nombre = "Norberto";
|
|
| 18 |
<button class="down" onclick="disminuir()">Disminuye</button>
|
| 19 |
</div>
|
| 20 |
|
| 21 |
-
<script>
|
| 22 |
-
let contenedorNumero = document.getElementById("numero")
|
| 23 |
-
let numeroString = contenedorNumero.textContent
|
| 24 |
-
let numeroActual = parseInt(numeroString)
|
| 25 |
-
|
| 26 |
-
function aumentar () {
|
| 27 |
-
numeroActual++
|
| 28 |
-
mostrarNumero()
|
| 29 |
-
}
|
| 30 |
-
|
| 31 |
-
function disminuir () {
|
| 32 |
-
if (numeroActual == 0) { return }
|
| 33 |
-
numeroActual--
|
| 34 |
-
mostrarNumero()
|
| 35 |
-
}
|
| 36 |
-
|
| 37 |
-
function mostrarNumero () {
|
| 38 |
-
contenedorNumero.textContent = numeroActual
|
| 39 |
-
}
|
| 40 |
-
</script>
|
| 41 |
|
| 42 |
</html>
|
|
|
|
| 1 |
<?php
|
| 2 |
$edad = 23;
|
| 3 |
+
$nombre = "Norberto Montalvo García";
|
| 4 |
?>
|
| 5 |
|
| 6 |
<html>
|
| 7 |
<link rel="stylesheet" href="main.css">
|
| 8 |
<h1>Welcome to my page</h1>
|
| 9 |
+
|
| 10 |
+
<p class="parrafo">
|
| 11 |
+
Hello, my name is
|
| 12 |
+
<span> <?php echo $nombre ?></span>
|
| 13 |
+
and i'am
|
| 14 |
+
<span><?php echo $edad ?></span>
|
| 15 |
+
years old.
|
| 16 |
</p>
|
| 17 |
|
| 18 |
<div class="contador">
|
|
|
|
| 23 |
<button class="down" onclick="disminuir()">Disminuye</button>
|
| 24 |
</div>
|
| 25 |
|
| 26 |
+
<script src="main.js" type="module"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 27 |
|
| 28 |
</html>
|
app/main.css
CHANGED
|
@@ -28,6 +28,10 @@ p {
|
|
| 28 |
margin-bottom: 20px;
|
| 29 |
}
|
| 30 |
|
|
|
|
|
|
|
|
|
|
|
|
|
| 31 |
.contador {
|
| 32 |
width: 100px;
|
| 33 |
text-align: center;
|
|
@@ -60,4 +64,10 @@ button {
|
|
| 60 |
|
| 61 |
.down {
|
| 62 |
border-color: rgb(200, 120, 120);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 63 |
}
|
|
|
|
| 28 |
margin-bottom: 20px;
|
| 29 |
}
|
| 30 |
|
| 31 |
+
span {
|
| 32 |
+
font-size: xx-large;
|
| 33 |
+
}
|
| 34 |
+
|
| 35 |
.contador {
|
| 36 |
width: 100px;
|
| 37 |
text-align: center;
|
|
|
|
| 64 |
|
| 65 |
.down {
|
| 66 |
border-color: rgb(200, 120, 120);
|
| 67 |
+
}
|
| 68 |
+
|
| 69 |
+
.parrafo {
|
| 70 |
+
display: flex;
|
| 71 |
+
flex-direction: column;
|
| 72 |
+
justify-content: center;
|
| 73 |
}
|
app/main.js
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
let contenedorNumero = document.getElementById("numero");
|
| 2 |
+
let numeroString = contenedorNumero.textContent;
|
| 3 |
+
let numeroActual = parseInt(numeroString);
|
| 4 |
+
|
| 5 |
+
function aumentar() {
|
| 6 |
+
numeroActual++;
|
| 7 |
+
mostrarNumero();
|
| 8 |
+
}
|
| 9 |
+
|
| 10 |
+
function disminuir() {
|
| 11 |
+
if (numeroActual == 0) {
|
| 12 |
+
return;
|
| 13 |
+
}
|
| 14 |
+
numeroActual--;
|
| 15 |
+
mostrarNumero();
|
| 16 |
+
}
|
| 17 |
+
|
| 18 |
+
function mostrarNumero() {
|
| 19 |
+
contenedorNumero.textContent = numeroActual;
|
| 20 |
+
}
|