Create basic websites and add some basic dynamic content to your websites using
ID: 3932778 • Letter: C
Question
Create basic websites and add some basic dynamic content to your websites using client-side scripting (i.e., using Javascript and JQuery). . At a minimum, your project should meet the following requirements:
One of your pages should include a JQuery UI Widget (e.g., Accordian, Tabs, Slideshow, etc.) with relevant content.
At least one of your pages should include a region of text in which the content of that region changes on a mouse hover event. When the mouse hover ends, the content should return to its original form. An example of this could be a paragraph that reads “Win a brand new car!” such that when the user hovers over the paragraph, the text turns into a hyperlink that reads “Click here to learn more.” When the user moves the mouse off of the link, the text goes back to “Win a brand new car!”
One of your pages must include a form consisting of at least three input element types. Associated with your form should be a script that reads in user input and produces output that is displayed somewhere on your webpage. As an example, if you were building a pizza ordering website, you could have a page with a form that lets users specify options for pizza size, sauce, toppings, etc. in such a way that, whenever any setting is changed, a script runs to calculate the total price of the pizza, which is then displayed.
One of your pages should include a script that utilizes AJAX (via an XMLHttpRequest object) to access text that is stored in a file on your web server. This can be a plain text file and does not need to be a server side script. Hint. You will need a web server (e.g., XAMPP) running to process the HTTP requests.
Explanation / Answer
index.html
<html>
<head>
<title>Game of Thrones!</title>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#accordion").accordion();
});
</script>
<style type="text/css">
div#contact:hover span#contactTyrion {
display:none;
}
div#contact span#valar {
display:none;
}
div#contact:hover span#valar {
display:inline;
}
</style>
</head>
<body>
<center><h1>Table of contents</h1></center>
<div id="accordion">
<h3>Characters Page</h3>
<div>
<p>
Go to characters page:<br/>
<a href="characters.html">Characters</a>
</p>
</div>
<h3>Buy merchandise</h3>
<div>
<p>
Buy game of thrones merchandise:<br/>
<a href="merchandise.html">Merchandise</a>
</p>
</div>
<h3>Contact Tyrion</h3>
<div id="contact">
<p>
<span id="contactTyrion">Contact Tyrion Lanister:</span><span id="valar">Valar Morghulis</span><br/>
<a href="contact.html">Contact Tyrion Lannister</a>
</p>
</div>
</div>
</body>
</html>
merchandise.html
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" >
<title>Game of Thrones!</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>Buy Merchandize</h1>
<form>
First name:<br>
<input type="text" name="firstname"><br><br>
Last name:<br>
<input type="text" name="lastname"><br><br>
<input type="radio" name="merchandiseType" id="ts" checked> Tyrion Stickers<br>
<input type="radio" name="merchandiseType" id="tp">Tywin Wallpapers<br>
<input type="radio" name="merchandiseType" id="mfg">Many Faced God Coin<br>
Quantity:<br>
<input type="text" id="quantity"><br><br>
<button>Calculate Cost</button><br /><br /><br />
<div id="result">
</div>
<script>
function onClick(){
console.log("click!");
if (document.getElementById('ts').checked) {
var price = 20;
var quantity = parseInt(document.getElementById('quantity').value, 10);
cost = quantity*price;
document.getElementById("result").innerHTML = cost;
}
else if (document.getElementById('tp').checked) {
price = 40;
var quantity = parseInt(document.getElementById('quantity').value, 10);
cost = quantity*price;
document.getElementById("result").innerHTML = cost;
}
else if (document.getElementById('mfg').checked) {
price = 30;
var quantity = parseInt(document.getElementById('quantity').value, 10);
cost = quantity*price;
document.getElementById("result").innerHTML = cost;
}
}
</script>
</form>
</body>
</html>
contact.html
<html>
<title>Contact Tyrion</title>
<script>
window.onload = function() {
var ul = document.getElementsByTagName('ul')[0];
function readTextfile() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if(xhr.status == 200) {
showContents(xhr.responseText, xhr);
}
}
}
xhr.open('GET', 'contacts.txt', true);
xhr.send();
}
function showContents(responseText) {
var li = document.createElement('li');
li.innerHTML = responseText;
ul.appendChild(li);
}
readTextfile();
setInterval(readTextfile, 5000);
}
</script>
</head>
<body>
<h1>Contact List of Tyrion</h1>
<ul></ul>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.