From 95c678c6e0e5f6a7dda2948791fe3ddf9b8c4449 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81ngel=20S=C3=A1nchez=20Moreno?= Date: Mon, 3 Feb 2025 11:01:51 +0000 Subject: [PATCH 01/11] Base del pryecto --- src/js/component/Card.jsx | 8 +++++++ src/js/component/Footer.jsx | 9 ++++++++ src/js/component/Jumbotron.jsx | 9 ++++++++ src/js/component/Navbar.jsx | 9 ++++++++ src/js/component/home.jsx | 26 ---------------------- src/js/index.js | 2 +- src/pages/home.jsx | 40 ++++++++++++++++++++++++++++++++++ 7 files changed, 76 insertions(+), 27 deletions(-) create mode 100644 src/js/component/Card.jsx create mode 100644 src/js/component/Footer.jsx create mode 100644 src/js/component/Jumbotron.jsx create mode 100644 src/js/component/Navbar.jsx delete mode 100644 src/js/component/home.jsx create mode 100644 src/pages/home.jsx diff --git a/src/js/component/Card.jsx b/src/js/component/Card.jsx new file mode 100644 index 000000000..952c1c52a --- /dev/null +++ b/src/js/component/Card.jsx @@ -0,0 +1,8 @@ +import React from "react"; + +const Card = () => { + return ( + "card" + ) +} +export default Card; \ No newline at end of file diff --git a/src/js/component/Footer.jsx b/src/js/component/Footer.jsx new file mode 100644 index 000000000..89608ff70 --- /dev/null +++ b/src/js/component/Footer.jsx @@ -0,0 +1,9 @@ +import React from "react"; + +const Footer = () => { + return ( + "Footer" + ) +} + +export default Footer; \ No newline at end of file diff --git a/src/js/component/Jumbotron.jsx b/src/js/component/Jumbotron.jsx new file mode 100644 index 000000000..0c9a6ff31 --- /dev/null +++ b/src/js/component/Jumbotron.jsx @@ -0,0 +1,9 @@ +import React from "react"; + +const Jumbotron = () => { + return ( + "jumbotron" + ) +} + +export default Jumbotron; \ No newline at end of file diff --git a/src/js/component/Navbar.jsx b/src/js/component/Navbar.jsx new file mode 100644 index 000000000..cc87e23c8 --- /dev/null +++ b/src/js/component/Navbar.jsx @@ -0,0 +1,9 @@ +import React from "react"; + +const Navbar = () => { + return ( +"Navbar" + ) +} + +export default Navbar; \ No newline at end of file diff --git a/src/js/component/home.jsx b/src/js/component/home.jsx deleted file mode 100644 index 737b22c9d..000000000 --- a/src/js/component/home.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react"; - -//include images into your bundle -import rigoImage from "../../img/rigo-baby.jpg"; - -//create your first component -const Home = () => { - return ( -
-

Hello Rigo!

-

- -

- - If you see this green button... bootstrap is working... - -

- Made by{" "} - 4Geeks Academy, with - love! -

-
- ); -}; - -export default Home; diff --git a/src/js/index.js b/src/js/index.js index 6b2056c50..50bb7a425 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -6,7 +6,7 @@ import ReactDOM from "react-dom/client"; import "../styles/index.css"; //import your own components -import Home from "./component/home.jsx"; +import Home from "../pages/home.jsx"; //render your react application ReactDOM.createRoot(document.getElementById('app')).render(); diff --git a/src/pages/home.jsx b/src/pages/home.jsx new file mode 100644 index 000000000..23a46f970 --- /dev/null +++ b/src/pages/home.jsx @@ -0,0 +1,40 @@ +import React from "react"; +import Navbar from "../component/Navbar"; +import Jumbotron from "../component/Jumbotron"; +import Card from "../component/Card"; +import Footer from "../component/Footer"; + +//include images into your bundle +//create your first component +const Home = () => { + + function repeatCards(count) { + let cards = [] + for ( let i = 0; i < count ; i++ ) { + cards.push ( + <> +
+ +
+ + ) + } + return cards + } + return ( + <> +
+ +
+
+ +
+
{repeatCards(4)}
+
+
+
+ + ); +}; + +export default Home; \ No newline at end of file From 050ace3236ffb3f8678c6527362b137495f2a091 Mon Sep 17 00:00:00 2001 From: Angel Ponte Date: Mon, 3 Feb 2025 11:46:26 +0000 Subject: [PATCH 02/11] footer realizado por AngelDP --- src/js/component/Footer.jsx | 8 +++++++- src/pages/home.jsx | 8 ++++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/js/component/Footer.jsx b/src/js/component/Footer.jsx index 89608ff70..0abb681d0 100644 --- a/src/js/component/Footer.jsx +++ b/src/js/component/Footer.jsx @@ -2,7 +2,13 @@ import React from "react"; const Footer = () => { return ( - "Footer" + <> +
+
+

© 2025 TeamOne. Todos los derechos reservados.

+
+
+ ) } diff --git a/src/pages/home.jsx b/src/pages/home.jsx index 23a46f970..124d2a1fd 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -1,8 +1,8 @@ import React from "react"; -import Navbar from "../component/Navbar"; -import Jumbotron from "../component/Jumbotron"; -import Card from "../component/Card"; -import Footer from "../component/Footer"; +import Navbar from "../js/component/Navbar"; +import Jumbotron from "../js/component/Jumbotron"; +import Card from "../js/component/Card"; +import Footer from "../js/component/Footer"; //include images into your bundle //create your first component From 9486054726a6346897b91114db4d02ac7ef5a5fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81ngel=20S=C3=A1nchez=20Moreno?= Date: Mon, 3 Feb 2025 11:53:26 +0000 Subject: [PATCH 03/11] Jumbotron --- .vscode/settings.json | 3 +++ src/js/component/Jumbotron.jsx | 12 +++++++++++- src/pages/home.jsx | 8 ++++---- 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index d83b5ba6c..b4cb7ea09 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,5 +3,8 @@ "editor.defaultFormatter": "esbenp.prettier-vscode", "workbench.editorAssociations": { "*.md": "vscode.markdown.preview.editor" + }, + "[javascriptreact]": { + "editor.defaultFormatter": "vscode.typescript-language-features" } } \ No newline at end of file diff --git a/src/js/component/Jumbotron.jsx b/src/js/component/Jumbotron.jsx index 0c9a6ff31..960413259 100644 --- a/src/js/component/Jumbotron.jsx +++ b/src/js/component/Jumbotron.jsx @@ -2,7 +2,17 @@ import React from "react"; const Jumbotron = () => { return ( - "jumbotron" + <> +
+
+

A warm welcome!

+

+ Lorem ipsum dolor sit amet, consectetur adispisicing elit, ipsa, ipsam, eligendi, in quo sunt possimus non incidunt odit vero aliquid smilique quaerat narm nobis ilo aspernatur vitae fugia numquam repletiat +

+ +
+
+ ) } diff --git a/src/pages/home.jsx b/src/pages/home.jsx index 23a46f970..62e404c77 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -1,8 +1,8 @@ import React from "react"; -import Navbar from "../component/Navbar"; -import Jumbotron from "../component/Jumbotron"; -import Card from "../component/Card"; -import Footer from "../component/Footer"; +import Navbar from "../js/component/Navbar.jsx"; +import Jumbotron from "../js/component/Jumbotron.jsx"; +import Card from "../js/component/Card.jsx"; +import Footer from "../js/component/Footer.jsx"; //include images into your bundle //create your first component From ea980f062066861725789de055d9fff65a36150d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81ngel=20S=C3=A1nchez=20Moreno?= Date: Mon, 3 Feb 2025 11:57:21 +0000 Subject: [PATCH 04/11] Jumbotron final hecho por Angel Sanchez --- src/js/component/Jumbotron.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/component/Jumbotron.jsx b/src/js/component/Jumbotron.jsx index 960413259..6c9a38896 100644 --- a/src/js/component/Jumbotron.jsx +++ b/src/js/component/Jumbotron.jsx @@ -6,7 +6,7 @@ const Jumbotron = () => {

A warm welcome!

-

+

Lorem ipsum dolor sit amet, consectetur adispisicing elit, ipsa, ipsam, eligendi, in quo sunt possimus non incidunt odit vero aliquid smilique quaerat narm nobis ilo aspernatur vitae fugia numquam repletiat

From 0512512074c182fd726e94d519bedb5412d0682d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81ngel=20S=C3=A1nchez=20Moreno?= Date: Mon, 3 Feb 2025 12:01:06 +0000 Subject: [PATCH 05/11] Jumbotron por Angel Sanchez --- src/pages/home.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/home.jsx b/src/pages/home.jsx index 62e404c77..124d2a1fd 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -1,8 +1,8 @@ import React from "react"; -import Navbar from "../js/component/Navbar.jsx"; -import Jumbotron from "../js/component/Jumbotron.jsx"; -import Card from "../js/component/Card.jsx"; -import Footer from "../js/component/Footer.jsx"; +import Navbar from "../js/component/Navbar"; +import Jumbotron from "../js/component/Jumbotron"; +import Card from "../js/component/Card"; +import Footer from "../js/component/Footer"; //include images into your bundle //create your first component From cb53f6a53f558e7488f723597a0a60a282d7b3c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81ngel=20S=C3=A1nchez=20Moreno?= Date: Mon, 3 Feb 2025 12:07:51 +0000 Subject: [PATCH 06/11] Card --- src/js/component/Card.jsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/js/component/Card.jsx b/src/js/component/Card.jsx index 952c1c52a..35f2d87ac 100644 --- a/src/js/component/Card.jsx +++ b/src/js/component/Card.jsx @@ -2,7 +2,14 @@ import React from "react"; const Card = () => { return ( - "card" +
+ ... +
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
) } export default Card; \ No newline at end of file From c28af0372adcdae95e67f48657a986e09de549fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81ngel=20S=C3=A1nchez=20Moreno?= Date: Mon, 3 Feb 2025 12:22:19 +0000 Subject: [PATCH 07/11] problema solucionado de las cards --- src/js/component/Card.jsx | 2 +- src/pages/home.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/js/component/Card.jsx b/src/js/component/Card.jsx index 35f2d87ac..0ea605d5d 100644 --- a/src/js/component/Card.jsx +++ b/src/js/component/Card.jsx @@ -2,7 +2,7 @@ import React from "react"; const Card = () => { return ( -
+
...
Card title
diff --git a/src/pages/home.jsx b/src/pages/home.jsx index 124d2a1fd..658610d2d 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -13,7 +13,7 @@ const Home = () => { for ( let i = 0; i < count ; i++ ) { cards.push ( <> -
+
@@ -29,7 +29,7 @@ const Home = () => {
-
{repeatCards(4)}
+
{repeatCards(4)}
From ed919b50616adb7ef33e59dc2534aa2be890f805 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81ngel=20S=C3=A1nchez=20Moreno?= Date: Mon, 3 Feb 2025 12:33:27 +0000 Subject: [PATCH 08/11] Queda centrar y poner bonitas las cartas --- src/js/component/Card.jsx | 2 +- src/pages/home.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/component/Card.jsx b/src/js/component/Card.jsx index 0ea605d5d..523794058 100644 --- a/src/js/component/Card.jsx +++ b/src/js/component/Card.jsx @@ -3,7 +3,7 @@ import React from "react"; const Card = () => { return (
- ... + ...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

diff --git a/src/pages/home.jsx b/src/pages/home.jsx index 658610d2d..5a52670fb 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -29,7 +29,7 @@ const Home = () => {
-
{repeatCards(4)}
+
{repeatCards(4)}
From ab42be37e18ebc9472b04ade1893a0a095af1582 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=81ngel=20S=C3=A1nchez=20Moreno?= Date: Tue, 4 Feb 2025 00:51:31 +0000 Subject: [PATCH 09/11] Angel Sanchez Moreno Final --- src/js/component/{ => Card}/Card.jsx | 10 +++--- src/js/component/{ => Footer}/Footer.jsx | 0 .../component/{ => Jumbotron}/Jumbotron.jsx | 4 +-- src/js/component/Navbar.jsx | 9 ----- src/js/component/Navbar/Navbar.jsx | 32 +++++++++++++++++ src/pages/home.jsx | 34 +++++++++++-------- 6 files changed, 58 insertions(+), 31 deletions(-) rename src/js/component/{ => Card}/Card.jsx (70%) rename src/js/component/{ => Footer}/Footer.jsx (100%) rename src/js/component/{ => Jumbotron}/Jumbotron.jsx (89%) delete mode 100644 src/js/component/Navbar.jsx create mode 100644 src/js/component/Navbar/Navbar.jsx diff --git a/src/js/component/Card.jsx b/src/js/component/Card/Card.jsx similarity index 70% rename from src/js/component/Card.jsx rename to src/js/component/Card/Card.jsx index 523794058..c822e7fc8 100644 --- a/src/js/component/Card.jsx +++ b/src/js/component/Card/Card.jsx @@ -2,12 +2,12 @@ import React from "react"; const Card = () => { return ( -
+
... -
-
Card title
-

Some quick example text to build on the card title and make up the bulk of the card's content.

- Go somewhere +
+
Card title
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere
) diff --git a/src/js/component/Footer.jsx b/src/js/component/Footer/Footer.jsx similarity index 100% rename from src/js/component/Footer.jsx rename to src/js/component/Footer/Footer.jsx diff --git a/src/js/component/Jumbotron.jsx b/src/js/component/Jumbotron/Jumbotron.jsx similarity index 89% rename from src/js/component/Jumbotron.jsx rename to src/js/component/Jumbotron/Jumbotron.jsx index 6c9a38896..34b8c724d 100644 --- a/src/js/component/Jumbotron.jsx +++ b/src/js/component/Jumbotron/Jumbotron.jsx @@ -4,9 +4,9 @@ const Jumbotron = () => { return ( <>
-
+

A warm welcome!

-

+

Lorem ipsum dolor sit amet, consectetur adispisicing elit, ipsa, ipsam, eligendi, in quo sunt possimus non incidunt odit vero aliquid smilique quaerat narm nobis ilo aspernatur vitae fugia numquam repletiat

diff --git a/src/js/component/Navbar.jsx b/src/js/component/Navbar.jsx deleted file mode 100644 index cc87e23c8..000000000 --- a/src/js/component/Navbar.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; - -const Navbar = () => { - return ( -"Navbar" - ) -} - -export default Navbar; \ No newline at end of file diff --git a/src/js/component/Navbar/Navbar.jsx b/src/js/component/Navbar/Navbar.jsx new file mode 100644 index 000000000..64162daf1 --- /dev/null +++ b/src/js/component/Navbar/Navbar.jsx @@ -0,0 +1,32 @@ +import React from "react"; + +const Navbar = () => { + return ( + + ) +} + +export default Navbar; \ No newline at end of file diff --git a/src/pages/home.jsx b/src/pages/home.jsx index 5a52670fb..57ec6aae2 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -1,8 +1,8 @@ import React from "react"; -import Navbar from "../js/component/Navbar"; -import Jumbotron from "../js/component/Jumbotron"; -import Card from "../js/component/Card"; -import Footer from "../js/component/Footer"; +import Navbar from "../js/component/Navbar/Navbar"; +import Jumbotron from "../js/component/Jumbotron/Jumbotron"; +import Card from "../js/component/Card/Card"; +import Footer from "../js/component/Footer/Footer"; //include images into your bundle //create your first component @@ -10,10 +10,10 @@ const Home = () => { function repeatCards(count) { let cards = [] - for ( let i = 0; i < count ; i++ ) { - cards.push ( + for (let i = 0; i < count; i++) { + cards.push( <> -
+
@@ -23,16 +23,20 @@ const Home = () => { } return ( <> -
- -
-
+ + + +
+ +
+ {repeatCards(4)} +
+
-
{repeatCards(4)}
-
-
-
+ +