turtle color matches pen color

apps/learn-javascript.html

@@ -83,7 +83,7 @@ <h1>A JavaScript Playground</h1>
     <!-- Simple Turtle SVG -->
     <svg id="turtle-svg" viewBox="0 0 100 100">
       <!-- Triangle pointing upward by default -->
-      <polygon points="50,15 85,85 15,85" fill="green" />
+      <polygon id="turtle-body" points="50,15 85,85 15,85" fill="green" />
     </svg>
   </div>
 
@@ -92,6 +92,7 @@ <h1>A JavaScript Playground</h1>
     const canvas = document.getElementById('canvas');
     const ctx = canvas.getContext('2d');
     const turtleSVG = document.getElementById('turtle-svg');
+    const turtleBody = document.getElementById('turtle-body'); // Reference to the triangle element
     let turtle = {
       x: canvas.width / 2,
       y: canvas.height / 2,
@@ -125,6 +126,7 @@ <h1>A JavaScript Playground</h1>
       },
       setcolor: function(color) {
         this.color = color;
+        turtleBody.setAttribute("fill", color); // Update the turtle color
       },
       reset: function() {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -133,6 +135,7 @@ <h1>A JavaScript Playground</h1>
         this.angle = 270;  // Reset to facing north (upwards)
         this.penDown = true;
         this.color = '#000';
+        turtleBody.setAttribute("fill", this.color); // Reset the turtle color
         updateTurtlePosition();
       }
     };