6) a)Take the application which styled a paragraph listed below and modify it so
ID: 3716801 • Letter: 6
Question
6) a)Take the application which styled a paragraph listed below and modify it so that additional css style is given to the enclosing div section element- make the div section have a gray background color and give it a black border. The css should make use of more advanced techniques that we covered in the slides dealing with nested elements and offsets within those elements- this was the unsophisticated preliminary version which simply positioned elements inside the page but not relative to the container they were situated in. (Result attached). b) Create a js file which -contains a button click function which accepts text at run time within a textbox element, c) and then replaces the original paragraph content with the dynamically defined paragraph content- use document.getElementById("texta").value for a textarea input; d) Allows the click event to change the background color of the paragraph from blue to light gray and back again with each button click. ( See Project_Question_6_ jpegs which are attached) <! DOCTYPE html> <html> <head> <title> First Illustration</title> <link rel="stylesheet" type="text/css" href="firstillex.css"> </head> <body> <h4 class="class4">CS 193X: Web Fun</h4> <h4>CS 193X: Web Fun</h4> <h1>CS 3300 WEB FUN</h1> <div > <p ><strong>Announcements</strong></br> 4/3: Homework 0 is out! <span class ="class1"> Due Friday.</span> </br> 4/3: Office hours are now posted.</p> </br> <a href="http://www.fordham.edu">View Syllabus</a> </div> </body> </html> THIS IS FIRSTILLEX.CSS p{background-color:lavenderblush; border: 3px solid hotpink ; width: 25%; margin-left: 380px;} /*h1{ text-align:center;}*/ h1{ margin-left: 380px;} a{ color:blue; margin-left: 450px;} .class1{ background-color:yellow;} .class4{font-size:10px; font-style:italic;}
Explanation / Answer
// Note-- Please map the customejsfile in html page
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script> scr="customejsfile.js"> </script>
<style>
.textColor
{ color: #ffff;
background-color: #255577;}
.solid {border-style: solid;}
.back-grd-clr { background-color:#7e8282; }
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 9px 27px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
cursor: pointer;
}
.mystyle {
width: 100%;
padding: 25px;
background-color: #b9b1af;
color: #ffff;
box-sizing: border-box;
}
</style>
<div class=" back-grd-clr solid">
<h3 id="headId" class="textColor">This is a heading in a div element</h3>
<textarea rows="4" cols="50" id="textArea">
</textarea> <br>
<button class="button"> </div>
</body>
</html>
// customejsfile.js file
function addtext(){
var textinput=$("#textArea").val();
$("#headId").text(textinput).addClass("mystyle");
document.getElementById("headId").innerHTML = document.getElementById("textArea").value
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.