Workshop: Render a clock using setInterval

See related slides for this part: http://omniscientjs.github.io/workshop-slides/#22

← Previous task { // Use "add2" to add 2 + 4 and save to "result" var result; result.should.equal(6); }); // 2: Transforming data through map var list = [1, 2, 3]; // Make function "square" which takes argument and // returns the squared result var square; it('squares numbers', () => { // Transform items in list to their squares using map. // Save to result var result; result.should.eql([1, 4, 9]) }); // List for comming tasks var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // 3: Picking items in list by filter // Make predicate function "isFizzOrBuzz" which takes argument number // and returns bool if argument is dividable by 5 or devidable by 3 var isFizzOrBuzz; it('keeps fizzbuzz numbers', () => { // Make new list (based on "numbers") with only items that // fulfills the isFizzOrBuzz predicate. // Save to result var result; result.should.eql([3, 5, 6, 9, 10]) }); // 4: Reducing list to a number // Make a function which takes two arguments and return // the multiplication result of the arguments var multiply; it('multiplies numbers', () => { // Use reduce to multiply all numbers in "numbers" to one int. // Save to result var result; result.should.equal(3628800); }); // 5: Transforming data and picking elements var episodes = [ { name: "Cartman Gets an Anal Probe" }, { name: "Weight Gain 4000" }, { name: "Volcano" }, { name: "Big Gay Al's Big Gay Boat Ride" }, { name: "An Elephant Makes Love to a Pig" }, { name: "Death" }, { name: "Pinkeye" } ]; // Make two functions: // - "asName(obj)" returns "name" property of argument object // - "nth(list, i)" returns nth item (defined by second argument) of passed list it('maps episodes => name', function () { // make resultOne and resultTwo which contains // the first and second name of the episodes using // the functions you created (asName and nth) var resultOne; var resultTwo; resultOne.should.equal("Cartman Gets an Anal Probe"); resultTwo.should.equal("Weight Gain 4000"); }); ">Next task →

Tasks

  1. Part 0: Introduction to the workshop
  2. Part 1: Making Basic Components
  3. Part 1: Passing Properties
  4. Part 1: Transforming input props
  5. Part 1: Composing Simple Components
  6. Part 1: Composing Components Through Children
  7. Part 1: Render two times and see that only the second will be visible
  8. Part 1: Render twice to update the view using setTimeout
  9. Part 1: Render a clock using setInterval [Active]
  10. Part 2: Higher order functions
  11. Part 2: Recursive sum
  12. Part 2: Immutable.js
  13. Part 2: Curry
  14. Part 2: Cursors
  15. Part 3: Immstruct - Hello, Hank
  16. Part 3: Immstruct - counter
  17. Part 3: Immstruct - clock
  18. Part 3: Mixins - never rerender
  19. Part 3: Mixins - only show odd numbers
  20. Part 3: Mixins - immutable.js shouldComponentUpdate
  21. Part 3: Omniscients shouldComponentUpdate in React
  22. Part 3: Hello Omniscient
  23. Part 3: Hello Omniscient JSX
  24. Part 3: Composing Omniscient Components
  25. Part 3: Make a simple TODO app With Cursors
  26. Part 3: Add Mixins and Life Cycle Mixins
  27. Part 3: Create filtering search
← Previous task { // Use "add2" to add 2 + 4 and save to "result" var result; result.should.equal(6); }); // 2: Transforming data through map var list = [1, 2, 3]; // Make function "square" which takes argument and // returns the squared result var square; it('squares numbers', () => { // Transform items in list to their squares using map. // Save to result var result; result.should.eql([1, 4, 9]) }); // List for comming tasks var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // 3: Picking items in list by filter // Make predicate function "isFizzOrBuzz" which takes argument number // and returns bool if argument is dividable by 5 or devidable by 3 var isFizzOrBuzz; it('keeps fizzbuzz numbers', () => { // Make new list (based on "numbers") with only items that // fulfills the isFizzOrBuzz predicate. // Save to result var result; result.should.eql([3, 5, 6, 9, 10]) }); // 4: Reducing list to a number // Make a function which takes two arguments and return // the multiplication result of the arguments var multiply; it('multiplies numbers', () => { // Use reduce to multiply all numbers in "numbers" to one int. // Save to result var result; result.should.equal(3628800); }); // 5: Transforming data and picking elements var episodes = [ { name: "Cartman Gets an Anal Probe" }, { name: "Weight Gain 4000" }, { name: "Volcano" }, { name: "Big Gay Al's Big Gay Boat Ride" }, { name: "An Elephant Makes Love to a Pig" }, { name: "Death" }, { name: "Pinkeye" } ]; // Make two functions: // - "asName(obj)" returns "name" property of argument object // - "nth(list, i)" returns nth item (defined by second argument) of passed list it('maps episodes => name', function () { // make resultOne and resultTwo which contains // the first and second name of the episodes using // the functions you created (asName and nth) var resultOne; var resultTwo; resultOne.should.equal("Cartman Gets an Anal Probe"); resultTwo.should.equal("Weight Gain 4000"); }); ">Next task →

Available globals/variables

Use el to get to an element you can render to with your Omniscient components!

Testing