In this application you need to display a list of at least 5 sites you are inter
ID: 3735509 • Letter: I
Question
In this application you need to display a list of at least 5 sites you are interested.
The UI should be similar to Figure 1.
Feel free to improve the design of the interface.
1. Display the list of sites instead of Data-0 at each row.
2. Instead of displaying “Position: 6, Data: Data-6” at the top textview, display the title of your app.
When the user clicks on one of them a second screen appears showing two buttons. The first button “Map it” display a location map of the selected place, the second button “More
Info” takes the user to the site’s webpage.
Position: 6 Data: Data-6 Data-0 Data-1 Data-2 Data-3 Data-4 Data-5 Data-6 Data-7Explanation / Answer
Answer)
Page1
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>Page Title</title>
<meta charset = "UTF-8" />
</head>
<style>
h1{
background-color: pink;
}
ul {
list-style-type: none;
}
li{
}
</style>
<body>
<h1 id="titlePage"></h1>
<script>
var title=document.getElementById("titlePage");
title.innerHTML=document.title;
</script>
<form action="tt.html" method="get">
<input type="submit" name="site1" value="site1"></input>
<hr>
<input type="submit" name="site2" value="site2"></input>
<hr>
<input type="submit" name="site3" value="site3"></input>
<hr>
<input type="submit" name="site4" value="site4"></input>
<hr>
<input type="submit" name="site5" value="site5"></input>
<hr>
</form>
</body>
</html>
Page2
<!DOCTYPE HTML>
<head>
<title>Page Title</title>
<meta charset = "UTF-8" />
</head>
<style>
h1{
background-color: pink;
}
</style>
<body>
<h1 id="titlePage"></h1>
<script>
var title=document.getElementById("titlePage");
title.innerHTML=document.title;
function fun1(){
//you can take user to another page
}
function fun2(){
//you can take user to the given website using variable name in given url
}
</script>
<button>Map it</button>
<button>Map Info</button>
</body>
</html>