AYUDAA
Publicado por becky (1 intervención) el 31/10/2022 01:04:46
Hola, tengo la siguiente tarea:
Se le pide crear un programa usando código JavaScript que permita cargar los datos de discos de una colección e ir mostrando un listado de estos.
Cada alumno debe comenzar con el contenido de este repositorio:
index.html: contiene la estructura básica del parcial, incluidos los botones que ya están llamando a las funciones necesarias para la acción del código. Se puede modificar libremente.
styles.css: contiene los estilos para darle un mínimo de "diseño" al parcial. Se puede modificar libremente.
index.js: contiene algunas líneas de código para tomar como base para el desarrollo, entre las que se encuentran:
Las funciones Cargar y Mostrar, que serán explicadas a continuación.
Un array discos.
Un modelo de la estructura del objeto disco para tomar como referencia, por tal motivo están comentados.
Puede comenzar con un código desde cero, no es obligatorio partir de la referencia.
favicon.ico: un favicon para mostrar en el navegador. Se puede cambiar libremente.
Al hacer clic en el botón "Cargar nuevo disco" se debe disparar la función Cargar que solicita al usuario la siguiente información de un disco:
Nombre del disco.
Autor o banda del disco.
Código numérico único del disco:
Si el usuario ingresa un código numérico que ya fue cargado, se deberá pedir otro código (hasta ingresar uno que no haya sido utilizado anteriormente).
Todas las pistas del disco, donde cada pista tiene un nombre y una duración:
La cantidad de pistas a ingresar NO debe ser fija.
No se debe preguntar cuántas pistas hay que cargar, el dato se desconoce.
Al finalizar la carga de una pista, se debe confirmar si se desea ingresar otra más.
Cuando el usuario decide dejar de cargar pistas, finaliza la acción de la función.
En todo caso debe validarse que los datos ingresados sean válidos:
El nombre del disco, autor/banda y nombre de la pista no pueden quedar vacíos.
El código numérico único del disco no puede ser menor a 1, ni mayor a 999.
La duración de cada pista debe estar entre 0 y 7200 (segundos) inclusive.
Al hacer clic en el botón "Mostrar discos", la función Mostrar debe mostrar cada disco con su nombre, autor/banda, código único y todas las pistas con sus respectivos datos: nombre y duración.
Hay que destacar visualmente con rojo las duraciones mayores a 180.
Usen al menos otras dos (2) funciones a lo largo de todo el proceso:
Deben recibir argumentos y/o devolver valores para que cuenten como funciones para sumar puntos.
Muestren un mensaje (con el método alert) ante cada error cometido (haciendo referencia a las validaciones).
Informen cada vez que se muestran los discos, cuántos se llevan cargados (contador).
Informen por cada disco:
La cantidad de pistas que tiene cada disco.
La duración total del disco.
El promedio de duración de cada disco.
La pista con mayor duración de cada disco.
Que destaquen la duración total más alta entre todos los discos.
Que se pueda mostrar la información de un disco específico mediante su código numérico.
Formateen toda la muestra de datos con código HTML + CSS.
el html:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Programación </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<h1>Programación</h1>
</header>
<main>
<h2>Mis discos</h2>
<button onclick="Cargar();">Cargar nuevo disco</button>
<button onclick="Mostrar();">Mostrar discos</button>
<div id="info"></div>
<script src="index.js"></script>
</main>
<footer>
<ul>
<li>Programación 1</li>
</ul>
</footer>
</body>
</html>
LO QUE HICE EN JAVASCRIPT que claramente no me funcionada nadaaaa, ayuda plis:
'use strict';
/*
*/
// Discos:
let coleccion = [];
// Cargar Datos //
const Cargar = () => {
let nombreDisco = pedirNombre();
let autor = pedirAutor();
let codigo = pedirCodigo();
let pistas = pedirPista();
console.log(pistas);
coleccion.push(
new Disco(
nombreDisco,
autor,
codigo,
pistas,
)
);
};
// Funciones //
function pedirNombre() {
let nombre;
do {
nombre = prompt(("Ingrese el nombre del disco"));
} while (!isNaN(nombre));
return nombre;
}
function pedirAutor() {
let autor;
do {
autor = prompt(("ingrese el Autor o Banda del disco"));
} while (!isNaN(autor))
return autor;
}
function esCodigoRepetido(codigoNuevo) {
for (let disco of coleccion) {
console.log(disco.getCodigo);
if (disco.getCodigo == codigoNuevo) {
console.log("Repetido");
return true;
}
}
console.log("correcto");
return false;
}
function pedirCodigo(msg) {
let codigo;
let repetido = false;
do {
repetido = false;
codigo = parseInt(prompt("Ingresa un codigo"));
console.log(codigo);
repetido = esCodigoRepetido(codigo);
} while (isNaN(codigo))
return codigo;
}
function pedirPista(msg) {
let pista;
do {
pista = prompt("Ingrese el nombre de la pista")
} while (!isNaN(pista));
return pista
}
function pedirDuracion(msg) {
let duracion;
do {
duracion = parseInt(prompr("Ingrese la duración de la pista"))
} while (!(duración > 0 && duración <=7200))
return duracion
}
function pedirPista(msg) {
let pistas = []
do {
let nombrePista = perdirNombrePista("Ingrese el nombre de la pista");
let duracionPista = pedirDuracion();
pista = new Pista(nombrePista, duracionPista);
//Objeto al array//
pistas.push(pista);
//pedir hasta cortar el bucle//
} while (confirm("¿Desea agregar otra pista?"));
return pistas;
}
//Clases //
class Disco {
#nombreDisco;
#autor;
#codigo;
#pistas;
constructor(NombreDisco, autor, codigo, pistas) {
this.#nombreDisco = nombreDisco;
this.#autor = autor;
this.#codigo = codigo;
this.#pistas = pistas;
}
get getNombredisco(){
return this.#nombreDisco;
}
get getAutor(){
return this.#autor;
}
get getCodigo(){
return this.#codigo;
}
get getPistas() {
return this.#pistas;
}
}
class Pista {
#pista;
#duracion;
constructor(pistas,duracion) {
this.#pista = pista;
this.#duracion = duracion;
}
get getPista() {
return this.#pista;
}
get getDuracion(){
return this.#duracion;
}
}
// Discos por código //
function Buscar(pedirCodigoBuscado) {
let codigoBuscado = parseInt(prompt("Ingrese el código del disco que quiere encontrar"))
Mostrar(coidgoBuscado);
}
// Mostrar información //
const Mostrar = (codigo = null) => {
console.log(codigo);
let htmlToInsert = "";
let diracionTotal = 0;
let duraciónMayor = false;
let salidaPistas = "";
let coleccionFiltrada = [];
}
// Mostrar Disco Buscado //
if (codigo != null){
for (let disco of coleccion) {
console.log(disco.gerCodigo);
if (disco.getCodigo == codigo) {
console.log("Mostrar disco buscado");
coleccionFiltrada.push(disco);
}
}
}
else
coleccionFiltrada = coleccion;
console.log(coleeccionFiltrada);
for (let disco of coleccionFiltrada){
salidaPistas="";
for (let pista of disco.getPistas){
duraciónTotal += pista.getDuracion;
if (pista.getDuracion >= 181)
{
duracionMayor = true;
}
salidaPistas += '<li>Nombre Pista:' + pista.getDuracion;
'</li><li> Duracion Pista: '
if (duracionMayor)
salidaPistas += '<b>' + pista.getDuracion;
else{
salidaPistas += pista.getDuracion;
}
salidaPistas += 'segundos </li>'
}
console.log(disco.getPistas.lenght);
console.log(duracionTotal + disco.getDuracion);
promedio=(duracionTotal / disco.getPistas.lenght);
htmlToInsert += '<ul> Discos <li> Nombre: ' + disco.getNombredisco + disco.getAutor + '</li> <li>Código:' + disco.getCodigo + disco.getPistas.lenght + 'pistas </li> '
{
document.getElementById('info').innerHTML = htmlToInsert
}
}
Se le pide crear un programa usando código JavaScript que permita cargar los datos de discos de una colección e ir mostrando un listado de estos.
Cada alumno debe comenzar con el contenido de este repositorio:
index.html: contiene la estructura básica del parcial, incluidos los botones que ya están llamando a las funciones necesarias para la acción del código. Se puede modificar libremente.
styles.css: contiene los estilos para darle un mínimo de "diseño" al parcial. Se puede modificar libremente.
index.js: contiene algunas líneas de código para tomar como base para el desarrollo, entre las que se encuentran:
Las funciones Cargar y Mostrar, que serán explicadas a continuación.
Un array discos.
Un modelo de la estructura del objeto disco para tomar como referencia, por tal motivo están comentados.
Puede comenzar con un código desde cero, no es obligatorio partir de la referencia.
favicon.ico: un favicon para mostrar en el navegador. Se puede cambiar libremente.
Al hacer clic en el botón "Cargar nuevo disco" se debe disparar la función Cargar que solicita al usuario la siguiente información de un disco:
Nombre del disco.
Autor o banda del disco.
Código numérico único del disco:
Si el usuario ingresa un código numérico que ya fue cargado, se deberá pedir otro código (hasta ingresar uno que no haya sido utilizado anteriormente).
Todas las pistas del disco, donde cada pista tiene un nombre y una duración:
La cantidad de pistas a ingresar NO debe ser fija.
No se debe preguntar cuántas pistas hay que cargar, el dato se desconoce.
Al finalizar la carga de una pista, se debe confirmar si se desea ingresar otra más.
Cuando el usuario decide dejar de cargar pistas, finaliza la acción de la función.
En todo caso debe validarse que los datos ingresados sean válidos:
El nombre del disco, autor/banda y nombre de la pista no pueden quedar vacíos.
El código numérico único del disco no puede ser menor a 1, ni mayor a 999.
La duración de cada pista debe estar entre 0 y 7200 (segundos) inclusive.
Al hacer clic en el botón "Mostrar discos", la función Mostrar debe mostrar cada disco con su nombre, autor/banda, código único y todas las pistas con sus respectivos datos: nombre y duración.
Hay que destacar visualmente con rojo las duraciones mayores a 180.
Usen al menos otras dos (2) funciones a lo largo de todo el proceso:
Deben recibir argumentos y/o devolver valores para que cuenten como funciones para sumar puntos.
Muestren un mensaje (con el método alert) ante cada error cometido (haciendo referencia a las validaciones).
Informen cada vez que se muestran los discos, cuántos se llevan cargados (contador).
Informen por cada disco:
La cantidad de pistas que tiene cada disco.
La duración total del disco.
El promedio de duración de cada disco.
La pista con mayor duración de cada disco.
Que destaquen la duración total más alta entre todos los discos.
Que se pueda mostrar la información de un disco específico mediante su código numérico.
Formateen toda la muestra de datos con código HTML + CSS.
el html:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Programación </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<h1>Programación</h1>
</header>
<main>
<h2>Mis discos</h2>
<button onclick="Cargar();">Cargar nuevo disco</button>
<button onclick="Mostrar();">Mostrar discos</button>
<div id="info"></div>
<script src="index.js"></script>
</main>
<footer>
<ul>
<li>Programación 1</li>
</ul>
</footer>
</body>
</html>
LO QUE HICE EN JAVASCRIPT que claramente no me funcionada nadaaaa, ayuda plis:
'use strict';
/*
*/
// Discos:
let coleccion = [];
// Cargar Datos //
const Cargar = () => {
let nombreDisco = pedirNombre();
let autor = pedirAutor();
let codigo = pedirCodigo();
let pistas = pedirPista();
console.log(pistas);
coleccion.push(
new Disco(
nombreDisco,
autor,
codigo,
pistas,
)
);
};
// Funciones //
function pedirNombre() {
let nombre;
do {
nombre = prompt(("Ingrese el nombre del disco"));
} while (!isNaN(nombre));
return nombre;
}
function pedirAutor() {
let autor;
do {
autor = prompt(("ingrese el Autor o Banda del disco"));
} while (!isNaN(autor))
return autor;
}
function esCodigoRepetido(codigoNuevo) {
for (let disco of coleccion) {
console.log(disco.getCodigo);
if (disco.getCodigo == codigoNuevo) {
console.log("Repetido");
return true;
}
}
console.log("correcto");
return false;
}
function pedirCodigo(msg) {
let codigo;
let repetido = false;
do {
repetido = false;
codigo = parseInt(prompt("Ingresa un codigo"));
console.log(codigo);
repetido = esCodigoRepetido(codigo);
} while (isNaN(codigo))
return codigo;
}
function pedirPista(msg) {
let pista;
do {
pista = prompt("Ingrese el nombre de la pista")
} while (!isNaN(pista));
return pista
}
function pedirDuracion(msg) {
let duracion;
do {
duracion = parseInt(prompr("Ingrese la duración de la pista"))
} while (!(duración > 0 && duración <=7200))
return duracion
}
function pedirPista(msg) {
let pistas = []
do {
let nombrePista = perdirNombrePista("Ingrese el nombre de la pista");
let duracionPista = pedirDuracion();
pista = new Pista(nombrePista, duracionPista);
//Objeto al array//
pistas.push(pista);
//pedir hasta cortar el bucle//
} while (confirm("¿Desea agregar otra pista?"));
return pistas;
}
//Clases //
class Disco {
#nombreDisco;
#autor;
#codigo;
#pistas;
constructor(NombreDisco, autor, codigo, pistas) {
this.#nombreDisco = nombreDisco;
this.#autor = autor;
this.#codigo = codigo;
this.#pistas = pistas;
}
get getNombredisco(){
return this.#nombreDisco;
}
get getAutor(){
return this.#autor;
}
get getCodigo(){
return this.#codigo;
}
get getPistas() {
return this.#pistas;
}
}
class Pista {
#pista;
#duracion;
constructor(pistas,duracion) {
this.#pista = pista;
this.#duracion = duracion;
}
get getPista() {
return this.#pista;
}
get getDuracion(){
return this.#duracion;
}
}
// Discos por código //
function Buscar(pedirCodigoBuscado) {
let codigoBuscado = parseInt(prompt("Ingrese el código del disco que quiere encontrar"))
Mostrar(coidgoBuscado);
}
// Mostrar información //
const Mostrar = (codigo = null) => {
console.log(codigo);
let htmlToInsert = "";
let diracionTotal = 0;
let duraciónMayor = false;
let salidaPistas = "";
let coleccionFiltrada = [];
}
// Mostrar Disco Buscado //
if (codigo != null){
for (let disco of coleccion) {
console.log(disco.gerCodigo);
if (disco.getCodigo == codigo) {
console.log("Mostrar disco buscado");
coleccionFiltrada.push(disco);
}
}
}
else
coleccionFiltrada = coleccion;
console.log(coleeccionFiltrada);
for (let disco of coleccionFiltrada){
salidaPistas="";
for (let pista of disco.getPistas){
duraciónTotal += pista.getDuracion;
if (pista.getDuracion >= 181)
{
duracionMayor = true;
}
salidaPistas += '<li>Nombre Pista:' + pista.getDuracion;
'</li><li> Duracion Pista: '
if (duracionMayor)
salidaPistas += '<b>' + pista.getDuracion;
else{
salidaPistas += pista.getDuracion;
}
salidaPistas += 'segundos </li>'
}
console.log(disco.getPistas.lenght);
console.log(duracionTotal + disco.getDuracion);
promedio=(duracionTotal / disco.getPistas.lenght);
htmlToInsert += '<ul> Discos <li> Nombre: ' + disco.getNombredisco + disco.getAutor + '</li> <li>Código:' + disco.getCodigo + disco.getPistas.lenght + 'pistas </li> '
{
document.getElementById('info').innerHTML = htmlToInsert
}
}
Valora esta pregunta
-2