83 lines
2.7 KiB
JavaScript
83 lines
2.7 KiB
JavaScript
|
|
//ELEMENT SELECTORS
|
|
const myheading = document.getElementById("my-heading");
|
|
|
|
myheading.style.backgroundColor = "yellow";
|
|
myheading.style.textAlign = "center";
|
|
myheading.style.width = "fit-content";
|
|
myheading.style.cssText = "border-radius: 15px; padding: 50px; background-color: blue; color: white; font-size: 2ch; width: fit-content; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 5ch; margin: auto;";
|
|
|
|
const fruits = document.getElementsByClassName("fruits");
|
|
|
|
// Using for loop
|
|
for (let i = 0; i < fruits.length; i++) {
|
|
fruits[i].style.backgroundColor = "yellow";
|
|
fruits[i].style.border = "5px solid black";
|
|
fruits[i].style.width = "150px";
|
|
}
|
|
|
|
Array.from(fruits).forEach(fruit => {
|
|
fruit.style.fontSize = "3ch";
|
|
fruit.style.margin = "20px";
|
|
fruit.style.float = "left";
|
|
});
|
|
|
|
const listelements = document.getElementsByTagName('li');
|
|
function changecolor(){
|
|
Array.from(listelements).forEach(item => {
|
|
item.style.color = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
|
|
});
|
|
}
|
|
setInterval(changecolor, 500);
|
|
|
|
const element = document.querySelector(".fruits"); //querryselector will only return the first element!!!
|
|
element.style.backgroundColor = "lightgrey"
|
|
|
|
|
|
const fruiter = document.querySelectorAll('.fruits');
|
|
function changefruit(){
|
|
fruiter.forEach(item => {
|
|
item.style.backgroundColor = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
|
|
});
|
|
}
|
|
setInterval(changefruit, 500);
|
|
|
|
|
|
//DOM NAVIGATION
|
|
|
|
const children = document.getElementById("vegetable");
|
|
var child = children.firstElementChild;
|
|
child.style.backgroundColor = "gray";
|
|
|
|
child = children.lastElementChild;
|
|
child.style.backgroundColor = "gray";
|
|
|
|
child = children.nextElementSibling;
|
|
child.style.backgroundColor = "green";
|
|
|
|
child = children.parentElement;
|
|
child.backgroundColor = "blue"
|
|
|
|
|
|
//CHANGE HTML ELEMENTS
|
|
//https://youtu.be/lfmg-EJ8gm4?si=jg8Jmn-Y-xvPPW0X&t=31651
|
|
|
|
const newh1 = document.createElement("h1")
|
|
const newh2 = document.createElement("h2")
|
|
newh2.textContent = "I love You";
|
|
newh1.textContent = "I love You";
|
|
newh1.style.color = "tomato";
|
|
newh1.style.textAlign = "center";
|
|
|
|
document.body.append(newh1); //prepend to instert to the beggining!
|
|
|
|
document.getElementById("box2").prepend(newh1);
|
|
|
|
document.getElementById("manipulator").insertBefore(newh1, document.getElementById("box3"));
|
|
|
|
const boxes = document.querySelectorAll(".box");
|
|
document.getElementById("manipulator").insertBefore(newh2, boxes[3])
|
|
|
|
document.getElementById("manipulator").removeChild(document.getElementById("box4"))
|
|
|