Entrega ejercicios terminados

src/App.css

@@ -11,4 +11,22 @@
 }
 .body-page {
   font-style: italic;
+}
+
+.header-title {
+  text-transform: uppercase;
+}
+
+.blog-post .title {
+  text-transform: none;
+}
+
+.main-body {
+  text-transform: uppercase;
+  font-style: italic;
+}
+
+.blog-post .body {
+  text-transform: none;
+  font-style: normal;
 }

src/App.jsx

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import './App.css';
+import Menu from './Menu';
+import MainContent from './MainContent';
+import PracticeContext from './practica_5/PracticeContext';
+
+function App() {
+  const [practiceSelected, setPracticeSelected] = useState('#practica_1');
+
+  return (
+    <div>
+      <PracticeContext.Provider value={practiceSelected}>
+        <Menu onOptionSelected={(t) => setPracticeSelected(t)} />
+        <MainContent />
+      </PracticeContext.Provider>
+    </div>
+  );
+}
+
+export default App;

src/MainContent.jsx

@@ -0,0 +1,19 @@
+import React, { useContext } from 'react';
+import PracticeContext from './practica_5/PracticeContext';
+import Practica1 from './practica_1/Practica1';
+import Practica2 from './practica_2/Practica2';
+import Practica3 from './practica_3/Practica3';
+import Practica4 from './practica_4/Practica4';
+
+export default function MainContent() {
+  const selectedPractice = useContext(PracticeContext);
+
+  return (
+    <main>
+      {selectedPractice === '#practica_1' && <Practica1 />}
+      {selectedPractice === '#practica_2' && <Practica2 />}
+      {selectedPractice === '#practica_3' && <Practica3 />}
+      {selectedPractice === '#practica_4' && <Practica4 />}
+    </main>
+  );
+}

src/Menu.jsx

@@ -0,0 +1,31 @@
+import React, { useContext } from 'react';
+import PracticeContext from './practica_5/PracticeContext';
+
+export default function Menu({ onOptionSelected }) {
+  const selectedPractice = useContext(PracticeContext);
+
+  const onClickOptionHandler = (event) => {
+    event.preventDefault();
+    onOptionSelected(event.target.hash);
+  };
+
+  return (
+    <div>
+      <h1>TUP - UTN - Laboratorio de computación 3 - Práctica</h1>
+      <div className="menu">
+        <a href="#practica_1" onClick={onClickOptionHandler}>
+          Práctica 1
+        </a>
+        <a href="#practica_2" onClick={onClickOptionHandler}>
+          Práctica 2
+        </a>
+        <a href="#practica_3" onClick={onClickOptionHandler}>
+          Práctica 3
+        </a>
+        <a href="#practica_4" onClick={onClickOptionHandler}>
+          Práctica 4
+        </a>
+      </div>
+    </div>
+  );
+}

src/practica_1/Practica1.jsx

