020824

README.md

@@ -1,6 +1,6 @@
 ## Personal Information:
 
-Full Name: Enter Your Full Name
+Full Name: Dennis Hernandez (I did  this already in main branch before cloning so i am putting this here so that there is something to push the nuew bracnh to the remote repository)
 
 ## Getting Started
 First, fork this repository and clone it to your local machine.
@@ -43,4 +43,4 @@ To learn more about React.js, take a look at the [React Documentation](https://l
 
 ## What to Submit?
 
-Submit all changes made to files in `src/pages/qcomps` in Canvas class activity for the day.
+Submit all changes made to files in `src/pages/qcomps` in Canvas class activity for the day.

package.json

@@ -9,9 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "eslint-plugin-react": "^7.33.2",
+    "next": "13.5.4",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "13.5.4"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "eslint": "^8",

src/pages/components/profile.js

@@ -1,6 +1,8 @@
+import Gallery from "./gallery"
+
 export default function Profile() {
-  return (<img
+  return <img
       src="https://i.imgur.com/MK3eW3Am.jpg"
       alt="Katherine Johnson"
-    />)
+    />
 }

src/pages/components/profile_props.js

@@ -1,26 +1,26 @@
-function Avatar({person, size=100}) {
+function Avatar( { person, size = 100 } ) {
   return (
     <img
       className="avatar"
-      src={'https://i.imgur.com/' + person.imageId + 's.jpg'}
-      alt={person.name}
-      width={size}
-      height={size}
+      src={ 'https://i.imgur.com/' + person.imageId + 's.jpg' }
+      alt={ person.name }
+      width={ size }
+      height={ size }
     />
   );
 }
 
 export default function Profile() {
   return (
     <div>
-        <Avatar
-            person={{ name: 'Woon sen', imageId: 'OKS67lh'}}
-            size={200} />
-        <Avatar
-            person={{ name: 'Ron Ayah', imageId: 'YfeOqp2'}}
-            size={150} />
-        <Avatar
-            person={{ name: 'Pani Dom', imageId: '1bX5QH6'}} />
+      <Avatar
+        person={ { name: 'Woon sen', imageId: 'OKS67lh' } }
+        size={ 200 } />
+      <Avatar
+        person={ { name: 'Ron Ayah', imageId: 'YfeOqp2' } }
+        size={ 150 } />
+      <Avatar
+        person={ { name: 'Pani Dom', imageId: '1bX5QH6' } } />
     </div>
   );
 }

src/pages/components/square.js

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import styles from '@/styles/Home.module.css';
 function Square({children}) {
   return (

src/pages/index.js

@@ -1,13 +1,16 @@
-// import Head from 'next/head'
-// import Image from 'next/image'
-// import { Inter } from 'next/font/google'
-import styles from '@/styles/Home.module.css'
-import Profile from './components/profile'
+import React from 'react'; 
+import styles from '@/styles/Home.module.css';
+import MyComp from './qcomps/firstcomp';
+import Bio from './qcomps/bios';
+import TodoList from './qcomps/todos';
+import Profile from './components/profile_props';
+import Gallery from './qcomps/gallery_props';
+import PackingList from './qcomps/props_item';
 
 export default function Home() {
   return (
     <div className={styles.main}>
-        <Profile />
+      <PackingList />
     </div>
-  )
+  );
 }

src/pages/qcomps/bios.js

@@ -1,12 +1,14 @@
 export default function Bio() {
   return (
-    <div class="intro">
-      <h1>Welcome to my website!</h1>
-    </div>
-    <p class="summary">
-      You can find my thoughts here.
-      <br/><br/>
-      <b>And <i>pictures</i></b> of people!
-    </p>
+    <>
+      <div class="intro">
+        <h1>Welcome to my website!</h1>
+      </div>
+      <p class="summary">
+        You can find my thoughts here.
+        <br/><br/>
+        <b>And <i>pictures</i></b> of people!
+      </p>
+    </>
   );
 }

src/pages/qcomps/firstcomp.js

@@ -1 +1,15 @@
-function MyComp() {}
+
+
+
+export default function MyComp() {
+    return(
+        <div>
+            <h1> My first component </h1>
+            <ol>
+                <li> Components: UI Building Block</li>
+                <li> Defining a Component </li>
+                <li> Using a component </li>
+            </ol>
+        </div>
+    );
+}

src/pages/qcomps/gallery_props.js

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 export default function Gallery() {
   return (
     <div>
@@ -6,10 +7,10 @@ export default function Gallery() {
         <h2>Maria Skłodowska-Curie</h2>
         <img
           className="avatar"
-          src='https://i.imgur.com/szV5sdGs.jpg'
+          src="https://i.imgur.com/szV5sdGs.jpg"
           alt="Maria Skłodowska-Curie"
-          width={70}
-          height={70}
+          width={ 70 }
+          height={ 70 }
         />
         <ul>
           <li>
@@ -18,7 +19,8 @@ export default function Gallery() {
           </li>
           <li>
             <b>Awards: 4 </b>
-            (Nobel Prize in Physics, Nobel Prize in Chemistry, Davy Medal, Matteucci Medal)
+            (Nobel Prize in Physics, Nobel Prize in Chemistry, Davy Medal,
+            Matteucci Medal)
           </li>
           <li>
             <b>Discovered: </b>
@@ -30,10 +32,10 @@ export default function Gallery() {
         <h2>Katsuko Saruhashi</h2>
         <img
           className="avatar"
-          src='https://i.imgur.com/YfeOqp2s.jpg'
+          src="https://i.imgur.com/YfeOqp2s.jpg"
           alt="Katsuko Saruhashi"
-          width={70}
-          height={70}
+          width={ 70 }
+          height={ 70 }
         />
         <ul>
           <li>
@@ -45,8 +47,7 @@ export default function Gallery() {
             (Miyake Prize for geochemistry, Tanaka Prize)
           </li>
           <li>
-            <b>Discovered: </b>
-            a method for measuring carbon dioxide in seawater
+            <b>Discovered: </b>a method for measuring carbon dioxide in seawater
           </li>
         </ul>
       </section>

src/pages/qcomps/profile_mistake.js

@@ -1,4 +1,6 @@
-export default function profile() {
-    return
-        <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />;
+
+export default function Profile() {
+    return(
+        <img src="https://i.imgur.com/jA8hHMpm.jpg" alt="Katsuko Saruhashi" />
+        );
 }

src/pages/qcomps/props_item.js

@@ -1,8 +1,9 @@
 function Item({ name, isPacked }) {
-  if (isPacked) {
-    return <li className="item">{name} ✔</li>;
-  }
-  return <li className="item"> {name} </li>
+  return (
+    <li className="item">
+      { isPacked ? <s>{name}</s> : name } { isPacked ? "✔" : "" }
+    </li>
+  );
 }
 
 export default function PackingList() {

src/pages/qcomps/todos.js

@@ -1,21 +1,25 @@
-const baseUrl = 'https://i.imgur.com/';
-const person = {
-  name: 'Gregorio Y. Zara',
-  imageId: '7vQD0fP',
-  imageSize: 's',
-  theme: {
-    backgroundColor: 'black',
-    color: 'pink'
-  }
-};
+/* eslint-disable react/no-unescaped-entities */
+/* eslint-disable @next/next/no-img-element */
 
 export default function TodoList() {
+
+  const baseUrl = 'https://i.imgur.com/';
+  const person = {
+    name: 'Gregorio Y. Zara',
+    imageId: '7vQD0fP',
+    imageSize: 's',
+    theme: {
+      backgroundColor: 'black',
+      color: 'pink'
+    }
+  };
+
   return (
     <div style={person.theme}>
-      <h1>Person Name's Todos</h1>
+      <h1>{person.name}'s Todos</h1>
       <img className="avatar"
-      src="baseURL + imageID + imageSize + .jpg"
-      alt="Person's Name"
+      src={baseUrl + person.imageId + person.imageSize + `.jpg`}
+      alt={person.name}
       />
     </div>
   );