Creating a New App

First, we will need to create the project from the terminal using the following command.

Download: file
cordova create weather com.example.weather Weather

The cordova create command bootstraps a basic app using the supplied folder, app ID, and name. The new app has the following directory structure.

Download: file
├── config.xml
├── hooks
│   └── README.md
├── platforms
├── plugins
└── www
    ├── css
    │   └── index.css
    ├── img
    │   └── logo.png
    ├── index.html
    └── js
        └── index.js

7 directories, 6 files

Most of our work will be focused on the files in the www folder. Since a Cordova application is a web app, most of the development can be done in a browser before testing on a phone. Let's get started with writing our basic weather app.

index.html

First, open up www/index.html in your favorite text editor, and replace the default HTML with the following:

Download: file
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Weather</title>
  </head>
  <body>
    <div class="app">
      <img src="" id="icon">
      <div id="info">Loading...</div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
  </body>
</html>

The HTML above sets the title of the page to 'Weather', adds a couple div elements to hold our weather info, and adds the latest version of jQuery to the page.

index.css

Next, open up www/css/index.css in your text editor, and replace the existing CSS with the following:

Download: file
* {
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
  -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
  -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
  background-color:#000;
  font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
  font-size:12px;
  height:100%;
  margin:0px;
  padding:0px;
  text-transform:uppercase;
  width:100%;
  color:#fff;
}

/* Portrait layout (default) */
.app {
  position:absolute;             /* position in the center of the screen */
  left:50%;
  top:16%;
  height:50px;                   /* text area height */
  width:225px;                   /* text area width */
  text-align:center;
  padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
  margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
  /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
  .app {
    padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
    margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
    /* offset horizontal: half of image width and text area width */
  }
}

#icon, #info {
  text-align: center;
}

#icon {
  width: 50%
}

h1 {
  padding: 0;
  margin: 0;
}

index.js

The final modification in the www folder we will need to make is to the www/js/index.js file.

Download: file
var app = {

  zip: 10013, // nyc. feel free to change

  initialize: function() {
    this.bindEvents();
  },

  bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
  },

  onDeviceReady: function() {

    // grap weather info
    $.getJSON('http://api.openweathermap.org/data/2.5/find?q=' + app.zip + ',us&units=imperial', function(data) {

      var info = $('#info'),
          icon = $('#icon'),
          result;

      // no results. bail
      if(data.count < 1) {
        info.html('could not load weather');
        return;
      }

      // set result var to first result
      result = data.list[0];

      // show icon if we have a result
      if(result.weather.length > 0) {
        icon.attr('src', 'http://openweathermap.org/img/w/' + result.weather[0].icon + '.png');
        icon.show();
      }

      // add info to page
      info.html('<h1>' + result.name + '</h1><br>');
      info.append(result.main.temp + '° F<br>');
      info.append(result.main.humidity + '% Humidity<br>');
      info.append(result.wind.speed + ' MPH');

    });

  }

};

app.initialize();

Now that we have added all of our code to the project, we can test our app.

This guide was first published on Jun 26, 2015. It was last updated on Jun 26, 2015.
This page (Creating a New App) was last updated on Jun 16, 2020.