Merge branch 'master' of https://github.com/thompage/panpsychism
Kristyn Bryan
10 years ago
commit
29107aeb28
@ -0,0 +1,67 @@
|
||||
@import url(http://fonts.googleapis.com/css?family=Londrina+Shadow);
|
||||
@import url(http://fonts.googleapis.com/css?family=Mystery+Quest);
|
||||
|
||||
body {
|
||||
background: url(http://subtlepatterns.com/images/transp_bg.png);
|
||||
}
|
||||
#content {
|
||||
margin: 0 auto;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
#header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-family: 'Londrina Shadow', cursive;
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.row {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.column {
|
||||
border: 1px solid #595139;
|
||||
float: left;
|
||||
font-family: 'Londrina Shadow', cursive;
|
||||
font-size: 50px;
|
||||
height: 65px;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: 50px;
|
||||
transition: background-color 2s;
|
||||
}
|
||||
|
||||
.column:hover {
|
||||
background-color: #A6977B;
|
||||
}
|
||||
|
||||
/* when two cards match apply this class to them*/
|
||||
.found {
|
||||
background-color: #595139;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
#info {
|
||||
font-family: 'Londrina Shadow', cursive;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
/* apply to every card when the user wins */
|
||||
.won {
|
||||
background-color: #F2F0CE;
|
||||
border: 1px solid #83A603;
|
||||
color: #83A603;
|
||||
}
|
||||
|
||||
#timer {
|
||||
font-family: 'Mystery Quest', cursive;
|
||||
font-size: 20px;
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Memory</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<div id="header">
|
||||
<div id="title">Memory</div>
|
||||
</div>
|
||||
<button>Start Game</button>
|
||||
<div id="game">
|
||||
<!-- append your cards here -->
|
||||
</div>
|
||||
<div id="info">...</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,70 @@
|
||||
window.onload = function() {
|
||||
console.log('loaded');
|
||||
|
||||
// Invoke your chain of functions and listeners within window.onload
|
||||
// var button = document.getElementsByTagName('button');
|
||||
// button.onclick(function(){
|
||||
// start();
|
||||
// })
|
||||
start();
|
||||
}
|
||||
|
||||
|
||||
// USE THIS TO SHUFFLE YOUR ARRAYS
|
||||
//o=array
|
||||
var tiles = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E'];
|
||||
function shuffle(o) {
|
||||
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
|
||||
return o;
|
||||
};
|
||||
|
||||
function start(){
|
||||
|
||||
shuffle(tiles);
|
||||
makeAndDisplayTiles();
|
||||
}
|
||||
|
||||
function makeAndDisplayTiles(){
|
||||
document.getElementById('game').innerHTML = "";
|
||||
document.getElementById('info').innerHTML = "";
|
||||
for(var i = 0; i<tiles.length;i++){
|
||||
var tile = document.createElement('div');
|
||||
tile.setAttribute('class', 'column');
|
||||
tile.setAttribute('data-value',tiles[i]);
|
||||
document.getElementById('game').appendChild(tile);
|
||||
tile.onclick = function(){
|
||||
makePlay(this);
|
||||
};
|
||||
}
|
||||
// addEventsToTiles();
|
||||
}
|
||||
|
||||
// function addEventsToTiles(){
|
||||
// var tile = document.getElementsByClassName('column');
|
||||
// tile.onclick = makePlay(this);
|
||||
// }
|
||||
|
||||
function makePlay(tile){
|
||||
tile.innerHTML = tile.dataset.value;
|
||||
tile.className += " found";
|
||||
}
|
||||
|
||||
|
||||
|
||||
function processData(n) {
|
||||
var result="";
|
||||
for(var i = 1; i<=n; i++){
|
||||
var spaces = i;
|
||||
while(spaces <= n-1){
|
||||
result+=" ";
|
||||
spaces++;
|
||||
}
|
||||
var stairs = i;
|
||||
while(stairs > 0){
|
||||
result+='#';
|
||||
stairs--;
|
||||
}
|
||||
result+='\n'
|
||||
}
|
||||
console.log(result);
|
||||
}
|
||||
@ -1,9 +1,7 @@
|
||||
# Memory!
|
||||
|
||||
Tonight you are going to build the game called: [Memory](https://en.wikipedia.org/wiki/Concentration_(game)). We have provided you with a few starter files. You will look at the `index.html` to set up your physical board and cards, but write the code in your `app.js` file to get your game to work.
|
||||
|
||||
Take it one step at a time. Follow these instructions to help get you going.
|
||||
|
||||
Today we are going to build the game Memory. Write all your code in app.js, but
|
||||
look at index.html to get your bearings.
|
||||
|
||||
### You will need
|
||||
|
||||
@ -0,0 +1,55 @@
|
||||
# Memory!
|
||||
|
||||
Today we are going to build the game Memory. Write all your code in app.js, but
|
||||
look at index.html to get your bearings.
|
||||
|
||||
### You will need
|
||||
|
||||
#### Data
|
||||
|
||||
- an array of ten tiles
|
||||
- your ten 'tiles' will represent the letter values that will be displayed on each DOM tile. eg. ['A', 'A', 'B', 'B', etc.]
|
||||
|
||||
#### Functions
|
||||
|
||||
- `start()`
|
||||
- shuffle the tiles array
|
||||
- then call makeAndDisplayTiles to build and display the gameboard
|
||||
- `makeAndDisplayTiles()`
|
||||
- this function should empty the container that will hold the gameboard tiles
|
||||
- it should clear the text in the info div
|
||||
- it should create 10 new game tiles
|
||||
- give them the class 'column'
|
||||
- give them a 'data-value' attribute from each element of your tiles array. The output for an 'A' tile will look like ` <div class="column" data-value="A"></div> `
|
||||
- add the game tiles to the board
|
||||
- then call a function that will add click events to each tile
|
||||
- `addEventsToTiles()`
|
||||
- should add click events to each of the gameboard tiles
|
||||
- Each click event should call the makePlay function passing it the tile that was clicked. Strong hint: the tile that was clicked is `this` tile . . . Can you pass `this` as a parameter to the makePlay function? Test it out.
|
||||
- `makePlay(tile)`
|
||||
- this function should set the text of the current clicked tile to the value stored in the data attribute
|
||||
- it should add a class of found to the tile
|
||||
- it should add a class of clicked to the tile
|
||||
- if the number of clicked tiles is 2, then it should check for a match
|
||||
- `checkForMatch()`
|
||||
- this should retrieve the data-value of the two clicked tiles
|
||||
- if they are a match
|
||||
- the 'clicked' class should be removed from the tiles
|
||||
- the click event should be turned off for those tiles
|
||||
- should check for a win
|
||||
- if no match is found
|
||||
- the text of the clicked cards should be set back to empty
|
||||
- the found and clicked classes should both be removed
|
||||
- BONUS: use setTimeout to keep your cards showing for a hot
|
||||
moment.
|
||||
*After you have the preceding functions working:*
|
||||
- `checkForWin()`
|
||||
- if the number of found tiles is 10
|
||||
- add a winning message to the info div
|
||||
- remove the found class
|
||||
- add a won class
|
||||
|
||||
## START
|
||||
|
||||
- add a click event to the start button, so that when it is clicked a new game is triggered.
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
### Object Constructors and Iteration, Walkthrough
|
||||
|
||||
|
||||
1. Make an array called `fearNames` and put in five strings of technical fear names, eg. "Deipnophobia".
|
||||
|
||||
2. Make an array called 'fearDescriptions' and put in five descriptions that match the fears in `fearNames`. If "Deipnophobia" comes first in `fearNames`, the description for it: "An abnormal fear of dining and dinner conversation." comes first in `fearDescriptions`.
|
||||
|
||||
3. Make an object constructor function called `Fear`. A Fear will take two parameters, `name` and `description`. The properties of a Fear will use the `this` keyword.
|
||||
|
||||
4. Make an empty array called `fearObjects`.
|
||||
|
||||
5. Using a for loop, iterate over the `fearNames` array. Use the keyword `new` to make a new Fear object and push that newly constructed Fear into `fearObjects`. A new Fear should have both a name and a description from the `fearNames` and `fearDescriptions` arrays. (You do not need a nested loop).
|
||||
|
||||
6. console.log the `fearObjects` array. You should see five Fear objects each with the applicable name and description.
|
||||
|
||||
7. That's it. You did it. That's ... yeah it's over. You generated many objects using an object constructor function by means of iteration.
|
||||
@ -0,0 +1,48 @@
|
||||
/*uncomment to see div layout*/
|
||||
/*div {
|
||||
border: 1px solid firebrick;
|
||||
}*/
|
||||
|
||||
body {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 800px; height: 730px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#input-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#input-box {
|
||||
height: 30px; width: 300px;
|
||||
}
|
||||
|
||||
#submit {
|
||||
height: 30px; width: 100px;
|
||||
border: none;
|
||||
background-color: firebrick;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#to-do-list, #completed {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#to-do-list {
|
||||
width: 380px; height: 600px;
|
||||
}
|
||||
|
||||
#completed {
|
||||
width: 380px; height: 600px;
|
||||
}
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>To Do</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container">
|
||||
|
||||
<div id="header">
|
||||
<h1>What To Do</h1>
|
||||
</div>
|
||||
|
||||
<div id="input-container">
|
||||
<input id="input-box" type="text"></input>
|
||||
<button id="submit">ADD</button>
|
||||
</div>
|
||||
|
||||
<div id="to-do-list">
|
||||
<h3>things to do</h3>
|
||||
</div>
|
||||
|
||||
<div id="completed">
|
||||
<h3>things that are done</h3>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,93 @@
|
||||
# WHAT TO DO ?
|
||||
|
||||
|
||||
|
||||
|
||||
## To-Do List
|
||||
Build a To-Do list app with two columns: one for things to do, and another for things that have been done. Use jQuery to give your app functionality.
|
||||
|
||||
### Starter code
|
||||
To get straight to the jQuery portion of the homework, feel free to use the starter code and fill in the javascript. You can make the page look nice afterwards. If you don't want to use the starter code and want to practise page layout, or just layout your own to do app from scratch, that's cool too, but it will take more time. Budget accordingly!
|
||||
|
||||
### User Stories
|
||||
|
||||
#####In the starter code:
|
||||
1. the user should see two columns and an input field.
|
||||
2. the user should be able to type a to-do item into an input box.
|
||||
3. the user should be able to click an `add` button next to this input.
|
||||
|
||||
##### Stuff for you to do:
|
||||
1. When the user clicks the `add` button, the input box value should be added to his/her to-do list.
|
||||
3. The user should be able to see all of the todos that they have created.
|
||||
5. The user should be able to click 'done' on a todo and have it move to the completed column.
|
||||
4. The user should be able to delete a to-do item from the completed list.
|
||||
|
||||
Hint: jQuery has a useful function that gets whatever the user typed into the input box called `.val()`.
|
||||
|
||||
|
||||
### General Flow
|
||||
|
||||
First, add the jQuery library to your project. Go to https://code.jquery.com/ and copy the url of a minified jQuery. Use this url in a script tag. Alternatively, go to https://cdnjs.com/ and search for jQuery.
|
||||
|
||||
Include any code that affects the DOM inside a window onload. jQuery has a shorthand for window onload:
|
||||
|
||||
```
|
||||
$(function() {
|
||||
|
||||
// DOM stuff
|
||||
|
||||
})
|
||||
```
|
||||
|
||||
Try it out.
|
||||
|
||||
Remember the general flow of what is happening. The user makes an action, you run some code in order to process this action, the results of the action are rendered to the page, and then you wait until another action takes place.
|
||||
|
||||
### Make it look pretty
|
||||
Use the CSS knowledge that you've gained over the past few weeks. In addition, think about icons or elements that you can use.
|
||||
|
||||
|
||||
### jQuery cheat sheet examples
|
||||
|
||||
- this: `$(this)`
|
||||
|
||||
- create element: `$('<div>')`, `$('<p>')`, etc.
|
||||
|
||||
- select all elements of type: `$('div')`, `$('p')`, etc.
|
||||
|
||||
- ^^ The two commands above are very similar but they do completely different things!
|
||||
|
||||
- you can get the body of the document with: `$('body')`
|
||||
|
||||
- get element by id: `$('#idName')`
|
||||
|
||||
- get elements by class: `$('.className')`
|
||||
|
||||
- set id on element: `jQueryElement.attr('id', 'idName')`
|
||||
|
||||
- set class on element `jQueryElement.addClass('className')`
|
||||
|
||||
- click listener: `jQueryElement.click( function )`
|
||||
|
||||
- get value from input box after click: `$('#idName').val()`
|
||||
|
||||
- append elements: `jQueryElement.append( //stuff )`
|
||||
|
||||
- prepend elements: `jQueryElement.prepend( // stuff )`
|
||||
|
||||
- remove elements: `jQueryElement.remove()`
|
||||
|
||||
- set text inside element: `jQueryElement.text("some text")`
|
||||
|
||||
- set html inside element: `jQueryElement.html("<some html>")`
|
||||
|
||||
- check if element has a class: `jQueryElement.hassClass('.someClass')`
|
||||
|
||||
- set a css property on an element: `jQueryElement.css('property', 'value')`
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Super Super Bonus
|
||||
The browser has something called [local storage](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage). This allows us to cache data in the browser. Using local storage, make this application remember the to-dos that have already been entered in, even if the page is closed.
|
||||
@ -0,0 +1,2 @@
|
||||
console.log('app.js');
|
||||
|
||||
Loading…
Reference in new issue