You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
It's a webpage that allows users to search for weather information using the Forecast.io API and display the results on the same page below the form.
The user provides the location information such as Street address, City and State for which they
would want to find the detailed weather information or provide their current location.
Once the user has provided the data and clicks on the Search button, validation must be done to
check that the entered data is valid. Once the validation is successful, 3 tabs should be displayed.
The 3 tabs correspond to Current tab, Hourly tab and Weekly tab.
Webpage also supports adding cities to and removing cities from the Favorites tab and sharing the weather info with Twitter.
Usage of these concepts and technologies:
Get familiar with the AJAX and JSON technologies
Used a combination of HTML5, Bootstrap, and Angular on client side.
Used JavaScript / Node.js on server side
Get familiar with Bootstrap to enhance the user experience using responsive design.
Get hands-on experience of Amazon Web Services/Google Cloud App Engine/Microsoft Azure.
Used APIs such as Forecast.io API, Google Customized Search API and Twitter API.
Backgroud
AJAX and JSON
AJAX (Asynchronous JavaScript + XML) incorporates several technologies:
Standards-based presentation using XHTML and CSS
Result display and interaction using the Document Object Model (DOM)
Data interchange and manipulation using XML and JSON
Asynchronous data retrieval using XMLHttpRequest
JavaScript binding everything together
JSON, short for JavaScript Object Notation, is a lightweight data interchange format. Its main
application is in AJAX web application programming, where it serves as an alternative to the use
of the XML format for data exchange between client and server.
Bootstrap
Bootstrap is a free collection of tools for creating responsive websites and web applications. It
contains HTML and CSS-based design templates for typography, forms, buttons, navigation and
other interface components, as well as optional JavaScript extensions. To learn more details about
Bootstrap please refer to the lecture material on Responsive Web Design (RWD). Please use
Bootstrap 4 in this homework. See the class slides at:
Angular
Angular is a toolset for building the framework most suited to your application development. It is
fully extensible and works well with other libraries. Every feature can be modified or replaced to
suit your unique development workflow and feature needs. Angular combines declarative
templates, dependency injection, end to end tooling, and integrated best practices to solve
development challenges. Angular empowers developers to build applications that live on the
web, mobile, or the desktop
Node.js
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an eventdriven, non-blocking I/O model that makes it lightweight and efficient. Node.js package
ecosystem, npm, is the largest ecosystem of open source libraries in the world.
To learn more about Node.js, visit:https://Node.js.org/en/
Also, Express.js is strongly recommended. Express.js is a minimal and flexible Node.js web
application framework that provides a robust set of features for web and mobile applications. It is
in fact the standard server framework for Node.js.
To learn more about Express.js, visit: http://expressjs.com/