Buen día,
Necesito ayuda para desarrollar una pequeña aplicación con JavaScript que me permita tener un formulario para que un usuario ingrese dos oraciones y éstas se guarden en dos variables, para que posteriormente con la selección del usuario en la opción de tipos de ejemplos, el sistema pueda desplegar una serie de operaciones de lógica matemática.
Ejemplo:
Frase 1: Está lloviendo
Frase 2: Hace frío
Resultado al dar opción de ejemplos básicos:
- La negación de la frase 1 es: blabla
- La negación de la frase 2 es: blabla
- La conunción de ambas frases es: blabla
Código HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Proyecto Matemáticas Discretas</title>
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div class="contenedor">
<form action="" class="formulario" id="formulario" name="formulario" method="POST">
<div class="contenedor-inputs">
<input type="text" name="frase1" id="frase1" placeholder="Oración P">
<input type="text" name="frase2" id="frase2" placeholder="Oración Q">
<div class="eleccion">
<input type="radio" id="opcion">
<label class="label-radio opcion">Hacer ejemplos avanzados (1)</label>
<input type="radio" id="opcion2">
<label class="label-radio opcion2">Mostrar ejemplos básicos (2)</label>
</div>
<input type="number" name="eleccion" id="eleccion" placeholder="Inserta tu opción">
<ul class="error" id="error"></ul>
</div>
<input type="submit" class="btn" value="Mostrar resultados">
</form>
</div>
<script src="formulario.js"></script>
<script src="resultado.js"></script>
</body>
</html>
Código JavaScript
//First Activity
var formulario = document.getElementById('formulario'),
frase1 = formulario.frase1,
frase2 = formulario.frase2,
eleccion = formulario.eleccion,
error = document.getElementById('error');
function validarFrase1(e){
if(frase1.value == '' || frase1.value == null){
console.log('Por favor completa la primer frase');
error.style.display = 'block';
error.innerHTML += '<li>Por favor completa la primer frase</li>';
e.preventDefault();
} else {
error.style.display = 'none';
}
}
function validarFrase2(e){
if(frase2.value == '' || frase2.value == null){
console.log('Por favor completa la segunda frase');
error.style.display = 'block';
error.innerHTML += '<li>Por favor completa la segunda frase</li>';
e.preventDefault();
} else {
error.style.display = 'none';
}
}
function validarEleccion(e){
if(eleccion.value == '' || eleccion.value == null){
console.log('Por favor elige una opción');
error.style.display = 'block';
error.innerHTML += '<li>Por favor elige una opción</li>';
e.preventDefault();
} else {
error.style.display = 'none';
}
}
function validarFormulario(e){
error.innerHTML = '';
validarEleccion(e);
validarFrase1(e);
validarFrase2(e);
}
formulario.addEventListener('submit', validarFormulario);
Código JavaScript2
//First Activity
function despliegaOpcion(){
var oracion1 = document.getElementById('frase1'),
var oracion2 = document.getElementById('frase2'),
var opcion = parseInt(document.getElementById('eleccion').value),
document.write(oracion2+oracion1);
}
Código CSS
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #f2f2f2;
font-family: 'Slabo 27px', serif;
font-size: 18px;
}
/* First Activity */
.contenedor {
width: 400px;
margin: 40px;
}
.formulario .contenedor-inputs {
padding: 20px;
background: #fff;
border-radius: 6px 6px 0 0;
}
.formulario input[type="text"],
.formulario input[type="number"] {
display: block;
width: 100%;
margin-bottom: 20px;
padding: 15px 10px;
border:none;
border-bottom: 2px solid #ccc;
font-family: 'Slabo 27px', serif;
font-size: 18px;
}
.formulario input[type="text"]:focus,
.formulario input[type="number"]:focus {
border-bottom: 2px solid #246eb9;
}
.formulario input[type="radio"]{
display: none;
}
.formulario .eleccion {
display: flex;
flex-wrap:no-wrap;
justify-content:space-between;
margin-bottom: 20px;
}
.formulario .eleccion .opcion {
border-radius: 3px 0 0 3px;
background-color: #f9a03f;
}
.formulario .eleccion .opcion2 {
border-radius: 0 3px 3px 0;
background-color: #f9a03f;
}
.formulario .label-radio {
background: rgba(249,160,63,.4);
color: #fff;
padding: 10px;
text-align: center;
width: 49.5%;
}
.formulario .error {
display: none;
margin-top: 20px;
border-radius: 3px;
background: #ce1818;
color: #fff;
padding: 15px 10px;
padding-left:40px;
}
.formulario .btn {
width: 100%;
text-align: center;
background: #246eb9;
color: #fff;
border:none;
display: block;
padding: 15px 10px;
cursor: pointer;
border-radius: 0 0 6px 6px;
font-family: 'Slabo 27px', serif;
font-size: 18px;
}
.formulario .btn:hover {
background: #4357ad;
}
Tema: Aplicación JavaScript que pida frases a usuario y cree negación y conjunción (Leído 2145 veces)
RSS -
WAP2