Webpage Assignments

index.html

<canvas id="myCanvas" style="position : fixed;"> </canvas>
<h1>Computer Science - Spring 2016</h1>

<a href="https://docs.google.com/a/newwestcharter.org/spreadsheets/d/1kk6mfiTURoq6LcAKMxlPrcviLO6DAyp6a2JTQt7m0oU/edit?usp=sharing">student progress spreadsheet</a>


<h2>Links</h2>
<details>
  <summary>HTML</summary>
  <ol>
    <li><a href="http://www.w3schools.com/html/default.asp">HTML(5) Tutorial</a></li>
    <li><a href="http://www.w3schools.com/tags/default.asp">HTML Tags Ordered Alphabetically</a></li>
    <li><a href="http://www.w3schools.com/tags/ref_byfunc.asp">HTML Tags Ordered by Category</a></li>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">Mozilla Developer Network:HTML</a></li>
  </ol>
</details>

<details>
  <summary>CSS</summary>
  <ul style="list-style-type:disc">
    <li><a href="http://www.w3schools.com/css/css_intro.asp">CSS Introduction</a></li>
    <li><a href="http://www.w3schools.com/cssref/default.asp">CSS Reference</a></li>
    <li><a href="http://www.w3schools.com/cssref/default.asp">Mozilla Developer Network: CSS</a></li>
    <li><a href="http://flexboxfroggy.com/">Flexbox Froggy (CSS learning game)</a></li>
    <li><a href="http://flukeout.github.io/#">CSS Diner (CSS learning game)</a></li>
  </ul>
</details>

<details>
  <summary>JavaScript</summary>
  <ul style="list-style-type:circle">
    <li><a href="http://www.w3schools.com/js/default.asp">JavaScript Tutorial</a></li>
    <li><a href="http://www.w3schools.com/jsref/default.asp">JavaScript and HTML DOM Reference</a></li>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">Mozilla Developer Network: JavaScript</a></li>
  </ul>
</details>

<details>
  <summary>html Canvas</summary>
  <ul style="list-style-type:square">
    <li><a href="http://www.w3schools.com/html/html5_canvas.asp">HTML5 canvas intro</a></li>
    <li><a href="http://www.w3schools.com/tags/ref_canvas.asp">HTML canvas reference</a></li>
  </ul>
</details>

<details>
  <summary>other</summary>
  <ul style="list-style-type:square">
    <li>Questions and answers: <a href="http://stackoverflow.com">stackoverflow.com</a></li>
    <li><a href="https://developer.mozilla.org/en-US/">Mozilla Developer Network</a></li>
    <li><a href="https://developer.chrome.com/devtools">Chrome Developer Tools</a></li>
    <li><a href="https://www.bento.io/">organized tutorials at bento.io</a></li>
    <li><a href="http://jenniferdewalt.com/">Get ideas for projects at "180 websites in 180 days."</a></li>
  </ul>
</details>
<br>
<hr> Save each assigment (codepen, codecademy, JSfiddle).
<h2>Assigment #1:</h2>
<details>
  <summary>Use canvas to draw a picture in JavaScript</summary>
  <p>Requirements:</p>
  <ul style="list-style-type:disc">
    <li>Draw a flag</li>
    <li>make it pretty</li>
  </ul>
</details>
<h2>Assigment #2:</h2>
<details>
  <summary>Use canvas to animate in JavaScript</summary>
  <p>Requirements:</p>
  <ul style="list-style-type:disc">
    <li>Build a function called Draw().</li>
    <li>Use the command requestAnimationFrame(draw) to recursively call the draw function.</li>
    <li>Make it pretty.</li>
  </ul>
</details>
<h2>Assigment #3:</h2>
<details>
  <summary>Make a webpage to explain a command in HTML, CSS, or JavaScript.</summary>
  <p>Requirements:</p>
  <ul style="list-style-type:disc">
    <li>Use HTML and CSS, JavaScript is optional.</li>
    <li>Explain how to use the command.</li>
    <li>Include an example of the code for the command.</li>
    <li>Use the command on your webpage.</li>
    <li>Make it pretty.</li>
  </ul>
  <div>
    Assigment #3 Example:
    <h3>CSS Background Property</h3> The background shorthand property sets all the background properties in one declaration. You can set a color or a picture. Although a background picture generally makes your page look like it is from the 90's.
    <p>The properties that can be set, are: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment.</p>
    <p>Example code: setting background color</p>
    <p><pre>body {
  background-color: lightblue;
}</pre></p>
    <p>Example code: setting "pre" background colors</p>
    <p><pre>pre {
   background-color: rgb(225,225,255);
}</pre></p>
Go to <a href="http://www.w3schools.com/cssref/css3_pr_background.asp">w3schools</a> for more information on the CSS background property.


</div>
</details>

