As Seen in the video:
index.js
const btnSubmit = document.getElementById("btn-submit");
btnSubmit.addEventListener("click", () => {
const name = document.getElementById("name").value;
const comment = document.getElementById("comment").value;
addComment(name, comment);
//remove berde class from header
const hdr = document.getElementById("header-text");
hdr.classList.remove("berde");
})
const addComment = (name, comment) => {
const commentsDiv = document.getElementById("comments-div");
//create a div for this comment
const entryDiv = document.createElement("div");
const myHtml = `<strong>${name}</strong> : ${comment}
<button class='remove-btn'>Remove</button>
`;
entryDiv.innerHTML = myHtml;
// entryDiv.style.backgroundColor = "#eef";
// entryDiv.style.padding = "10px";
// entryDiv.style.marginBottom = "5px";
// entryDiv.style.borderRadius = "5px";
entryDiv.className = "guest-entry";
//add the newly created div element to the commentsDiv
commentsDiv.appendChild(entryDiv);
entryDiv.querySelector('.remove-btn').addEventListener("click", () => {
//commentsDiv.removeChild(entryDiv);
entryDiv.remove();
})
}
const drawHeader = () => {
const headerDiv = document.getElementById("header-div");
const hdr = document.createElement("h1");
hdr.innerText = "WELCOME TO MY WORLD!";
hdr.id = "header-text";
hdr.classList.add("berde", "center-text");
headerDiv.appendChild(hdr);
//headerDiv.innerHTML = "<h1>WELCOME TO MY WORLD</h1>";
// headerDiv.className = "berde";
// headerDiv.className = "center-text";
//headerDiv.classList.add("berde", "center-text");
//headerDiv.classList.add("center-text");
// headerDiv.style.color = "red";
// headerDiv.style.textAlign = "center";
}
document.addEventListener("DOMContentLoaded", () => {
drawHeader();
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="index.js" defer></script>
</head>
<body>
<div id="header-div">
</div>
<div id="main-div">
<h2>GuestBook</h2>
<label for="name">Name</label>
<input type="text" id="name" /><br/>
<label for="comment">Comment</label>
<input type="text" id="comment" /><br/>
<button type="button" id="btn-submit">Submit</button>
</div>
<div id="comments-div"></div>
</body>
</html>
style.css
.berde {
color: green;
}
.center-text {
text-align: center;
}
.guest-entry {
background-color: #eef;
padding: 10px;
margin-bottom: 5px;
border-radius: 5px;
}
Video URL:
https://www.youtube.com/watch?v=GR0-RedGUNk
