diff options
| author | Nick Van Doorn <vandoorn.nick@gmail.com> | 2018-10-10 18:54:04 -0700 |
|---|---|---|
| committer | Nick Van Doorn <vandoorn.nick@gmail.com> | 2018-10-10 18:54:04 -0700 |
| commit | 60ba86122fcc008584921a4686b530083ed2da5b (patch) | |
| tree | a9f70f63730bcbc814be78d62fb5b00c9a0ea7cc | |
| parent | 908c2cb542cac4428d063c4ab76031da94c2e10b (diff) | |
Add project 1
| -rw-r--r-- | projects/1-colour-shift/index.html | 15 | ||||
| -rw-r--r-- | projects/1-colour-shift/main.js | 26 | ||||
| -rw-r--r-- | projects/1-colour-shift/readme.md | 17 | ||||
| -rw-r--r-- | projects/1-colour-shift/style.css | 17 |
4 files changed, 75 insertions, 0 deletions
diff --git a/projects/1-colour-shift/index.html b/projects/1-colour-shift/index.html index e69de29..9b82bb2 100644 --- a/projects/1-colour-shift/index.html +++ b/projects/1-colour-shift/index.html @@ -0,0 +1,15 @@ +<html> + <head> + <title>Colour Shift</title> + <link rel="stylesheet" type="text/css" href="style.css"> + </head> + <body> + <!-- Semantic HTML is good for you --> + <main> + <p>Sometimes you <span class="attention">just</span> really + need certain words to <span class="attention">stand</span> out + and grab the reader's <span class="attention">attention</span></p> + </main> + <script type="text/javascript" src="main.js"></script> + </body> +</html>
\ No newline at end of file diff --git a/projects/1-colour-shift/main.js b/projects/1-colour-shift/main.js index e69de29..53a5d4f 100644 --- a/projects/1-colour-shift/main.js +++ b/projects/1-colour-shift/main.js @@ -0,0 +1,26 @@ +// Lifted this from Erik +// https://github.com/uvicwebdev/javascript-intro/blob/master/webdev_logo/js/main.js +function computeRgb(x, y, width, height) { + let r = Math.floor((x / width) * 255) + 5 + let g = Math.floor((y / height) * 255) + 5 + let b = Math.floor((r + g) / 2) + return `rgb(${r},${g},${b})` +} +// This will be an array of nodes since we are +// using class name (array may have length 0 or 1) +let attentionNodes +window.onload = function() { + document.getElementsByClassName('attention') +} +document.onmousemove = function(event) { + // iterate over each node and update its style + let color = computeRgb( + event.pageX, + event.pageY, + window.innerWidth, + window.innerHeight + ) + for (let node of attentionNodes) { + node.style.color = color + } +} diff --git a/projects/1-colour-shift/readme.md b/projects/1-colour-shift/readme.md new file mode 100644 index 0000000..1760173 --- /dev/null +++ b/projects/1-colour-shift/readme.md @@ -0,0 +1,17 @@ +# 1. Colour Shift + +## Goal + +Get familiar with how the DOM API works in the context of static HTML with some JS. + +## Starter + +This template demos a simple static page and uses a small amount of JavaScript to modify the page on mouse move. Not super interesting, but it could serve as an excellent base for something more exciting. If you have a cool idea please try it! But if not, a few ideas are suggested below. + +### Expansion Ideas + +- Move nodes around the page as the user moves their mouse + - Try it with different equations to map `mouseX => nodeX` and `mouseY => nodeY` +- Make a `<textbox>` in the HTML and make the page react to certain words. + - Hint: Use the DOM API to get the content of the textbox and then split it into tokens (e.g `textBoxContent.split(' ')`) and then search the array with a for loop for specific words +- Give your page the essence of MySpace by playing some music without anyone asking for it. Keep them engaged by controlling the volume with their cursor position (don't tell them though). [Hint](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement). diff --git a/projects/1-colour-shift/style.css b/projects/1-colour-shift/style.css index e69de29..b96b2b1 100644 --- a/projects/1-colour-shift/style.css +++ b/projects/1-colour-shift/style.css @@ -0,0 +1,17 @@ +body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} +main { + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} +#clock { + font-size: 150px; + font-weight: 700; + font: Helvetica; +} |