fix conflicts
This commit is contained in:
brightboost
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Laurence Svekis</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
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;
|
||||
}
|
||||
}
|
||||
</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,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,17 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<body>
|
||||
<div>red</div>
|
||||
<div>blue</div>
|
||||
<div>green</div>
|
||||
<div>yellow</div>
|
||||
<script>
|
||||
const divs = document.querySelectorAll("div");
|
||||
divs.forEach((el)=>{
|
||||
el.addEventListener("click",()=>{
|
||||
document.body.style.backgroundColor = el.textContent;
|
||||
})
|
||||
})
|
||||
</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,42 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JS Tester</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="output"></div>
|
||||
<input type="text" name="message" placeholder="Your Message">
|
||||
<button class="btn1">Button 1</button>
|
||||
<button class="btn2">Button 2</button>
|
||||
<div>
|
||||
<button class="btn3">Log</button>
|
||||
</div>
|
||||
<script>
|
||||
const myInput = document.querySelector("input[name='message']");
|
||||
const output = document.querySelector(".output");
|
||||
const btn1 = document.querySelector(".btn1");
|
||||
const btn2 = document.querySelector(".btn2");
|
||||
const btn3 = document.querySelector(".btn3");
|
||||
const log = [];
|
||||
btn1.addEventListener("click", tracker);
|
||||
btn2.addEventListener("click", tracker);
|
||||
btn3.addEventListener("click", (e) => {
|
||||
console.log(log);
|
||||
})
|
||||
function tracker(e) {
|
||||
output.textContent = myInput.value;
|
||||
const ev = e.target;
|
||||
console.dir(ev);
|
||||
const temp = {
|
||||
message: myInput.value,
|
||||
type: ev.type,
|
||||
class: ev.className,
|
||||
tag: ev.tagName
|
||||
};
|
||||
log.push(temp);
|
||||
myInput.value = "";
|
||||
}
|
||||
</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>
|
||||
@@ -0,0 +1,43 @@
|
||||
<!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,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("keyup", (e) => {
|
||||
console.log(e.key);
|
||||
})
|
||||
el.addEventListener("paste", (e) => {
|
||||
console.log('pasted');
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,56 @@
|
||||
<!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,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,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Star Rater</title>
|
||||
<style>
|
||||
.stars ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
.star {
|
||||
font-size: 2em;
|
||||
color: #ddd;
|
||||
display: inline-block;
|
||||
}
|
||||
.orange {
|
||||
color: orange;
|
||||
}
|
||||
.output {
|
||||
background-color: #ddd;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul class="stars">
|
||||
<li class="star">✭</li>
|
||||
<li class="star">✭</li>
|
||||
<li class="star">✭</li>
|
||||
<li class="star">✭</li>
|
||||
<li class="star">✭</li>
|
||||
</ul>
|
||||
<div class="output"></div>
|
||||
<script>
|
||||
const starsUL = document.querySelector(".stars");
|
||||
const output = document.querySelector(".output");
|
||||
const stars = document.querySelectorAll(".star");
|
||||
stars.forEach((star, index) => {
|
||||
star.starValue = (index + 1);
|
||||
star.addEventListener("click", starRate);
|
||||
})
|
||||
function starRate(e) {
|
||||
output.innerHTML = `You Rated this ${e.target.starValue} stars`;
|
||||
stars.forEach((star, index) => {
|
||||
if (index < e.target.starValue) {
|
||||
star.classList.add("orange");
|
||||
} else {
|
||||
star.classList.remove("orange");
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Complete JavaScript Course</title>
|
||||
<style>
|
||||
.holder {
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border: 1px solid black;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="holder">
|
||||
<div id="output"></div>
|
||||
</div>
|
||||
<script>
|
||||
const ele = document.querySelector(".holder");
|
||||
ele.addEventListener("mouseover", (e) => { e.target.classList.add("active"); })
|
||||
ele.addEventListener("mouseout", (e) => { e.target.classList.remove("active"); })
|
||||
ele.addEventListener("mousemove", coordin);
|
||||
function coordin() {
|
||||
let html = "X:" + event.clientX + " | Y:" + event.clientY;
|
||||
document.getElementById("output").innerHTML = html;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
<!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;
|
||||
}
|
||||
|
||||
.message {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="output"></div>
|
||||
<div class="message"></div>
|
||||
<script>
|
||||
const output = document.querySelector('.output');
|
||||
const message = document.querySelector('.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,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("keyup", (e) => {
|
||||
console.log(e.key);
|
||||
})
|
||||
el.addEventListener("paste", (e) => {
|
||||
console.log('pasted');
|
||||
})
|
||||
})
|
||||
</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>
|
||||
</head>
|
||||
<body>
|
||||
<div class="output"></div>
|
||||
<input type="text" name="message" placeholder="Your Message">
|
||||
<button class="btn1">Button 1</button>
|
||||
<button class="btn2">Button 2</button>
|
||||
<div>
|
||||
<button class="btn3">Log</button>
|
||||
</div>
|
||||
<script>
|
||||
const myInput = document.querySelector("input[name='message']");
|
||||
const output = document.querySelector(".output");
|
||||
const btn1 = document.querySelector(".btn1");
|
||||
const btn2 = document.querySelector(".btn2");
|
||||
const btn3 = document.querySelector(".btn3");
|
||||
const log = [];
|
||||
btn1.addEventListener("click", tracker);
|
||||
btn2.addEventListener("click", tracker);
|
||||
btn3.addEventListener("click", (e) => {
|
||||
console.log(log);
|
||||
})
|
||||
function tracker(e) {
|
||||
output.textContent = myInput.value;
|
||||
const ev = e.target;
|
||||
console.dir(ev);
|
||||
const temp = {
|
||||
message: myInput.value,
|
||||
type: ev.type,
|
||||
class: ev.className,
|
||||
tag: ev.tagName
|
||||
};
|
||||
log.push(temp);
|
||||
myInput.value = "";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user