fe_Week3

Mouse trails

live version

<div class="trail"></div>
<style>
  .trail { /* className for the trail elements */
    position: absolute;
    height: 10px; width: 10px;
    border-radius: 50%;
    background: teal;
  }
  body {
    height: 300px;
  }
</style>

<script>
  const trail = document.querySelector('.trail')
  document.body.style.cursor = "none";
  document.addEventListener('mousemove', e => {
    trail.style.transform = `translate(${e.clientX - 12}px, ${e.clientY - 12}px)`
  })
</script>

Handling Events :: Eloquent JavaScript. (n.d.). Retrieved May 26, 2020, from https://eloquentjavascript.net/15_event.html#i_NOgRH0Y9st

Map(), Filter(), Reduce()

.map()

Map is an object method that used to iterate over every value of an object. The condition in the .map() method returns booleans and creates a new (object)array. This method is used for modifying data in an array.

const numbers = [2, 4, 8, 10];
const halves = numbers.map(indexValue => indexValue / 2);

console.log(halves)
// [1, 2, 4, 5]

filter()

The filter method is used to conditionally modifying data in an array. When the conditions are met, the value is inserted in the return array. The returned array will have the same length as the original ones. Values that haven't met the conditions are replaced with undefined.

const words = ["spray", "limit", "elite", "exuberant", "destruction", "present"];

const longWords = words.filter(word => word.length > 6);
//["exuberant", "destruction", "present"]

Reduce