Aplicación Web calculadora de la edad | La integración de la función JavaScript en la forma

Aquí, vamos a aprender más sobre el código JavaScript mediante un ejemplo que es una aplicación web edad calculadora .

Hola! En este artículo, vamos a ver una aplicación de funciones de JavaScript con formas para construir una pequeña aplicación web que calcula la edad de un usuario .

A veces, los principiantes siempre les resulta difícil conseguir la aplicación de la teoría que aprenden en la programación o un idioma determinado.

Me ha ocurrido sobre todo cuando acabo de empezar con JavaScript.

artículos como este son importantes para ayudarnos a ver la aplicación de lo aprendido.

vamos a construir una aplicación web que calcula la edad de un usuario y la salida es el resultado como una alerta.

La aplicación web va a exigir a los usuarios class año de nacimiento, nombre y mes.

Abra un editor de texto y escriba el código de abajo.

Guarde el archivo con el nombre edad cal.html

Código:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function Click1() { // function
var Month = prompt('what is your month of birth?:'); // ask for user's month of birth
var User = prompt('Whats your year of birth:'); // ask for user's month of birth'
confirm(b + '__your age is:__' + (2018 - User));
}
</script>
<script type="text/javascript">
function validation() // calculation function
{
var Name = document.getElementById('name').value;
var Age = document.getElementById('age').value;
alert((2019 - Age) + '_Years Old');
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Good coders code, great coders reuse.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style-index.css">
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="logo">
<a href="https://go237.com"><img src="images/logo.png" alt="comic.browserling.com logo" title="Tools For All"></a>
</div>
<div id="logo-text">
</div>
</div>
<div id="body">
<h1>Coders</h1>
<div id="text">
Good coders code, great coders reuse.
</div>
<hr>
<form>
<input type="text" id="name" required placeholder='Name' />
<br>
<br>
<input type="number" id="age" required placeholder='Year Of Birth' />
<br>
<br>
<input type="text" id="color" required placeholder='Month' />
<br>
<br/>
<br/>
<img id='pic' src="1.gif" width: '30%'>
<br>
<br>
<button onclick='validation();' /> Calculate!</button>
</form>
<hr>
</body>
</html>

En este proyecto, utilicé mis propios estilos CSS. Usted puede sentirse libre de utilizar cualquier que desee.

abrir el archivo HTML y poner a prueba su aplicación web.

Tómese su tiempo y estudiar la sintaxis adecuada. Se dará cuenta de que he usado 2 funciones.

Una llamada click1 () y la segunda llamada validación () .

La validación () función es la función for que realiza el cálculo.

Salida de la imagen:

Age calculator Web Application | Integrating JavaScript function with form - 4

Gracias class de codificación conmigo. Tus comentarios son mas que bienvenidos.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *