From a3a408e7791a0127e9de3a52df967b9a6fd06bf2 Mon Sep 17 00:00:00 2001 From: smoser-LiL Date: Mon, 7 Nov 2022 16:01:15 +0000 Subject: [PATCH 01/10] Moving files using main --- .github/workflows/main.yml | 4 ++- NOTICE | 69 +++++++++++++++++++++++++++++++++++++- README.md | 23 ++++++------- 3 files changed, 82 insertions(+), 14 deletions(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 17325664..e71e5972 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -9,4 +9,6 @@ jobs: with: fetch-depth: 0 - name: Copy To Branches Action - uses: planetoftheweb/copy-to-branches@v1 + uses: planetoftheweb/copy-to-branches@v1.2 + env: + key: main diff --git a/NOTICE b/NOTICE index 547595f9..04a6f5f6 100644 --- a/NOTICE +++ b/NOTICE @@ -5,7 +5,18 @@ Licensed under the LinkedIn Learning Exercise File License (the "License"). See LICENSE in the project root for license information. ATTRIBUTIONS: -[PLEASE PROVIDE ATTRIBUTIONS OR DELETE THIS AND THE ABOVE LINE “ATTRIBUTIONS”] + +React +https://github.com/facebook/react +Copyright (c) Facebook, Inc. and its affiliates. +License: MIT +https://opensource.org/licenses/MIT + +Babel +https://github.com/babel/babel +Copyright (c) 2014-present Sebastian McKenzie and other contributors +License: MIT +https://opensource.org/licenses/MIT Please note, this project may automatically load third party code from external repositories (for example, NPM modules, Composer packages, or other dependencies). @@ -13,3 +24,59 @@ If so, such third party code may be subject to other license terms than as set forth above. In addition, such third party code may also depend on and load multiple tiers of dependencies. Please review the applicable licenses of the additional dependencies. + + +=-=-=-=-=-=-=-=-=-=-=-=-=- + +MIT License + +Copyright (c) Facebook, Inc. and its affiliates. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the ""Software""), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +=-=-=-=-==-=-=-=-=-=-=-=-- + +"MIT License + +Copyright (c) 2014-present Sebastian McKenzie and other contributors + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +""Software""), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +Footer +© 2022 GitHub, Inc. +Footer navigation +Terms +Privacy +" diff --git a/README.md b/README.md index 422e0932..034bd5b4 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,10 @@ -# COURSENAME -This is the repository for the LinkedIn Learning course `course-name`. The full course is available from [LinkedIn Learning][lil-course-url]. +# Hands-On Introduction: React +This is the repository for the LinkedIn Learning course Hands-On Introduction: React . The full course is available from [LinkedIn Learning][lil-course-url]. -![course-name-alt-text][lil-thumbnail-url] +![Hands-On Introduction: React ][lil-thumbnail-url] + +When you learn a new framework, you sometimes get to start fresh, from scratch, with plenty of time. Other times, though, you need to dive right in and get things done. This hands-on course helps you quickly get up to speed with React—the popular JavaScript library for building user interfaces—by allowing you to change code directly as you follow along. Instructor Ray Villalobos highlights the aspects of React that set it apart from other JavaScript libraries, including how to approach templating and React Hooks. He then details how to build with React and use it in a web project.

The best way to learn a framework is to use it in practice. That’s why this course is integrated with GitHub Codespaces, an instant cloud developer environment that offers all the functionality of your favorite IDE without the need for any local machine setup. With GitHub Codespaces, you can get hands-on practice from any machine, at any time—all while using a tool that you’ll likely encounter in the workplace. Check out the [Using GitHub Codespaces with this course][gcs-video-url] video to learn how to get started. -_See the readme file in the main branch for updated instructions and information._ ## Instructions This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage, or you can add `/tree/BRANCH_NAME` to the URL to go to the branch you want to access. @@ -22,15 +23,13 @@ To resolve this issue: Add changes to git using this command: git add . Commit changes using this command: git commit -m "some message" -## Installing -1. To use these exercise files, you must have the following installed: - - [list of requirements for course] -2. Clone this repository into your local machine using the terminal (Mac), CMD (Windows), or a GUI tool like SourceTree. -3. [Course-specific instructions] +### Instructor -[0]: # (Replace these placeholder URLs with actual course URLs) +Ray Villalobos -[lil-course-url]: https://www.linkedin.com/learning/ -[lil-thumbnail-url]: http:// +Check out my other courses on [LinkedIn Learning](https://www.linkedin.com/learning/instructors/ray-villalobos). +[lil-course-url]: https://www.linkedin.com/learning/hands-on-introduction-react +[lil-thumbnail-url]: https://media.licdn.com/dms/image/D560DAQFfGNmb1Kxvkw/learning-public-crop_675_1200/0/1666989585426?e=1667955600&v=beta&t=T8baitOBf_RV8nbyKAHNSxqmNsyiYClfQ2oalLHwq20 +[gcs-video-url]: https://www.linkedin.com/learning/hands-on-introduction-react/using-github-codespaces-with-this-course From 86d57a3927b5a0db5554ad0c9dca7c44c264f420 Mon Sep 17 00:00:00 2001 From: smoser-LiL Date: Tue, 8 Nov 2022 22:44:04 +0000 Subject: [PATCH 02/10] Moving files using main --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 034bd5b4..ee47fe55 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # Hands-On Introduction: React -This is the repository for the LinkedIn Learning course Hands-On Introduction: React . The full course is available from [LinkedIn Learning][lil-course-url]. +This is the repository for the LinkedIn Learning course Hands-On Introduction: React. The full course is available from [LinkedIn Learning][lil-course-url]. ![Hands-On Introduction: React ][lil-thumbnail-url] From cddfea7da9aa464216af3cc864a88c93703a84c3 Mon Sep 17 00:00:00 2001 From: pcstevens Date: Wed, 9 Nov 2022 05:34:38 +0000 Subject: [PATCH 03/10] Moving files using main --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ee47fe55..be4a96a1 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,8 @@ # Hands-On Introduction: React This is the repository for the LinkedIn Learning course Hands-On Introduction: React. The full course is available from [LinkedIn Learning][lil-course-url]. -![Hands-On Introduction: React ][lil-thumbnail-url] +![1666989585426](https://user-images.githubusercontent.com/25848438/200747140-294450cb-2309-4fd5-a8de-30feca3cc60f.jpeg)] + When you learn a new framework, you sometimes get to start fresh, from scratch, with plenty of time. Other times, though, you need to dive right in and get things done. This hands-on course helps you quickly get up to speed with React—the popular JavaScript library for building user interfaces—by allowing you to change code directly as you follow along. Instructor Ray Villalobos highlights the aspects of React that set it apart from other JavaScript libraries, including how to approach templating and React Hooks. He then details how to build with React and use it in a web project.

The best way to learn a framework is to use it in practice. That’s why this course is integrated with GitHub Codespaces, an instant cloud developer environment that offers all the functionality of your favorite IDE without the need for any local machine setup. With GitHub Codespaces, you can get hands-on practice from any machine, at any time—all while using a tool that you’ll likely encounter in the workplace. Check out the [Using GitHub Codespaces with this course][gcs-video-url] video to learn how to get started. @@ -31,5 +32,4 @@ Ray Villalobos Check out my other courses on [LinkedIn Learning](https://www.linkedin.com/learning/instructors/ray-villalobos). [lil-course-url]: https://www.linkedin.com/learning/hands-on-introduction-react -[lil-thumbnail-url]: https://media.licdn.com/dms/image/D560DAQFfGNmb1Kxvkw/learning-public-crop_675_1200/0/1666989585426?e=1667955600&v=beta&t=T8baitOBf_RV8nbyKAHNSxqmNsyiYClfQ2oalLHwq20 [gcs-video-url]: https://www.linkedin.com/learning/hands-on-introduction-react/using-github-codespaces-with-this-course From f813af6a54be2470ee22c8932cfb1e2bcd5e9ee2 Mon Sep 17 00:00:00 2001 From: pcstevens Date: Wed, 9 Nov 2022 05:36:34 +0000 Subject: [PATCH 04/10] Moving files using main --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index be4a96a1..5fa4cd7e 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,7 @@ # Hands-On Introduction: React This is the repository for the LinkedIn Learning course Hands-On Introduction: React. The full course is available from [LinkedIn Learning][lil-course-url]. -![1666989585426](https://user-images.githubusercontent.com/25848438/200747140-294450cb-2309-4fd5-a8de-30feca3cc60f.jpeg)] - +![1666989585426](https://user-images.githubusercontent.com/25848438/200747140-294450cb-2309-4fd5-a8de-30feca3cc60f.jpeg) When you learn a new framework, you sometimes get to start fresh, from scratch, with plenty of time. Other times, though, you need to dive right in and get things done. This hands-on course helps you quickly get up to speed with React—the popular JavaScript library for building user interfaces—by allowing you to change code directly as you follow along. Instructor Ray Villalobos highlights the aspects of React that set it apart from other JavaScript libraries, including how to approach templating and React Hooks. He then details how to build with React and use it in a web project.

The best way to learn a framework is to use it in practice. That’s why this course is integrated with GitHub Codespaces, an instant cloud developer environment that offers all the functionality of your favorite IDE without the need for any local machine setup. With GitHub Codespaces, you can get hands-on practice from any machine, at any time—all while using a tool that you’ll likely encounter in the workplace. Check out the [Using GitHub Codespaces with this course][gcs-video-url] video to learn how to get started. From 65e7d778b208d1c3a5768b1a29b15002efc70253 Mon Sep 17 00:00:00 2001 From: planetoftheweb Date: Thu, 29 Dec 2022 01:28:39 +0000 Subject: [PATCH 05/10] Moving files using main --- .devcontainer/devcontainer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index f4479990..5d70dccb 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -7,7 +7,7 @@ // Additional Extensions Here ], "onCreateCommand": "echo PS1='\"$ \"' >> ~/.bashrc", //Set Terminal Prompt to $ - "postStartCommand": "npm start" //Start the app + "postAttachCommand": "git pull --all && npm start" } // DevContainer Reference: https://code.visualstudio.com/docs/remote/devcontainerjson-reference From a21d84ec2c936be6c60eb4c4a9479d5a9e2aeae8 Mon Sep 17 00:00:00 2001 From: domvito55 Date: Thu, 13 Jun 2024 18:37:14 +0000 Subject: [PATCH 06/10] settings --- .vscode/settings.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index af3e6d38..58a4bd28 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,7 +3,7 @@ "editor.cursorBlinking": "solid", "editor.fontFamily": "ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace", "editor.fontLigatures": false, - "editor.fontSize": 22, + "editor.fontSize": 12, "editor.formatOnPaste": true, "editor.formatOnSave": true, "editor.lineNumbers": "on", @@ -16,7 +16,7 @@ "explorer.openEditors.visible": 0, "files.autoSave": "afterDelay", "screencastMode.onlyKeyboardShortcuts": true, - "terminal.integrated.fontSize": 18, + "terminal.integrated.fontSize": 12, "workbench.activityBar.visible": true, "workbench.colorTheme": "Visual Studio Dark", "workbench.fontAliasing": "antialiased", From 23c0d3cbb9aea75666deea7e34d32f4006148d0f Mon Sep 17 00:00:00 2001 From: domvito55 Date: Thu, 13 Jun 2024 22:00:38 +0000 Subject: [PATCH 07/10] Adds Modal --- .vscode/settings.json | 1 - src/App.jsx | 52 +++++++++++++++++++++++++------------ src/components/ListCast.jsx | 5 ++-- src/components/Modals.jsx | 26 +++++++++++++++++++ 4 files changed, 64 insertions(+), 20 deletions(-) create mode 100644 src/components/Modals.jsx diff --git a/.vscode/settings.json b/.vscode/settings.json index 58a4bd28..86c6080d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -17,7 +17,6 @@ "files.autoSave": "afterDelay", "screencastMode.onlyKeyboardShortcuts": true, "terminal.integrated.fontSize": 12, - "workbench.activityBar.visible": true, "workbench.colorTheme": "Visual Studio Dark", "workbench.fontAliasing": "antialiased", "workbench.statusBar.visible": true, diff --git a/src/App.jsx b/src/App.jsx index 00af7800..0b356765 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,23 +1,41 @@ -import React, { Component } from 'react'; -import Welcome from './components/Welcome'; -import Support from './components/Support'; -import ListCast from './components/ListCast'; +import React, { useState } from "react"; +import Welcome from "./components/Welcome"; +import ListCast from "./components/ListCast"; +import Modals from "./components/Modals"; function App() { - const name = 'StarGazers' + const name = "StarGazers"; + const [memberInfo, setMemberInfo] = useState(null); return (
-
-
- StarGazers Group - -

Members of an intergalactic alliance
- paving the way for peace and benevolence among all species. They are known for their enthusiasm for science, for their love of fun, and their dedication to education.

- - -
-
+
+ StarGazers Group + +

+ Members of an intergalactic alliance +
+ paving the way for peace and benevolence among all species. They are + known for their enthusiasm for science, for their love of fun, and + their dedication to education. +

+ { + setMemberInfo(info); + }} + /> + {memberInfo && ( + { + setMemberInfo(null); + }} + /> + )} +
- ) + ); } -export default App +export default App; diff --git a/src/components/ListCast.jsx b/src/components/ListCast.jsx index 3d751efb..e9b533cc 100644 --- a/src/components/ListCast.jsx +++ b/src/components/ListCast.jsx @@ -1,6 +1,7 @@ import { useState, useEffect } from "react"; -export default () => { +//instead of props, I am pessing directly a OBJECT with onChoice key +export default ({onChoice}) => { const [cast, setCast] = useState([]); async function fetchCast() { @@ -21,7 +22,7 @@ export default () => { }}> { cast.map(member => ( - + {onChoice(member)}} key={member.id} data-tooltip={member.name}> {member.name} )) diff --git a/src/components/Modals.jsx b/src/components/Modals.jsx new file mode 100644 index 00000000..73505aa9 --- /dev/null +++ b/src/components/Modals.jsx @@ -0,0 +1,26 @@ +export default ({ member, handleClose }) => { + return ( + +
+ +
+ {member.name} +
+

{member.name}

+

{member.bio}

+
+
+
+ + ); +}; From ee79ecc70e1acb424ce28716084374154b827d1d Mon Sep 17 00:00:00 2001 From: domvito55 Date: Fri, 14 Jun 2024 00:40:07 +0000 Subject: [PATCH 08/10] Something Went Wrong --- src/App.jsx | 78 +++++++++++++++++++++++-------------- src/components/ListCast.jsx | 51 +++++++++++------------- src/components/Nav.jsx | 38 ++++++++++++++++++ 3 files changed, 109 insertions(+), 58 deletions(-) create mode 100644 src/components/Nav.jsx diff --git a/src/App.jsx b/src/App.jsx index 0b356765..e0e62acd 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,41 +1,61 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import Welcome from "./components/Welcome"; import ListCast from "./components/ListCast"; import Modals from "./components/Modals"; +import Nav from "./components/Nav"; function App() { - const name = "StarGazers"; const [memberInfo, setMemberInfo] = useState(null); + const [cast, setCast] = useState([]); + + async function fetchCast() { + const response = await fetch("cast.json"); + setCast(await response.json()); + } + + useEffect(() => { + fetchCast(); + }); + return ( -
-
- StarGazers Group - -

- Members of an intergalactic alliance -
- paving the way for peace and benevolence among all species. They are - known for their enthusiasm for science, for their love of fun, and - their dedication to education. -

- { - setMemberInfo(info); - }} - /> - {memberInfo && ( - { - setMemberInfo(null); + <> +
+
+ ); } export default App; diff --git a/src/components/ListCast.jsx b/src/components/ListCast.jsx index e9b533cc..2c62b51c 100644 --- a/src/components/ListCast.jsx +++ b/src/components/ListCast.jsx @@ -1,32 +1,25 @@ -import { useState, useEffect } from "react"; - //instead of props, I am pessing directly a OBJECT with onChoice key -export default ({onChoice}) => { - const [cast, setCast] = useState([]); - - async function fetchCast() { - const response = await fetch('cast.json'); - setCast(await response.json()); - } - - useEffect(() => { - fetchCast(); - }); - +export default ({ cast, onChoice }) => { return ( -
- { - cast.map(member => ( - {onChoice(member)}} key={member.id} data-tooltip={member.name}> - {member.name} - - )) - } + - ) -} \ No newline at end of file + ); +}; diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx new file mode 100644 index 00000000..b6409856 --- /dev/null +++ b/src/components/Nav.jsx @@ -0,0 +1,38 @@ +export default ({ cast, onChoice }) => { + return ( + + ); +}; From 74bb57890c68dec841c7a3a35fce59a4c63368a3 Mon Sep 17 00:00:00 2001 From: domvito55 Date: Fri, 14 Jun 2024 01:07:51 +0000 Subject: [PATCH 09/10] Fixes the css --- src/components/Modals.jsx | 11 +++++------ src/components/Nav.jsx | 4 ++-- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/Modals.jsx b/src/components/Modals.jsx index 73505aa9..36166080 100644 --- a/src/components/Modals.jsx +++ b/src/components/Modals.jsx @@ -1,14 +1,13 @@ export default ({ member, handleClose }) => { return ( - +
- + >
{
diff --git a/src/components/Nav.css b/src/components/Nav.css new file mode 100644 index 00000000..c445aa8c --- /dev/null +++ b/src/components/Nav.css @@ -0,0 +1,19 @@ +nav ul li, +nav ul li a { + padding-top: 0.5em; + padding-bottom: 0.5em; +} + +nav summary + ul li { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +nav details li a { + font-size: 0.7em; +} + +details summary + ul li a:hover { + color: var(--primary); + font-weight: 700; +} diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx index e615c2dd..4ca75132 100644 --- a/src/components/Nav.jsx +++ b/src/components/Nav.jsx @@ -1,12 +1,12 @@ +import "./Nav.css"; + export default ({ cast, onChoice }) => { return (