So I\'m really lost with this assignment. Not sure where to begin. Hopefully som
ID: 662915 • Letter: S
Question
So I'm really lost with this assignment. Not sure where to begin. Hopefully someone can help, because I already got an F on this so now I just need to know.
Q:
Study the HTML, CSS and JavaScript code in Listings 2.2, 2.2.1, and 2.2.2 below.
In the HTML Code add two more buttons that will allow the user to view the code in the target division to be viewed as inline and block.
You will need to create CSS code for allowing inline and block display options.
Here is the inline and block CSS code:
.inline{
display: inline;
}
.block {
display: block;
}
You will need to create two more JavaScript functions for the inline and block.
Explanation / Answer
----------------------------------index.html-----------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>Click to Hide</title>
<meta charset="UTF-8">
<!-- css -->
<link rel="stylesheet" href="css/hide.css">
</head>
<body>
<button type="button" id="hide">Hide the text</button>
<div id="target">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat iaculis sagittis.
Aenean in nulla consectetur, consequat diam sed, porttitor dui. Etiam egestas at magna feugiat rutrum.
Sed id mollis tellus. Curabitur in tellus id sapien aliquam auctor at ut felis.</p>
</div><!-- #target -->
<button type="button" id="inline">To INLINE</button>
<button type="button" id="block">To BLOCK</button>
<!-- javascript -->
<script src="js/hide.js"></script>
</body>
</html>
------------------------------------------------hide.css-----------------------------------------------
.hide{
display: none;
}
.inline{
display: inline;
}
.block {
display: block;
}
------------------------------------------------------hide.js------------------------------------------------------------------
/* save the 2 nodes to variables */
var button = document.getElementById("hide"),
target = document.getElementById("target"),
inlineButton = document.getElementById("inline"),
blockButton = document.getElementById("block");
/* define what we want to do in a function */
function hide(){
target.setAttribute("class", "hide");
}
function inline(){
//first checks whether target already has a class "block" and if yes then remove it
if(target.hasAttribute("class", "block")){
target.removeAttribute("class", "block");
}
//then set the class "inline" for target
target.setAttribute("class", "inline");
}
function block(){
//first checks whether target already has a class "inline" and if yes then remove it
if(target.hasAttribute("class", "inline")){
target.removeAttribute("class", "inline");
}
//then set the class "block" for target
target.setAttribute("class", "block");
}
/* add the CSS class when the button is clicked */
button.addEventListener("click", hide, false);
inlineButton.addEventListener("click", inline, false);
blockButton.addEventListener("click", block, false);
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.