//MAKE: 2.11 Skill-builder: Convert your code to function pipelines

Resources

Saving your work

Use Save as... to save the empty template as "2.11S-ConvertYourCodeToFunctionPipelines-LastName.html" in your Computer Programming 12 directory.

The assignment

Here is what the initial program does:


You are my biggest star!

Press the U and D keys to make the star bigger and littler.


Now convert the sample program from a sequential program into one that uses function pipelines.

  1. Create an //INPUT function called readKeypress( keyEvent ) that returns the character that was pressed.
  2. Give the function a descriptive comment and add console.log('in readKeypress...');
  3. Create an //OUTPUT function called makeStarSmaller()
  4. Create an //OUTPUT function called makeStarBigger()
  5. Give each //OUTPUT function a descriptive comment and add console.log()s
  6. Create a //PROCESS function called getBiggerOrSmaller( characterPressed )
  7. Give the function a descriptive comment and add console.log('in getBiggerOrSmaller...');
  8. Add the if statements that call either makeStarBigger() or makeStarBigger();
  9. Now alter the code as you wish to make it interesting, but respect the seperation of input, processing, and output!

The beginning code

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Convert your code to function pipelines</title>
        <meta name="description" content="Assignment: Convert your code to function pipelines">
        <meta name="author" content="--yourName--">
        <!--
            Change log:
                12. October 2015    - created!
                25. March 2017      - reworked to improve programming style
        -->
        <!-- load jQuery for the animations -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <style>
            img {
                width:  80px;
            }
        </style>
    </head>
    <body>
        <h1>You are my biggest star!</h1>
        <p>Press the &uarr; and &darr; keys to make the star bigger and littler.</p>
        <img id="imageID" src="https://www.kasandbox.org/programming-images/cute/Star.png">
        <!--
            Convert this sample program from a sequential program 
            into one that uses function pipelines.

            1. Create an //INPUT function called readKeypress( keyEvent ) 
                that returns the character that was pressed.
            2. Give the function a descriptive comment and add console.log('in readKeypress...');
            3. Create an //OUTPUT function called makeStarSmaller()
            4. Create an //OUTPUT function called makeStarBigger()
            5. Give each //OUTPUT function a descriptive comment and add console.log()s
            6. Create a //PROCESS function called getBiggerOrSmaller( characterPressed )
            7. Give the function a descriptive comment and 
                add console.log('in getBiggerOrSmaller...');
            8. Add the if statements that call either makeStarBigger() or makeStarBigger();
            9. Now alter the code as you wish to make it interesting, 
                but respect the seperation of input, processing, and output!
        -->
 
        <script>
            var mainProcedure   = function ( keyEvent ) {
                console.log('in mainProcedure...');
                
                //INPUT: read which key was pressed
                var keyCode = keyEvent.which || keyEvent.keyCode; 
                
                //PROCESS: fork the code if they pressed the up button
                if ( keyCode == 85 ) {          // U button
                    //OUTPUT: make the star bigger
                    $('#imageID').animate({width: "+=40px"});
                } else if ( keyCode == 68 ) {   // D button
                    //OUTPUT: make the star smaller
                    $('#imageID').animate({width: "-=40px"});
                }
            }
            
            //INPUT: run mainProcedure when someone presses a key
            window.onkeydown    = mainProcedure;
        </script>
    </body>
</html>