Updates to objects and DOM sessions

Joseph Muller · Joseph Muller · commit 8cb8fe556265 · 2026-03-07T11:55:12.000Z
diff --git a/lectures/objects-loops.md b/lectures/objects-loops.md
@@ -33,7 +33,7 @@ If you learn best by reading, check out chapter 4 of _Eloquent JavaScript_.
 
 [#29 How to use JS arrays](https://youtu.be/K97CmrUFyQY), 10m 49s, Dev Dreamer (Amit), YouTube, 21 Apr 2021.
 
-[#30 How to use JS array methods](https://youtu.be/K97CmrUFyQY), 19m 08s, Dev Dreamer (Amit), YouTube, 30 Apr 2021.
+[#30 How to use JS array methods](https://youtu.be/0m3lBRVSTH8), 19m 08s, Dev Dreamer (Amit), YouTube, 30 Apr 2021.
 
 [Data Structures: Objects and Arrays](https://eloquentjavascript.net/04_data.html), chapter from book _Eloquent JavaScript_, 3rd ed. (2018), Marijn Haverbeke
 
diff --git a/public/sandbox/js/index.css b/public/sandbox/js/index.css
@@ -0,0 +1,16 @@
+body {
+  font-family: sans-serif;
+  font-size: 1.2rem;
+  color: #fdf3e3;
+  background-color: #36565f;
+}
+
+h1,
+h2 {
+  font-family: monospace;
+}
+
+.container {
+  max-width: 48rem;
+  margin: 10vh auto;
+}
diff --git a/public/sandbox/js/index.html b/public/sandbox/js/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8">
+    <title>JS</title>
+    <link rel="stylesheet" href="index.css">
+    <script defer src="index.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <p><em>Open the browser console to see the JS program output!</em></p>
+    </div>
+  </body>
+</html>
diff --git a/public/sandbox/js/index.js b/public/sandbox/js/index.js
diff --git a/workshops/dom/index.md b/workshops/dom/index.md
@@ -9,6 +9,10 @@ create a webpage that displays information of your choosing.
 
 2. Explore the data contained in `eurovisionContestants.js` to see what information you have to work with.
 
+::: tip HINT
+There is a **lot** of data in that array, which means the program might run slowly when you are just getting started. To make it more manageable temporarily, you can shorten the array with the `slice` method.
+:::
+
 3. Write a JavaScript program in `app.js` that uses the data imported in
    `contestants` to populate the webpage `index.html`.
 
