Sketching With Code 2016

Problem Set 03:

Due 10-04 (7 days)

Reading:

Optional Reading & Reference:

Read the MDN CSS Layout guide
Learn about Flexbox layout. from MDN.

ps-03

2016-SWC/ps-03/index.html.
- Include your name, the date, and the problem set number (ps-03).
- Include links to each of the exercises below.
- Style this index page using CSS.
- 15 points.

a – 'Square composition II':

Copy the source of ps-03-starter.html to your 2016-SWC/ps-03/ folder called 'squares.html'
Create a simple composition of squares by changing the inline javascript.
Clean up the HTML by putting moving the inline CSS into an external file squares.css using a <link rel="stylesheet" href= … tag.
Bonus: clean up the HTML by moving the inline JavaScript into an external file called squares.js. By placing a <script type="text/javascript" src="squares.js" … tag sometime after the canvas tag. This can be tricky.

b (optional) – Revisit ps-02:

Modify the HTML or CSS from any of your ps-02 solutions to improve layout & styling.

c (stretch) – Sol LoWitt Canvas:

To complete item 'c' here, you may want to review the MDN Canvas API

Find instructions for a Sol LoWitt Wall drawing online.
Copy and modify ps-03-starter.html to a new file.
Extract the JS and CSS into their own files.
Modify the HTML and CSS to include the instructions for the wall drawing you found.
Provide a solution to the wall by drawing in the canvas object.
Bonus: provide a reference image of an actual wall that was installed with this drawing.

Source of ps-03 starter:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>canvas starter document</title>
    <style media="screen">
      body {
        font-family: 'helvetica', sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
      }
      canvas {
        border: 1px solid hsl(0,10%,90%);
        width: auto;
        height: 50%;
      }
    </style>
  </head>

  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
  </body>

  <script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var drawingPad = canvas.getContext('2d');
    drawingPad.fillStyle = "hsla(0,10%,10%,1)";
    drawingPad.fillRect(0, 0, 20, 20);
  </script>

</html>