@@ -0,0 +1,159 @@
+const watchList = [
+	{
+		Title: 'Inception',
+		Year: '2010',
+		Rated: 'PG-13',
+		Released: '16 Jul 2010',
+		Runtime: '148 min',
+		Genre: 'Action, Adventure, Crime',
+		Director: 'Christopher Nolan',
+		Writer: 'Christopher Nolan',
+		Actors: 'Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy',
+		Plot:
+			'A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.',
+		Language: 'English, Japanese, French',
+		Country: 'USA, UK',
+		Awards: 'Won 4 Oscars. Another 143 wins & 198 nominations.',
+		Poster:
+			'http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg',
+		Metascore: '74',
+		imdbRating: '8.8',
+		imdbVotes: '1,446,708',
+		imdbID: 'tt1375666',
+		Type: 'movie',
+		Response: 'True',
+	},
+	{
+		Title: 'Interstellar',
+		Year: '2014',
+		Rated: 'PG-13',
+		Released: '07 Nov 2014',
+		Runtime: '169 min',
+		Genre: 'Adventure, Drama, Sci-Fi',
+		Director: 'Christopher Nolan',
+		Writer: 'Jonathan Nolan, Christopher Nolan',
+		Actors: 'Ellen Burstyn, Matthew McConaughey, Mackenzie Foy, John Lithgow',
+		Plot:
+			"A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.",
+		Language: 'English',
+		Country: 'USA, UK',
+		Awards: 'Won 1 Oscar. Another 39 wins & 132 nominations.',
+		Poster:
+			'http://ia.media-imdb.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg',
+		Metascore: '74',
+		imdbRating: '7.6',
+		imdbVotes: '910,366',
+		imdbID: 'tt0816692',
+		Type: 'movie',
+		Response: 'True',
+	},
+	{
+		Title: 'The Dark Knight',
+		Year: '2008',
+		Rated: 'PG-13',
+		Released: '18 Jul 2008',
+		Runtime: '152 min',
+		Genre: 'Action, Adventure, Crime',
+		Director: 'Christopher Nolan',
+		Writer:
+			'Jonathan Nolan (screenplay), Christopher Nolan (screenplay), Christopher Nolan (story), David S. Goyer (story), Bob Kane (characters)',
+		Actors: 'Christian Bale, Heath Ledger, Aaron Eckhart, Michael Caine',
+		Plot:
+			'When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.',
+		Language: 'English, Mandarin',
+		Country: 'USA, UK',
+		Awards: 'Won 2 Oscars. Another 146 wins & 142 nominations.',
+		Poster:
+			'http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg',
+		Metascore: '82',
+		imdbRating: '9.0',
+		imdbVotes: '1,652,832',
+		imdbID: 'tt0468569',
+		Type: 'movie',
+		Response: 'True',
+	},
+	{
+		Title: 'Batman Begins',
+		Year: '2005',
+		Rated: 'PG-13',
+		Released: '15 Jun 2005',
+		Runtime: '140 min',
+		Genre: 'Action, Adventure',
+		Director: 'Christopher Nolan',
+		Writer:
+			'Bob Kane (characters), David S. Goyer (story), Christopher Nolan (screenplay), David S. Goyer (screenplay)',
+		Actors: 'Christian Bale, Michael Caine, Liam Neeson, Katie Holmes',
+		Plot:
+			'After training with his mentor, Batman begins his fight to free crime-ridden Gotham City from the corruption that Scarecrow and the League of Shadows have cast upon it.',
+		Language: 'English, Urdu, Mandarin',
+		Country: 'USA, UK',
+		Awards: 'Nominated for 1 Oscar. Another 15 wins & 66 nominations.',
+		Poster:
+			'http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg',
+		Metascore: '70',
+		imdbRating: '8.3',
+		imdbVotes: '972,584',
+		imdbID: 'tt0372784',
+		Type: 'movie',
+		Response: 'True',
+	},
+	{
+		Title: 'Avatar',
+		Year: '2009',
+		Rated: 'PG-13',
+		Released: '18 Dec 2009',
+		Runtime: '162 min',
+		Genre: 'Action, Adventure, Fantasy',
+		Director: 'James Cameron',
+		Writer: 'James Cameron',
+		Actors: 'Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang',
+		Plot:
+			'A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.',
+		Language: 'English, Spanish',
+		Country: 'USA, UK',
+		Awards: 'Won 3 Oscars. Another 80 wins & 121 nominations.',
+		Poster:
+			'http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX300.jpg',
+		Metascore: '83',
+		imdbRating: '7.9',
+		imdbVotes: '876,575',
+		imdbID: 'tt0499549',
+		Type: 'movie',
+		Response: 'True',
+	},
+];
+
+const filterMovies = (watchlist) => {
+    // Aquí adentro escriban la función para filtrar
+	return watchlist.filter(movie => movie.Director === "Christopher Nolan" && parseFloat(movie.imdbRating) > 8)
+}
+const returnMovieTitle = (watchlist) => {
+    // Aquí adentro escriban la función para mostrar titulo
+	return watchlist.map(movie => movie.Title);
+}
+const sumOfDuration = (watchlist) => {
+    // Aquí adentro escriban la función para sumarizar
+	return watchlist.reduce((acum, movie) => acum + parseInt(movie.Runtime), 0)
+}
+export default function Practica1() {
+	let moviesFiltered = filterMovies(watchList);
+    let titlesArray = returnMovieTitle(moviesFiltered);
+    let durationSum = sumOfDuration(moviesFiltered);
+    console.log(titlesArray);
+    if (!Array.isArray(titlesArray)) {
+        titlesArray = [];
+    }
+    return (
+        <div>
+            <p>Películas de Christopher Nolan: { durationSum } minutos</p>
+            <ul>
+                { titlesArray.map((item, index) => (
+                    <li key={index}>{item}</li>
+                ))}
+            </ul>
+        </div>
+    )
+} 
+
+// 
+// 

src/practica_2/Practica2.jsx

@@ -0,0 +1,20 @@
+import Header from "./components/Header";
+import Main from "./components/Main";
+import Page from "./components/Page";
+
+const site = {
+    pageTitle: 'Unidad 1.2 - Práctica',
+    pageBody: 'Implementación de árbol de componentes y propiedades en React.'
+};
+
+export default function Practica2() {
+    //utilizamos este componente como app
+    return (
+        <>
+            <Page>
+                <Header title={site.pageTitle}/>
+                <Main body={site.pageBody} />
+            </Page>
+        </>
+    );
+}

src/practica_2/README.md

@@ -1,51 +1,42 @@
 # Unidad 1.2 - Lógica de componentes - Práctica
 
-
 ## Pre-requisitos
 
 Considerando el siguiente objeto de JavaScript:
 
-
 ```
 const site = {
   pageTitle: 'Unidad 1.2 - Práctica',
   pageBody: 'Implementación de árbol de componentes y propiedades en React.'
 }
 ```
 
-
-
 ### Tarea 1
 
+- Crear la carpeta `components` dentro de `practica_2`
+- Crear el componente `Title` que reciba como parámetro la propiedad `pageTitle` y la renderice dentro de una etiqueta de encabezado (`h1`).
+- Crear el componente `Body` que reciba como parámetro la propiedad `pageBody` y la renderice dentro de una etiqueta `div`
+- Importar los componentes `Title` y `Body` desde `Practica2.js` y renderizarlos pasándose como propiedades sus respectivos valores de la constante `site`.
+- Bonus: utilizar `object destructuring` para leer las propiedades pasadas a los componentes como argumentos
 
-* Crear la carpeta `components` dentro de `practica_2` 
-* Crear el componente `Title` que reciba como parámetro la propiedad `pageTitle` y la renderice dentro de una etiqueta de encabezado (`h1`).
-* Crear el componente `Body` que reciba como parámetro la propiedad `pageBody` y la renderice dentro de una etiqueta `div`
-* Importar los componentes `Title` y `Body` desde `Practica2.js` y renderizarlos pasándose como propiedades sus respectivos valores de la constante `site`. 
-* Bonus: utilizar `object destructuring` para leer las propiedades pasadas a los componentes como argumentos
-
-
-### Tarea 2: 
-
-
-* Crear el componente `Header` que importará el componente `Title` y recibirá como propiedad `pageTitle`
-* Crear el componente `Main` que importará el componente `Body` y recibirá como propiedad `pageBody` y además renderizar una lista de menú (`nav` y `ul`) con enlaces a 2 sitios web externos.
-* Refactorizar Practica2 para utilizar los componente `Main` y `Header`
-* Bonus: Enviar los enlaces a sitio web externos como `props` enviadas a `Main`
-* Bonus: Utilizar la función `map` para renderizar los links
+### Tarea 2:
 
+- Crear el componente `Header` que importará el componente `Title` y recibirá como propiedad `pageTitle`
+- Crear el componente `Main` que importará el componente `Body` y recibirá como propiedad `pageBody` y además renderizar una lista de menú (`nav` y `ul`) con enlaces a 2 sitios web externos.
+- Refactorizar Practica2 para utilizar los componente `Main` y `Header`
+- Bonus: Enviar los enlaces a sitio web externos como `props` enviadas a `Main`
+- Bonus: Utilizar la función `map` para renderizar los links
 
 ### Tarea 3
 
-* Crear un componente `Page` de forma que acepte hijos (children) y los renderice de esa forma a los componente `Main` y `Header`
-* Refactorizar `App` para que importe y renderice `Page`, recordar enviarle que la constante site debe estar definida en `App` y enviarla a los distintos componentes via `props`.
-* En el componente `Main` modificar el contenido de la página agregando una frase a elección del alumno.
-
+- Crear un componente `Page` de forma que acepte hijos (children) y los renderice de esa forma a los componente `Main` y `Header`
+- Refactorizar `App` para que importe y renderice `Page`, recordar enviarle que la constante site debe estar definida en `App` y enviarla a los distintos componentes via `props`.
+- En el componente `Main` modificar el contenido de la página agregando una frase a elección del alumno.
 
 ### Tarea 4 - Reutilización de componentes
 
-* Refactorizar las propiedades `pageTitle` y `pageBody` de `Title` y `Body` respectivamente para que llamen `title` y `body`
-* Crear un componente `BlogPost` que renderice los componentes `Title` y `Body` pasando como paramétros `title` y `body` los datos de una noticia del diario seleccionada al azar. Colocar `BlogPost` dentro de `Main` a continuación del `Body` 
-* Realizar lo necesario para que el título de la página situado en `Header` se vea en mayúsculas mientras que el título del `BlogPost` se vea normal.
-* Realizar lo necesario para que el body de la página situado en `Main` se vea en mayúsculas en italics  mientras que el body del `BlogPost` se vea normal.
-BONUS: Utilizar CSS para agregar alguna diferenciación extra.
+- Refactorizar las propiedades `pageTitle` y `pageBody` de `Title` y `Body` respectivamente para que llamen `title` y `body`
+- Crear un componente `BlogPost` que renderice los componentes `Title` y `Body` pasando como paramétros `title` y `body` los datos de una noticia del diario seleccionada al azar. Colocar `BlogPost` dentro de `Main` a continuación del `Body`
+- Realizar lo necesario para que el título de la página situado en `Header` se vea en mayúsculas mientras que el título del `BlogPost` se vea normal.
+- Realizar lo necesario para que el body de la página situado en `Main` se vea en mayúsculas en italics mientras que el body del `BlogPost` se vea normal.
+  BONUS: Utilizar CSS para agregar alguna diferenciación extra.

src/practica_2/components/BlogSpot.jsx

@@ -0,0 +1,14 @@
+import Title from "./Title";
+import Main from "./Main";
+
+function BlogPost() {
+  const randomTitle = "Notas Laboratorio de computacion III";
+  const randomBody = "Contenido";
+
+  return (
+    <div className="blog-post">
+      <Title title={randomTitle} />
+      <Main body={randomBody} />
+    </div>
+  );
+}

src/practica_2/components/Body.jsx

@@ -0,0 +1,8 @@
+export default function Body({body}) {
+
+  return (
+    <>
+        <div>{body}</div>
+    </>
+  )
+}

src/practica_2/components/Header.jsx

@@ -0,0 +1,7 @@
+import Title from './Title';
+
+export default function Header({title}) {
+  return (
+    <Title title={title}/>
+  )
+}