JS Playground
How do I make an js playground?
Reading through http://codepen.io/Universalist/blog/predicates-in-javascript, wanted to write out the code examples so it sinks in a bit better.. What is a js playground? How do you make a js playground? This script and codes were developed by Bryan Fillmer on 11 December 2022, Sunday.
JS Playground - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JS Playground</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/superhero/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div ng-app="PlaygroundApp"> <h2>Javascript Playground</h2> <p>Bonus advantage to this style of programming: easy to test. Building an automated test of the functions using values similar to those below and you would always know where the inevitable bug <b>isn't</b>.</p> <ul ng-controller="PlaygroundController as playCtrl"> <li>Is -5 nonzero: {{playCtrl.nonzero(-5)}}</li> <li>Is 0 nonzero: {{playCtrl.nonzero(0)}}</li> <li>Is 5 nonzero: {{playCtrl.nonzero(5)}}</li> <li> <strong>Is x less than -20, or greater than 5 and less than 10?</strong> <ul> <li>-40: {{playCtrl.inSomeRange(-40)}}</li> <li>-6: {{playCtrl.inSomeRange(-6)}}</li> <li>7: {{playCtrl.inSomeRange(7)}}</li> <li>11: {{playCtrl.inSomeRange(11)}}</li> </ul> </li> <li>Default Data: {{playCtrl.data}}</li> <li>Filtered Data: {{playCtrl.data | filter:playCtrl.rangeFilter}}</li> <li>Test when() with truth: {{playCtrl.whenTruth}}</li> <li>Test when() with false: {{playCtrl.whenFalse}}</li> <li>Test unless() with truth: {{playCtrl.unlessTruth}}</li> <li>Test unless() with false: {{playCtrl.unlessFalse}}</li> <li>Test branch() with truth: {{playCtrl.branchTruth}}</li> <li>Test branch() with false: {{playCtrl.branchFalse}}</li> </ul>
</div> <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
JS Playground - Script Codes CSS Codes
body { padding: 2em;
}
div { max-width: 30em; margin: 0 auto;
}
JS Playground - Script Codes JS Codes
// Working through examples in:
// https://codepen.io/Universalist/blog/predicates-in-javascript
// https://codepen.io/Universalist/blog/expressing-conditions-with-predicates-and-functions
(function () { angular.module('PlaygroundApp', [ ]) .controller('PlaygroundController', function (Predicates) { // Return the value sent to the function. var returnBool = function (t) { return t; }; // Return some truth text. var truthText = function () { return 'Passed.'; }; // Return some truth text. var falseText = function () { return 'Passed with false.'; }; // Return the callback with the bool value passed. var callbackTest = function (c, t) { return c(t); }; /* Use our predicate functions. */ // Returns true if the value is negative or positive. this.nonzero = Predicates.or(Predicates.negative, Predicates.positive); // Check that passed value is less than -20, OR greater than // 5 AND less than 10. this.inSomeRange = Predicates.or(Predicates.less(-20), Predicates.and(Predicates.greater(5), Predicates.less(10))); // Some simple array data. this.data = [1, 2, 3, 4, 5, 6, 7]; // Simple range filter. this.rangeFilter = Predicates.or(Predicates.less(3), Predicates.greater(6)); // Run our test callback with when(), passing on true/false through the chain. this.whenTruth = callbackTest(Predicates.when(returnBool, truthText), true); this.whenFalse = callbackTest(Predicates.when(returnBool, truthText), false); // Run our test callback with unless(), passing on true/false through the chain. this.unlessTruth = callbackTest(Predicates.unless(returnBool, truthText), true); this.unlessFalse = callbackTest(Predicates.unless(returnBool, truthText), false); // Run our test callback with branch(), passing on true/false through the chain. this.branchTruth = callbackTest(Predicates.branch(returnBool, truthText, falseText), true); this.branchFalse = callbackTest(Predicates.branch(returnBool, truthText, falseText), false); }) .factory('Predicates', function () { var service = { // Returns true if p1(x) OR p2(x) is true. or: function (p1, p2) { return function (x) { return p1(x) ? true : p2(x); } }, // Returns true if p1(x) AND p2(x) are true. and: function (p1, p2) { return function (x) { return p1(x) ? p2(x) : false; } }, // Returns true if negation of p(x) holds. not: function (p) { return function (x) { return !p(x); } }, // Returns true for all values less than that passed. less: function (x) { return function (y) { return y < x; } }, // Returns true for all values greater than that passed. greater: function (x) { return function (y) { return y > x; } }, // Returns true if a value is negative. negative: function (x) { return x < 0; }, // Returns true if a value is positive; positive: function (x) { return x > 0; }, /* Technically these aren't predicates. */ // When p(x) true, return function f(x). when: function (p, f) { return function (x) { if (p(x)) { return f(x); } } }, // Opposite of when, return f(x) when p(x) not true. unless: function (p, f) { return function (x) { if (!p(x)) { return f(x); } } }, // Return two different functions depending // on truth value of p(x). branch: function (p, f, g) { return function (x) { if (p(x)) { return f(x); } else { return g(x); } } }, }; return service; });
})();
Developer | Bryan Fillmer |
Username | bfillmer |
Uploaded | December 11, 2022 |
Rating | 3 |
Size | 3,242 Kb |
Views | 8,096 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Attribute Module CSS Grid Mixins | 5,014 Kb |
Five Programming Problems | 4,091 Kb |
Toggle Overlay on UL | 2,509 Kb |
Continued Angular Testbed | 2,239 Kb |
General Tax Calculator | 2,902 Kb |
Attribute Modules for CSS | 5,810 Kb |
Regex Sensei | 1,551 Kb |
On A Boat | 2,615 Kb |
Angular Animation Playground | 2,894 Kb |
Flat Toggle Switch | 2,469 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
DFF Website | Hawcubite | 10,123 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
Old calculator | Gnarfugh | 2,815 Kb |
Three js | Paulq | 2,353 Kb |
Twitch | SarahDunlap | 2,937 Kb |
Hamburger Menu Animation | Salmanraza | 2,580 Kb |
A Pen by Alexandru Pora | Axpro | 1,615 Kb |
Simple Buttons | Haydenmills | 1,750 Kb |
Mondrian | Chrisarmstrong | 2,787 Kb |
Bootstrap Carousel Fade Transition | Rowno | 2,484 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!