Home work question. (html/java) should be possible for someone to select the user by gender. You should be using the select element within the id selectgender to be able to do this .The select element should also be an option to select "All" genders. This filter should combine appropriately with the year of birth filter as well. For example,if male is chosen then it should show all male users. It should be possible for the someone to select a range of birth years, When they do this the table should update to show only the users for that range of years. For example if the years ranges are 2000 -2002 it should be only showing users in that year range. I will include the java, json and html below . Any help will be great. JSON [ { "users": [ { "userId": 1, "firstName": "Krish", "lastName": "Lee", "Gender":"Male", "year of birth":2000 }, { "userId": 2, "firstName": "racks", "lastName": "jacson", "Gender":"Female", "year of birth":1999 { "userId": 3, "firstName": "denial", "lastName": "roast", "Gender":"Male", "year of birth":2002 }, { "userId": 4, "firstName": "devid", "lastName": "neo", "Gender":"Non binary", "year of birth":1998 }, { "userId": 5, "firstName": "jone", "lastName": "mac", "Gender":"Male", "year of birth":2001 } ] } JAVA const movieTable = document.getElementById("movieTable") fetch("user.json") .then(response => response.json()) .then(data => { console.log(data); data.map((movie => { usersTable.innerHTML+= ` ${users.userId} ${users.firstName} ${users.lastName} ${users.yearofbirth} ${users.gender} ` })) }); HTML USERS userId firstName lastName year of birth gender
Home work question. (html/java)
should be possible for someone to select the user by gender. You should be using the select element within the id selectgender to be able to do this .The select element should also be an option to select "All" genders. This filter should combine appropriately with the year of birth filter as well. For example,if male is chosen then it should show all male users.
It should be possible for the someone to select a range of birth years, When they do this the table should update to show only the users for that range of years. For example if the years ranges are 2000 -2002 it should be only showing users in that year range.
I will include the java, json and html below . Any help will be great.
JSON
[
{
"users": [
{
"userId": 1,
"firstName": "Krish",
"lastName": "Lee",
"Gender":"Male",
"year of birth":2000
},
{
"userId": 2,
"firstName": "racks",
"lastName": "jacson",
"Gender":"Female",
"year of birth":1999
{
"userId": 3,
"firstName": "denial",
"lastName": "roast",
"Gender":"Male",
"year of birth":2002
},
{
"userId": 4,
"firstName": "devid",
"lastName": "neo",
"Gender":"Non binary",
"year of birth":1998
},
{
"userId": 5,
"firstName": "jone",
"lastName": "mac",
"Gender":"Male",
"year of birth":2001
}
]
}
JAVA
const movieTable = document.getElementById("movieTable")
fetch("user.json")
.then(response => response.json())
.then(data => {
console.log(data);
data.map((movie => {
usersTable.innerHTML+= `
<tbody><tr>
<td> ${users.userId}</td>
<td> ${users.firstName}</td>
<td> ${users.lastName}</td>
<td> ${users.yearofbirth}</td>
<td> ${users.gender}</td>
</tr>
</tbody></table>`
}))
});
HTML
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>USERS</title>
<script defer src="user.js"></script>
</head>
<select id="selectbirth1">
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
</select>
<select id="selectbirth2">
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<select id="selectgender">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Non binary">2000</option>
</select>
</select>
<table id="usersTable">
<tbody><tr>
<th>userId</th>
<th>firstName</th>
<th>lastName</th>
<th>year of birth </th>
<th>gender</th>
</tr>
</tbody></table>
</body></html>
Step by step
Solved in 2 steps
