JS Playground

Developer
Size
3,242 Kb
Views
8,096

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 Previews

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; });
})();
JS Playground - Script Codes
JS Playground - Script Codes
Home Page Home
Developer Bryan Fillmer
Username bfillmer
Uploaded December 11, 2022
Rating 3
Size 3,242 Kb
Views 8,096
Do you need developer help for JS Playground?

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!

Bryan Fillmer (bfillmer) Script Codes
Create amazing video scripts with AI!

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!