Skip to content

Instantly share code, notes, and snippets.

@http-km

http-km/main.js

Last active June 24, 2018 15:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save http-km/d58faa883b338a8e63d1b5db83f94d98 to your computer and use it in GitHub Desktop.
Save http-km/d58faa883b338a8e63d1b5db83f94d98 to your computer and use it in GitHub Desktop.
Download ZIP
Codigo de HTML & JS.
Raw
main.js
(function() {
"use strict";
var regalo = document.getElementById('regalo');
document.addEventListener('DOMContentLoaded', function(){
// Datos Usuarios
var nombre = document.getElementById('nombre');
var apellido = document.getElementById('apellido');
var email = document.getElementById('email');
// Campos pases
var pase_dia = document.getElementById('pase_dia');
var pase_dosdias = document.getElementById('pase_dosdias');
var pase_completo = document.getElementById('pase_completo');
// Botones y divs
var calcular = document.getElementById('calcular');
var errorDiv = document.getElementById('error');
var botonRegistro = document.getElementById('btnRegistro');
var lista_productos = document.getElementById('lista-productos');
var suma = document.getElementById('suma-total');
// Extras
var camisas = document.getElementById('camisa_evento');
var etiquetas = document.getElementById('etiquetas');
calcular.addEventListener('click', calcularMontos);
pase_dia.addEventListener('blur', mostrarDias);
pase_dosdias.addEventListener('blur', mostrarDias);
pase_completo.addEventListener('blur', mostrarDias);
function calcularMontos(event){
event.preventDefault();
if(regalo.value === ''){
alert("Debes elegir un regalo.");
regalo.focus();
} else {
var boletosDia = parseInt(pase_dia.value, 10) || 0,
boletos2Dias = parseInt(pase_dosdias.value, 10) || 0,
boletoCompleto = parseInt(pase_completo.value, 10) || 0,
cantCamisas = parseInt(camisas.value, 10) || 0,
cantEtiquetas = parseInt(etiquetas.value, 10) || 0;
var totalPagar = (boletosDia * 30) + (boletos2Dias * 45) + (boletoCompleto * 50) +
((cantCamisas * 10) * .93) + (cantEtiquetas * 2);
var listadoProductos = [];
if(boletosDia >= 1){
listadoProductos.push(boletosDia + ' Pases por día');
}
if(boletos2Dias >= 1){
listadoProductos.push(boletos2Dias + ' Pases por 2 dias');
}
if(boletoCompleto >= 1){
listadoProductos.push(boletoCompleto + ' Pases completo');
}
if(cantCamisas >= 1){
listadoProductos.push(cantCamisas + ' Camisas');
}
if(cantEtiquetas >= 1){
listadoProductos.push(cantEtiquetas + ' Etiquetas');
}
lista_productos.style.display = "block";
lista_productos.innerHTML = '';
for (var i = 0; i< listadoProductos.length; i++){
lista_productos.innerHTML += listadoProductos[i] + '<br/>';
}
suma.innerHTML = "$ " + totalPagar.toFixed(2);
}
}
function mostrarDias(){
var boletosDia = parseInt(pase_dia.value, 10) || 0,
boletos2Dias = parseInt(pase_dosdias.value, 10) || 0,
boletoCompleto = parseInt(pase_completo.value, 10) || 0;
var diasElegidos = [];
if(boletosDia > 0){
diasElegidos.push('viernes');
}
if(boletos2Dias>0){
diasElegidos.push('viernes', 'sabado');
}
if(boletoCompleto>0){
diasElegidos.push('viernes', 'sabado', 'domingo');
}
for(var i = 0; i < diasElegidos.length; i++) {
document.getElementById(diasElegidos[i].style.display) = 'block';
}
}
}); // DOM CONTENT LOADED
})();
Raw
registro.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>GDLWEBCAMP</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald|PT+Sans" rel="stylesheet">
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header class="site-header">
<div class="hero">
<div class="contenido-header">
<nav class="redes-sociales">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-pinterest-p"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</nav>
<div class="informacion-evento">
<div class="clearfix">
<p class="fecha"><i class="fas fa-calendar-alt"></i>10-12 Dic</p>
<p class="ciudad"><i class="fas fa-map-marker-alt"></i>Guadalajara, Mx</p>
</div>
<h1 class="nombre-sitio">GDLWEBCAMP</h1>
<p class="slogan">La mejor conferencia de <span>diseño web</span></p>
</div><!--.informacion evento-->
</div>
</div><!--.hero-->
</header>
<div class="barra">
<div class="contenedor clearfix">
<div class="logo">
<img src="img/logo.svg" alt="logo gdlwebcamp">
</div>
<div class="menu-movil">
<span></span>
<span></span>
<span></span>
</div>
<nav class="navegacion-principal">
<a href="#">Conferencia</a>
<a href="#">Calendario</a>
<a href="#">Invitados</a>
<a href="registro.html">Reservaciones</a>
</nav>
</div> <!--.contenedor-->
</div> <!--.barra-->
<section class="seccion contenedor">
<h2>Registro de Usuarios</h2>
<form id="registro" class="registro" action="index.html" method="POST">
<div id="datos_usuarios" class="registro caja clearfix">
<div class="campo">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" placeholder="Tu nombre">
</div>
<div class="campo">
<label for="apellido">Apellido:</label>
<input type="text" name="apellido" id="apellido" placeholder="Tu apellido">
</div>
<div class="campo">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Tu email">
</div>
<div id="error"></div>
</div> <!--#datos_usuarios-->
<div id="paquetes" class="paquetes">
<h3>Elige el numero de boletos</h3>
<ul class="lista-precios clearfix">
<li>
<div class="tabla-precio">
<h3>Pase por dia (Viernes)</h3>
<p class="numero">$30</p>
<ul>
<li>Bocadillo gratis</li>
<li>Rodas las conferencias</li>
<li>Todos los talleres</li>
</ul>
<div class="orden">
<label for="pase_completo">Boletos deseados:</label>
<input type="number" min="0" id="pase_dia" size="3" placeholder="0">
</div>
</div>
</li>
<li>
<div class="tabla-precio">
<h3>Todos los dias</h3>
<p class="numero">$50</p>
<ul>
<li>Bocadillo gratis</li>
<li>Rodas las conferencias</li>
<li>Todos los talleres</li>
</ul>
<div class="orden">
<label for="pase_dia">Boletos deseados:</label>
<input type="number" min="0" id="pase_completo" size="3" placeholder="0">
</div>
</div>
</li>
<li>
<div class="tabla-precio">
<h3>Pase por 2 días (Viernes / Sabado)</h3>
<p class="numero">$45</p>
<ul>
<li>Bocadillo gratis</li>
<li>Rodas las conferencias</li>
<li>Todos los talleres</li>
</ul>
<div class="orden">
<label for="pase_dosdias">Boletos deseados:</label>
<input type="number" min="0" id="pase_dosdias" size="3" placeholder="0">
</div>
</div>
</li>
</ul>
</div> <!--#paquetes-->
<div id="eventos" class="eventos clearfix">
<h3>Elige tus talleres</h3>
<div class="caja">
<div id="viernes" class="contenido-dia clearfix">
<h4>Viernes</h4>
<div>
<p>Talleres:</p>
<label><input type="checkbox" name="registro[]" id="taller_01" value="taller_01"><time>10:00</time> Responsive Web Design</label>
<label><input type="checkbox" name="registro[]" id="taller_02" value="taller_02"><time>12:00</time> Flexbox</label>
<label><input type="checkbox" name="registro[]" id="taller_03" value="taller_03"><time>14:00</time> HTML5 y CSS3</label>
<label><input type="checkbox" name="registro[]" id="taller_04" value="taller_04"><time>17:00</time> Drupal</label>
<label><input type="checkbox" name="registro[]" id="taller_05" value="taller_05"><time>19:00</time> WordPress</label>
</div>
<div>
<p>Conferencias:</p>
<label><input type="checkbox" name="registro[]" id="conf_01" value="conf_01"><time>10:00</time> Como ser Freelancer</label>
<label><input type="checkbox" name="registro[]" id="conf_02" value="conf_02"><time>17:00</time> Tecnologías del Futuro</label>
<label><input type="checkbox" name="registro[]" id="conf_03" value="conf_03"><time>19:00</time> Seguridad en la Web</label>
</div>
<div>
<p>Seminarios:</p>
<label><input type="checkbox" name="registro[]" id="sem_01" value="sem_01"><time>10:00</time> Diseño UI y UX para móviles</label>
</div>
</div> <!--#viernes-->
<div id="sabado" class="contenido-dia clearfix">
<h4>Sábado</h4>
<div>
<p>Talleres:</p>
<label><input type="checkbox" name="registro[]" id="taller_06" value="taller_06"><time>10:00</time> AngularJS</label>
<label><input type="checkbox" name="registro[]" id="taller_07" value="taller_07"><time>12:00</time> PHP y MySQL</label>
<label><input type="checkbox" name="registro[]" id="taller_08" value="taller_08"><time>14:00</time> JavaScript Avanzado</label>
<label><input type="checkbox" name="registro[]" id="taller_09" value="taller_09"><time>17:00</time> SEO en Google</label>
<label><input type="checkbox" name="registro[]" id="taller_10" value="taller_10"><time>19:00</time> De Photoshop a HTML5 y CSS3</label>
<label><input type="checkbox" name="registro[]" id="taller_11" value="taller_11"><time>21:00</time> PHP Medio y Avanzado</label>
</div>
<div>
<p>Conferencias:</p>
<label><input type="checkbox" name="registro[]" id="conf_04" value="conf_04"><time>10:00</time> Como crear una tienda online que venda millones en pocos días</label>
<label><input type="checkbox" name="registro[]" id="conf_05" value="conf_05"><time>17:00</time> Los mejores lugares para encontrar trabajo</label>
<label><input type="checkbox" name="registro[]" id="conf_06" value="conf_06"><time>19:00</time> Pasos para crear un negocio rentable</label>
</div>
<div>
<p>Seminarios:</p>
<label><input type="checkbox" name="registro[]" id="sem_02" value="sem_02"><time>10:00</time> Aprende a Programar en una mañana</label>
<label><input type="checkbox" name="registro[]" id="sem_03" value="sem_03"><time>17:00</time> Diseño UI y UX para móviles</label>
</div>
</div> <!--#sabado-->
<div id="domingo" class="contenido-dia clearfix">
<h4>Domingo</h4>
<div>
<p>Talleres:</p>
<label><input type="checkbox" name="registro[]" id="taller_12" value="taller_12"><time>10:00</time> Laravel</label>
<label><input type="checkbox" name="registro[]" id="taller_13" value="taller_13"><time>12:00</time> Crea tu propia API</label>
<label><input type="checkbox" name="registro[]" id="taller_14" value="taller_14"><time>14:00</time> JavaScript y jQuery</label>
<label><input type="checkbox" name="registro[]" id="taller_15" value="taller_15"><time>17:00</time> Creando Plantillas para WordPress</label>
<label><input type="checkbox" name="registro[]" id="taller_16" value="taller_16"><time>19:00</time> Tiendas Virtuales en Magento</label>
</div>
<div>
<p>Conferencias:</p>
<label><input type="checkbox" name="registro[]" id="conf_07" value="conf_07"><time>10:00</time> Como hacer Marketing en línea</label>
<label><input type="checkbox" name="registro[]" id="conf_08" value="conf_08"><time>17:00</time> ¿Con que lenguaje debo empezar?</label>
<label><input type="checkbox" name="registro[]" id="conf_09" value="conf_09"><time>19:00</time> Frameworks y librerias Open Source</label>
</div>
<div>
<p>Seminarios:</p>
<label><input type="checkbox" name="registro[]" id="sem_04" value="sem_04"><time>14:00</time> Creando una App en Android en una tarde</label>
<label><input type="checkbox" name="registro[]" id="sem_05" value="sem_05"><time>17:00</time> Creando una App en iOS en una tarde</label>
</div>
</div> <!--#domingo-->
</div><!--.caja-->
</div> <!--#eventos-->
<div id="resumen" class="resumen">
<h3>Pagos y Extras</h3>
<div class="caja clearfix">
<div class="extras">
<div class="orden">
<label for= "camisa_evento">Camisa del evento $10 <small>(Promocion 7% dto.</small></label>
<input type="number" min="0" id="camisa_evento" size="3" placeholder="0">
</div> <!--Orden-->
<div class="orden">
<label for="etiquetas">Paquete de 10 etiquetas $2<small>(HTML5, CSS3, JavaScript, Chrome)</small></label>
<input type="number" min="0" id="etiquetas" size="3" placeholder="0">
</div> <!--Orden-->
<div class="orden">
<label for="regalo">Seleccione un regalo</label>
<select id="regalo" required>
<option value="">-- Seleccione un regalo--</option>
<option value="ETI">Etiquetas</option>
<option value="PUL">Pulsera</option>
<option value="PLU">PLuma</option>
</select>
</div> <!--.orden-->
<input type="button" id="calcular" class="button" value="Calcular">
</div> <!--Extras-->
<div class="total">
<p>Resumen:</p>
<div id="lista-productos">
</div>
<p>Total:</p>
<div id="suma-total">
</div>
<input id="btnRegistro" type="submit" class="button" value="Pagar">
</div> <!--.total-->
</div> <!--.caja-->
</div> <!--#resumen-->
</form>
</section>
<footer class="site-footer">
<div class="contenedor clearfix">
<div class="footer-informacion">
<h3>Sobre <span>GDLWEBCAMP</span></h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse ducimus quam ea hic illum ab atque molestiae officia nobis earum. Iusto minus nam quia eveniet, nostrum recusandae assumenda ab. Eaque?</p>
</div>
<div class="ultimos-tweets">
<h3>Ultimos <span>tweets</span></h3>
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus fugit dolore alias rerum deleniti inventore sint.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus fugit dolore alias rerum deleniti inventore sint.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus fugit dolore alias rerum deleniti inventore sint.</li>
</ul>
</div>
<div class="menu">
<h3>Redes <span>sociales</span></h3>
<nav class="redes-sociales">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-pinterest-p"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</nav>
</div>
</div>
<p class="copyright">Todos los derechos Reservados GDLWEBCAMP2 2016.</p>
</footer>
<script src="js/vendor/modernizr-3.6.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment