Code used in the video:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
const greet = (name) => {
console.log(`Hello ${name}`);
}
greet('Pablo');
function add(a, b){
return a+b;
}
const add2 = (a, b) => a+b;
// function greet(name) {
// console.log(`Hello ${name}`);
// }
const buttonClicked = () => {
var hdr = document.getElementById('main-header');
hdr.style.color = 'green';
//hdr.innerHTML = "<span style='color: red;'>Hello World!</span>";
document.getElementById('bike-image').src = "bike2.jpg";
//create element
var subHeader = document.createElement('h2');
subHeader.innerText = "This is a subheader";
//create element
var subHeader2 = document.createElement('h3');
subHeader2.innerText = "This is a subheader 2";
//add to main-div
var mainDiv = document.getElementById('main-div');
mainDiv.appendChild(subHeader);
mainDiv.appendChild(subHeader2);
//remove element
mainDiv.removeChild(subHeader2);
}
document.addEventListener('DOMContentLoaded', () =>{
var btn = document.createElement('button');
btn.innerText = "Button Inside the Div!";
btn.addEventListener('click', () => {
alert('Button clicked!');
});
var mainDiv = document.getElementById('main-div');
mainDiv.appendChild(btn);
});
</script>
</head>
<body>
<h1 id="main-header">Hello World!</h1>
<img src="bike.jpg" id="bike-image" alt="placeholder image" width="200px" height="100px">
<div id="main-div">
</div>
<button type="button" onclick="buttonClicked()">Click me!</button>
</body>
</html>
No comments:
Post a Comment