Homework SourseCreate basic websites and add some basic dynamic content to
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.
Solution
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 onclick=\"onClick()\">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>
