JavaScript based single page Web apps Due: Tuesday February 14th a 11:55pm In th
ID: 3791844 • Letter: J
Question
JavaScript based single page Web apps Due: Tuesday February 14th a 11:55pm In this assignment you are going to build a small web app based on just the native capabilities of Node js and javascript. Specifically, you will build an app that allows a user to retrieve and display super hero bios that are hosted on the server The components are Server: built with just Node.js and its built in modules (e.g. http, fs, url, path), and whatever javascript you want to write. Client: browser is provided with a web page from the server consisting of html, css, and javascript, and is updated with JSON objects. Restrictions: Because each layer of node/javascript based technologies like npm modules, jquery, or the express framework solves many problems for you, in this assignment their use is disallowed. Using these technologies for this assignment will result in a mark of zero for the assignment. In later assignments we will bring these in, and focus on new challenges. So pay attention to the technology restrictions in the various assignments in the course. One exception for this assignment is the use of the mime-types module in ejs. You may employ this module if you see fit nodeExplanation / Answer
I have no more idea about the server side code but i can provide the client side code regarding to the UI part of the app and request send to the server in the form of JSon files.
index.html --
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<div><p>Name</p> <select id="name">
<option selected>Wolverine</option>
<option>Hulk</option>
<option>Spider man</option>
<option>Wonder Woman</option>
<option>Batman</option>
<option>Dare devil</option>
</select></div>
<div><p>Alter ego</p> <select id="alter">
<option selected>Logan</option>
<option>Bruce banner</option>
<option>peter parker</option>
<option>Diana dance</option>
<option>Bruce waynce</option>
<option>Matt murdoch</option>
</select></div>
<div><p>Jurisdiction</p> <select id="juris">
<option selected>North america</option>
<option>new mexico and elsewhere</option>
<option>Newyork city</option>
<option>earth and beyond</option>
<option>Gothan city</option>
<option>Hells kitchen</option>
</select></div>
<div><p>Super powers</p> <select id="power">
<option selected>Agility</option>
<option>Enhanced senses</option>
<option>Intelligence</option>
<option>Weapon master</option>
<option>Invulnerability</option>
<option>super strength</option>
</select></div>
<div><p>Style</p>
<input type="text" id="style" ></div>
</div>
</body>
</html>
javascript file --
var data = [{
"Name": document.getElementById('name').value,
"AlterEgo": document.getElementById('alter').value,
"Jurisdiction": document.getElementById('juris').value,
"SuperPowers":document.getElementById('power').value,
"style": document.getElementById('style').value
}];
var url = "http://localhost:2406/allHeroes";
var deferred = $q.defer();
$http.get({
method: 'GET',
url: url,
data: data,
headers: {
'Content-Type': 'application/json;'
},
timeout: 1000
})
.success(function(data) {
console.log("Response is:", data);
if (data.responseStatus[0].code == 200 && data.responseStatus[0].message != "UNKNOWN_ERROR") {
var locData = data;
deferred.resolve(locData);
}
})
.error(function(data, status) {
if (status == 0) {
if (navigator.connection.type == "none" || navigator.connection.type == "unknown") {
console.log("Network not found");
} else {
console.log("Error in server connection");
}
return;
}
deferred.reject();
});
return deferred.promise;
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.