Collection Map Weather Report Solution
Objective: To add scripting to the existing web page and work with JavaScript Es-6 feature – the ES-6 collections concept.
Problem Description: As part of weather forecasting application, you are provided with an html page to obtain input for a city and its temperature. Using the ES-6 collections, add records into the Map and search for a record based on key.
Following are the files that contain code snippets
| index.html | HTML for webpage (complete implementation is given for you). You only have to run this. No change needs to be done in this file. |
| script.js | Add your code to this file for the functions given. |
Procedure to complete the exerciseIn script.js, provide the implementation for the functions as per the requirements mentioned below
| addRecords(city, temperature) | A Map defined as weatherMap is provided as part of code skeleton. Here, addRecords method should add the city and its corresponding temperate into weatherMap. In weatherMap, city should be considered the key & temperature, the value. |
| weatherReport( ) | On Clicking submit button, this function is invoked. 1. Get the city and temperature values. 2. Invoke addRecords method and pass the city and temperature as parameters. 3. Display the message “Weather Report added successfully.” in the div tag with id result1. (Refer to screenshot) |
| searchReport( ) | On Clicking Get Temperature submit button, this function is invoked. Get the search input value. Based on this input, get the corresponding temperature from the map and display it in the div tag with id “result2“. Output should be displayed as “Temperature of <<city>> : <<Temperature>> (Refer to screenshot) |
Screenshots
Screenshot 3:
SOLUTION
Program: Collection Map Weather Report Solution
script.js
var weatherMap = new Map(); // DO NOT CHANGE THIS STATEMENT
function addRecords(city,temperature){
weatherMap.set(city,temperature);
}
function searchReport(){
var search = document.getElementById("searchInput").value;
document.getElementById("result2").innerHTML = "Temperature of" + `${search} :
${weatherMap.get(search)}`;
// Fetch search input
// Get the temperature based on the search input from Map
// Display the output as per the requirement in the description
}
function weatherReport(){
var city = document.getElementById("city").value;
var temp =document.getElementById("temperature").value;
addRecords(city,temp);
document.getElementById("result1").innerHTML = "Weather Report added successfully.";
// Fetch city and temperature value
// Invoke addRecords method
// Display the message as per the requirement in the description
}
// DO NOT ALTER/DELETE THIS METHOD
function enableSearch(){
document.getElementById("result1").innerHTML="";
document.getElementById("searchDiv").style["display"]="block";
}index.html
<html>
<head>
<style>
h2{
color:white;
}
#main{
margin-left: auto;
margin-right: auto;
text-align: left;
border: solid 2px black;
border-spacing: 3px;
border-radius: 6px;
width: 35%;
padding: 3px;
/*color: #009900;*/
background-color: #f2f2f2 ;
}
body{
text-align: center;
background-color: #848484;
}
#submit{
margin-right: auto;
margin-left: auto;
text-align: center;
padding: 5px;
}
div{
margin-top:1%;
margin-left: auto;
margin-right: auto;
text-align: left;
background-color: #138D75;
color:white;
width: 35%;
/*padding: 3px;*/
width: 35%;
}
#searchDiv{
display:none;
}
</style>
<script src="script.js"></script>
</head>
<body>
<form>
<h2>Weather -Report</h2>
<table id="main">
<tr>
<td>City</td>
<td><input type="text" id="city"></td>
</tr>
<tr>
<td>Temperature</td>
<td><input type="text" id="temperature"></td>
</tr>
<tr>
<td><button type="submit" id="submit" onclick="weatherReport(); return false;">Submit</button></td>
<td><button type="submit" id="search" onclick="enableSearch(); return false;">Search</button></td>
</tr>
</table>
<div id="searchDiv">
<table>
<tr><td>City</td></tr>
<tr><td><input type="text" id="searchInput"></td></tr>
<tr><td><button id="find" type="submit" value="search" onclick="searchReport(); return false;">Get Temperature</button></td></tr>
</table>
</div>
<div id="result1"></div>
<div id="result2"></div>
</form>
</body>
</html>Related:
