5) Using the methods of the slides #14 for creating user-defined objects, take the application from question 3 or question 4 (your choice)and convert it into object class-form with a constructor and a method in a js file. For example,for question 3,the constructor should accept the outer flex container ( which will contain the three side by side inner div elements). The constructor should also access the array of div elements and alias a click event via the addEventListener function. The function should be placed in the method portion of the class object.

The following are all of the files involved in question 4 that need to be modified:

body { font-family: Helvetica, sans-serif; }

div { border-radius: 5px; padding: 10px; margin: 10px; /*height :200px;*/ }

#outer { background-color: thistle; height:200px; }

#outer.selected { background-color: hotpink; }

#inner { background-color: lavender; height:100px; }

#inner.selected { background-color: yellow; }

#first{ height: 575 px; width: 550 px; background-color: red; }

#second{ height: 525 px; width: 500 px; background-color: blue; }

#third{ height: 475 px; width: 450 px; background-color: green; }

#fourth{ height: 425 px; width: 400 px; background-color: gray; }

#fifth{ height: 375 px; width: 350 px; background-color: pink; }

#sixth{ height: 325 px; width: 300 px; background-color: orange; }

#seventh{ height: 275 px; width: 250 px; background-color: purple; }

#eighth{ height: 225 px; width: 200 px; background-color: yellow; }

#ninth{ height: 175 px; width: 150 px; background-color: white; }

#tenth{ height: 125 px; width: 100 px; background-color: grey; }

function onOuterClick() { outer.classList.add('selected'); span1=document.querySelector('span'); span1.textContent ='Outer clicked!'; }

function onInnerClick() { inner.classList.add('selected'); span1=document.querySelector('span'); span1.textContent ='Inner clicked!';

spanx1=document.querySelector(' #spanx'); spanx1.textContent ='Inner clicked!';

}

function onResetClick() { inner.classList.remove('selected'); outer.classList.remove('selected'); span1=document.querySelector('span'); span1.textContent ='reserve1';

spanx1=document.querySelector(' #spanx'); spanx1.textContent ='reserve2';

}

const outer = document.querySelector('#outer'); const inner = document.querySelector('#inner'); outer.addEventListener('click', onOuterClick); inner.addEventListener('click', onInnerClick);

const reset = document.querySelector('button'); reset.addEventListener('click', onResetClick);

function onClick(){ console.log('Clicked'); console.log(this); randomize(); }

function randomize(){ document.getElementById('first').style.backgroundColor= randomColors(); document.getElementById('second').style.backgroundColor= randomColors(); document.getElementById('third').style.backgroundColor= randomColors(); document.getElementById('fourth').style.backgroundColor= randomColors(); document.getElementById('fifth').style.backgroundColor= randomColors(); document.getElementById('sixth').style.backgroundColor= randomColors(); document.getElementById('seventh').style.backgroundColor= randomColors(); document.getElementById('eighth').style.backgroundColor= randomColors(); document.getElementById('ninth').style.backgroundColor= randomColors(); document.getElementById('tenth').style.backgroundColor= randomColors(); }

function getRandomColors() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i

function randomColors() { $("#colorpad").css("background-color", getRandomColor()); }