Merge branch 'main' into 299_pipi_pronoun_consistency

src/App.tsx

@@ -4,6 +4,7 @@ import Error404 from './pages/Error404';
 import Exercise1 from './pages/Exercise1';
 import Home from './pages/Home';
 import Lesson1 from './pages/Lesson1';
+import Lesson10 from './pages/Lesson10';
 import Lesson2_1 from './pages/Lesson2_1';
 import Lesson2_2 from './pages/Lesson2_2';
 import Lesson3 from './pages/Lesson3';
@@ -26,6 +27,7 @@ function App(): JSX.Element {
           <Route path="/exercise-1" element={<Exercise1 />} />
           <Route path="/lesson-4" element={<Lesson4 />} />
           <Route path="/lesson-5" element={<Lesson5 />} />
+          <Route path="/lesson-10" element={<Lesson10 />} />
           <Route path="*" element={<Error404 />} />
         </Routes>
       </BrowserRouter>

src/components/Sidebar.tsx

@@ -91,6 +91,10 @@ export default function Sidebar(props: sidebarProps): JSX.Element {
       name: '8. References vs pointers',
       link: PageURLs.LESSON_8,
     },
+    {
+      name: '10. Dynamic Memory Allocation',
+      link: PageURLs.LESSON_10,
+    },
   ];
   const exerciseList = [
     {

src/components/Terminal.tsx

@@ -1,10 +1,10 @@
+import { useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { FaRegCopy } from 'react-icons/fa';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import cpp from 'react-syntax-highlighter/dist/esm/languages/hljs/cpp';
 import atomOneLightCustom from '../styles/Terminal/atom-one-light-custom';
 import '../styles/Terminal/Terminal.scss';
-import { useState } from 'react';
 
 export interface TerminalProps {
   code: string;
@@ -24,9 +24,14 @@ export default function Terminal(props: TerminalProps): JSX.Element {
 
   return (
     <div>
-      <div className={alert ? 'copyalert fadeout' : 'hiddenalert'}>
-        <p>Copied to Clipboard</p>
-      </div>
+      {alert ? (
+        <div className={alert ? 'copyalert fadeout' : 'hiddenalert'}>
+          <p>Copied to Clipboard</p>
+        </div>
+      ) : (
+        <></>
+      )}
+
       <div className="terminal">
         <CopyToClipboard
           text={props.code}

src/pages/Home.tsx

@@ -17,10 +17,11 @@ const Home: FC = () => {
             <div id="col-1">
               <h1 id="title">Parcel Pointers</h1>
               <p id="description">
-                Lorem ipsum dolor sit amet, consecteur adipiscing elit, sed do
-                eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut
-                enim ad minim vernian, quis nostrud exercitation ullamco laboris
-                nisi ut aliquip ex ea commodo consequat.
+                Welcome to Parcel Pointers! This learning lab is designed to
+                help you learn everything about pointers and how they are used
+                by following our robot Pipi through a warehouse. By the end of
+                the learning lab, hopefully you should know how and where to use
+                pointers in your own projects!
               </p>
               <button
                 id="start-button"

src/pages/Lesson10.tsx

@@ -0,0 +1,95 @@
+import { FC } from 'react';
+import AppWrapper from '../components/AppWrapper';
+import NavButtons from '../components/NavButtons';
+import Terminal from '../components/Terminal';
+import { HeaderSections } from '../types/globalTypes';
+
+const Lesson10: FC = () => {
+  const code1 = `
+    class Node
+    {
+        int value;
+        Node* next;
+        Node(int val){value = val;}
+    };
+    `;
+
+  const code2 = `
+    Node* newNode = new Node(1); // make new node with value 1
+    cout << newNode->value << endl; // prints 1
+    `;
+
+  const code3 = `
+    vector<Node*> nodes; // vector of node pointers
+    nodes.push_back(newNode); // add node pointer to vector
+    cout << nodes[0]->value; // prints 1
+    `;
+
+  const pointerArrow = '->';
+
+  return (
+    <>
+      <AppWrapper section={HeaderSections.LESSON_10}>
+        <div className="page-wrapper">
+          <h1>Dynamic Memory Allocation</h1>
+          <p>
+            Let’s take a look at another common application of pointers: dynamic
+            memory allocation
+          </p>
+          <p>
+            Dynamic memory allocation is the process of creating new objects on
+            the heap dynamically based on the needs of the application instead
+            of on the stack like normal objects. The difference between stack
+            and heap is out of scope and unimportant for this learning lab, but
+            basically they are just different parts of memory.
+          </p>
+          <p>
+            Why would we want to dynamically create objects instead of creating
+            them normally? This is because we cannot put objects into a data
+            structure like an array or linked list, but we can put pointers to
+            those objects in these data structures. Dynamic memory allocation
+            enables this, especially with a dynamically sized data structure
+            like a vector or linked list.
+          </p>
+          <p>
+            So how do we dynamically allocate objects? In C++ we use the{' '}
+            <span className="code">new</span> keyword. Consider our Node class
+            from the linked list.
+          </p>
+
+          <div className="diagram">
+            <Terminal code={code1} />
+          </div>
+
+          <p>We can dynamically allocate a new Node like this:</p>
+
+          <div className="diagram">
+            <Terminal code={code2} />
+          </div>
+
+          <p>
+            Notice the <span className="code">{pointerArrow}</span> notation -
+            this is syntactic sugar for *(newNode).value. We use the{' '}
+            <span className="code">{pointerArrow}</span> notation when we want
+            to access an object’s members through a pointer.
+          </p>
+
+          <p>Then we can add it to a vector like this:</p>
+
+          <div className="diagram">
+            <Terminal code={code3} />
+          </div>
+
+          <p>
+            Dynamic memory has many applications! We encourage you to try using
+            this in your own applications! Now, you know everything you need to
+            complete the exercises!
+          </p>
+          <NavButtons page={13}></NavButtons>
+        </div>
+      </AppWrapper>
+    </>
+  );
+};
+
+export default Lesson10;

src/styles/CodeDiagram.scss

@@ -53,10 +53,15 @@
   margin: 0.5em;
   padding: 5px 10px;
   width: fit-content;
+
+  &:hover {
+    cursor: pointer;
+  }
 }
 
 .arrow {
   position: relative;
+  width: 50%;
 }
 
 @media screen and (max-width: 1024px) {

src/styles/Terminal/Terminal.scss

@@ -30,11 +30,12 @@
   border-color: black;
   display: flex;
   justify-content: center;
-  left: 40vw;
+  left: 50%;
   padding: 1em;
   position: fixed;
-  right: 40vw;
   top: 7.5vh;
+  transform: translateX(-50%);
+  width: max-content;
 }
 
 @keyframes fadeout {

src/types/globalTypes.ts

@@ -4,7 +4,7 @@
 */
 export enum HeaderSections {
   LANDING_SECTION = 'landingSection',
-  TITLE_SECTION = 'titleSection',
+  TITLE_SECTION = 'Parcel Pointers',
   LEARNING_SECTION = 'learningSection',
   CODE_SECTION = 'codeSection',
   DEMO_SECTION = 'Demo',
@@ -15,6 +15,7 @@ export enum HeaderSections {
   EXERCISE_1 = 'Exercise 1',
   LESSON_4 = 'Lesson 4',
   LESSON_5 = 'Lesson 5',
+  LESSON_10 = 'Lesson 10',
 }
 
 // lessons and exercises may have multiple pages, this is their starting URL
@@ -30,6 +31,8 @@ export enum PageURLs {
   LESSON_6 = '/lesson-6',
   LESSON_7 = '/lesson-7',
   LESSON_8 = '/lesson-8',
+  LESSON_9 = '/lesson-9',
+  LESSON_10 = '/lesson-10',
   EXERCISE_1 = '/exercise-1',
   EXERCISE_2 = '/exercise-2',
   EXERCISE_3 = '/exercise-3',
@@ -49,5 +52,6 @@ export enum PageOrder {
   /*'/lesson-6',
   '/lesson-7',
   '/lesson-8', */
+  '/lesson-10',
   '/exercise-1',
 }

yarn.lock

@@ -7548,4 +7548,4 @@ yaml@^1.10.0:
 
 yargs-parser@^20.2.1, yargs-parser@^20.2.3:
   version "20.2.9"
-  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz"
+  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz"