Skip to content

J
js-e007
Commit 847bf4b2 by roshka
Options

1.0

parents
Showing with 557 additions and 0 deletions
Readme.md 0 → 100644
# Indicaciones
- El .js esta en la carpeta js, con el nombre de index.js
- El .css esta en la carpeta css, con el nombre de index.css
- Para ejecutar el .js, ejecutar el archivo index.html.
css/index.css 0 → 100644
.fotos_planetas{
width: 150px;
height: 150px;
padding: 5px;
}
#tituloIntroPlanetas{
text-align: center;
}
.botones{
margin: 5px;
padding: 5px;
}
.fotos_lunas{
width: 150px;
height: 150px;
padding: 5px;
}
\ No newline at end of file
index.html 0 → 100644
<!DOCTYPE html>
<html lang="es">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="./js/index.js"></script>
</head>
<body>
<div id="introduccion">
<h1>La Via Lactea: </h1>
<img src="fotos/via_lactea.jpg" alt="La via lactea" width="320" height="240"><br><br>
<ul id="datosViaLactea">
</ul><br><br>
<form>
<button type="button" class="botones" href="" onclick="mostrarPlanetas(1)">Mas informacion ...</button>
</form><br><br>
</div>
<div id="lista_planetas">
</div>
</body>
</html>
\ No newline at end of file
js/index.js 0 → 100644
/**
* Aqui es donde se colocan las clases para usar
*/
class Galaxias{
constructor(){
this.lista_galaxias = [];
}
agregarGalaxia(galaxia_id,nombre,tipo_galaxia){
let galaxia = new Object();
galaxia.galaxia_id = galaxia_id;
galaxia.nombre = nombre;
galaxia.tipo_galaxia = tipo_galaxia;
this.lista_galaxias.push(galaxia);
}
}
class Planetas{
constructor(){
this.lista_planetas = [];
}
agregarPlaneta(galaxia_id,planeta_id,nombre,fotos){
let planeta = new Object();
planeta.galaxia_id = galaxia_id;
planeta.planeta_id = planeta_id;
planeta.nombre = nombre;
planeta.fotos = fotos;
this.lista_planetas.push(planeta);
}
borrarPlaneta(nombre){
let posicion;
for(let i = 0;i<this.lista_planetas.length;i++){
if(this.lista_planetas[i].nombre.toLowerCase() == nombre.toLowerCase()){
posicion = i;
break;
}
}
this.lista_planetas.splice(posicion,1);
}
actualizarDatosPlaneta(nombre_buscar,galaxia_id,nombre,fotos){
for(let i = 0;i<this.lista_planetas.length;i++){
if(this.lista_planetas[i].nombre.toLowerCase() == nombre_buscar.toLowerCase()){
this.lista_planetas[i].galaxia_id = galaxia_id;
this.lista_planetas[i].nombre = nombre;
if(fotos[0] != ""){
this.lista_planetas[i].fotos = fotos;
}
break;
}
}
}
entregaFotosPlaneta(planeta_id){
for(let i = 0;i<this.lista_planetas.length;i++){
if(this.lista_planetas[i].planeta_id == planeta_id){
return this.lista_planetas[i].fotos;
}
}
return null;
}
entregaPlanetas(galaxia_id){
let lista = [];
for(let i = 0;i<this.lista_planetas.length;i++){
if(this.lista_planetas[i].galaxia_id == galaxia_id){
lista.push(this.lista_planetas[i]);
}
}
return lista;
}
cantidadPlanetas(){
return this.lista_planetas.length;
}
buscar_planeta(nombre){
for(let i=0;i<this.lista_planetas.length;i++){
if(this.lista_planetas[i].nombre.toLowerCase() == nombre.toLowerCase()){
return this.lista_planetas[i];
}
}
return null;
}
buscar_planeta_id(planeta_id){
for(let i=0;i<this.lista_planetas.length;i++){
if(this.lista_planetas[i].planeta_id == planeta_id){
return this.lista_planetas[i];
}
}
return null;
}
}
class Lunas{
constructor(){
this.lista_lunas = [];
}
agregarLunas(planeta_id,nombre,fotos){
let luna = {
planeta_id: planeta_id,
nombre: nombre,
fotos:fotos
}
this.lista_lunas.push(luna);
}
entregaLunasPlaneta(planeta_id){
let lista_lunas = [] ;
for(let i = 0;i<this.lista_lunas.length;i++){
if(this.lista_lunas[i].planeta_id == planeta_id){
lista_lunas.push(this.lista_lunas[i]);
}
}
return lista_lunas;
}
}
/**
* Aqui es donde vamos a usar las clases
*/
//Preparamos las listas para trabajar
let galaxias_lista = new Galaxias();
let planetas_lista = new Planetas();
let lunas_lista = new Lunas();
//Cargamos la galaxia "Via lactea" por defecto
galaxias_lista.agregarGalaxia(1,"Via Lactea","Espiral");
//Cargamos el planeta tierra por defecto
planetas_lista.agregarPlaneta(1,1,"Tierra",["./fotos/tierra01.jpeg","./fotos/tierra02.jpg"]);
lunas_lista.agregarLunas(1,"Luna",["./fotos/lunaTierra1.jpeg","./fotos/lunaTierra2.jpg"]);
/**
* Aqui es donde ejecutamos las funciones de los botones html
*/
function mostrarPlanetas(galaxia_id){
let mostrar = document.getElementById("lista_planetas");
//Mostramos el titulo
let tituloGeneral = document.createElement("H1");
tituloGeneral.setAttribute("id","tituloIntroPlanetas");
tituloGeneral.innerHTML = "Lista de los planetas";
mostrar.appendChild(tituloGeneral);
//Cargamos la lista de planetas de acuerdo a la galaxia
let lista = planetas_lista.entregaPlanetas(galaxia_id);
//Realizamos la carga de datos en el html
for(let i = 0;i<lista.length;i++){
//Creamos un div donde vamos a cargar todo la informacion del planeta
let div_planeta = document.createElement("div");
div_planeta.setAttribute("id","planeta"+i);
div_planeta.setAttribute("class","sector_planeta");
//Vamos a cargar los datos dentro del div
//Creamos el titulo
let tituloPlaneta = document.createElement("h3");
tituloPlaneta.innerHTML = "* "+lista[i].nombre;
div_planeta.appendChild(tituloPlaneta);
//Cargamos las fotos
//for(let j = 0;j<lista[i].fotos.length;j++){
// //Preparamos la imagen
// let foto_planeta = document.createElement("img");
// foto_planeta.setAttribute("src",""+lista[i].fotos[j]);
// foto_planeta.setAttribute("alt",""+lista[i].nombre);
// foto_planeta.setAttribute("class","fotos_planetas");
// foto_planeta.setAttribute("id","foto_"+lista[i].nombre+j);
// //Cargamos dentro del div
// div_planeta.appendChild(foto_planeta);
//}
//Cargamos el boton para acceder a la informacion
let boton_mas_informacion = document.createElement("input");
boton_mas_informacion.setAttribute("type","button");
boton_mas_informacion.setAttribute("class","botones");
boton_mas_informacion.setAttribute("value","Mas informacion");
boton_mas_informacion.setAttribute("onclick","masInformacionPlaneta("+lista[i].planeta_id+")");
div_planeta.appendChild(boton_mas_informacion);
mostrar.appendChild(div_planeta);
}
//Eliminamos el div de introduccion
if(document.getElementById("introduccion")!=null){
document.body.removeChild(document.getElementById("introduccion"));
}
//Realizamos el separado
mostrar.appendChild(document.createElement("br"));
mostrar.appendChild(document.createElement("br"));
mostrar.appendChild(document.createElement("br"));
//Cargamos los botones necesarios para realizar la carga y borrado de planetas
let opciones_operaciones = document.createElement("p");
opciones_operaciones.innerHTML = "Operaciones con la lista: "
mostrar.appendChild(opciones_operaciones);
mostrar.appendChild(boton_carga_planeta());
mostrar.appendChild(boton_eliminar_planeta());
mostrar.appendChild(boton_actualizar_planeta());
}
function masInformacionPlaneta(planeta_id){
console.log("Planeta_id: "+planeta_id);
let planeta = planetas_lista.buscar_planeta_id(planeta_id);
console.log(planeta);
if(planeta!=null){
//Borramos el div que contiene la lista de planetas
document.body.removeChild(document.getElementById("lista_planetas"));
let div_informacion_planeta = document.createElement("div");
div_informacion_planeta.setAttribute("id","interfaz_mas_informacion_planeta");
//Creamos un sector donde vamos a cargar los planetas
document.body.appendChild(div_informacion_planeta);
//Cargamos la informacion del planeta
//Creamos el titulo principal
let titulo = document.createElement("h1");
titulo.innerHTML = "Informacion del planeta "+planeta.nombre;
div_informacion_planeta.appendChild(titulo);
//Creamos el titulo de las fotos del planeta
let titulo2 = document.createElement("h2");
titulo2.innerHTML = "Fotos del planeta";
div_informacion_planeta.appendChild(titulo2);
//Cargamos sus fotos
for(let j = 0;j<planeta.fotos.length;j++){
//Preparamos la imagen
let foto_planeta = document.createElement("img");
foto_planeta.setAttribute("src",""+planeta.fotos[j]);
foto_planeta.setAttribute("alt",""+planeta.nombre);
foto_planeta.setAttribute("class","fotos_planetas");
foto_planeta.setAttribute("id","foto_"+planeta.nombre+j);
//Cargamos dentro del div
div_informacion_planeta.appendChild(foto_planeta);
}
//Cargamos el titulo para cargar las lunas
let titulo3 = document.createElement("h2");
titulo3.innerHTML = "Lunas";
div_informacion_planeta.appendChild(titulo3);
//Cargamos las listas de las lunas
let div_lunas = document.createElement("div");
div_lunas.setAttribute("id","sector_lunas");
div_informacion_planeta.appendChild(div_lunas);
//Vamos cargando las lunas
let lista_lunas = lunas_lista.entregaLunasPlaneta(planeta_id);
if(lista_lunas!=[]){
//Entregamos los datos de la luna
for(let i=0;i<lista_lunas.length;i++){
//Cargamos el nombre de la luna
let nombre_luna = document.createElement("h3");
nombre_luna.innerHTML = lista_lunas[i].nombre;
div_lunas.appendChild(nombre_luna);
//Cargamos sus fotos
for(let j = 0;j<lista_lunas[i].fotos.length;j++){
//Preparamos la imagen
let foto_luna = document.createElement("img");
foto_luna.setAttribute("src",""+lista_lunas[i].fotos[j]);
foto_luna.setAttribute("alt",""+lista_lunas[i].nombre);
foto_luna.setAttribute("class","fotos_lunas");
foto_luna.setAttribute("id","foto_"+lista_lunas[i].nombre+j);
//Cargamos dentro del div
div_lunas.appendChild(foto_luna);
}
}
}
//Creamos el boton para volver a la lista de planetas
div_informacion_planeta.appendChild(boton_volver_lista_planetas());
}
}
function boton_volver_lista_planetas(){
let btn_volver_planeta = document.createElement("input");
btn_volver_planeta.setAttribute("type","button");
btn_volver_planeta.setAttribute("class","botones");
btn_volver_planeta.setAttribute("value","Volver a la lista de planetas");
btn_volver_planeta.setAttribute("onclick","volverALista()");
return btn_volver_planeta;
}
function volverALista(){
let interfaz_informacion_planeta = document.getElementById("interfaz_mas_informacion_planeta");
document.body.removeChild(interfaz_informacion_planeta);
//Creamos la div para cargar la lista de planetas
let div_lista_planetas = document.createElement("div");
div_lista_planetas.setAttribute("id","lista_planetas");
document.body.appendChild(div_lista_planetas);
mostrarPlanetas(1);
}
function boton_actualizar_planeta(){
let btn_actualizar_planeta = document.createElement("input");
btn_actualizar_planeta.setAttribute("type","button");
btn_actualizar_planeta.setAttribute("class","botones");
btn_actualizar_planeta.setAttribute("value","Actualizar Planeta");
btn_actualizar_planeta.setAttribute("onclick","ActualizarPlaneta()");
return btn_actualizar_planeta;
}
function boton_carga_planeta(){
let btn_carga_planeta = document.createElement("input");
btn_carga_planeta.setAttribute("type","button");
btn_carga_planeta.setAttribute("class","botones");
btn_carga_planeta.setAttribute("value","Cargar Nuevo Planeta");
btn_carga_planeta.setAttribute("onclick","NuevoPlaneta()");
return btn_carga_planeta;
}
function boton_eliminar_planeta(){
let btn_eliminar_planeta = document.createElement("input");
btn_eliminar_planeta.setAttribute("type","button");
btn_eliminar_planeta.setAttribute("class","botones");
btn_eliminar_planeta.setAttribute("value","Eliminar Planeta");
btn_eliminar_planeta.setAttribute("onclick","EliminarPlaneta()");
return btn_eliminar_planeta;
}
function NuevoPlaneta(){
//Removemos los planetas
document.body.removeChild(document.getElementById("lista_planetas"));
let div_nuevo_planeta = document.createElement("div");
div_nuevo_planeta.setAttribute("id","interfaz_nuevo_planeta");
//Creamos un sector donde vamos a cargar los planetas
document.body.appendChild(div_nuevo_planeta);
let formulario_interfaz = document.createElement("form");
formulario_interfaz.setAttribute("class","formulario");
div_nuevo_planeta.appendChild(formulario_interfaz);
//Creamos los elementos de la interfaz
let titulo = document.createElement("h1");
titulo.innerHTML = "Ingrese nuevo planeta";
formulario_interfaz.appendChild(titulo);
//Pedido nombre planeta
let etiqueta = document.createElement("label");
etiqueta.setAttribute("for","nombre_planeta");
etiqueta.innerHTML = "Nombre del planeta:";
formulario_interfaz.appendChild(etiqueta);
let entrada = document.createElement("input");
entrada.setAttribute("id","nombre_planeta");
entrada.setAttribute("type","text");
entrada.setAttribute("name","nombre_planeta");
formulario_interfaz.appendChild(entrada);
formulario_interfaz.appendChild(document.createElement("br"));
formulario_interfaz.appendChild(document.createElement("br"));
//Pedido foto planeta
etiqueta = document.createElement("label");
etiqueta.setAttribute("for","direccion_foto");
etiqueta.innerHTML = "Ubicaciones fotos en el disco duro (separados por coma):";
formulario_interfaz.appendChild(etiqueta);
entrada = document.createElement("input");
entrada.setAttribute("id","direccion_foto");
entrada.setAttribute("type","text");
entrada.setAttribute("name","direccion_foto");
formulario_interfaz.appendChild(entrada);
formulario_interfaz.appendChild(document.createElement("br"));
formulario_interfaz.appendChild(document.createElement("br"));
//Creamos el boton para cargar el planeta
let boton_agregar = document.createElement("input");
boton_agregar.setAttribute("type","button");
boton_agregar.setAttribute("onclick","cargarPlanetaALista()");
boton_agregar.setAttribute("value","Agregar Planeta");
formulario_interfaz.appendChild(boton_agregar);
}
function cargarPlanetaALista(){
//Cargamos los datos
let nombre_planeta = document.getElementById("nombre_planeta").value;
let direccion_foto_planeta = document.getElementById("direccion_foto").value.split(",");
let cantidad = planetas_lista.cantidadPlanetas();
planetas_lista.agregarPlaneta(1,cantidad+1,nombre_planeta,direccion_foto_planeta);
//Eliminamos la interfaz de agregar
document.body.removeChild(document.getElementById("interfaz_nuevo_planeta"));
//Creamos la div para cargar la lista de planetas
let div_lista_planetas = document.createElement("div");
div_lista_planetas.setAttribute("id","lista_planetas");
document.body.appendChild(div_lista_planetas);
mostrarPlanetas(1);
}
function EliminarPlaneta(){
//Eliminamos la lista de planetas
document.body.removeChild(document.getElementById("lista_planetas"));
//Creamos el div donde vamos a cargar el formulario
let div_nuevo_planeta = document.createElement("div");
div_nuevo_planeta.setAttribute("id","interfaz_eliminar_planeta");
//Creamos un sector donde vamos a cargar los planetas
document.body.appendChild(div_nuevo_planeta);
let formulario_interfaz = document.createElement("form");
formulario_interfaz.setAttribute("class","formulario");
div_nuevo_planeta.appendChild(formulario_interfaz);
//Creamos los elementos de la interfaz
let titulo = document.createElement("h1");
titulo.innerHTML = "Ingrese el nombre del planeta para eliminar";
formulario_interfaz.appendChild(titulo);
//Pedido nombre planeta
let etiqueta = document.createElement("label");
etiqueta.setAttribute("for","nombre_planeta");
etiqueta.innerHTML = "Nombre del planeta:";
formulario_interfaz.appendChild(etiqueta);
let entrada = document.createElement("input");
entrada.setAttribute("id","nombre_planeta");
entrada.setAttribute("type","text");
entrada.setAttribute("name","nombre_planeta");
formulario_interfaz.appendChild(entrada);
formulario_interfaz.appendChild(document.createElement("br"));
formulario_interfaz.appendChild(document.createElement("br"));
//Creamos el boton para eliminar el planeta
let boton_agregar = document.createElement("input");
boton_agregar.setAttribute("type","button");
boton_agregar.setAttribute("onclick","eliminarPlanetaALista()");
boton_agregar.setAttribute("value","Eliminar Planeta");
formulario_interfaz.appendChild(boton_agregar);
}
function eliminarPlanetaALista(){
//Obtenemos el nombre del planeta
let nombre_planeta = document.getElementById("nombre_planeta").value;
//Eliminamos el planeta
planetas_lista.borrarPlaneta(nombre_planeta);
//Eliminamos la interfaz de agregar
document.body.removeChild(document.getElementById("interfaz_eliminar_planeta"));
//Creamos la div para cargar la lista de planetas
let div_lista_planetas = document.createElement("div");
div_lista_planetas.setAttribute("id","lista_planetas");
document.body.appendChild(div_lista_planetas);
mostrarPlanetas(1);
}
function ActualizarPlaneta(){
//Removemos los planetas
document.body.removeChild(document.getElementById("lista_planetas"));
let div_actualizar_planeta = document.createElement("div");
div_actualizar_planeta.setAttribute("id","interfaz_actualizar_planeta");
//Creamos un sector donde vamos a cargar los planetas
document.body.appendChild(div_actualizar_planeta);
let formulario_interfaz = document.createElement("form");
formulario_interfaz.setAttribute("class","formulario");
div_actualizar_planeta.appendChild(formulario_interfaz);
//Creamos los elementos de la interfaz
let titulo = document.createElement("h1");
titulo.innerHTML = "Ingrese los datos para actualizar el planeta";
formulario_interfaz.appendChild(titulo);
//Pedido nombre planeta a buscar
let etiqueta = document.createElement("label");
etiqueta.setAttribute("for","nombre_planeta_buscar");
etiqueta.innerHTML = "Nombre del planeta a modificar:";
formulario_interfaz.appendChild(etiqueta);
let entrada = document.createElement("input");
entrada.setAttribute("id","nombre_planeta_buscar");
entrada.setAttribute("type","text");
entrada.setAttribute("name","nombre_planeta_buscar");
formulario_interfaz.appendChild(entrada);
formulario_interfaz.appendChild(document.createElement("br"));
formulario_interfaz.appendChild(document.createElement("br"));
//Agregar nuevo nombre planeta
etiqueta = document.createElement("label");
etiqueta.setAttribute("for","nombre_planeta");
etiqueta.innerHTML = "Nuevo nombre del planeta:";
formulario_interfaz.appendChild(etiqueta);
entrada = document.createElement("input");
entrada.setAttribute("id","nombre_planeta");
entrada.setAttribute("type","text");
entrada.setAttribute("name","nombre_planeta");
formulario_interfaz.appendChild(entrada);
formulario_interfaz.appendChild(document.createElement("br"));
formulario_interfaz.appendChild(document.createElement("br"));
//Pedido foto planeta
etiqueta = document.createElement("label");
etiqueta.setAttribute("for","direccion_foto");
etiqueta.innerHTML = "Ubicacion foto en el disco duro:";
formulario_interfaz.appendChild(etiqueta);
entrada = document.createElement("input");
entrada.setAttribute("id","direccion_foto");
entrada.setAttribute("type","text");
entrada.setAttribute("name","direccion_foto");
formulario_interfaz.appendChild(entrada);
formulario_interfaz.appendChild(document.createElement("br"));
formulario_interfaz.appendChild(document.createElement("br"));
//Creamos el boton para cargar el planeta
let boton_agregar = document.createElement("input");
boton_agregar.setAttribute("type","button");
boton_agregar.setAttribute("onclick","ActualizarPlanetaALista()");
boton_agregar.setAttribute("value","Actualizar planeta");
formulario_interfaz.appendChild(boton_agregar);
}
function ActualizarPlanetaALista() {
//Obtenemos el nombre del planeta a buscar
let nombre_planeta_buscar = document.getElementById("nombre_planeta_buscar").value;
//Obtenemos el nuevo nombre
let nombre_planeta = document.getElementById("nombre_planeta").value;
//Obtenemos las fotos del nuevo planeta
let direccion_foto_planeta = document.getElementById("direccion_foto").value.split(",");
//modificamos los datos
console.log(direccion_foto_planeta);
planetas_lista.actualizarDatosPlaneta(nombre_planeta_buscar,1,nombre_planeta,direccion_foto_planeta);
//Eliminamos la interfaz de agregar
document.body.removeChild(document.getElementById("interfaz_actualizar_planeta"));
//Creamos la div para cargar la lista de planetas
let div_lista_planetas = document.createElement("div");
div_lista_planetas.setAttribute("id","lista_planetas");
document.body.appendChild(div_lista_planetas);
mostrarPlanetas(1);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment