Skip to content

Instantly share code, notes, and snippets.

/index.html

Created September 30, 2016 01:51
Show Gist options
  • Save anonymous/850859a02a622db5dc866aa9301a405d to your computer and use it in GitHub Desktop.
Save anonymous/850859a02a622db5dc866aa9301a405d to your computer and use it in GitHub Desktop.
Download ZIP
Weather Monitoring in RxJS RxJS // source http://jsbin.com/veheje
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="RxJS">
<meta charset="UTF-8">
<title>Weather Monitoring in RxJS</title>
<style>
#form {
margin-bottom: 20px;
}
.location {
float: left;
padding: 10px;
margin-right: 20px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
.location p {
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.zip { font-size: 2em; }
.temp { font-size: 4em; }
</style>
</head>
<body>
<div id="app-container">
<div id="form">
<label>Zip Code:</label>
<input type="text" id="zipcode-input">
<button id="add-location">Add Location</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.min.js"></script>
<script>
// our code will go here
// console.log('RxJS included?', !!Rx);
</script>
<script id="jsbin-javascript">
'use strict';
var appContainer = document.getElementById('app-container');
var zipcodeInput = document.getElementById('zipcode-input');
var addLocationBtn = document.getElementById('add-location');
var btnClickStream = Rx.Observable.fromEvent(zipcodeInput, 'input').map(function (e) {
return e.target.value;
}).filter(function (zip) {
return zip.length === 5;
}).forEach(function (val) {
return console.log('zipInputStream val', val);
});
</script>
<script id="jsbin-source-html" type="text/html"> <!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="RxJS">
<meta charset="UTF-8">
<title>Weather Monitoring in RxJS</title>
<style>
#form {
margin-bottom: 20px;
}
.location {
float: left;
padding: 10px;
margin-right: 20px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
.location p {
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.zip { font-size: 2em; }
.temp { font-size: 4em; }
</style>
</head>
<body>
<div id="app-container">
<div id="form">
<label>Zip Code:</label>
<input type="text" id="zipcode-input">
<button id="add-location">Add Location</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.min.js"><\/script>
<script>
// our code will go here
// console.log('RxJS included?', !!Rx);
<\/script>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">const appContainer = document.getElementById('app-container');
const zipcodeInput = document.getElementById('zipcode-input');
const addLocationBtn = document.getElementById('add-location');
const btnClickStream =
Rx.Observable
.fromEvent(zipcodeInput, 'input')
.map(e => e.target.value)
.filter(zip => zip.length === 5)
.forEach(val => console.log('zipInputStream val', val));</script></body>
</html>
Raw
jsbin.veheje.js
'use strict';
var appContainer = document.getElementById('app-container');
var zipcodeInput = document.getElementById('zipcode-input');
var addLocationBtn = document.getElementById('add-location');
var btnClickStream = Rx.Observable.fromEvent(zipcodeInput, 'input').map(function (e) {
return e.target.value;
}).filter(function (zip) {
return zip.length === 5;
}).forEach(function (val) {
return console.log('zipInputStream val', val);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment