From 6fdb093f748d0a090739b0410058a5cbfa74b35e Mon Sep 17 00:00:00 2001 From: JuanDDY Date: Fri, 27 Oct 2023 00:18:02 -0500 Subject: [PATCH] taller 2 completo --- ejemplos/Serie.ts => Serie.ts | 0 ejemplos/data.ts => data.ts | 0 ejemplos/data.js | 12 ------- ejemplos/index.js | 19 ----------- ejemplos/index.ts | 20 ----------- index.html | 16 ++++----- index.ts | 62 ++++++++++++++++++++++++++++++++++ {ejemplos => scripts}/Serie.js | 12 +++---- scripts/data.js | 9 +++++ scripts/index.js | 39 +++++++++++++++++++++ {lib => styles}/style.css | 7 ++++ tsconfig.json | 10 +++--- 12 files changed, 135 insertions(+), 71 deletions(-) rename ejemplos/Serie.ts => Serie.ts (100%) rename ejemplos/data.ts => data.ts (100%) delete mode 100644 ejemplos/data.js delete mode 100644 ejemplos/index.js delete mode 100644 ejemplos/index.ts create mode 100644 index.ts rename {ejemplos => scripts}/Serie.js (50%) create mode 100644 scripts/data.js create mode 100644 scripts/index.js rename {lib => styles}/style.css (92%) diff --git a/ejemplos/Serie.ts b/Serie.ts similarity index 100% rename from ejemplos/Serie.ts rename to Serie.ts diff --git a/ejemplos/data.ts b/data.ts similarity index 100% rename from ejemplos/data.ts rename to data.ts diff --git a/ejemplos/data.js b/ejemplos/data.js deleted file mode 100644 index 047daa6..0000000 --- a/ejemplos/data.js +++ /dev/null @@ -1,12 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.series = void 0; -const Serie_js_1 = require("./Serie.js"); -exports.series = [ - new Serie_js_1.Serie(1, "Breaking Bad", "AMC", 5, "Set and filmed in Albuquerque, New Mexico, the series tells the story of Walter White, a struggling and depressed high school chemistry teacher who is diagnosed with lung cancer", "https://www.amc.com/shows/breaking-bad", "https://i.imgur.com/GGje0vc.jpg"), - new Serie_js_1.Serie(2, "Orange Is the New Black", "Netflix", 6, "The series begins revolving around Piper Chapman, a woman in her thirties living in New York City who is sentenced to 15 months in Litchfield Penitentiary", "https://www.netflix.com/co/title/70242311", "https://i.imgur.com/EvKe48G.jpg"), - new Serie_js_1.Serie(3, "Game of Thrones", "HBO", 7, "American fantasy drama", "https://www.hbo.com/game-of-thrones", "https://i.imgur.com/TDCEV1S.jpg"), - new Serie_js_1.Serie(4, "The Big Bang Theory", "CBS", 12, "Leonard and Sheldon are brilliant physicists—geniuses in the laboratory but socially challenged everywhere else. Enter beautiful, street-smart neighbor Penny, who aims to teach them a thing or two about life. Despite their on-again, off-again relationship in the past, Leonard and Penny have finally gotten married. Even Sheldon has found a female companion, entering into a relationship agreement with neurobiologist Amy Farrah Fowler, and he recently took their relationship to the next level by marrying her after a long courtship. In their free time, Leonard and Sheldon enjoy fantasy role-playing games with their ever-expanding universe of friends, including fellow scientists Koothrappali, Wolowitz, and Wolowitz’s adorable microbiologist wife, Bernadette, who is adjusting to life with their two children.", "https://www.cbs.com/shows/big_bang_theory/about/", "https://i.imgur.com/uAEpVWk.jpg"), - new Serie_js_1.Serie(5, "Sherlock", "BBC", 4, "Sherlock depicts consulting detective Sherlock Holmes (Benedict Cumberbatch) solving various mysteries in modern-day London. Holmes is assisted by his flatmate and friend, Dr John Watson (Martin Freeman), who has returned from military service in Afghanistan with the Royal Army Medical Corps", "https://www.bbc.co.uk/programmes/b018ttws", "https://i.imgur.com/02B7qhj.jpg"), - new Serie_js_1.Serie(6, "A Very English Scandal", "BBC", 2, "A Very English Scandal is a fact-based three-part British television comedy-drama miniseries based on John Preston's book of the same name.", "https://www.bbc.co.uk/programmes/p065smy4", "https://i.imgur.com/D4y3DrQ.jpg"), -]; diff --git a/ejemplos/index.js b/ejemplos/index.js deleted file mode 100644 index 5cfc37b..0000000 --- a/ejemplos/index.js +++ /dev/null @@ -1,19 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.tabla = void 0; -const data_js_1 = require("./data.js"); -exports.tabla = document.querySelector('table'); -if (exports.tabla) { - data_js_1.series.forEach((serie) => { - const row = document.createElement('tr'); - row.innerHTML = ` - ${serie.id} - ${serie.nombre} - ${serie.canal} - ${serie.temporadas}`; - exports.tabla.appendChild(row); - }); -} -else { - console.error("No se encontró el elemento con la clase 'table'"); -} diff --git a/ejemplos/index.ts b/ejemplos/index.ts deleted file mode 100644 index 7a07191..0000000 --- a/ejemplos/index.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { series } from './data.js'; - -export const tabla: HTMLElement | null = document.querySelector('table'); - -if (tabla) { - series.forEach((serie) => { - const row = document.createElement('tr'); - row.innerHTML = ` - ${serie.id} - ${serie.nombre} - ${serie.canal} - ${serie.temporadas}` - - tabla.appendChild(row); - }); - - -} else { - console.error("No se encontró el elemento con la clase 'table'"); -} \ No newline at end of file diff --git a/index.html b/index.html index 0f08923..f7a6651 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,8 @@ - + + -
+
-
+
@@ -44,15 +45,14 @@

Average seasons: 0

-
+
- - - - + + + diff --git a/index.ts b/index.ts new file mode 100644 index 0000000..8f1dd85 --- /dev/null +++ b/index.ts @@ -0,0 +1,62 @@ +import { series } from './data.js'; +import { Serie } from './Serie.js'; + +export const tabla: HTMLElement | null = document.getElementById('cuerpo-Series'); +const espacioCarta: HTMLElement | null = document.getElementById('cartaContenido'); +var sumatoria: number = 0; + + +function cargarTabla():void{ + if (tabla) { + series.forEach((serie) => { + const row = document.createElement('tr'); + row.innerHTML = ` + ${serie.id} + ${serie.nombre} + ${serie.canal} + ${serie.temporadas}` + + tabla.appendChild(row); + + row.addEventListener('click', () => {cargarCarta(serie)}); + }); + + } else { + console.error("No se encontró el elemento con el id \"cuerpo-Series\""); + } +} + + +function cargarCarta(serie: Serie):void{ + if(espacioCarta){ + espacioCarta.innerHTML = `
+ Card image cap +
+

${serie.nombre}

+

${serie.descripcion}

+ Clic aca para visitar la serie +
+
` + } +} + + +function promedioTemporadas():void{ + if (tabla) { + series.forEach((serie) => { + sumatoria += serie.temporadas; + }); + } + const parrafo = document.getElementById('average'); + var promedio = sumatoria / series.length; + if (parrafo != null){ + parrafo.innerHTML = `Average seasons: ${promedio}` + } else { + console.error("No se encontró el elemento con el id \"average\""); + } + +} + + +cargarTabla(); +promedioTemporadas() \ No newline at end of file diff --git a/ejemplos/Serie.js b/scripts/Serie.js similarity index 50% rename from ejemplos/Serie.js rename to scripts/Serie.js index b18a823..faea276 100644 --- a/ejemplos/Serie.js +++ b/scripts/Serie.js @@ -1,8 +1,5 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.Serie = void 0; -class Serie { - constructor(id, nombre, canal, temporadas, descripcion, link, imagen) { +var Serie = /** @class */ (function () { + function Serie(id, nombre, canal, temporadas, descripcion, link, imagen) { this.id = id; this.nombre = nombre; this.canal = canal; @@ -11,5 +8,6 @@ class Serie { this.link = link; this.imagen = imagen; } -} -exports.Serie = Serie; + return Serie; +}()); +export { Serie }; diff --git a/scripts/data.js b/scripts/data.js new file mode 100644 index 0000000..4eb38ee --- /dev/null +++ b/scripts/data.js @@ -0,0 +1,9 @@ +import { Serie } from "./Serie.js"; +export var series = [ + new Serie(1, "Breaking Bad", "AMC", 5, "Set and filmed in Albuquerque, New Mexico, the series tells the story of Walter White, a struggling and depressed high school chemistry teacher who is diagnosed with lung cancer", "https://www.amc.com/shows/breaking-bad", "https://i.imgur.com/GGje0vc.jpg"), + new Serie(2, "Orange Is the New Black", "Netflix", 6, "The series begins revolving around Piper Chapman, a woman in her thirties living in New York City who is sentenced to 15 months in Litchfield Penitentiary", "https://www.netflix.com/co/title/70242311", "https://i.imgur.com/EvKe48G.jpg"), + new Serie(3, "Game of Thrones", "HBO", 7, "American fantasy drama", "https://www.hbo.com/game-of-thrones", "https://i.imgur.com/TDCEV1S.jpg"), + new Serie(4, "The Big Bang Theory", "CBS", 12, "Leonard and Sheldon are brilliant physicists—geniuses in the laboratory but socially challenged everywhere else. Enter beautiful, street-smart neighbor Penny, who aims to teach them a thing or two about life. Despite their on-again, off-again relationship in the past, Leonard and Penny have finally gotten married. Even Sheldon has found a female companion, entering into a relationship agreement with neurobiologist Amy Farrah Fowler, and he recently took their relationship to the next level by marrying her after a long courtship. In their free time, Leonard and Sheldon enjoy fantasy role-playing games with their ever-expanding universe of friends, including fellow scientists Koothrappali, Wolowitz, and Wolowitz’s adorable microbiologist wife, Bernadette, who is adjusting to life with their two children.", "https://www.cbs.com/shows/big_bang_theory/about/", "https://i.imgur.com/uAEpVWk.jpg"), + new Serie(5, "Sherlock", "BBC", 4, "Sherlock depicts consulting detective Sherlock Holmes (Benedict Cumberbatch) solving various mysteries in modern-day London. Holmes is assisted by his flatmate and friend, Dr John Watson (Martin Freeman), who has returned from military service in Afghanistan with the Royal Army Medical Corps", "https://www.bbc.co.uk/programmes/b018ttws", "https://i.imgur.com/02B7qhj.jpg"), + new Serie(6, "A Very English Scandal", "BBC", 2, "A Very English Scandal is a fact-based three-part British television comedy-drama miniseries based on John Preston's book of the same name.", "https://www.bbc.co.uk/programmes/p065smy4", "https://i.imgur.com/D4y3DrQ.jpg"), +]; diff --git a/scripts/index.js b/scripts/index.js new file mode 100644 index 0000000..3c61035 --- /dev/null +++ b/scripts/index.js @@ -0,0 +1,39 @@ +import { series } from './data.js'; +export var tabla = document.getElementById('cuerpo-Series'); +var espacioCarta = document.getElementById('cartaContenido'); +var sumatoria = 0; +function cargarTabla() { + if (tabla) { + series.forEach(function (serie) { + var row = document.createElement('tr'); + row.innerHTML = "\n ".concat(serie.id, "\n ").concat(serie.nombre, "\n ").concat(serie.canal, "\n ").concat(serie.temporadas, ""); + tabla.appendChild(row); + row.addEventListener('click', function () { cargarCarta(serie); }); + }); + } + else { + console.error("No se encontró el elemento con el id \"cuerpo-Series\""); + } +} +function cargarCarta(serie) { + if (espacioCarta) { + espacioCarta.innerHTML = "
\n \"Card\n
\n

").concat(serie.nombre, "

\n

").concat(serie.descripcion, "

\n Clic aca para visitar la serie\n
\n
"); + } +} +function promedioTemporadas() { + if (tabla) { + series.forEach(function (serie) { + sumatoria += serie.temporadas; + }); + } + var parrafo = document.getElementById('average'); + var promedio = sumatoria / series.length; + if (parrafo != null) { + parrafo.innerHTML = "Average seasons: ".concat(promedio); + } + else { + console.error("No se encontró el elemento con el id \"average\""); + } +} +cargarTabla(); +promedioTemporadas(); diff --git a/lib/style.css b/styles/style.css similarity index 92% rename from lib/style.css rename to styles/style.css index 857bb2c..351b4c4 100644 --- a/lib/style.css +++ b/styles/style.css @@ -54,6 +54,9 @@ body { width: 80px; } +#nombreSerie{ + color:cyan; +} .menu { width: 900px; @@ -70,6 +73,10 @@ nav { font-size: 20pt; } +#cartaContenido { + margin: 30px auto; +} + .table { margin: 30px auto; } diff --git a/tsconfig.json b/tsconfig.json index bebb596..f499a46 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,7 +11,7 @@ // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ /* Language and Environment */ - "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ + "target": "es5", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ // "jsx": "preserve", /* Specify what JSX code is generated. */ // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ @@ -25,8 +25,8 @@ // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ /* Modules */ - "module": "commonjs", /* Specify what module code is generated. */ - // "rootDir": "./", /* Specify the root folder within your source files. */ + "module": "es6", /* Specify what module code is generated. */ + "rootDir": "./", /* Specify the root folder within your source files. */ // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ @@ -55,7 +55,7 @@ // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ - // "outDir": "./", /* Specify an output folder for all emitted files. */ + "outDir": "./scripts", /* Specify an output folder for all emitted files. */ // "removeComments": true, /* Disable emitting comments. */ // "noEmit": true, /* Disable emitting files from a compilation. */ // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ @@ -90,7 +90,7 @@ // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ - // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ + "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */