@@ -40,8 +40,8 @@
         flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
         background 0.2s;
       font-size: 20px;
-      background-size:cover;
-      background-position:center;
+      background-size: cover;
+      background-position: center;
       flex: 1;
       justify-content: center;
       align-items: center;
@@ -56,20 +56,22 @@
     .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
     .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
 
-    /*  Flex Items*/
+    /*  Flex Items */
     .panel > * {
       margin:0;
       width: 100%;
       transition:transform 0.5s;
-      border: 1px solid red;
+      /* border: 1px solid red; */
       flex: 1 0 auto;
       display: flex;
       justify-content: center;
       align-items: center;
     }
 
     .panel > *:first-child { transform: translateY(-100%); }
+    .panel.open-active > *:first-child { transform: translateY(0) }
     .panel > *:last-child { transform: translateY(100%); }
+    .panel.open-active > *:last-child { transform: translateY(0) }
 
     .panel p {
       text-transform: uppercase;
@@ -82,7 +84,8 @@
     }
 
     .panel.open {
-      font-size:40px;
+      font-size: 40px;
+      flex: 5;
     }
 
     .cta {
@@ -122,7 +125,21 @@
   </div>
 
   <script>
+    const panels = document.querySelectorAll('.panel')
 
+    function toggleOpen() {
+      this.classList.toggle('open')
+    }
+
+    function toggleActive(e) {
+      console.log(e.propertyName)
+      if (e.propertyName.includes('flex')) {
+        this.classList.toggle('open-active')
+      }
+    }
+
+    panels.forEach(panel => panel.addEventListener('click', toggleOpen))
+    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive))
   </script>
 
 
 
@@ -7,15 +7,28 @@
 <body>
 
   <script>
-    // start with strings, numbers and booleans
+    // start with strings, numbers and booleans 
+    let age = 100
+    let age2 = age
+    console.log(age, age2)
+    age = 200
+    console.log(age, age2)
+
+    let name = "Jona"
+    let name2 = name
+    console.log(name, name2)
+    name = "Joni"
+    console.log(name, name2)
+
 
     // Let's say we have an array
     const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
-
     // and we want to make a copy of it.
+    const team = players;
+    console.log(players, team)
 
     // You might think we can just do something like this:
-
+    // team[3] = 'Lux'
     // however what happens when we update that array?
 
     // now here is the problem!
@@ -25,22 +38,42 @@
     // Why? It's because that is an array reference, not an array copy. They both point to the same array!
 
     // So, how do we fix this? We take a copy instead!
-
+    const team2 = players.slice()
+    team2[3] = 'Bert'
+    console.log(`team2: ${team2}`)
     // one day
 
     // or create a new array and concat the old one in
 
     // or use the new ES6 Spread
+    const team4 = [...players]
+    team4[2] = 'Shaun'
+    console.log(`team4: ${team4}`)
+
+    const team5 = Array.from(players)
+    team5[0] = null
+    console.log(`team5: ${team5}`)
+
+    const team6 = players.map(player => player)
 
     // now when we update it, the original one isn't changed
 
     // The same thing goes for objects, let's say we have a person object
 
     // with Objects
 
-    // and think we make a copy:
+    const person = {
+      name: 'Jonathan',
+      age: 243
+    }
 
+    // and think we make a copy:
+    const badCopyPerson = person
     // how do we take a copy instead?
+    const wellCopiedPerson = Object.assign({}, person, {age: 34, number: 26})
+    console.log(wellCopiedPerson)
+
+    const simpleCopy = Object.assign({}, person)
 
     // We will hopefully soon see the object ...spread