Skip to content

Instantly share code, notes, and snippets.

@kmltml
Created November 18, 2016 08:16
Show Gist options
  • Select an option

  • Save kmltml/647aa09f2391b7be1576fe5dafa4ca39 to your computer and use it in GitHub Desktop.

Select an option

Save kmltml/647aa09f2391b7be1576fe5dafa4ca39 to your computer and use it in GitHub Desktop.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>14</title>
<script src="14.js">
</script>
<style>
#name, #surname { border: 1px solid black; }
.measure { width: 500px; height: 100px; border: 1px solid black; }
#obnoxious { width: 200px; height: 200px; background: white; position: fixed; visibility: hidden; }
</style>
</head>
<body>
<h1>14</h1>
<img src="https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-breed-landing-hero.ashx">
<h1>15</h1>
<input>
<h1>16</h1>
<div id="16"></div>
<h1>17</h1>
<div id="17"></div>
<h1>18</h1>
<input id="output" name="" type="text" value=""/>
<button id="random">ROLL</button>
<h1>19</h1>
<div class="measure">Click me</div>
<div id="obnoxious">NIE SKOPIUJESZ</div>
</body>
</html>
document.addEventListener("DOMContentLoaded", () => {
// 14
document.getElementsByTagName("img")[0].addEventListener("click", e => {
alert(e.target.src)
})
//15
document.getElementsByTagName("input")[0].addEventListener("focus", e => {
e.target.style.background = "#888888"
})
document.getElementsByTagName("input")[0].addEventListener("blur", e => {
e.target.style.background = "white"
})
//16
var img = document.createElement("img")
img.src = "https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg"
img.width = img.height = 50
document.getElementById("16").appendChild(img)
//17
var [name, surname] = (prompt("Imie & nazwisko") || "a b").split(" ")
var ndiv = document.createElement("div")
var sdiv = document.createElement("sdiv")
ndiv.id = "name"
sdiv.id = "surname"
ndiv.textContent = name
sdiv.textContent = surname
ndiv.appendChild(sdiv)
document.getElementById("17").appendChild(ndiv)
document.getElementById("17").addEventListener("click", e => {
switch(e.target.id) {
case "name":
alert("Twoje imie to: "+name)
break
case "surname":
alert("Twoje nazwisko to: "+surname)
break
}
}, false)
//18
document.getElementById("random").addEventListener("click", () => {
var i = 65 + ((25 * Math.random()) | 0)
document.getElementById("output").value = String.fromCharCode(i)
})
//19
document.addEventListener("click", e => {
if(e.target.classList.contains("measure")) {
var rect = e.target.getBoundingClientRect()
e.target.textContent = rect.width+"x"+rect.height
}
})
//20
document.cookies = "browser="+navigator.userAgent
//21
document.addEventListener("click", e => {
if(e.which == 3) {
var div = document.getElementById("obnoxious")
div.style.visibility = "visible"
div.style.left = e.clientX + "px"
div.style.top = e.clientY + "px"
setTimeout(() => {div.style.visibility = "hidden"}, 5000)
e.preventDefault()
}
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment