reorganizing
This commit is contained in:
brightboost
Executable
+11
@@ -0,0 +1,11 @@
|
||||
<html>
|
||||
<body>
|
||||
<h1 style="color:pink;">Just an example</h1>
|
||||
<div id="one" class="example">Hi!</div>
|
||||
<div id="two" class="example">Hi!</div>
|
||||
<div id="three" class="something">Hi!</div>
|
||||
</body>
|
||||
<script>
|
||||
console.log(document.getElementById("two"));
|
||||
</script>
|
||||
</html>
|
||||
Executable
+26
@@ -0,0 +1,26 @@
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
function changeAttr(){
|
||||
let el = document.getElementById("shape");
|
||||
el.setAttribute("style", "background-color:red;border:1px solid black");
|
||||
el.setAttribute("id", "new");
|
||||
el.setAttribute("class", "circle");
|
||||
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: yellow;
|
||||
}
|
||||
.circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
<div id="shape" class="square"></div>
|
||||
|
||||
<button onclick="changeAttr()">Change attributes...</button>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+27
@@ -0,0 +1,27 @@
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
function disappear(){
|
||||
document.getElementById("shape").classList.add("hide");
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.square {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.square.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<div id="shape" class="square blue"></div>
|
||||
|
||||
<button onclick="disappear()">Disappear!</button>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+23
@@ -0,0 +1,23 @@
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
function change(){
|
||||
document.getElementById("shape").classList.remove("blue");
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.square {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.square.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<div id="shape" class="square blue"></div>
|
||||
|
||||
<button onclick="change()">Change!</button>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+23
@@ -0,0 +1,23 @@
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
function changeVisibility(){
|
||||
document.getElementById("shape").classList.toggle("hide");
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.square {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div id="shape" class="square"></div>
|
||||
|
||||
<button onclick="changeVisibility()">Magic!</button>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+23
@@ -0,0 +1,23 @@
|
||||
<!-- <html>
|
||||
<body>
|
||||
<div id="one" onclick="alert('Auch! Stop it!')">Don't click here!</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
function stop(){
|
||||
alert("Auch! Stop it!");
|
||||
}
|
||||
</script>
|
||||
<div id="one" onclick="stop()">Don't click here!</div>
|
||||
</body>
|
||||
</html> -->
|
||||
|
||||
<html>
|
||||
<body>
|
||||
<div id="one">Don't click here!</div>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+27
@@ -0,0 +1,27 @@
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
function rainbowify(){
|
||||
let divs = document.getElementsByTagName("div");
|
||||
for(let i = 0; i < divs.length; i++) {
|
||||
divs[i].style.backgroundColor = divs[i].id;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
div {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<div id="red"></div>
|
||||
<div id="orange"></div>
|
||||
<div id="yellow"></div>
|
||||
<div id="green"></div>
|
||||
<div id="blue"></div>
|
||||
<div id="indigo"></div>
|
||||
<div id="violet"></div>
|
||||
<button onclick="rainbowify()">Make me a rainbow</button>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+33
@@ -0,0 +1,33 @@
|
||||
<html>
|
||||
<body>
|
||||
<style>
|
||||
div {
|
||||
border: 1px solid black;
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
<div id="message">Bubbling events</div>
|
||||
<div id="output">
|
||||
1
|
||||
<div>
|
||||
2
|
||||
<div>
|
||||
3
|
||||
<div>
|
||||
4
|
||||
<div>5</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function bup() {
|
||||
console.log(this.innerText);
|
||||
}
|
||||
let divs = document.getElementsByTagName("div");
|
||||
for (let i = 0; i < divs.length; i++) {
|
||||
divs[i].addEventListener("click", bup);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.getElementById("square").addEventListener("click", changeColor);
|
||||
}
|
||||
function changeColor(){
|
||||
let red = Math.floor(Math.random() * 256);
|
||||
let green = Math.floor(Math.random() * 256);
|
||||
let blue = Math.floor(Math.random() * 256);
|
||||
this.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
|
||||
}
|
||||
</script>
|
||||
<div id="square" style="width:100px;height:100px;background-color:grey;">Click for magic</div>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+12
@@ -0,0 +1,12 @@
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
function addRandomNumber(){
|
||||
let el = document.createElement("p");
|
||||
el.innerText = Math.floor(Math.random() * 100);
|
||||
document.body.appendChild(el);
|
||||
}
|
||||
</script>
|
||||
<button onclick="addRandomNumber()">Add a number</button>
|
||||
</body>
|
||||
</html>
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
<html>
|
||||
<body>
|
||||
<h1>Welcome page</h1>
|
||||
<p id="greeting">
|
||||
Hi!
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+10
@@ -0,0 +1,10 @@
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
function reveal(el){
|
||||
console.log(el.parentElement);
|
||||
}
|
||||
</script>
|
||||
<button onclick="reveal(this)">Click here!</button>
|
||||
</body>
|
||||
</html>
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
<html>
|
||||
<body>
|
||||
<script>
|
||||
function toggleDisplay(){
|
||||
let p = document.getElementById("magic");
|
||||
if(p.style.display === "none") {
|
||||
p.style.display = "block";
|
||||
} else {
|
||||
p.style.display = "none";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<p id="magic">I might disappear and appear.</p>
|
||||
<button onclick="toggleDisplay()">Magic!</button>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+19
@@ -0,0 +1,19 @@
|
||||
<html>
|
||||
<body>
|
||||
<h1>Let's find the treasure</h1>
|
||||
<div id="forest">
|
||||
<div id="tree1">
|
||||
<div id="squirrel"></div>
|
||||
<div id="flower"></div>
|
||||
</div>
|
||||
<div id="tree2">
|
||||
<div id="shrubbery">
|
||||
<div id="treasure"></div>
|
||||
</div>
|
||||
<div id="mushroom">
|
||||
<div id="bug"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user