fix conflicts

This commit is contained in:
brightboost
2021-11-24 19:50:37 +01:00
263 changed files with 3268 additions and 55 deletions
+23
View File
@@ -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
+30
View File
@@ -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>
+13
View File
@@ -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>
+15
View File
@@ -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>
+15
View File
@@ -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>
+16
View File
@@ -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>
+22
View File
@@ -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>
+17
View File
@@ -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>
+33
View File
@@ -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>
+23
View File
@@ -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>
+77
View File
@@ -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>
+45
View File
@@ -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>
+53
View File
@@ -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>
+107
View File
@@ -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>
+44
View File
@@ -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>
+30
View File
@@ -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>
+46
View File
@@ -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>
+10
View File
@@ -0,0 +1,10 @@
<html>
<body>
<button type="button" onclick="triggerSomething()">Click</button>
<script>
function triggerSomething() {
console.dir(event.target);
}
</script>
</body>
</html>
+21
View File
@@ -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>
+8
View File
@@ -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>
+33
View File
@@ -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>
+23
View File
@@ -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>
+23
View File
@@ -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>
+11
View File
@@ -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>
+20
View File
@@ -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>
+29
View File
@@ -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>
+13
View File
@@ -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>
+35
View File
@@ -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>
+55
View File
@@ -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>
+13
View File
@@ -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;
}
}
+35
View File
@@ -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>
+20
View File
@@ -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>
+32
View File
@@ -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>
+33
View File
@@ -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>
+41
View File
@@ -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>
+42
View File
@@ -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>
+37
View File
@@ -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>
+28
View File
@@ -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>
+44
View File
@@ -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>
+22
View File
@@ -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>