Lab Assignment 2

---

• In this lab assignment, I created four wireframes – LoginWireframe, RegisterWireframe, HomeWireframe and MapsWireframe. This web application has four html pages – Login page, Registration page, Home page and Maps page.
• The Login page takes the username and password details of the user. By clicking the ‘Login’ button, the user is redirected to the Home page. If the user doesn’t have an account, he/she can register by clicking the ‘Register’ button. In the Register page, basic information of the user is collected. When the user provides all the required details, he/she is redirected to the Home page.
• The Home page has a “Maps with weather” button which opens the Maps page. In this page, the user can enter two different city names to find the distance between them in Google Maps. Also, the details of the weather in these two cities are displayed. There is also a ‘Back to Home’ button which opens the Home page. After using the application, the user can sign out from the Home page.

Wireframes:-

1. Login Page Wireframe
2. Register Page Wireframe
3. Home Page Wireframe
4. Maps Page Wireframe

Screenshots of the application are given below:-

Login Page - First page of the application.

Registration Page - For new users. They can create new free account by just filling their basic details.

The user cannot proceed to the home page without providing all the necessary details.

Home Page - This page has two buttons- Maps with weather and Sign out.

Maps with Weather - By entering the city names, user can get the directions and weather details.

Autocomplete feature is enabled in our google maps.

Local Storage - The details entered by the user are stored in the local storage.

JSLint - This tool is used to check the code quality of JavaScript code. http://www.jslint.com/