ejemplo 2 java script

 <!DOCTYPE html>

<html lang="es">

<head>

  <meta charset="UTF-8">

  <title>Mi pequeña historia</title>

  <style>

    body {

      font-family: Arial, sans-serif;

      margin: 20px;

    }

    #cuento {

      margin-top: 20px;

      padding: 10px;

      border: 1px solid #ccc;

      background-color: #f4f4f4;

    }

  </style>

</head>

<body>

  <h2>Crea tu pequeña historia</h2>

  <form id="formulario">

    <label for="nombre">Nombre:</label>

    <input type="text" id="nombre" required><br><br>


    <label for="edad">Edad:</label>

    <input type="number" id="edad" required><br><br>


    <label for="animal">Animal favorito:</label>

    <input type="text" id="animal" required><br><br>


    <label for="deporte">Deporte favorito:</label>

    <input type="text" id="deporte" required><br><br>


    <button type="submit">Generar historia</button>

  </form>


  <div id="cuento"></div>


  <script>

    document.getElementById('formulario').addEventListener('submit', function(event) {

      event.preventDefault();


      const nombre = document.getElementById('nombre').value.trim();

      const edad = document.getElementById('edad').value.trim();

      const animal = document.getElementById('animal').value.trim().toLowerCase();

      const deporte = document.getElementById('deporte').value.trim().toLowerCase();


      const historia = `

        <strong>Hola, me llamo ${nombre}</strong>, tengo ${edad} años y esta es mi pequeña historia:<br>

        Un día, mientras caminaba por el bosque, me encontré con un <strong>${animal}</strong> muy especial. 

        ¡Era tan ágil que parecía jugar <strong>${deporte}</strong> mejor que yo!<br>

        Nos hicimos amigos y desde entonces practicamos juntos todos los días. ¡Qué aventura tan increíble!

      `;


      document.getElementById('cuento').innerHTML = historia;

    });

  </script>

</body>

</html>

Comentarios

Publicar un comentario

Entradas populares de este blog

Taller hoja de cálculo

  Contexto del Problema: La empresa ficticia "TechSolutions" ha recopilado datos de ventas mensuales de sus productos durante el último año. Deben usar fórmulas , funciones , gráficos y tablas dinámicas para analizar los datos y extraer conclusiones que ayuden a la toma de decisiones. Datos de Entrada: ventas de productos: Mes Producto A Producto B Producto C Producto D Enero 120 200 150 100 Febrero 130 180 160 110 Marzo 110 210 170 130 Abril 140 190 180 120 Mayo 150 220 190 140 Junio 160 230 200 150 Julio 170 ...
Leer más

SESIÓN 1: INTRODUCCIÓN A JAVASCRIPT

SESIÓN 1: INTRODUCCIÓN A JAVASCRIPT Grado: 9° Asignatura: Tecnología e Informática Duración: 2 horas Objetivo de la sesión Comprender la estructura básica de un programa en JavaScript y escribir los primeros scripts utilizando un lenguaje sencillo. Conceptos Claves JavaScript: lenguaje de programación utilizado para la web. Variables: permiten almacenar datos en un programa. Tipos de datos: números, cadenas de texto, booleanos. Comentarios: sirven para explicar el código sin que afecte su ejecución. Explicación Teórica 1. Qué es JavaScript JavaScript es un lenguaje de programación que se utiliza para dar interactividad a las páginas web. Aunque se usa en los navegadores, también permite realizar operaciones matemáticas, manipular datos y automatizar tareas. 2. Sintaxis Básica ejercicio1 <!DOCTYPE HTML> <html> <body>   <p>Antes del <br>   script...</p>   <script>     alert( '¡Hola, mundo!' );   </script> ...
Leer más

Ejemplo java script

 <!DOCTYPE html> <html lang="es"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Ingreso de Variables</title> </head> <body>     <h2>Ingresa tus datos</h2>     <label for="nombre">Nombre:</label>     <input type="text" id="nombre"><br><br>     <label for="edad">Edad:</label>     <input type="number" id="edad"><br><br>     <button onclick="mostrarDatos()">Enviar</button>     <p id="resultado"></p>     <script>         function mostrarDatos() {             let nombre = document.getElementById("nombre").value;             let edad = document.getElementById("edad").value; ...
Leer más