multi circle exercise

exercise/SvgRectanglePractice/SvgRectangle.tsx → exercise/SvgMultipleCirclesPractice/SvgMultipleCircles.tsx

@@ -1,9 +1,7 @@
 export const SvgRectangle = () => {
   return (
     <svg width={500} height={300}>
-      <text x="50" y="50" fill="black">
-        Draw a rect here!
-      </text>
+      {/* Add some circles here! */}
     </svg>
   );
 };

exercise/SvgTextSolution/index.js → exercise/SvgMultipleCirclesPractice/index.js

@@ -1,6 +1,6 @@
 // File used to render something in codesandbox only
 import ReactDOM from 'react-dom';
-import { SvgText } from './SvgText';
+import { SvgMultipleCircles } from './SvgMultipleCircles';
 
 const rootElement = document.getElementById('root');
-ReactDOM.render(<SvgText />, rootElement);
+ReactDOM.render(<SvgMultipleCircles />, rootElement);

exercise/SvgMultipleCirclesSolution/SvgMultipleCircles.tsx

@@ -0,0 +1,11 @@
+export const SvgRectangle = () => {
+  const numbers = [...Array(10).keys()];
+
+  return (
+    <svg width={500} height={300}>
+      {numbers.map((i) => {
+        return <circle key={i} cx={50 + i * 40} cy={150} r={20} fill="blue" />;
+      })}
+    </svg>
+  );
+};

exercise/SvgLineSolution/index.js → exercise/SvgMultipleCirclesSolution/index.js

@@ -1,6 +1,6 @@
 // File used to render something in codesandbox only
 import ReactDOM from 'react-dom';
-import { SvgLine } from './SvgLine';
+import { SvgMultipleCircles } from './SvgMultipleCircles';
 
 const rootElement = document.getElementById('root');
-ReactDOM.render(<SvgLine />, rootElement);
+ReactDOM.render(<SvgMultipleCircles />, rootElement);

pages/course/svg/main-svg-elements.tsx

@@ -6,7 +6,6 @@ import { CodeSandbox } from '@/component/CodeSandbox';
 import { CodeBlock } from '@/component/UI/CodeBlock';
 import { ExerciseAccordion } from '@/component/ExerciseAccordion';
 import Link from 'next/link';
-import { Badge } from '@/component/UI/badge';
 
 const previousURL = '/course/svg/introduction';
 const currentURL = '/course/svg/main-svg-elements';
@@ -35,12 +34,13 @@ export default function Home() {
         description={
           <>
             <p>
-              In the previous lesson we learnt what SVG is and how to draw a
+              In the previous lesson, we learned about SVG and how to draw a
               circle with it.
             </p>
             <p>
-              We'll need other shapes to make graphs: rectangle, text, segment.
-              Let's see how to make them too.
+              To create comprehensive graphs, we'll also need{' '}
+              <b>other shapes</b> such as rectangles, text, and lines. Let's
+              explore how to create these as well.
             </p>
           </>
         }
@@ -123,10 +123,14 @@ export default function Home() {
 
       <h2>Circle</h2>
       <p>
-        SVG circles are created using the <code>&lt;circle&gt;</code> element,
-        which requires the center coordinates and radius as attributes. The{' '}
-        <code>cx</code> and <code>cy</code> attributes specify the center point,
-        while the <code>r</code> attribute determines the radius of the circle.
+        We talked about them already, but remember that SVG circles are created
+        using the <code>&lt;circle&gt;</code> element, which requires the{' '}
+        <b>center coordinates</b> and <b>radius</b> as attributes.
+      </p>
+      <p>
+        The <code>cx</code> and <code>cy</code> attributes specify the center
+        point, while the <code>r</code> attribute determines the radius of the
+        circle.
       </p>
       <p>
         For example, this code will draw a red circle with a center at (50,50)
@@ -150,7 +154,8 @@ export default function Home() {
         exercises={[
           {
             title: <span>Draw 2 circles</span>,
-            description: <p>Do this and this mate</p>,
+            whyItMatters: <p>Do this and this mate</p>,
+            toDo: <p>Do this</p>,
             practiceSandbox: 'SvgCircle',
             solutionSandbox: 'SvgRectangle',
           },
@@ -181,8 +186,8 @@ export default function Home() {
                 <li>Change the circle position at each iteration</li>
               </ul>
             ),
-            practiceSandbox: 'SvgCircle',
-            solutionSandbox: 'SvgRectangle',
+            practiceSandbox: 'SvgMultipleCirclesPractice',
+            solutionSandbox: 'SvgMultipleCirclesSolution',
           },
         ]}
       />