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 |
Five Programming Problems | 4,091 Kb |
Toggle Overlay on UL | 2,509 Kb |
On A Boat | 2,615 Kb |
Prototype Angular JS Workout Log | 2,599 Kb |
YOLO KEITH | 4,043 Kb |
Useful Loading Overlay | 3,833 Kb |
Basic Javascript Chaining | 2,399 Kb |
Regex Sensei | 1,551 Kb |
JS Playground | 3,242 Kb |
Shopping Site Mockup | 6,977 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 |
CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
The Fantastic Mr Fox | MalZiiirA | 10,435 Kb |
SVG Playground | Roygwells | 1,834 Kb |
Responsive Boxes without Images | Andymcfee | 4,120 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
Exploding Text | Jjmartucci | 4,749 Kb |
LDE old privacy page | Jasonangle | 2,339 Kb |
Modal Dialog | Gigaleet | 2,251 Kb |
Airbnb Homepage | SindhujaD | 2,480 Kb |
Zeichensatz | Moklick | 2,058 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!