In: Computer Science
Add quotation marks around the quote. Change the attribution to Bertrand Russell, instead of Isaac Newton. Make the quote toggle from white to black text when the user clicks on it. Do NOT edit the HTML or CSS panels. However, you can add or modify HTML and CSS through JavaScript.
<div id="quoteBox">
<h1>The world is full of magical things patiently waiting for
our wits to grow sharper.</h1>
<p>Isaac Newton</p>
</div>
Hi,
Created a html file with javascript function to add the quotation on the quote, change the text name and color...its toggleing by javascript on click event...just click on the text and see the magic...you can change the color of text as per you need..
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>Click on the below text to toggle the text of the DIV element quoteBox:</p>
<div id="quoteBox" onclick="myFunction()">
<h1>The world is full of magical things patiently waiting for our wits to grow sharper.</h1>
<p>Isaac Newton</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("quoteBox");
x.style.color = "blue";
if (x.innerHTML === "<h1>The world is full of magical things patiently waiting for our wits to grow sharper.</h1><p>Isaac Newton</p>") {
x.innerHTML = "<h1>'The world is full of magical things patiently waiting for our wits to grow sharper.'</h1><p>Bertrand Russell</p>";
x.style.color = "black";
} else {
x.innerHTML = "<h1>The world is full of magical things patiently waiting for our wits to grow sharper.</h1><p>Isaac Newton</p>";
x.style.color = "white";
}
}
</script>
</body>
</html>