From a4e7d5a4771d51ac01f3b59aff3cd96df5d7c01e Mon Sep 17 00:00:00 2001 From: HeemahMuslad Date: Fri, 26 Jul 2024 18:39:17 +0100 Subject: [PATCH 1/3] update: codeplaygroundpage --- src/App.js | 8 +- src/components/activities/ReadyToCode.jsx | 88 +------------------ .../activities/code-playground/index.jsx | 67 ++++++++++++++ src/pages/code-playground/page.jsx | 12 +++ src/pages/index.jsx | 2 + src/utils/appData.js | 1 + 6 files changed, 90 insertions(+), 88 deletions(-) create mode 100644 src/components/activities/code-playground/index.jsx create mode 100644 src/pages/code-playground/page.jsx diff --git a/src/App.js b/src/App.js index 3c7eeeb..ac913af 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ import { RoboticsPage, GameDevelopment, ContactUsPage, + CodePlaygroundPage, } from "./pages"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ToastContainer } from "react-toastify"; @@ -32,6 +33,7 @@ function App() { } } }, []); + return ( @@ -39,12 +41,10 @@ function App() { } /> } /> } /> - } - /> + } /> } /> } /> + } /> diff --git a/src/components/activities/ReadyToCode.jsx b/src/components/activities/ReadyToCode.jsx index 3eccf1c..256f7a9 100644 --- a/src/components/activities/ReadyToCode.jsx +++ b/src/components/activities/ReadyToCode.jsx @@ -1,90 +1,12 @@ import React, { useState } from "react"; import { Link } from "react-router-dom"; -import Modal from "react-modal"; -import { FaAngleRight, FaCheck, FaExternalLinkAlt } from "react-icons/fa"; +import { FaAngleRight,} from "react-icons/fa"; import { starImage } from "../../assets/images"; -const CodePlayground = ({ isOpen, onClose }) => { - return ( - -
-
- - - - -
-

- Explore Code Playground -

-
-
- - - -

HTML: The Building Blocks of Websites

-
-
- - - -

CSS: Style Your Website Like a Pro

-
-
- - - -

JavaScript: Bring Your Website to Life

-
-
-

Description

-
-

- This Playground allows you to experiment with code without having to - set up your own development environment. You can write HTML code to - structure the content of your webpage, CSS code to style the - appearance of your webpage, and JavaScript code to add interactivity - to your webpage. The playground will then execute your code and - display the results in a preview pane. -

-
- -
-
- - ); -}; - -const ReadyToCode = () => { - const [isLightboxOpen, setIsLightboxOpen] = useState(false); - const openLightbox = () => { - setIsLightboxOpen(true); - }; - const closeLightbox = () => { - setIsLightboxOpen(false); - }; +const ReadyToCode = () => { + return (
{

Click here to explore @@ -117,7 +38,6 @@ const ReadyToCode = () => {
-
); diff --git a/src/components/activities/code-playground/index.jsx b/src/components/activities/code-playground/index.jsx new file mode 100644 index 0000000..a13cf2f --- /dev/null +++ b/src/components/activities/code-playground/index.jsx @@ -0,0 +1,67 @@ +import React from "react"; +import { FaCheck, FaExternalLinkAlt } from "react-icons/fa"; + +const CodePlayground = () => { + return ( +
+
+ + Back + + + + +
+

+ Explore Code Playground +

+
+
+ + + +

HTML: The Building Blocks of Websites

+
+
+ + + +

CSS: Style Your Website Like a Pro

+
+
+ + + +

JavaScript: Bring Your Website to Life

+
+
+

Description

+
+

+ This Playground allows you to experiment with code without having to + set up your own development environment. You can write HTML code to + structure the content of your webpage, CSS code to style the appearance + of your webpage, and JavaScript code to add interactivity to your + webpage. The playground will then execute your code and display the + results in a preview pane. +

+
+ +
+
+ ); +}; + +export default CodePlayground; diff --git a/src/pages/code-playground/page.jsx b/src/pages/code-playground/page.jsx new file mode 100644 index 0000000..2bbc481 --- /dev/null +++ b/src/pages/code-playground/page.jsx @@ -0,0 +1,12 @@ +import React from "react"; +import { GlobalLayout } from "../../components"; +import CodePlayground from "../../components/activities/code-playground"; +const CodePlaygroundPage = () => { + return ( + + + + ); +}; + +export default CodePlaygroundPage; diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 3552cc8..cde1d97 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -5,6 +5,7 @@ import CodingPage from "./activities/coding/page"; import RoboticsPage from "./activities/robotics/page"; import GameDevelopment from "./activities/game-development/page"; import ContactUsPage from "./contact-us/page"; +import CodePlaygroundPage from "./code-playground/page"; export { HomePage, @@ -14,4 +15,5 @@ export { RoboticsPage, GameDevelopment, ContactUsPage, + CodePlaygroundPage }; diff --git a/src/utils/appData.js b/src/utils/appData.js index 126a645..f0fb0ed 100644 --- a/src/utils/appData.js +++ b/src/utils/appData.js @@ -39,6 +39,7 @@ export const navigationMenu = [ title: "Robotics", url: "/activities/robotics", }, + ], }, { From 0026c19395bff5b94ddd34edbbf3b62228c25d73 Mon Sep 17 00:00:00 2001 From: HeemahMuslad Date: Mon, 29 Jul 2024 18:58:21 +0100 Subject: [PATCH 2/3] update: removal of madal from index.js --- src/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 1d96eeb..0d75db3 100644 --- a/src/index.js +++ b/src/index.js @@ -5,13 +5,11 @@ import App from "./App"; import reportWebVitals from "./reportWebVitals"; import { BrowserRouter as Router } from "react-router-dom"; import ReactGA from "react-ga4"; -import Modal from "react-modal"; // Initialize Google Analytics ReactGA.initialize(process.env.REACT_APP_G_TAG_ID); -// Set the app element for react-modal -Modal.setAppElement('#root'); + const root = ReactDOM.createRoot(document.getElementById("root")); From 308d94a96953de72cdd6903f252e3e2983ab2be3 Mon Sep 17 00:00:00 2001 From: HeemahMuslad Date: Mon, 29 Jul 2024 19:36:43 +0100 Subject: [PATCH 3/3] update: removal of usestate on readytocode component --- src/components/activities/ReadyToCode.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/activities/ReadyToCode.jsx b/src/components/activities/ReadyToCode.jsx index 256f7a9..3fc4476 100644 --- a/src/components/activities/ReadyToCode.jsx +++ b/src/components/activities/ReadyToCode.jsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React from "react"; import { Link } from "react-router-dom"; import { FaAngleRight,} from "react-icons/fa"; import { starImage } from "../../assets/images";