Skip to content

Commit

Permalink
DOM_BOM
Browse files Browse the repository at this point in the history
  • Loading branch information
@fmigliorini
fmigliorini committed Jan 2, 2017
1 parent 757099b commit 69b61f9
Show file tree
Hide file tree
Showing 38 changed files with 1,105 additions and 0 deletions.
Binary file added DOM_BOM/DOMyBOM_ProyectoFinal_Facundo_Migliorini.zip
View file
Binary file not shown.
70 changes: 70 additions & 0 deletions DOM_BOM/DOMyBOM_ProyectoFinal_Facundo_Migliorini/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 1,70 @@
html,body{
height:100%;
}

.titulo{
text-align:center;
}
.form{
min-height:120px;
width:100%;
background-color:grey;
padding: 10px;
margin:0;
}

.form-control{
width:100%;
height:40px;
}
.form-control label{
display:block;
width:80px;
float:left;
text-align:right;
margin-right:10px;
}

.form-control input{
float:left;
}

.contenedor{
width:100%;
overflow:auto;
background-color:grey;
text-align:center;
font-family: arial;
min-height:500px;
}
.columna{
width:25%;
height:100%;
float:left;
}
.btn{
width:300px;
height:50px;
background-color:blue;
color:white;
border:0;
font-weight:bold;
}
p{
text-align:left;
padding-left:15px;
}

.contTabla{
margin: 8% 5% 0 5%;
}
.table{
width:100%;
}
.table, th, td{
border:2px solid black;
}

.table td,th{
min-width: 300px;
}
61 changes: 61 additions & 0 deletions DOM_BOM/DOMyBOM_ProyectoFinal_Facundo_Migliorini/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 1,61 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="titulo"> Examen DOM y el BOM</h1>
<form class="form">
<h2>Formulario Estudiante</h2>
<div class="form-control">
<label>Código: </label>
<input type="text" id="codigo" placeholder="Código">
</div>
<div class="form-control">
<label>Nombre: </label>
<input type="text" id="nombre" placeholder="Nombre">
</div>
<div class="form-control">
<label>Nota: </label>
<input type="text" id="nota" placeholder="nota">
</div>
</form>
<div class="contenedor">
<div class="columna">
<button class="btn" id="registrarEstudiante">Registrar Estudiante</button>
</div>
<div class="columna">
<button class="btn" id="calcularPromedio">Calcular la nota promedio</button>
<!-- LA INFO SE MOSTRARA EN ALERTS <p id="promedio"></p> -->
</div>
<div class="columna">
<button class="btn" id="notaMayor">Estudiante con mayor nota</button>
<!-- LA INFO SE MOSTRARA EN ALERTS <p id="mayor"></p> -->
</div>
<div class="columna">
<button class="btn" id="notaMenor">Estudiante con menor nota</button>
<!-- LA INFO SE MOSTRARA EN ALERTS <p id="menor"></p> -->
</div>
<div class="contTabla">
<table class="table">
<thead>
<tr>
<th>Código</th>
<th>Nombre</th>
<th>Nota</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</div>

<!--
El script lo cargo al final del archivo para que la carga de la web sea mas dinamica
-->
<script type="text/javascript" src="js/function.js"></script>
</body>
</html>
119 changes: 119 additions & 0 deletions DOM_BOM/DOMyBOM_ProyectoFinal_Facundo_Migliorini/js/function.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 1,119 @@
var estudiantes = new Array();

//Esta función se encarga de mostrar todos los datos del JSON.
document.getElementById("registrarEstudiante").addEventListener('click',function(){
var codigo = document.getElementById("codigo").value;
var nombre = document.getElementById("nombre").value;
var nota = document.getElementById("nota").value;

if(!validarCodigoExistente(codigo)){
alert("Codigo Existente o Invalido");
return false;
}

if(!validarNombre(nombre)){
alert("Nombre Invalido");
return false;
}

if(!validarNota(nota)){
alert("Nota Invalida");
return false;
}


siguienteEstudiante = estudiantes.length;

estudiantes[siguienteEstudiante]={'codigo':codigo,'nombre':nombre,'nota': parseInt(nota)};

//Cargo los estudiantes en la tabla.
var info = "";
for(i=0;i<estudiantes.length;i ){
//Armo la tabla en cada iteración.
info = "<tr>"
"<td>" estudiantes[i].codigo "</td>"
"<td>" estudiantes[i].nombre "</td>"
"<td>" estudiantes[i].nota "</td>"
"</tr>";
}

document.getElementById("tbody").innerHTML = info;

return false;
});

// Valido que el codigo no exista en el array.
function validarCodigoExistente(codigo){
if(isNaN(codigo)){
return false;
}
for(i=0;i<estudiantes.length;i ){
if(estudiantes[i].codigo == codigo){
return false;
}
}
return true;
}

// Valido que el nombre sea valido
function validarNombre(){
if(!isNaN(nombre)){
return false;
}
if(nombre == ""){
return false;
}
return true;
}

// Valido que la nota sea valida
function validarNota(nota){
if(isNaN(nota)){
return false;
}
return true;
}

//Esta función se encarga de calcular el promedio entre todos los estudiantes.

document.getElementById("calcularPromedio").addEventListener('click',function(){
var promedio;
var totalNotas=0;
for(i=0;i<estudiantes.length;i ){
totalNotas =estudiantes[i].nota;
}
promedio=totalNotas/estudiantes.length;
alert("La nota promedio es: " promedio);
});

