fix conflicts
This commit is contained in:
@@ -0,0 +1,23 @@
|
||||
<!doctype html>
|
||||
<html><head><title>Sample Webpage</title></head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<div>
|
||||
<ul >
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>blue</div>
|
||||
<div>green</div>
|
||||
<div>yellow</div>
|
||||
<div>Purple</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
console.dir(document)
|
||||
document.body.children
|
||||
document.body.children.children
|
||||
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Complete JavaScript Course</title>
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="message">Complete JavaScript Course</div>
|
||||
<div>
|
||||
<input type="text" id="addItem">
|
||||
<input type="button" id="addNew" value="Add to List"> </div>
|
||||
<div id="output">
|
||||
<h1>Shopping List</h1>
|
||||
<ol id="sList"> </ol>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById("addNew").onclick = function () {
|
||||
addOne();
|
||||
}
|
||||
function addOne() {
|
||||
var a = document.getElementById("addItem").value;
|
||||
var li = document.createElement("li");
|
||||
li.appendChild(document.createTextNode(a));
|
||||
document.getElementById("sList").appendChild(li);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Canvas HTML5</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="one">Hello World</div>
|
||||
<script>
|
||||
const myEle = document.getElementById("one");
|
||||
console.log(myEle);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,15 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Dynamic event manipulation</title>
|
||||
</head>
|
||||
<body>
|
||||
<div>Hello World 1</div>
|
||||
<div>Hello World 2</div>
|
||||
<div>Hello World 3</div>
|
||||
<script>
|
||||
const myEles = document.getElementsByTagName("div");
|
||||
console.log(myEles[1]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,15 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Canvas HTML5</title>
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<h1 class="ele">Hello World</h1>
|
||||
<div class="ele">Hello World 1</div>
|
||||
<div class="ele">Hello World 3</div>
|
||||
<script>
|
||||
const myEles = document.getElementsByClassName("ele");
|
||||
console.log(myEles[0]);
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Canvas HTML5</title>
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<h1 class="ele">Hello World</h1>
|
||||
<div class="ele">Hello World 1</div>
|
||||
<div class="ele">Hello World 3</div>
|
||||
<p class="ele">Hello World 4</p>
|
||||
<script>
|
||||
const myEle = document.querySelector(".ele");
|
||||
console.log(myEle);
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,22 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JS Tester</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="myEle">One</div>
|
||||
<div class="myEle">Two</div>
|
||||
<div class="myEle">Three</div>
|
||||
<div class="myEle">Four</div>
|
||||
<div class="myEle">Five</div>
|
||||
</div>
|
||||
<script>
|
||||
const eles = document.querySelectorAll(".myEle");
|
||||
console.log(eles);
|
||||
eles.forEach((el) => {
|
||||
console.log(el);
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JS Tester</title>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<button onclick="message(this)">Button 1</button>
|
||||
<button onclick="message(this)">Button 2</button>
|
||||
</div>
|
||||
<script>
|
||||
function message(el) {
|
||||
console.dir(el.textContent);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Complete JavaScript Course</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="message"></div>
|
||||
<div id="output"></div>
|
||||
<script>
|
||||
const message = document.querySelector("#message");
|
||||
const myArray = ["Laurence", "Mike", "John", "Larry", "Kim", "Joanne", "Lisa", "Janet", "Jane"];
|
||||
build();
|
||||
//addClicks();
|
||||
function build() {
|
||||
let html = "<h1>My Friends Table</h1><table>";
|
||||
myArray.forEach((item, index) => {
|
||||
html +=
|
||||
`<tr class="box" data-row="${index+1}" data-name="${item}" onclick="getData(this)"><td>${item}</td>`;
|
||||
html += `<td >${index + 1}</td></tr>`;
|
||||
})
|
||||
html += "</table>";
|
||||
document.getElementById("output").innerHTML = html;
|
||||
}
|
||||
|
||||
function getData(el) {
|
||||
let temp = el.getAttribute("data-row");
|
||||
let tempName = el.getAttribute("data-name");
|
||||
message.innerHTML = `${tempName } is in row #${temp}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JS Tester</title>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<button>Button 1</button>
|
||||
<button>Button 2</button>
|
||||
<button>Button 3</button>
|
||||
</div>
|
||||
<script>
|
||||
const btns = document.querySelectorAll("button");
|
||||
btns.forEach((btn)=>{
|
||||
function output(){
|
||||
console.log(this.textContent);
|
||||
}
|
||||
btn.addEventListener("click",output);
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Click Me Game</title>
|
||||
<style>
|
||||
.output {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border: 1px solid black;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
left: 20%;
|
||||
background-color: red;
|
||||
border: 1px solid black;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.message {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="output"></div>
|
||||
<script>
|
||||
const output = document.querySelector('.output');
|
||||
const message = document.createElement('div');
|
||||
message.classList.add('message');
|
||||
document.body.prepend(message);
|
||||
message.textContent = "Press to Start";
|
||||
const box = document.createElement('div');
|
||||
const game = {
|
||||
timer: 0,
|
||||
start: null
|
||||
};
|
||||
box.classList.add('box');
|
||||
output.append(box);
|
||||
|
||||
box.addEventListener('click', (e) => {
|
||||
box.textContent = "";
|
||||
box.style.display = 'none';
|
||||
game.timer = setTimeout(addBox, ranNum(3000));
|
||||
if (!game.start) {
|
||||
message.textContent = 'Loading....';
|
||||
} else {
|
||||
const cur = new Date().getTime();
|
||||
const dur = (cur - game.start) / 1000;
|
||||
message.textContent = `It took ${dur} seconds to click`;
|
||||
}
|
||||
})
|
||||
|
||||
function addBox() {
|
||||
message.textContent = 'Click it...';
|
||||
game.start = new Date().getTime();
|
||||
box.style.display = 'block';
|
||||
box.style.left = ranNum(450) + 'px';
|
||||
box.style.top = ranNum(450) + 'px';
|
||||
}
|
||||
|
||||
function ranNum(max) {
|
||||
return Math.floor(Math.random() * max);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JS Tester</title>
|
||||
<style>
|
||||
.active {
|
||||
display: block !important;
|
||||
}
|
||||
.myText {
|
||||
display: none;
|
||||
}
|
||||
.title {
|
||||
font-size: 1.5em;
|
||||
background-color: #ddd;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="title">Title #1</div>
|
||||
<div class="myText">Just some text #1</div>
|
||||
<div class="title">Title #2</div>
|
||||
<div class="myText">Just some text #2</div>
|
||||
<div class="title">Title #3</div>
|
||||
<div class="myText">Just some text #3</div>
|
||||
</div>
|
||||
<script>
|
||||
const menus = document.querySelectorAll(".title");
|
||||
const openText = document.querySelectorAll(".myText");
|
||||
menus.forEach((el) => {
|
||||
el.addEventListener("click", (e) => {
|
||||
console.log(el.nextElementSibling);
|
||||
remover();
|
||||
el.nextElementSibling.classList.toggle("active");
|
||||
})
|
||||
})
|
||||
function remover() {
|
||||
openText.forEach((ele) => {
|
||||
ele.classList.remove("active");
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Complete JavaScript Course</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="message">Complete JavaScript Course</div>
|
||||
<div>
|
||||
<input type="text" id="addFriend">
|
||||
<input type="button" id="addNew" value="Add Friend">
|
||||
</div>
|
||||
<table id="output"></table>
|
||||
<script>
|
||||
window.onload = build;
|
||||
const myArray = ["Laurence", "Mike", "John", "Larry"];
|
||||
const message = document.getElementById("message");
|
||||
const addNew = document.getElementById("addNew");
|
||||
const newInput = document.getElementById("addFriend");
|
||||
const output = document.getElementById("output");
|
||||
addNew.onclick = function () {
|
||||
const newFriend = newInput.value;
|
||||
adder(newFriend, myArray.length, 0);
|
||||
myArray.push(newFriend);
|
||||
}
|
||||
function build() {
|
||||
myArray.forEach((item, index) => {
|
||||
adder(item, index, 0)
|
||||
})
|
||||
}
|
||||
function adder(name, index, counter) {
|
||||
const tr = document.createElement("tr");
|
||||
const td1 = document.createElement("td");
|
||||
td1.classList.add("box");
|
||||
td1.textContent = index + 1;
|
||||
const td2 = document.createElement("td");
|
||||
td2.textContent = name;
|
||||
const td3 = document.createElement("td");
|
||||
td3.textContent = counter;
|
||||
tr.append(td1);
|
||||
tr.append(td2);
|
||||
tr.append(td3);
|
||||
tr.onclick= function () {
|
||||
console.log(tr.lastChild);
|
||||
let val = Number(tr.lastChild.textContent);
|
||||
val++;
|
||||
tr.lastChild.textContent = val;
|
||||
}
|
||||
output.appendChild(tr);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,107 @@
|
||||
<!doctype html>
|
||||
<html><head>
|
||||
<title>Hangman Game</title>
|
||||
<style>
|
||||
.gameArea {
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
}
|
||||
.box,
|
||||
.boxD {
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
}
|
||||
.boxE {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="gameArea">
|
||||
<div class="score"> </div>
|
||||
<div class="puzzle"></div>
|
||||
<div class="letters"></div>
|
||||
<button>Start Game</button>
|
||||
</div>
|
||||
<script>
|
||||
const game = { cur: "", solution: "", puzz: [], total: 0 };
|
||||
const myWords = ["learn Javascript", "learn html", "learn css"];
|
||||
const score = document.querySelector(".score");
|
||||
const puzzle = document.querySelector(".puzzle");
|
||||
const letters = document.querySelector(".letters");
|
||||
const btn = document.querySelector("button");
|
||||
btn.addEventListener("click", startGame);
|
||||
function startGame() {
|
||||
if (myWords.length > 0) {
|
||||
btn.style.display = "none";
|
||||
game.puzz = [];
|
||||
game.total = 0;
|
||||
game.cur = myWords.shift();
|
||||
game.solution = game.cur.split("");
|
||||
builder();
|
||||
} else {
|
||||
score.textContent = "No More Words.";
|
||||
}
|
||||
}
|
||||
function createElements(elType, parentEle, output, cla) {
|
||||
const temp = document.createElement(elType);
|
||||
temp.classList.add("boxE");
|
||||
parentEle.append(temp);
|
||||
temp.textContent = output;
|
||||
return temp;
|
||||
}
|
||||
function updateScore() {
|
||||
score.textContent = `Total Letters Left : ${game.total}`;
|
||||
if (game.total <= 0) {
|
||||
console.log("game over");
|
||||
score.textContent = "Game Over";
|
||||
btn.style.display = "block";
|
||||
}
|
||||
}
|
||||
function builder() {
|
||||
letters.innerHTML = "";
|
||||
puzzle.innerHTML = "";
|
||||
game.solution.forEach((lett) => {
|
||||
let div = createElements("div", puzzle, "-", "boxE");
|
||||
if (lett == " ") {
|
||||
div.style.borderColor = "white";
|
||||
div.textContent = " ";
|
||||
} else {
|
||||
game.total++;
|
||||
}
|
||||
game.puzz.push(div);
|
||||
updateScore();
|
||||
})
|
||||
for (let i = 0; i < 26; i++) {
|
||||
let temp = String.fromCharCode(65 + i);
|
||||
let div = createElements("div", letters, temp,"box");
|
||||
|
||||
let checker = function (e) {
|
||||
div.style.backgroundColor = "#ddd";
|
||||
div.classList.remove("box");
|
||||
div.classList.add("boxD");
|
||||
div.removeEventListener("click", checker);
|
||||
checkLetter(temp);
|
||||
}
|
||||
div.addEventListener("click", checker);
|
||||
}
|
||||
}
|
||||
function checkLetter(letter) {
|
||||
console.log(letter);
|
||||
game.solution.forEach((ele, index) => {
|
||||
if (ele.toUpperCase() == letter) {
|
||||
game.puzz[index].textContent = letter;
|
||||
game.total--;
|
||||
updateScore();
|
||||
};
|
||||
}
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JS Tester</title>
|
||||
<style>
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
border: 1px solid black
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="box" id="box0">Box #1</div>
|
||||
<div class="box" id="box1">Box #2</div>
|
||||
<div class="box" id="box2">Box #3</div>
|
||||
<div class="box" id="box3">Box #4</div>
|
||||
</div>
|
||||
<script>
|
||||
const main = document.querySelector(".container");
|
||||
const boxes = document.querySelectorAll(".box");
|
||||
main.addEventListener("click", (e) => {
|
||||
console.log("4");
|
||||
},false);
|
||||
main.addEventListener("click", (e) => {
|
||||
console.log("1");
|
||||
},true);
|
||||
|
||||
boxes.forEach(ele => {
|
||||
ele.addEventListener("click", (e) => {
|
||||
console.log("3");
|
||||
console.log(e.target.textContent);
|
||||
},false);
|
||||
ele.addEventListener("click", (e) => {
|
||||
console.log("2");
|
||||
console.log(e.target.textContent);
|
||||
},true);
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Executable
+30
@@ -0,0 +1,30 @@
|
||||
<html>
|
||||
<style>
|
||||
div {
|
||||
background-color: purple;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<button onclick="toTheRight()">Go right</button>
|
||||
<div id="block"></div>
|
||||
|
||||
<script>
|
||||
function toTheRight() {
|
||||
let b = document.getElementById("block");
|
||||
let x = 0;
|
||||
setInterval(function () {
|
||||
if (x === 600) {
|
||||
clearInterval();
|
||||
} else {
|
||||
x++;
|
||||
b.style.left = x + "px";
|
||||
}
|
||||
}, 2);
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+46
@@ -0,0 +1,46 @@
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.box {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
padding: 20px;
|
||||
margin: 0 50px;
|
||||
display: inline-block;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#dragme {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box" ondrop="dDrop()" ondragover="nDrop()">
|
||||
1
|
||||
<div id="dragme" ondragstart="dStart()" draggable="true">
|
||||
Drag Me Please!
|
||||
</div>
|
||||
</div>
|
||||
<div class="box" ondrop="dDrop()" ondragover="nDrop()">2</div>
|
||||
<script>
|
||||
let holderItem;
|
||||
|
||||
function dStart() {
|
||||
holderItem = event.target;
|
||||
}
|
||||
|
||||
function nDrop() {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function dDrop() {
|
||||
// event.preventDefault();
|
||||
if (event.target.className == "box") {
|
||||
event.target.appendChild(holderItem);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+10
@@ -0,0 +1,10 @@
|
||||
<html>
|
||||
<body>
|
||||
<button type="button" onclick="triggerSomething()">Click</button>
|
||||
<script>
|
||||
function triggerSomething() {
|
||||
console.dir(event.target);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+21
@@ -0,0 +1,21 @@
|
||||
<html>
|
||||
<body>
|
||||
<div id="welcome">Hi there!</div>
|
||||
<form>
|
||||
<input type="text" name="firstname" placeholder="First name" />
|
||||
<input type="text" name="lastname" placeholder="Last name" />
|
||||
<input type="button" onclick="sendInfo()" value="Submit" />
|
||||
</form>
|
||||
<script>
|
||||
function sendInfo() {
|
||||
console.dir(event);
|
||||
let p = event.target.parentElement;
|
||||
message("Welcome " + p.firstname.value + " " + p.lastname.value);
|
||||
}
|
||||
|
||||
function message(m) {
|
||||
document.getElementById("welcome").innerHTML = m;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+8
@@ -0,0 +1,8 @@
|
||||
<html>
|
||||
<body>
|
||||
<form action="anotherpage.html" method="get" onsubmit="doStuff()">
|
||||
<input type="text" placeholder="name" name="name" />
|
||||
<input type="submit" value="send" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+33
@@ -0,0 +1,33 @@
|
||||
<html>
|
||||
<body>
|
||||
<div id="wrapper"></div>
|
||||
<form action="anotherpage.html" method="get" onsubmit="return valForm()">
|
||||
<input type="text" id="firstName" name="firstName" placeholder="First name" />
|
||||
<input type="text" id="lastName" name="lastName" placeholder="Last name" />
|
||||
<input type="text" id="age" name="age" placeholder="Age" />
|
||||
<input type="submit" value="submit" />
|
||||
</form>
|
||||
<script>
|
||||
function valForm() {
|
||||
var p = event.target.children;
|
||||
if (p.firstName.value == "") {
|
||||
message("Need a first name!!");
|
||||
return false;
|
||||
}
|
||||
if (p.lastName.value == "") {
|
||||
message("Need a last name!!");
|
||||
return false;
|
||||
}
|
||||
if (p.age.value == "") {
|
||||
message("Need an age!!");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function message(m) {
|
||||
document.getElementById("wrapper").innerHTML = m;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+23
@@ -0,0 +1,23 @@
|
||||
<html>
|
||||
<body>
|
||||
<body>
|
||||
<div id="wrapper">JavaScript is fun!</div>
|
||||
<input type="text" name="myNum1" onkeypress="numCheck()">
|
||||
<input type="text" name="myNum2" onkeypress="numCheck2()">
|
||||
<script>
|
||||
function numCheck() {
|
||||
message("Number: " + !isNaN(event.key));
|
||||
return !isNaN(event.key);
|
||||
}
|
||||
|
||||
function numCheck2() {
|
||||
message("Not a number: " + isNaN(event.key));
|
||||
return isNaN(event.key);
|
||||
}
|
||||
|
||||
function message(m) {
|
||||
document.getElementById('wrapper').innerHTML = m;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+23
@@ -0,0 +1,23 @@
|
||||
<html>
|
||||
<body>
|
||||
<body>
|
||||
<div id="wrapper">JavaScript is fun!</div>
|
||||
<input type="text" name="myNum1" onkeypress="return numCheck()" onpaste="return false">
|
||||
<input type="text" name="myNum2" onkeypress="return numCheck2()" onpaste="return false">
|
||||
<script>
|
||||
function numCheck() {
|
||||
message(!isNaN(event.key));
|
||||
return !isNaN(event.key);
|
||||
}
|
||||
|
||||
function numCheck2() {
|
||||
message(isNaN(event.key));
|
||||
return isNaN(event.key);
|
||||
}
|
||||
|
||||
function message(m) {
|
||||
document.getElementById('wrapper').innerHTML = m;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+11
@@ -0,0 +1,11 @@
|
||||
|
||||
<html>
|
||||
<body>
|
||||
<div id="divvy" onmouseup="changeColor()" style="width: 100px; height: 100px; background-color: pink;">
|
||||
<script>
|
||||
function changeColor() {
|
||||
document.getElementById("divvy").style.backgroundColor = "blue";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+20
@@ -0,0 +1,20 @@
|
||||
|
||||
<html>
|
||||
<body>
|
||||
<div id="divvy" style="width: 100px; height: 100px; background-color: pink;">
|
||||
<script>
|
||||
window.onload = function donenow() {
|
||||
console.log("hi");
|
||||
document.getElementById("divvy").addEventListener("mousedown", function() { changeColor(this, "green"); });
|
||||
document.getElementById("divvy").addEventListener("mouseup", function() { changeColor(this, "yellow"); });
|
||||
document.getElementById("divvy").addEventListener("dblclick", function() { changeColor(this, "black"); });
|
||||
document.getElementById("divvy").addEventListener("mouseout", function() { changeColor(this, "blue"); });
|
||||
}
|
||||
console.log("hi2");
|
||||
|
||||
function changeColor(el, color) {
|
||||
el.style.backgroundColor = color;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+29
@@ -0,0 +1,29 @@
|
||||
<html>
|
||||
<body>
|
||||
<div id="welcome">Hi there!</div>
|
||||
<form>
|
||||
<input type="text" name="firstname" placeholder="First name" onchange="logEvent()" />
|
||||
<input type="text" name="lastname" placeholder="Last name" onblur="logEvent()" />
|
||||
<input type="button" onclick="sendInfo()" value="Submit" />
|
||||
</form>
|
||||
<script>
|
||||
function logEvent() {
|
||||
let p = event.target;
|
||||
if (p.name == "firstname") {
|
||||
message("First Name Changed to " + p.value);
|
||||
} else {
|
||||
message("Last Name Changed to " + p.value);
|
||||
}
|
||||
}
|
||||
|
||||
function sendInfo() {
|
||||
let p = event.target.parentElement;
|
||||
message("Welcome " + p.firstname.value + " " + p.lastname.value);
|
||||
}
|
||||
|
||||
function message(m) {
|
||||
document.getElementById("welcome").innerHTML = m;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+13
@@ -0,0 +1,13 @@
|
||||
|
||||
<html>
|
||||
<body>
|
||||
<p id="unique" onclick="magic()">Click here for magic!</p>
|
||||
|
||||
<script>
|
||||
document.getElementById("unique").onclick = function() { magic() };
|
||||
document.getElementById("unique").addEventListener("click", magic);
|
||||
document.getElementById("unique").addEventListener("click", function() { magic(arg1, arg2) });
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Complete JavaScript Course</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="message"></div>
|
||||
<div id="output"></div>
|
||||
<script>
|
||||
const message = document.querySelector("#message");
|
||||
const myArray = ["Laurence", "Mike", "John", "Larry", "Kim", "Joanne", "Lisa", "Janet", "Jane"];
|
||||
build();
|
||||
addClicks();
|
||||
function build() {
|
||||
let html = "<h1>My Friends Table</h1><table>";
|
||||
myArray.forEach((item, index) => {
|
||||
html += `<tr class="box" data-row="${index+1}" data-name="${item}"><td>${item}</td>`;
|
||||
html += `<td >${index + 1}</td></tr>`;
|
||||
})
|
||||
html += "</table>";
|
||||
document.getElementById("output").innerHTML = html;
|
||||
}
|
||||
function addClicks() {
|
||||
const boxes = document.querySelectorAll(".box");
|
||||
boxes.forEach((el) => {
|
||||
el.addEventListener("click", (e) => {
|
||||
let temp = el.getAttribute("data-row");
|
||||
let tempName = el.getAttribute("data-name");
|
||||
message.innerHTML = `${tempName } is in row #${temp}`;
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,55 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JS Tester</title>
|
||||
<style>
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
background-color: white;
|
||||
}
|
||||
.red {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">1
|
||||
<div id="dragme" draggable="true">
|
||||
Drag Me Please!
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">2</div>
|
||||
<script>
|
||||
const dragme = document.querySelector("#dragme");
|
||||
dragme.addEventListener("dragstart", (e) => {
|
||||
dragme.style.opacity = .5;
|
||||
})
|
||||
dragme.addEventListener("dragend", (e) => {
|
||||
dragme.style.opacity = "";
|
||||
})
|
||||
const boxes = document.querySelectorAll(".box");
|
||||
boxes.forEach(box => {
|
||||
box.addEventListener("dragenter", (e) => {
|
||||
e.target.classList.add('red');
|
||||
})
|
||||
box.addEventListener("dragover", (e) => {
|
||||
e.preventDefault();
|
||||
});
|
||||
box.addEventListener("dragleave", (e) => {
|
||||
//console.log("leave");
|
||||
e.target.classList.remove('red');
|
||||
});
|
||||
box.addEventListener("drop", (e) => {
|
||||
e.preventDefault();
|
||||
console.log("dropped");
|
||||
e.target.appendChild(dragme);
|
||||
});
|
||||
})
|
||||
function dragStart(e) {
|
||||
console.log("Started");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,13 @@
|
||||
let darkMode = false;
|
||||
window.onclick = () => {
|
||||
console.log(darkMode);
|
||||
if (!darkMode) {
|
||||
document.body.style.backgroundColor = "black";
|
||||
document.body.style.color = "white";
|
||||
darkMode = true;
|
||||
} else {
|
||||
document.body.style.backgroundColor = "white";
|
||||
document.body.style.color = "black";
|
||||
darkMode = false;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<style>
|
||||
div {
|
||||
background-color: purple;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="block"></div>
|
||||
<script>
|
||||
const main = document.querySelector("#block");
|
||||
let mover = { speed: 10, dir: 1, pos: 0 };
|
||||
main.addEventListener("click", moveBlock);
|
||||
function moveBlock() {
|
||||
let x = 30;
|
||||
setInterval(function () {
|
||||
if (x < 1) {
|
||||
clearInterval();
|
||||
} else {
|
||||
if (mover.pos > 800 || mover.pos < 0) {
|
||||
mover.dir *= -1;
|
||||
}
|
||||
x--;
|
||||
mover.pos += x * mover.dir;
|
||||
main.style.left = mover.pos + "px";
|
||||
console.log(mover.pos);
|
||||
}
|
||||
}, 2);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JS Tester</title>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", (e) => {
|
||||
message("Document ready", e);
|
||||
});
|
||||
window.onload = (e) => {
|
||||
message("Window ready", e);
|
||||
}
|
||||
function message(val, event) {
|
||||
console.log(event);
|
||||
console.log(val);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,32 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JS Tester</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="output"></div>
|
||||
<script>
|
||||
const output = document.querySelector(".output");
|
||||
output.textContent = "hello world";
|
||||
output.style.height = "200px";
|
||||
output.style.width = "400px";
|
||||
output.style.backgroundColor = "red";
|
||||
output.addEventListener("mousedown", function (e) {
|
||||
message("green", e);
|
||||
})
|
||||
output.addEventListener("mouseover", function (e) {
|
||||
message("red", e);
|
||||
})
|
||||
output.addEventListener("mouseout", function (e) {
|
||||
message("yellow", e);
|
||||
})
|
||||
output.addEventListener("mouseup", function (e) {
|
||||
message("blue", e);
|
||||
})
|
||||
function message(elColor, event) {
|
||||
console.log(event.type);
|
||||
output.style.backgroundColor = elColor;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JS Tester</title>
|
||||
<style>.box{width:200px;height:100px;border:1px solid black}</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="box" id="box0">Box #1</div>
|
||||
<div class="box" id="box1">Box #2</div>
|
||||
<div class="box" id="box2">Box #3</div>
|
||||
<div class="box" id="box3">Box #4</div>
|
||||
</div>
|
||||
<script>
|
||||
const counter = [];
|
||||
const main = document.querySelector('.container');
|
||||
main.addEventListener('click',tracker);
|
||||
function tracker(e){
|
||||
const el = e.target;
|
||||
if(el.id){
|
||||
const temp = {};
|
||||
temp.content = el.textContent;
|
||||
temp.id = el.id;
|
||||
temp.tagName = el.tagName;
|
||||
temp.class = el.className;
|
||||
console.dir(el);
|
||||
counter.push(temp);
|
||||
console.log(counter);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JS Tester</title>
|
||||
<style>
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
border: 1px solid black
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="box" id="box0">Box #1</div>
|
||||
<div class="box" id="box1">Box #2</div>
|
||||
<div class="box" id="box2">Box #3</div>
|
||||
<div class="box" id="box3">Box #4</div>
|
||||
</div>
|
||||
<script>
|
||||
const main = document.querySelector(".container");
|
||||
const boxes = document.querySelectorAll(".box");
|
||||
main.addEventListener("click", (e) => {
|
||||
console.log("4");
|
||||
},false);
|
||||
main.addEventListener("click", (e) => {
|
||||
console.log("1");
|
||||
},true);
|
||||
|
||||
boxes.forEach(ele => {
|
||||
ele.addEventListener("click", (e) => {
|
||||
console.log("3");
|
||||
},false);
|
||||
ele.addEventListener("click", (e) => {
|
||||
console.log("2");
|
||||
},true);
|
||||
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JS Tester</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="output1">
|
||||
</div>
|
||||
|
||||
<input type="text" placeholder="First Name" name="first"><br>
|
||||
<input type="text" placeholder="Last Name" name="last"><br>
|
||||
<script>
|
||||
const output = document.querySelector(".output1");
|
||||
|
||||
const in1 = document.querySelector("input[name='first']");
|
||||
const in2 = document.querySelector("input[name='last']");
|
||||
in1.addEventListener("change", (e) => {
|
||||
console.log("change");
|
||||
updater(in1.value);
|
||||
})
|
||||
in1.addEventListener("blur", (e) => {
|
||||
console.log("blur");
|
||||
})
|
||||
in1.addEventListener("focus", (e) => {
|
||||
console.log("focus");
|
||||
})
|
||||
in2.addEventListener("change", (e) => {
|
||||
console.log("change");
|
||||
updater(in2.value);
|
||||
})
|
||||
in2.addEventListener("blur", (e) => {
|
||||
console.log("blur");
|
||||
})
|
||||
in2.addEventListener("focus", (e) => {
|
||||
console.log("focus");
|
||||
})
|
||||
function updater(str) {
|
||||
output.textContent = str;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JS Tester</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
Size: <select id="iSize">
|
||||
<option value="">Select</option>
|
||||
<option value="150x150">Small</option>
|
||||
<option value="350x150" selected>Medium</option>
|
||||
<option value="750x150">Large</option>
|
||||
</select>
|
||||
<br>Add Text: <input id="iText" type="text" value="Hello World">
|
||||
<br>Select Color: <input id="iColor" type="color" value="222">
|
||||
<br>Preview:<br><img src="" id="myImage">
|
||||
|
||||
</div>
|
||||
<script>
|
||||
const base = "http://via.placeholder.com/";
|
||||
const myImage = document.querySelector("#myImage");
|
||||
const myArr = { iColor: "222", iText: "Hello World", iSize: "350x150" };
|
||||
const container = document.querySelector(".container");
|
||||
const eles = container.querySelectorAll("select,input");
|
||||
eles.forEach(el => {
|
||||
el.addEventListener("change", (e) => {
|
||||
console.log(el);
|
||||
let val = el.value.replace("#", "");
|
||||
myArr[el.id] = val;
|
||||
let temp = base + myArr.iSize + "/" + myArr.iColor + "/fff?text=" + myArr.iText;
|
||||
console.log(temp);
|
||||
myImage.src = temp;
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,28 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JS Tester</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="output"></div>
|
||||
<input type="text" name="myNum1">
|
||||
<input type="text" name="myNum2">
|
||||
<script>
|
||||
const eles = document.querySelectorAll("input");
|
||||
const output = document.querySelector(".output");
|
||||
eles.forEach(el => {
|
||||
el.addEventListener("keydown", (e) => {
|
||||
if (!isNaN(e.key)) {
|
||||
output.textContent += e.key;
|
||||
}
|
||||
})
|
||||
el.addEventListener("keydown", (e) => {
|
||||
console.log(e.key);
|
||||
})
|
||||
el.addEventListener("paste", (e) => {
|
||||
console.log('pasted');
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JS Tester</title>
|
||||
</head>
|
||||
<body>
|
||||
<form action="index2.html" method="get">
|
||||
First: <input type="text" name="first">
|
||||
<br>Last: <input type="text" name="last">
|
||||
<br>Age: <input type="number" name="age">
|
||||
<br><input type="submit" value="submit">
|
||||
</form>
|
||||
<script>
|
||||
const form = document.querySelector("form");
|
||||
const email = document.querySelector("#email");
|
||||
form.addEventListener("submit", (e) => {
|
||||
let error = false;
|
||||
if (checker(form.first.value)) {
|
||||
console.log("First Name needed");
|
||||
error = true;
|
||||
}
|
||||
if (checker(form.last.value)) {
|
||||
console.log("Last Name needed");
|
||||
error = true;
|
||||
}
|
||||
if (form.age.value < 19) {
|
||||
console.log("You must be 19 or over");
|
||||
error = true;
|
||||
}
|
||||
if (error) {
|
||||
e.preventDefault();
|
||||
console.log("please review the form");
|
||||
}
|
||||
})
|
||||
function checker(val) {
|
||||
console.log(val.length);
|
||||
if (val.length < 6) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,22 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JS Tester</title>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<button>Button 1</button>
|
||||
<button>Button 2</button>
|
||||
<button>Button 3</button>
|
||||
</div>
|
||||
<script>
|
||||
const btns = document.querySelectorAll('button');
|
||||
btns.forEach((btn)=>{
|
||||
function output(){
|
||||
console.log(this.textContent);
|
||||
}
|
||||
btn.addEventListener("click",output);
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user