o Do not use inline CSS o If your document does not fulfill the above requiremen
ID: 3869647 • Letter: O
Question
o Do not use inline CSS o If your document does not fulfill the above requirements we will reject the submission and your score will be ZERO. This will apply to all your assignment in this class. Meet this following requirements: 1. Must have the 5 required tags. 2. Run the file through the validator to make sure there are no errors (when you finish the assignment). 3. Start by creating two text areas, one for writing your CSS code and one for writing your HTML code 4. For the CSS and HTML text area: o Text areas should have a non-empty placeholder indicating which area holds what code. o If you double click on the CSS text area, then the following default CSS will appear inside the text area h4 color: green; ) p {font-family: cursive, arial; font-size: 22pt;) o If you double click on the HTML text area, then the following default HTML will appear inside the text area: Hello World! p>is it applied? 5. Use a div to create a preview pane (where you show the result of your code, 6. The two text areas and the preview pane must be next to each other. (Usea 7. Create three buttons: (launch, toggle, and clear) there are many examples from class) wrapper div like shown in class)Explanation / Answer
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<style>
#resultbox
{
float: right;
width: 700px;
height: 300px;
border: 1px 10px solid lightgray;
}
#cssbox,#htmlbox{
width: 610px;
height: 150px;
border: 1px 10px solid lightgray;
}
#cssbox,#htmlbox : hover{
width: 610px;
height: 150px;
border: 1px 10px solid #7bc1f7;
}
button
{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
<center><h1>Sixth Challenge<h1></center>
<textarea rows="4" cols="100" id="cssbox" name="cssbox" placeholder="CSS" wrap=on>
</textarea>
<textarea rows="4" cols="50" id="resultbox" name="resultbox" wrap=on placeholder="RESULT">
</textarea>
<textarea rows="4" cols="100" id="htmlbox" name="htmlbox" wrap=on placeholder="HTML">
</textarea>
<br><br>
<h2><button type="button" id="l" name="l">Launch</button>
<button type="button" id="t" name="t">Toggle</button>
<button type="button" id="c" name="c">Clear</button> <span>
By : XXXXXXX</h2> </span>
</body>
</html>
<script>
function setColor(btn, color){
var count=1;
var property = document.getElementById(btn);
property.style.backgroundColor = color;
var html = document.getElementById("cssbox").value ;
//$('#cookiediv', html).hide();
$('#resultbox').html(html);
}
function myCSS() {
document.getElementById("cssbox").value = "h4{color:green;} p{font-family:cursive,arial;font-aize:22pt;}";
}
function myHTML() {
document.getElementById("htmlbox").value = "<h4>Hellow World!</h4> <p>is it applied ?</p>";
}
function eraseText() {
document.getElementById("cssbox").value = "";
document.getElementById("htmlbox").value = "";
}
function alphabetize() {
var html = document.getElementById("htmlbox").value ;
document.getElementById("textarea2").value = eval(html);
$('#resultbox').html(eval(html));
}
</script>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.