//Esta función se encarga de mostrar la nota mayor.
document.getElementById("notaMayor").addEventListener('click',function(){
var nombreNotaMayor = ""
var notaMayor = 0;
for(i=0;i<estudiantes.length;i ){
if(estudiantes[i].nota>notaMayor){
nombreNotaMayor=estudiantes[i].nombre;
notaMayor=estudiantes[i].nota;
}
}
alert("El estudiante con la mayor nota es: " nombreNotaMayor " y su nota es: " notaMayor);
});

//Esta función se encarga de mostrar la nota menor.
document.getElementById("notaMenor").addEventListener('click',function(){
var nombreNotaMenor = "";
var notaExist = false;
for(i=0;i<estudiantes.length;i ){
//Valido si existe la nota, si no existe la cargo, sino la comparo con la existente.
if(!notaExist){
nombreNotaMenor = estudiantes[i].nombre;
notaMenor = estudiantes[i].nota;
notaExist = true;
}else if(estudiantes[i].nota < notaMenor){
nombreNotaMenor = estudiantes[i].nombre;
notaMenor = estudiantes[i].nota;
}
}
alert("El estudiante con la menor nota es: " nombreNotaMenor " y su nota es: " notaMenor);
});

16 changes: 16 additions & 0 deletions DOM_BOM/UNIDAD_1_método_documento_elementos/Lección 2 Elementos en el DOM/actividad1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 1,16 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="www.google.com.ar">Google</a>
<a href="www.facebook.com">Facebook</a>
<a href="www.twitter.com">Twitter</a>
<a href="www.youtube.com">Youtube</a>
</body>
<script>
var a = document.getElementsByTagName("a");
alert(a.length);
</script>
</html>
20 changes: 20 additions & 0 deletions DOM_BOM/UNIDAD_1_método_documento_elementos/Lección 2 Elementos en el DOM/actividad2.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 1,20 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p id="p">P</p>
<label id="label">LABEL</label>
<input id="input" type="submit" value="INPUT">
</body>
<script>
var p = document.getElementById("p");
alert(p);
var label = document.getElementById("label");
alert(label);
var input = document.getElementById("input");
alert(input);
</script>
</html>

23 changes: 23 additions & 0 deletions DOM_BOM/UNIDAD_1_método_documento_elementos/Lección 2 Elementos en el DOM/actividad3.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 1,23 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<label id="">Nombre</label><input type="text" id=""/>
<label id="">Apellido</label><input type="text" id=""/>
<label id="">Email</label><input type="mail" id=""/>
<label id="">Comentario</label><textarea id=""></textarea>
</form>
</body>
<script>
var label = document.getElementsByTagName("label");
alert(label.length);
var input = document.getElementsByTagName("input");
alert(input.length);
var textarea = document.getElementsByTagName("textarea");
alert(textarea.length);
</script>
</html>

80 changes: 80 additions & 0 deletions DOM_BOM/UNIDAD_1_método_documento_elementos/Lección 2 Elementos en el DOM/actividad4.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 1,80 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<table border="1">
<tr>
<td>Producto</td>
<td>Precio</td>
<td>Cantidad</td>
<td>Subtotal</td>
</tr>
<tr>
<td>Camisa</td>
<td><input type="text" id="precioCamisa" value="30000" disabled></td>
<td><input type="text" id="cantidadCamisa" value=""></td>
<td id="subTotalCamisa"></td>
</tr>
<tr>
<td>Gorra</td>
<td><input type="text" id="precioGorra" value="50000" disabled></td>
<td><input type="text" id="cantidadGorra" value=""></td>
<td id="subTotalGorra"></td>
</tr>
<tr>
<td>Zapatos</td>
<td><input type="text" id="precioZapatos" value="60000" disabled></td>
<td><input type="text" id="cantidadZapatos" value=""></td>
<td id="subTotalZapatos"></td>
</tr>
<tr>
<td>Pantalón</td>
<td><input type="text" id="precioPantalon" value="80000" disabled></td>
<td><input type="text" id="cantidadPantalon" value=""></td>
<td id="subTotalPantalon"></td>
</tr>
<p>Compra total <input type="text" id="totalCompra"></p>
<button onclick="subTotal();">Calcular Sub Total</button>
<button onclick="calcularTotal();">Calcular Total</button>
</table>

<script>


function subTotal(){
valorCamisa = calcularSubTotal("Camisa");
mostrarSubTotal("Camisa",valorCamisa);
valorGorra = calcularSubTotal("Gorra");
mostrarSubTotal("Gorra",valorGorra);
valorZapatos = calcularSubTotal("Zapatos");
mostrarSubTotal("Zapatos",valorZapatos);
valorPantalon = calcularSubTotal("Pantalon");
mostrarSubTotal("Pantalon",valorPantalon);
}

function calcularSubTotal(obj){
var precio = document.getElementById("precio" obj).value;
var cantidad = document.getElementById("cantidad" obj).value;
return precio*cantidad;
}

function mostrarSubTotal(obj,precio){
document.getElementById("subTotal" obj).innerHTML = precio;
}

function calcularTotal(){
valorCamisa = calcularSubTotal("Camisa");
valorGorrra = calcularSubTotal("Gorra");
valorZapatos = calcularSubTotal("Zapatos");
valorPantalon = calcularSubTotal("Pantalon");
total = valorCamisa valorGorrra valorZapatos valorPantalon;
document.getElementById('totalCompra').value=total;

}

</script>
</body>
</html>
Loading

0 comments on commit 69b61f9

Please sign in to comment.