Añadimos ejercicio Lindo gatito

lotusbaba · Dec 5, 2015 · 0e5fdb1 · 0e5fdb1
1 parent 9485012
commit 0e5fdb1
Show file tree

Hide file tree

Showing 11 changed files with 439 additions and 0 deletions.
diff --git a/LindoGatito/css/estilos.css b/LindoGatito/css/estilos.css
@@ -0,0 +1,54 @@
+body {
+	background: url('../img/background.jpg') no-repeat fixed center;
+	background-size: cover;
+	font-family: Helvetica, Arial, sans-serif;;
+}
+
+#contenido {
+	background: rgba(255,255,255,0.8);
+	margin: 0 auto;
+	width: 65%;
+}
+
+#msgErr {
+	color: #B71C1C;
+	font-size: 18px;
+	padding-left: 4%;
+}
+
+h1 {
+	margin: 15px;
+	padding: 2%;
+	font-size: 30px;
+	text-align: center; 
+}
+
+input[type=button] {
+	background-color: #BDBDBD;
+	border-radius: 5px;
+	display: block;
+	font-size: 20px;
+	margin: 0 auto;
+	padding: 5px 12px;
+	width: 30%; 
+}
+
+input[type=button]:hover {
+	background-color: #9E9E9E; 
+}
+
+input[type=text], input[type=number], select {
+	border-radius: 5px;
+	font-size: 16px;
+	padding: 5px 12px; 
+}
+
+input[type=text]:hover, input[type=number]:hover, select:hover {
+	background-color: #E0E0E0; 
+}
+
+label {
+	display: inline-block;
+	font-size: 20px;
+	margin: 2% 2% 2% 4%;
+}
diff --git a/LindoGatito/css/estilos2.css b/LindoGatito/css/estilos2.css
@@ -0,0 +1,43 @@
+body {
+	background: url('../img/background.jpg') no-repeat fixed center;
+	background-size: cover;
+	font-family: Helvetica, Arial, sans-serif;;
+}
+
+#contenedor {
+	background: rgba(255,255,255,0.8);
+	margin: 0 auto;
+	width: 90%;
+}
+
+h1 {
+	margin: 10px;
+	padding: 2%;
+	font-size: 30px;
+	text-align: center; 
+}
+
+img {
+	display: block;
+	margin: 0 auto;
+	width: 340px;
+	height: 260px;
+}
+
+p {
+	font-size: 16px;
+	margin: 4%;
+	text-align: center;
+}
+
+#cajaBotones {
+	width: 70%;
+	margin: 0 auto;
+}
+
+button {
+	display: inline-block;
+	padding: 5px 12px;
+	font-size: 16px;
+	margin-bottom: 4%;	
+}
diff --git a/LindoGatito/img/background.jpg b/LindoGatito/img/background.jpg
diff --git a/LindoGatito/img/comer.jpg b/LindoGatito/img/comer.jpg
diff --git a/LindoGatito/img/dormir.jpg b/LindoGatito/img/dormir.jpg
diff --git a/LindoGatito/img/jugar.jpg b/LindoGatito/img/jugar.jpg
diff --git a/LindoGatito/img/muerto.jpg b/LindoGatito/img/muerto.jpg
diff --git a/LindoGatito/index.html b/LindoGatito/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Elisa Navarro Zuara | Lindo gatito</title>
+	<meta name="author" content="Elisa Navarro Zuara">
+	<link rel="stylesheet" type="text/css" href="css/estilos.css">
+	<script type="text/javascript" src="js/gato.js"></script>
+	<script type="text/javascript" src="js/principal.js"></script>
+</head>
+<body>
+	<noscript>
+		<p>La página que estás visualizando requiere para su correcto funcionamiento el uso de JavaScript. Si lo has deshabilitado, por favor activalo.</p>
+	</noscript>
+	<div id="contenido">
+		<h1>Compañía de adopción de gatitos</h1>
+		<strong><div id="msgErr"></div></strong>
+		<form>
+			<p><label>Nombre</label> <input type="text" id="nombre"></p>
+			<p><label>Día</label> <input type="number" id="dia">
+			   <label>Mes</label> 
+				<select id="mes" name="mes">
+					<option value="1">Enero</option>
+					<option value="2">Febrero</option>
+					<option value="3">Marzo</option>
+					<option value="4">Abril</option>
+					<option value="5">Mayo</option>
+					<option value="6">Junio</option>
+					<option value="7">Julio</option>
+					<option value="8">Agosto</option>
+					<option value="9">Septiembre</option>
+					<option value="10">Octubre</option>
+					<option value="11">Noviembre</option>
+					<option value="12">Diciembre</option>	
+				</select>
+			   <label>Año</label> <input type="number" id="anio"></p>
+			<p><label>Raza</label>
+				<select id="raza" name="raza">
+					<option value="Siamés" selected>Siamés</option>
+					<option value="Persa">Persa</option>
+					<option value="Abisinio">Abisinio</option>
+					<option value="Maine Coon">Maine Coon</option>
+					<option value="Bengala">Bengala</option>
+					<option value="Siberiano">Siberiano</option>
+					<option value="Angora turco">Angora turco</option>
+					<option value="Bombay">Bombay</option>
+				</select></p>
+			<p><label>Peso (kg)</label> <input type="number" id="peso"></p>
+			<p><input type="button" id="crearGato" value="Crear gato"></p>
+		</form>
+		<br />
+	</div>
+</body>
+</html>
diff --git a/LindoGatito/js/gato.js b/LindoGatito/js/gato.js
@@ -0,0 +1,127 @@
+/**
+Crea una clase Gato, y a partir de ella crea tantos gatos como quiera el usuario.
+Cada gato tendrá un nombre, una fecha de nacimiento, una raza y un peso (1-15). 
+Cada vez que crees un objeto gato aparecerá una ventana nueva con una imagen que 
+cambiará en función de su estado (comiendo, durmiendo y jugando, que es su estado habitual). 
+El usuario podrá averiguar la edad del gato partiendo de un evento.
+	1. Evita las cajas de texto.
+	2. No puedes usar ni alert ni prompt.
+	3. Hazlo lo más dinámico posible.
+	4. Utiliza prototype para los métodos.
+*/
+
+function Gato(nombre, dia, mes, anio, raza, peso) {
+
+	if (!comprobarFecha(dia, mes, anio))
+		throw new FechaInvalidaError("La fecha de nacimiento introducida no es válida.");
+
+	if (peso < 1 || peso > 15)
+		throw new PesoInvalidoError("El peso del gatito introducido no es válido.");
+
+	this.nombre = nombre;
+	this.fechaNacimiento = new Date(anio, mes-1, dia);
+	this.raza = raza;
+	this.peso = peso;
+	this.edad = this.calcularEdad();
+	this.estado = "Jugando";
+	this.aspecto = "img/jugar.jpg";
+	this.ventanaGato = window.open("", "_blank", "width=600,height=600");
+	this.ventanaGato.document.open();
+	this.ventanaGato.document.write('<!DOCTYPE html>'
+		+ '<html>'
+		+ '<head>'
+		+ '		<meta charset="UTF-8">'
+		+ '		<title>' + this.nombre + '</title>'
+		+ '		<link rel="stylesheet" type="text/css" href="css/estilos2.css">'
+		+ '		<script type="text/javascript" src="js/ventanaGato.js"></script>'
+		+ '		<script type="text/javascript" src="js/gato.js"></script>'
+		+ '</head>'
+		+ '<body>'
+		+ '		<div id="contenedor">'
+		+ '			<h1>' + this.nombre + '</h1>'
+		+ '			<div id="img"><img id="aspecto" src="' + this.aspecto + '" width="300" height="300"></div>'
+		+ '			<div id="contenido"><p>Hola, mi nombre es ' + this.nombre + ' y soy un gato '
+		+ 			this.raza + '.<br />Nací un ' + this.fechaNacimiento.toLocaleDateString('en-GB') + '.</p></div>'
+		+ '			<div id="peso"><p><strong>Peso: </strong>' + this.peso + 'kg.</p></div>'
+		+ '			<div id="edad"></div>'
+		+ '			<div id="estado"></div>'
+		+ '			<div id="cajaBotones"><button type="button" id="jugar">Jugar</button>'
+		+ '			<button type="button" id="comer">Comer</button>'
+		+ '			<button type="button" id="dormir">Dormir</button>'
+		+ '			<button type="button" id="mostrarEdad">Mostrar edad</button></div>'
+		+ '		</div>'
+		+ '</body>'
+		+ '</html>');
+	this.ventanaGato.document.close();
+}
+
+Gato.prototype.jugar = function() {
+	if (!this.comprobarPeso(this.peso-1))
+		throw new PesoInvalidoError("<p>El gatito no puede jugar más porque está muerto.</p>");
+	this.peso -= 1;
+	this.estado = "Jugando";
+	this.aspecto = "img/jugar.jpg";
+}
+
+Gato.prototype.comer = function() {
+	if (!this.comprobarPeso(this.peso+1))
+		throw new PesoInvalidoError("<p>El gatito no puede comer más porque está muerto.</p>");
+	this.peso += 1;
+	this.estado = "Comiendo";
+	this.aspecto = "img/comer.jpg";
+}
+
+Gato.prototype.dormir = function() {
+	this.estado = "Durmiendo";
+	this.aspecto = "img/dormir.jpg";
+}
+
+Gato.prototype.mostrarEdad = function() {
+	var msgEdad = '<p><strong>Edad: </strong>' + this.edad + ' años.</p>';
+	return msgEdad;
+}
+
+Gato.prototype.comprobarPeso = function(peso) {
+	if (peso < 1 || peso > 15) {
+		this.estado = "Muerto";
+		this.aspecto = "img/muerto.jpg";
+		return false;
+	}
+	return true;
+}
+
+function comprobarFecha(dia, mes, anio) {
+	var date;
+	mes = mes - 1;
+	date = new Date(anio, mes, dia);
+
+	if (date.getDate() == dia)
+		if (date.getMonth() == mes)
+			if (date.getFullYear() == anio)
+				return true;
+	return false;
+}
+
+Gato.prototype.calcularEdad = function() {
+	var date = new Date();
+	var edad = date.getFullYear() - this.fechaNacimiento.getFullYear();
+
+	if (date.getMonth() < this.fechaNacimiento.getMonth())
+		edad--;
+
+	if (date.getMonth() == this.fechaNacimiento.getMonth())
+		if (date.getDate() < this.fechaNacimiento.getDate())
+			edad--;
+
+	return edad;
+}
+
+function FechaInvalidaError(message) { 
+	this.name = "FechaInvalidaError";
+	this.message = message; 
+}
+
+function PesoInvalidoError(message) { 
+	this.name = "PesoInvalidoError";
+	this.message = message; 
+}
diff --git a/LindoGatito/js/principal.js b/LindoGatito/js/principal.js
@@ -0,0 +1,86 @@
+/**
+Crea una clase Gato, y a partir de ella crea tantos gatos como quiera el usuario.
+Cada gato tendrá un nombre, una fecha de nacimiento, una raza y un peso (1-15). 
+Cada vez que crees un objeto gato aparecerá una ventana nueva con una imagen que 
+cambiará en función de su estado (comiendo, durmiendo y jugando, que es su estado habitual). 
+El usuario podrá averiguar la edad del gato partiendo de un evento.
+	1. Evita las cajas de texto.
+	2. No puedes usar ni alert ni prompt.
+	3. Hazlo lo más dinámico posible.
+	4. Utiliza prototype para los métodos.
+*/
+
+var misGlobales = {
+	gato: undefined
+}
+
+function inicio() {
+	var nombre,
+		dia,
+		mes,
+		anio,
+		fechaNacimiento,
+		raza,
+		peso;
+	var msgErr = document.getElementById("msgErr");
+
+	function validarDatos() {
+		nombre = document.getElementById("nombre").value;
+		dia = parseInt(document.getElementById("dia").value);
+		mes = document.getElementById("mes");
+		for (var i = 0; i < mes.options.length; i++) {
+			if (mes.options[i].selected) {
+				mes = parseInt(mes.options[i].value);
+				break;
+			}
+		}
+		anio = parseInt(document.getElementById("anio").value);
+		fechaNacimiento = new Date(anio, mes-1, dia);
+		raza = document.getElementById("raza");
+		for (var i = 0; i < raza.options.length; i++) {
+			if (raza.options[i].selected) {
+				raza = raza.options[i].value;
+				break;
+			}
+		}
+		peso = parseInt(document.getElementById("peso").value);
+
+		if (nombre === "") {
+			msgErr.innerHTML = "El nombre está vacío.";
+			return false;
+		} else if (!isNaN(nombre)) {
+			msgErr.innerHTML = "Su gato debería tener alguna letra en el nombre...";
+			return false;
+		} else if (isNaN(dia) || dia < 1 || dia > 31) {
+			msgErr.innerHTML = "El día de nacimiento introducido no es válido.";
+			return false;
+		} else if (isNaN(anio) || anio < 1900 || anio > new Date().getFullYear()) {
+			msgErr.innerHTML = "El año de nacimiento introducido no es válido.";
+			return false;
+		} else if (fechaNacimiento >= new Date()) {
+			msgErr.innerHTML = "La fecha de nacimiento introducida no es válida.";
+			return false;
+		} else if (isNaN(peso)) {
+			msgErr.innerHTML = "El peso está vacío.";
+			return false;
+		}
+
+		msgErr.innerHTML = "";
+		return true;
+	}
+
+	function crearGato() {
+		if (validarDatos()) {
+			try {
+				misGlobales.gato = new Gato(nombre, dia, mes, anio, raza, peso);
+				msgErr.innerHTML = "";
+			} catch (e) {
+				msgErr.innerHTML = e.message;
+			}
+		}			
+	}
+
+	document.getElementById("crearGato").addEventListener("click", crearGato);
+}
+
+window.addEventListener("load", inicio);