</details>
<h2>Assigment #4:</h2>
<details>
  <summary>Build a webpage: free choice</summary>
  <p>Requirements:</p>
  <ul style="list-style-type:disc">
    <li>Must use some HTML, CSS, JavaScript.</li>
    <li>Get your topic approved by Mr. Landgreen.</li>
    <li>Make it pretty.</li>
  </ul>
</details>

</details>
<h2>Assigment #5:</h2>
<details>
  <summary>Build a front page for your projects</summary>
  <p>Requirements:</p>
  <ul style="list-style-type:disc">
    <li>Use HTML and CSS, JavaScript is optional.</li>
    <li>The front page must have links to your other pages.</li>
    <li>Link to the pages for all your current and future JavaScript projects.</li>
    <li>Link to at least one of your scratch projects embedded as a full page.</li>
    <li>Organize your projects into folders with the front page in the base directory. </li>
    <li>Put those files into a zip directory with your name.</li>
    <li>Make it pretty.</li>
  </ul>
</details>


<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>
  <a href="http://xkcd.com/"><img src="http://imgs.xkcd.com/comics/computer_problems.png"></a>
</p>

script.js

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
var addStar = 0;
var container = {
  x: 0,
  y: 0,
  width: canvas.width,
  height: canvas.height
};
var stars = [];
var totalStars = 0; // spawns stars at start
var mousePos = {
  x: container.width * 0.5,
  y: container.height * 0.5
};
var friction = 0.996

window.onresize = function(event) {
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  container.height = window.innerHeight;
  container.width = window.innerWidth;
};

//adds a new star objects to array stars
function pushStar() {
  stars.push({
    x: mousePos.x + 20 * (Math.random() - 0.5),
    y: mousePos.y + 20 * (Math.random() - 0.5),
    Vx: 0,
    Vy: 0,
    r: 35 * Math.random() + 3,
    color: '#' + Math.floor(Math.random() * 16777216).toString(16)
  });
}
//spawns stars
for (var i = 0; i < totalStars; i++) {
  pushStar();
}
//push away if mouse down
document.addEventListener("mousedown", function() {
  addStar = 1;
  for (var i = 0; i < stars.length; i++) {
    stars[i].Vx += 3 * Math.cos(Math.atan2(stars[i].y - mousePos.y, stars[i].x - mousePos.x));
    stars[i].Vy += 3 * Math.sin(Math.atan2(stars[i].y - mousePos.y, stars[i].x - mousePos.x));
  }
});

//gets mouse position
function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}
// waits for mouse move and then updates position
document.addEventListener('mousemove', function(evt) {
  mousePos = getMousePos(canvas, evt);
}, false);

//recursive draw function
function draw() {
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = "#ffffff"; //background color
  ctx.fillRect(container.x, container.y, container.width, container.height);
  for (var i = 0; i < stars.length; i++) {
    //draw a circle
    ctx.globalCompositeOperation = 'darker';
    ctx.beginPath();
    ctx.arc(stars[i].x, stars[i].y, stars[i].r, 0, 2 * Math.PI, true);
    ctx.fillStyle = stars[i].color;
    ctx.fill();
    //bounce off walls
    if (stars[i].x > container.width - stars[i].r) {
      stars[i].Vx *= -friction;
      stars[i].x = container.width - stars[i].r;
    } else if (stars[i].x < stars[i].r) {
      stars[i].Vx *= -friction;
      stars[i].x = stars[i].r;
    }
    if (stars[i].y > container.height - stars[i].r) {
      stars[i].Vy *= -friction;
      stars[i].y = container.height - stars[i].r;
    } else if (stars[i].y < stars[i].r) {
      stars[i].Vy *= -friction;
      stars[i].y = stars[i].r;
    }
    // attraction to the mouse
    stars[i].Vx += -0.03 * Math.cos(Math.atan2(stars[i].y - mousePos.y, stars[i].x - mousePos.x));
    stars[i].Vy += -0.03 * Math.sin(Math.atan2(stars[i].y - mousePos.y, stars[i].x - mousePos.x));

    //change position, velocity, size of object elements for each location in array
    stars[i].x += stars[i].Vx;
    stars[i].y += stars[i].Vy;

    //friction slows velocity
    stars[i].Vx *= friction;
    stars[i].Vy *= friction;

  }
  if (addStar == 1) {
    pushStar();
    addStar = 0;
  }else if (addStar == -1){
    stars = [];
  }
  requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

style.css

body {
  font: 15px arial, sans-serif;
  background-color: white;
}

h2 {
  font-size: 120%;
}

h3 {
  font-size: 110%;
}


pre {
  font: 15px "Courier New", Courier, monospace;
  background-color: lightblue;
}

canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

Webpage Assignments.markdown

Webpage Assignments

A Pen by lilgreenland on CodePen.

License.