john-smilga · saefbataineh · Dec 5, 2023 · Dec 6, 2023 · Dec 6, 2023 · Dec 6, 2023
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+/tutorial
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,12 @@
+{
+    "cSpell.words": [
+        "amjad",
+        "Saif",
+        "اشكال",
+        "العبد",
+        "الفنكشن",
+        "الواحد",
+        "تعدد",
+        "مدير"
+    ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "^5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -1,21 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +22,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>My App</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +38,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/public/polymorphism.js b/public/polymorphism.js
@@ -0,0 +1,23 @@
+class person {
+  work() {}
+}
+
+class employee extends person {
+  work() {
+    console.log("انت عبد")
+  }
+}
+class manager extends person {
+  work() {
+    console.log("انت مدير العبد")
+  }
+}
+
+let saif = new employee()
+let amjad = new manager()
+
+amjad.work()
+// تعدد اشكال الفنكشن الواحد
+
+//What is abstraction in programming?
+// Mean as a programmer I hide all the complex code and use the importance code to reduce complexity
diff --git a/src/App.js b/src/App.js
@@ -1,8 +1,12 @@
-import React from 'react'
+import React from "react"
+import Setup from "./Course-Projects/Menu"
+// import Setup from "./tutorial/3-conditional-rendering/setup/3-show-hide"
 function App() {
   return (
-    <div className='container'>
-      <h2>Advanced Tutorial</h2>
+    <div className="container">
+      {/* <h2>Advanced Tutorial</h2> */}
+      <Setup />
+      {/* <Final /> */}
     </div>
   )
 }

diff --git a/src/Course-Projects/1-birthday-buddy.js b/src/Course-Projects/1-birthday-buddy.js
@@ -0,0 +1,43 @@
+import React, { useState } from "react"
+import { information } from "./data"
+
+const BirthdayBuddy = () => {
+  const [currentData, setData] = useState(information)
+  const clearArticle = (id) => {
+    setData((currentBirthday) => {
+      let newBirthday = currentBirthday.filter((person) => person.id !== id)
+      return newBirthday
+    })
+  }
+  return (
+    <>
+      <h3>{currentData.length} Birthdays Today</h3>
+      <section className="container">
+        <main>
+          {currentData.map((prevData) => {
+            const { name, id, age, image } = prevData
+            return (
+              <article className="person" key={id}>
+                <img src={image} alt="" style={{ width: 50 }} />
+                <br />
+                <div style={{ width: "55%" }}>
+                  <h4>{name}</h4>
+                  <p>{age}</p>
+                </div>
+                <br />
+                <button className="btn" onClick={() => clearArticle(id)}>
+                  Clear
+                </button>
+              </article>
+            )
+          })}
+        </main>
+      </section>
+      <button className="btn" onClick={() => setData([])}>
+        clear all
+      </button>
+    </>
+  )
+}
+
+export default BirthdayBuddy
diff --git a/src/Course-Projects/Menu.js b/src/Course-Projects/Menu.js
@@ -0,0 +1,63 @@
+import React, { Component, useEffect, useState } from "react"
+import { menuData } from "./MenuData"
+
+const Menu = () => {
+  const [menu, setMenu] = useState(menuData)
+  const styles = {
+    backgroundColor: "#f59e0b",
+    color: "#fff",
+    padding: "0.25rem 0.5rem",
+    letterSpacing: "1px",
+    borderRadius: ".25rem",
+    alignSelf: "flex-start",
+    marginLeft: 5,
+  }
+  const handleClick = (parm) => {
+    setMenu((prevState) => {
+      if (parm === "all") return menuData
+      return menuData.filter((item) => item.category === parm)
+    })
+  }
+  return (
+    <>
+      <main>
+        <section>
+          <h1>Our Menu</h1>
+          <div className="" style={{ display: "block" }}>
+            <button onClick={() => handleClick("all")} style={styles}>
+              all
+            </button>
+            <button onClick={() => handleClick("breakfast")} style={styles}>
+              breakfast
+            </button>
+            <button style={styles} onClick={() => handleClick("lunch")}>
+              lunch
+            </button>
+            <button style={styles} onClick={() => handleClick("shakes")}>
+              shakes
+            </button>
+          </div>
+
+          <div className="tours">
+            <article className="single-tour">
+              {menu.map((item) => {
+                const { id, title, price, img, desc } = item
+                return (
+                  <div className="card" key={id}>
+                    <img className="imageTour" src={img} alt="" />
+                    <div className="tour-info" style={{ textAlign: "Left" }}>
+                      <h5>{title}</h5>
+                      <p>{desc}</p>
+                    </div>
+                    <span style={styles}>{price}</span>
+                  </div>
+                )
+              })}
+            </article>
+          </div>
+        </section>
+      </main>
+    </>
+  )
+}
+export default Menu
diff --git a/src/Course-Projects/MenuData.js b/src/Course-Projects/MenuData.js
@@ -0,0 +1,74 @@
+export const menuData = [
+  {
+    id: 1,
+    title: "buttermilk pancakes",
+    category: "breakfast",
+    price: 15.99,
+    img: "https://react-vite-projects-5-menu.netlify.app/images/item-1.jpeg",
+    desc: "I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed ",
+  },
+  {
+    id: 2,
+    title: "diner double",
+    category: "lunch",
+    price: 13.99,
+    img: "https://react-vite-projects-5-menu.netlify.app/images/item-2.jpeg",
+    desc: "vaporware iPhone mumblecore selvage raw denim slow-carb leggings gochujang helvetica man braid jianbing. Marfa thundercats ",
+  },
+  {
+    id: 3,
+    title: "godzilla milkshake",
+    category: "shakes",
+    price: 6.99,
+    img: "https://react-vite-projects-5-menu.netlify.app/images/item-3.jpeg",
+    desc: "ombucha chillwave fanny pack 3 wolf moon street art photo booth before they sold out organic viral.",
+  },
+  {
+    id: 4,
+    title: "country delight",
+    category: "breakfast",
+    price: 20.99,
+    img: "https://react-vite-projects-5-menu.netlify.app/images/item-4.jpeg",
+    desc: "Shabby chic keffiyeh neutra snackwave pork belly shoreditch. Prism austin mlkshk truffaut, ",
+  },
+  {
+    id: 5,
+    title: "egg attack",
+    category: "lunch",
+    price: 22.99,
+    img: "https://react-vite-projects-5-menu.netlify.app/images/item-5.jpeg",
+    desc: "franzen vegan pabst bicycle rights kickstarter pinterest meditation farm-to-table 90's pop-up ",
+  },
+  {
+    id: 6,
+    title: "oreo dream",
+    category: "shakes",
+    price: 18.99,
+    img: "https://react-vite-projects-5-menu.netlify.app/images/item-6.jpeg",
+    desc: "Portland chicharrones ethical edison bulb, palo santo craft beer chia heirloom iPhone everyday",
+  },
+  {
+    id: 7,
+    title: "bacon overflow",
+    category: "breakfast",
+    price: 8.99,
+    img: "https://react-vite-projects-5-menu.netlify.app/images/item-7.jpeg",
+    desc: "carry jianbing normcore freegan. Viral single-origin coffee live-edge, pork belly cloud bread iceland put a bird ",
+  },
+  {
+    id: 8,
+    title: "american classic",
+    category: "lunch",
+    price: 12.99,
+    img: "https://react-vite-projects-5-menu.netlify.app/images/item-8.jpeg",
+    desc: "on it tumblr kickstarter thundercats migas everyday carry squid palo santo leggings. Food truck truffaut  ",
+  },
+  {
+    id: 9,
+    title: "quarantine buddy",
+    category: "shakes",
+    price: 16.99,
+    img: "https://react-vite-projects-5-menu.netlify.app/images/item-9.jpeg",
+    desc: "skateboard fam synth authentic semiotics. Live-edge lyft af, edison bulb yuccie crucifix microdosing.",
+  },
+]
diff --git a/src/Course-Projects/ReadMore.js b/src/Course-Projects/ReadMore.js
@@ -0,0 +1,30 @@
+import React, { useState } from "react"
+
+const ReadMore = ({ text, maxLength }) => {
+  const [isTruncated, setIsTruncated] = useState(true)
+
+  // Toggle between truncated and full text
+  const toggleReadMore = () => {
+    setIsTruncated(!isTruncated)
+  }
+
+  // Display truncated or full text based on state
+  const displayText = isTruncated ? text.slice(0, maxLength) : text
+
+  return (
+    <p>
+      {displayText}
+      {text.length > maxLength && (
+        <button
+          className="info-btn"
+          style={{ color: "#10b981", fontWeight: 600, marginLeft: 3 }}
+          onClick={toggleReadMore}
+        >
+          {isTruncated ? "...Read more" : "Show less"}
+        </button>
+      )}
+    </p>
+  )
+}
+
+export default ReadMore