Last active
February 23, 2018 11:03
-
-
Save ifkas/b37e5123cc35d0ef8ca2ade5401126e4 to your computer and use it in GitHub Desktop.
Closure binding example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let count = 0; | |
function appleColor(color) { | |
return function(type) { | |
count++; | |
if(count === 1) { | |
document.getElementById('ate').innerHTML += '<div class="message">' + 'I ate ' + count + ' apple. ' + '<br/>' + 'It was ' + type + ' type with shiny bright ' + color + ' color. ' + `<svg id="appleSvg" fill="${color}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50.001" style="enable-background:new 0 0 50 50.001;" xml:space="preserve"> <path d="M26.12,14.488c0.879-1.468,2.27-3.569,4.027-5.585h0.002c1.488-1.711,4.402-3.907,4.402-3.907 c0.438-0.331,0.391-0.792-0.107-1.024l-3.522-1.646c-0.498-0.233-1.175-0.063-1.505,0.376c0,0-2.605,3.737-5.671,11.692 c-9.48-4.288-18.491,1.718-18.491,12.162c0,10.909,8.393,27.48,19.743,22.478c11.954,5.173,19.749-11.568,19.749-22.478 C44.747,16.022,36.647,9.846,26.12,14.488z"/> <path d="M23.997,10.955c0.548-0.046,1.032-0.531,1.076-1.078c0,0,0.352-4.266-2.621-7.242c-2.982-2.977-7.24-2.622-7.24-2.622 c-0.548,0.046-1.032,0.531-1.077,1.078c0,0-0.358,4.268,2.619,7.245C19.729,11.31,23.997,10.955,23.997,10.955z"/> </svg></div>`; | |
} else { | |
document.getElementById('ate').innerHTML += '<div class="message">' + 'I ate ' + count + ' apples. ' + '<br/>' + ' This apple is ' + type + ' type with shiny bright ' + color + ' color. ' + `<svg id="appleSvg" fill="${color}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50.001" style="enable-background:new 0 0 50 50.001;" xml:space="preserve"> <path d="M26.12,14.488c0.879-1.468,2.27-3.569,4.027-5.585h0.002c1.488-1.711,4.402-3.907,4.402-3.907 c0.438-0.331,0.391-0.792-0.107-1.024l-3.522-1.646c-0.498-0.233-1.175-0.063-1.505,0.376c0,0-2.605,3.737-5.671,11.692 c-9.48-4.288-18.491,1.718-18.491,12.162c0,10.909,8.393,27.48,19.743,22.478c11.954,5.173,19.749-11.568,19.749-22.478 C44.747,16.022,36.647,9.846,26.12,14.488z"/> <path d="M23.997,10.955c0.548-0.046,1.032-0.531,1.076-1.078c0,0,0.352-4.266-2.621-7.242c-2.982-2.977-7.24-2.622-7.24-2.622 c-0.548,0.046-1.032,0.531-1.077,1.078c0,0-0.358,4.268,2.619,7.245C19.729,11.31,23.997,10.955,23.997,10.955z"/></svg></div>`; | |
} | |
} | |
} | |
function executeClosure(event) { | |
event.preventDefault(); | |
let type = document.getElementsByTagName("input")[0].value; | |
let value = document.getElementsByClassName("color")[0]; | |
let color = value.options[value.selectedIndex].text; | |
// You execute the closure below | |
appleColor(color)(type); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment