callbacks-and-events.js

// Callback Functions: passing functions to functions

function processArray(array, func) {
	let resultArray = []
	for(let i = 0; i < array.length; i++) {
		resultArray[i] = func(array[i])
	}
	return resultArray
}

let numbersList = [4, 9, 13, 16, 25]

console.log( processArray(numbersList, Math.sqrt) )
console.log( processArray(numbersList, cubeFunction) )
console.log( processArray(numbersList, function(x) {
		return x * 100
	})
)

function cubeFunction(x) {
	return (x * x * x)
}


// In previous lessons, when we did
window.addEventListener('load', function() {
	// our code
})
// addEventListener is a function that takes two arguments
// the first argument is the event you wish to listen to
// the second argument is the function to call when this
// event happens. That function gets passed an argument 'event'
// when we don't use the argument we can simply ignore it

// in HTML
<button id="myButton">Send</button>

let myButton = document.querySelector('#myButton')
myButton.addEventListener('click', function(event) {
	console.log('button clicked!')
	console.log('event type is', event.type)
})
// or
myButton.addEventListener('click', sayHello)
function sayHello(event) {
	console.log('hello ' + event.type)
}



// DOM Events
console.log('script-Events.js')

window.addEventListener('resize', function() {
    document.querySelector("#demo").innerHTML = window.innerWidth + 'x' + window.innerHeight;
});


let myButton = document.querySelector("div.user-panel.main button");

// Event Listeners
myButton.addEventListener('click', function (event) {
    console.log(event.type)
})

myButton.addEventListener('click', eventHandler)

function eventHandler(event) {
    console.log(event.type)
}

// Also Event Listener (listen for double click event)
myButton.ondblclick = function(event) {
    console.log(event.type)
    // event.target is the element you double clicked on
    if (event.ctrlKey) {
        event.target.remove()
    }
}
// The above way is another way of adding an event listener
// You may use whichever you find cleaner

// Select by ClassName using querySelector
let todoList = document.querySelectorAll('.todo-item')
let groceryList = document.querySelectorAll(".grocery-item")


// Let's make them all listen for mouseover
for(let i=0; i < todoList.length; i++) {
    todoList[i].onclick = function(event) {
        console.log(event.target.innerHTML)
    }
}

// Using forEach rather than a for-loop
groceryList.forEach(function(li) {
    let originalBackgroundColor = li.style.backgroundColor;
    let originalColor = li.style.color;

    li.addEventListener('mouseenter', function(event) {
        li.style.backgroundColor = "red"
        li.style.color = "white"
    })
    li.addEventListener('mouseleave', function(event) {
        li.style.backgroundColor = originalBackgroundColor
        li.style.color = originalColor
    })
    
    li.ondblclick = function(event) {
        event.target.remove()
    }
})


// Listening for any change
let dropDownMenu = document.querySelector('select[name="ice-cream"]').onchange = changeEventHandler

function changeEventHandler(event) {
    let flavor = event.target.value;
    // console.log(typeof falvor)
    // console.log(flavor.length)
    if (flavor) {
        alert('You like ' + flavor + ' ice cream.'); 
    } else {
        alert('Please Select One');
    }
}

// https://www.w3schools.com/charsets/ref_html_utf8.asp
document.querySelector('#input-box').addEventListener('keypress', (event) => {
    document.querySelector('#output-charCode').innerHTML = event.charCode
    let char = String.fromCharCode(event.charCode)
    document.querySelector('#output-char').innerHTML = char
    if (char === 'H') {
        console.log('H pressed inside input-box')
    }

    if (event.charCode >= 65 && event.charCode <= 90) {
        console.log('Capital Letter: ' + char)
    } else if (event.charCode >= 97 && event.charCode <= 122) {
        console.log('small letter: ' + char)
    } else {
        console.log('symbol: ' + char)
    }
})