I need to write code for this specification: http://courses.cs.washington.edu/co
ID: 3557875 • Letter: I
Question
I need to write code for this specification:
http://courses.cs.washington.edu/courses/cse154/14sp/homework/9/spec.pdf
I've gotten this far:
window.onload = function() {
document.getElementById("search").onclick = search;
};
function define () {
var name = document.getElementById("term").value;
var ajax = new XMLHttpRequest();
ajax.onload = display;
ajax.open("GET", "https://webster.cs.washington.edu/cse154/babynames.php?name=" + term, true);
ajax.send();
}
but kinda get lost from there
THIS is the accompanying "names.html"
<!DOCTYPE html>
<html>
<!--
CSE 154, Homework 9 (Baby Names)
You should download and use this names.html, but do not need to modify it.
-->
<head>
<title>Baby Names</title>
<!-- your files -->
<link href="names.css" type="text/css" rel="stylesheet" />
<script src="names.js" type="text/javascript"></script>
</head>
<body>
<h1>
Baby Names
<span id="w3c">
<a href="https://webster.cs.washington.edu/validate-html.php"><img src="https://webster.cs.washington.edu/images/w3c-html.png" alt="Valid HTML" /></a>
<a href="https://webster.cs.washington.edu/validate-css.php"><img src="https://webster.cs.washington.edu/images/w3c-css.png" alt="Valid CSS" /></a>
<a href="https://webster.cs.washington.edu/jslint/?referer"><img src="https://webster.cs.washington.edu/images/w3c-js.png" alt="Valid JS" /></a>
</span>
</h1>
<div id="namearea">
<h2>First Name:</h2>
<div>
<!-- list of all baby names should be inserted into this select box -->
<select id="allnames" name="allnames" disabled="disabled">
<option value="">(choose a name)</option>
</select>
<button id="search">
<img src="https://webster.cs.washington.edu/images/babynames/pacifier.gif" alt="icon" />
Search
</button>
<span class="loading" id="loadingnames">
<img src="https://webster.cs.washington.edu/images/babynames/loading.gif" alt="icon" />
Loading...
</span>
</div>
<div>
<label><input type="radio" id="genderm" name="gender" value="m" checked="checked" /> Male</label>
<label><input type="radio" id="genderf" name="gender" value="f" /> Female</label>
</div>
</div>
<!-- un-hide this 'resultsarea' div when you fetch data about the name -->
<div id="resultsarea">
<div id="originmeaning">
<h2>Origin/Meaning:</h2>
<div class="loading" id="loadingmeaning">
<img src="https://webster.cs.washington.edu/images/babynames/loading.gif" alt="icon" />
Searching...
</div>
<!-- baby name meaning data should be inserted into this div -->
<div id="meaning"></div>
</div>
<div id="grapharea">
<h2>Popularity:</h2>
<div class="loading" id="loadinggraph">
<img src="https://webster.cs.washington.edu/images/babynames/loading.gif" alt="icon" />
Searching...
</div>
<!-- if there is no ranking data for the given name, show this error message -->
<div id="norankdata">
There is no ranking data for that name/gender combination.
</div>
<!-- baby name ranking data should be inserted into this table -->
<table id="graph"></table>
</div>
<div id="celebsarea">
<h2>Celebrities with This First Name:</h2>
<div class="loading" id="loadingcelebs">
<img src="https://webster.cs.washington.edu/images/babynames/loading.gif" alt="icon" />
Searching...
</div>
<!-- baby name celebrity data should be inserted into this list -->
<ul id="celebs"></ul>
</div>
</div>
<!-- an empty div for inserting any error text -->
<div id="errors"></div>
</body>
</html>
Explanation / Answer
Rate me please. HINT: do yourself