Merge branch 'master' of https://github.com/thompage/panpsychism
Kristyn Bryan
10 years ago
commit
a460de5d6c
@ -0,0 +1,79 @@
|
||||
|
||||
|
||||
# WDI-PANTHALASSA
|
||||
|
||||
---
|
||||
Title: CSS Selector Homework for w01d04 <br>
|
||||
Type: Homework<br>
|
||||
Duration: "2:00"<br>
|
||||
Creator:<br>
|
||||
Original creators: WDI-Archer<br>
|
||||
Adapted by: Kristyn Bryan<br>
|
||||
Course: WDIr Panthalassa<br>
|
||||
Competencies: CSS Selectors<br>
|
||||
Prerequisites: CSS basics, CSS selectors<br>
|
||||
|
||||
---
|
||||
# Homework - CSS Selector Practice
|
||||
|
||||
###Part 1- Before you begin the assignment
|
||||
Go to the following websites to:
|
||||
|
||||
1. Read about [CSS Layout](http://learnlayout.com/)
|
||||
2. Practice [CSS selections](http://flukeout.github.io/)
|
||||
|
||||
Next, use the index.html and style.css in this folder to complete the assigment.
|
||||
|
||||
###Part 2 - Navigation
|
||||
1. Inside the nav element, delete the heading and replace it with 3 **li** tags in an unordered list.
|
||||
- Within each list element, place an **a** and make the text inside of each **a** "Portfolio", "Bio", and "Contact", respectively. Set the **href** property on the **a** tag equal to "#". This will simply direct the link back to the same page.
|
||||
- In your css file, underneath where you see the style for the **nav** (you want to keep all of your navigation styles in the same place), select only the **ul** tag that is inside of the **nav** and give it the following styles...
|
||||
|
||||
```css
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
```
|
||||
- Select all **li** elements inside the **ul**, inside of the `nav` and make them float left.
|
||||
- Select all of the a tags inside those **li** elements (so much nesting!) and give them the following styles
|
||||
|
||||
```css
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
background-color: transparent;
|
||||
border: 2px solid grey;
|
||||
margin: 25px 10px;
|
||||
text-align: center;
|
||||
padding: 10% 0;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
```
|
||||
|
||||
###Part 3 - Aligning Left and Right
|
||||
1. Try floating all of your **nav li** elements to the right, then move them back to the left.
|
||||
- Try giving only one of you **nav li** elements an ID of 'right' and then float just that one right. Remove the ID if you hate how this looks.
|
||||
- Give your **nav** element a left margin so that it lines up with the blue boxes on the page, then set it back to 0.
|
||||
- Find the aside in the CSS, erase its 'right' property and set its 'left' property to 0.
|
||||
- How should you change the style on the large section so that it is flush with the right side?
|
||||
|
||||
###Part 4 - Layout
|
||||
1. Locate the **p** tags in each of the small boxed and briefly write your answers to the following five questions in each, respectively
|
||||
- What is the default display style of a **div** tag?
|
||||
- What is the best way to horizontally center an element?
|
||||
- What is the difference between padding and margin?
|
||||
- What is the difference between fixed and absolute positioning?
|
||||
- What is a 'clearfix'?
|
||||
- Give all of your **p** tags a margin of 0px and give your boxes a top/bottom padding of 10px and a right/left padding of 5px, using CSS shorthand
|
||||
|
||||
|
||||
|
||||
###Bonus
|
||||
Without adding any new IDs or classes, give each of your **p** tags a different font color from this [page](http://www.crockford.com/wrrrld/color.html). You will need to look up what first-child, last-child, and nth-child pseudo-classes are.
|
||||
Set your header, aside, and footer position to 'fixed', add a margin-top of 150px to your aside and set your body height to 2000px. Scroll down and see what happens.
|
||||
|
||||
###Experiment!
|
||||
Go to [http://www.cssdesk.com/](http://www.cssdesk.com/), copy and paste your CSS and HTML into the appropriate areas and try adding different colors, display properties, position properties, borders, etc to your elements. Try to make the layout completely unrecognizable.
|
||||
@ -0,0 +1,22 @@
|
||||
|
||||
|
||||
# WDI-PANTHALASSA
|
||||
|
||||
---
|
||||
Title: Homework for w01d04 <br>
|
||||
Type: Homework<br>
|
||||
Duration: "3:00-4:00"<br>
|
||||
Creator:<br>
|
||||
Original creators: WDI-Archer, WDI-Meeskeeks<br>
|
||||
Adapted by: Kristyn Bryan<br>
|
||||
Course: WDIr Panthalassa<br>
|
||||
Competencies: Javascript, CSS<br>
|
||||
Prerequisites: Basic Javascript, CSS Selectors<br>
|
||||
|
||||
---
|
||||
|
||||
|
||||
1) Javascript Practice <br>
|
||||
2) CSS Practice
|
||||
|
||||
Follow the instructions for submitting your homework (step-by-step instructions are in the wiki).
|
||||
@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Portfolio</a></li>
|
||||
<li><a href="#">Bio</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<aside>
|
||||
<h1>Sidebar</h1>
|
||||
</aside>
|
||||
|
||||
<section>
|
||||
<h1>content</h1>
|
||||
<div class="small-boxes">
|
||||
<div class="box">
|
||||
<p>The default display style of a <div> tag is <strong>BLOCK</strong>.</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<p>The best way to horizontally center an element is to set the <em>left-margin</em> and <em>right-margin</em> to <em>auto</em> or use the <em>margin: 0 auto</em> declaration.</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<p><em>Padding</em> is the space between an element and it's border ("insidey" or "indoorsy"), while <em>margin</em> is the space between that border and an adjacent element ("outsidey" or "outdoorsy").</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<p><em>Fixed</em> positioning places an element in relation to the browser window, while <em>absolute</em> positioning places an element in relation to it's container.</p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<p>A <em>clearfix</em> will auto-size a floating element's container to match the floating element itself. Otherwise, the element can flow outside it's container in wonky ways.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="big-boxes">
|
||||
<div class="big-box">
|
||||
</div>
|
||||
<div class="big-box">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<h1>footer</h1>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,299 @@
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
}
|
||||
|
||||
body{
|
||||
margin: 0;
|
||||
color: #111;
|
||||
background-color: #A9B091;
|
||||
font-family: helvetica;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin:0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.container{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
header{
|
||||
position: fixed;
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
nav{
|
||||
width: 80%;
|
||||
height: 100px;
|
||||
margin-left: 212px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
background-color: #846863;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
margin: ;
|
||||
}
|
||||
|
||||
nav ul{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav h1 ul{
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
p{
|
||||
text-align: center;
|
||||
margin: 0px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
|
||||
}
|
||||
|
||||
#one{
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
nav h1 ul li{
|
||||
float: left;
|
||||
}
|
||||
|
||||
nav h1 ul li:first-child{
|
||||
float: right;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#two{
|
||||
float: left;
|
||||
margin:;
|
||||
}
|
||||
|
||||
#three{
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
font-weight: bold;
|
||||
background-color: transparent;
|
||||
border: 2px solid grey;
|
||||
margin: 25px 10px;
|
||||
text-align: center;
|
||||
padding: 10% 0;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#navcontainer ul
|
||||
{
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
ul#navlist
|
||||
{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
float: left;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
background-color: #036;
|
||||
|
||||
}
|
||||
nav{
|
||||
position:relative;
|
||||
left: 0px;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
/*
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
background-color: transparent;
|
||||
border: 2px solid grey;
|
||||
margin: 25px 10px;
|
||||
text-align: center;
|
||||
padding: 10% 0;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
*/
|
||||
ul#navlist li { display: inline; }
|
||||
|
||||
ul#navlist li a
|
||||
{
|
||||
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 50px
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
background-color: transparent
|
||||
border: 2px solid grey;
|
||||
margin: 25px 10px;
|
||||
text-align: center;
|
||||
padding: 10% 0;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
ul#navlist li a:hover{
|
||||
background-color: #369;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
header{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
aside{
|
||||
position: inherit;
|
||||
right: 0px;
|
||||
width: 200px;
|
||||
height: 500px;
|
||||
background-color: slategrey;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
width: 200px;
|
||||
height: 700px;
|
||||
background-color: slategrey;
|
||||
margin-top: 100px;
|
||||
position: absolute;
|
||||
}
|
||||
p {
|
||||
padding: 0px 10px
|
||||
;
|
||||
}
|
||||
section{
|
||||
margin-right: 0px;
|
||||
height: 700px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
footer{
|
||||
left: 0;
|
||||
height: 70px;
|
||||
background-color: #846863;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.small-boxes{
|
||||
text-align: center;
|
||||
padding: 10px 5px;
|
||||
margin-top: 90px;
|
||||
}
|
||||
|
||||
.small-boxes .box:first-child p{
|
||||
color: tomato;
|
||||
}
|
||||
|
||||
.small-boxes .box:last-child p{
|
||||
color: chocolate;
|
||||
}
|
||||
|
||||
.small-boxes .box:nth-child(2) p{
|
||||
color: lime;
|
||||
}
|
||||
|
||||
.small-boxes .box:nth-child(3) p{
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.small-boxes .box:nth-child(4) p{
|
||||
color: cornsilk;
|
||||
}
|
||||
|
||||
.box:first-child{
|
||||
color: #EACDBE;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background-color: #36413E;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.box:nth-child(2){
|
||||
color: #EADFBE;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background-color: #36413E;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.box:nth-child(3){
|
||||
color: #EADEBE;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background-color: #36413E;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.box:nth-child(4){
|
||||
color: #EAEEBE;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background-color: #36413E;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.box:last-child{
|
||||
color: #EACFBE;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
background-color: #36413E;
|
||||
margin-bottom: 5px;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
.big-boxes{
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.big-box{
|
||||
display: inline-block;
|
||||
height:400px;
|
||||
width: 506px;
|
||||
background-color: #36413E;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0px;
|
||||
padding: 10px 5px 10px 5px;
|
||||
}
|
||||
@ -0,0 +1,353 @@
|
||||
// ARRAYS AND OBJECTS
|
||||
|
||||
// =====================================================
|
||||
|
||||
// Find the median number in the following nums array, then console.log that number.
|
||||
var nums = [14,11,16,15,13,16,15,17,19,11,12,14,19,11,15,17,11,18,12,17,12,71,18,15,12];
|
||||
|
||||
nums.sort();
|
||||
var half = Math.floor(nums.length / 2);
|
||||
console.log(nums[half]);
|
||||
// => 15
|
||||
|
||||
// =====================================================
|
||||
|
||||
// Given the following object:
|
||||
var obj = {
|
||||
name: "Slimer",
|
||||
color: "greenish",
|
||||
type: "plasm or ghost or something"
|
||||
}
|
||||
|
||||
// What would you write to access the name and console.log it?
|
||||
console.log(obj.name);
|
||||
// OR
|
||||
console.log(obj['name']);
|
||||
|
||||
// What would you write to change the type to 'creature'
|
||||
obj.type = "creature";
|
||||
|
||||
// What would you write to add a key to the object called age, and set the age to 6?
|
||||
obj.age = 6;
|
||||
|
||||
console.log(obj);
|
||||
|
||||
|
||||
// LOOPS
|
||||
// =====================================================
|
||||
|
||||
// If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9.
|
||||
// The sum of these multiples is 23. Find the sum of all the multiples of 3 or 5 below 1000.
|
||||
|
||||
var i = 1;
|
||||
var sum = 0;
|
||||
|
||||
while (i < 1000) {
|
||||
if (i % 3 === 0 || i % 5 === 0) {
|
||||
sum += i;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
|
||||
console.log(sum);
|
||||
|
||||
// =====================================================
|
||||
|
||||
|
||||
// Write a *for* loop that can iterate over the Wilkersons array below, starting from the middle of the array.
|
||||
// 'Malcom' is in the middle of the array. In the loop,
|
||||
// console.log 'Malcolm' and everything after 'Malcolm' in the array.
|
||||
|
||||
var Wilkersons = ["Lois", "Dewie", "Francis", "Malcolm", "Reese", "Hal"];
|
||||
|
||||
for (var i = Wilkersons.length / 2; i < Wilkersons.length; i++ ) {
|
||||
console.log(Wilkersons[i]);
|
||||
}
|
||||
|
||||
|
||||
// Write a *for* loop for the following `plusJamie` array. Note that this array has an _odd_ number of elements
|
||||
// 'Malcom' is still in the middle. Within the loop, console.log everything from the middle (Malcolm), and onwards:
|
||||
var plusJamie = ["Lois", "Dewie", "Francis", "Malcolm", "Reese", "Hal", "Jamie"];
|
||||
|
||||
var half = Math.floor(plusJamie.length / 2);
|
||||
|
||||
for (var i = half; i < plusJamie.length; i++) {
|
||||
console.log(plusJamie[i]);
|
||||
}
|
||||
|
||||
|
||||
// FUNCTIONS
|
||||
// =======================================
|
||||
|
||||
// Write a function 'palindrome' that accepts a single argument, a string. The function
|
||||
// should return true if the string is a palindrome, false if it is not. Make sure your
|
||||
// function will give the correct answer for words with capital letters.
|
||||
|
||||
var palindrome = function(input) {
|
||||
var comparison = input.toLowerCase().split('').reverse().join('');
|
||||
|
||||
if (comparison === input.toLowerCase()) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log(palindrome("Radar"));
|
||||
// => True
|
||||
|
||||
console.log(palindrome("Borscht"));
|
||||
// => False
|
||||
|
||||
// =======================================
|
||||
|
||||
// Define a function maxOfThree that takes three numbers as arguments and returns
|
||||
// the largest of them.
|
||||
|
||||
var maxOfThree = function(num1, num2, num3) {
|
||||
return [num1, num2, num3].sort().pop();
|
||||
}
|
||||
console.log(maxOfThree(6, 9, 1));
|
||||
// => 9
|
||||
|
||||
|
||||
// OR
|
||||
|
||||
|
||||
var maxOfThree2 = function(num1, num2, num3) {
|
||||
if (num1 > num2 && num1 > num3) {
|
||||
return num1;
|
||||
} else if (num2 > num3) {
|
||||
return num2;
|
||||
}
|
||||
return num3;
|
||||
}
|
||||
|
||||
console.log(maxOfThree2(6, 9, 1));
|
||||
// => 9
|
||||
|
||||
|
||||
// =======================================
|
||||
//Write a function pythagoras that that takes two arguments: sideA and sideB,
|
||||
//and returns the solution for sideC using the Pythagorean theorem.
|
||||
|
||||
var pythagoras = function(sideA, sideB) {
|
||||
var sideCsquared = (sideA * sideA) + (sideB * sideB);
|
||||
return Math.sqrt(sideCsquared);
|
||||
}
|
||||
|
||||
console.log(pythagoras(8, 6));
|
||||
|
||||
|
||||
|
||||
// =======================================
|
||||
|
||||
// Write a function called `calc` ...
|
||||
|
||||
var calc = function(num1, num2, operation) {
|
||||
if (operation === "sum") {
|
||||
return num1 + num2
|
||||
} else if (operation === "sub") {
|
||||
return num1 - num2;
|
||||
} else if (operation === "mult") {
|
||||
return num1 * num2;
|
||||
} else if (operation === "div") {
|
||||
return num1 / num2;
|
||||
} else if (operation === "exp") {
|
||||
return Math.pow(num1, num2);
|
||||
} else {
|
||||
return "error"
|
||||
}
|
||||
}
|
||||
|
||||
console.log(calc(4, 3, "exp"));
|
||||
|
||||
// =======================================
|
||||
|
||||
// Write a function `isAVowel` that takes a character (i.e. a string of length 1)
|
||||
// and returns true if it is a vowel, false otherwise.
|
||||
|
||||
var isAVowel = function(char) {
|
||||
return /[aeiou]/.test(char.toLowerCase());
|
||||
}
|
||||
|
||||
console.log(isAVowel("a"));
|
||||
// => true
|
||||
|
||||
|
||||
// OR
|
||||
|
||||
var isAVowel2 = function(char) {
|
||||
var vowels = ["a", "e", "i", "o", "u"];
|
||||
for (var i=0; i < vowels.length; i++) {
|
||||
if (vowels[i] === char.toLowerCase()) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
console.log(isAVowel2("a"));
|
||||
// => true
|
||||
|
||||
|
||||
// =======================================
|
||||
// Write a function `sumArray` that sums the numbers in an array of numbers.
|
||||
|
||||
var sumArray = function(arr) {
|
||||
var sum = 0;
|
||||
for (var i=0; i < arr.length; i++) {
|
||||
sum += arr[i];
|
||||
}
|
||||
return sum;
|
||||
}
|
||||
|
||||
console.log(sumArray([1, 2, 3, 4]));
|
||||
|
||||
|
||||
// =======================================
|
||||
|
||||
// Write a function that returns the number of arguments passed to the function when called.
|
||||
// You will need to research how to solve this.
|
||||
|
||||
var args = function() {
|
||||
return arguments.length;
|
||||
}
|
||||
|
||||
console.log(args(1, 2, 3, 4));
|
||||
// => 4
|
||||
|
||||
console.log(args([], {}, true));
|
||||
// => 3
|
||||
|
||||
|
||||
|
||||
// SCOPE
|
||||
// =======================================
|
||||
|
||||
// 1. showColor does not require a parameter because hexColor is in global scope,
|
||||
// which means hexColor is available in any scope. Therefore showColor can 'borrow' hexColor from the global scope.
|
||||
|
||||
// 2. The output will be the argument that was passed into the showColor function,
|
||||
// because it takes precedence over the global scope.
|
||||
|
||||
// 3. theOther cannot access the value of num because the value is not in its scope.
|
||||
|
||||
// 4. scopeExample will not log the number 8, because num was redefined to the number
|
||||
|
||||
|
||||
|
||||
// NESTED DATA
|
||||
// =======================================
|
||||
|
||||
var solarSystem = [
|
||||
{ name: "Mercury", ringSystem: false, moons: [] },
|
||||
{ name: "Venus", ringSystem: false, moons: [] },
|
||||
{ name: "Earth", ringSystem: false, moons: ["The Moon"] },
|
||||
{ name: "Mars", ringSystem: false, moons: ["Phobos", "Deimos"] },
|
||||
{ name: "Jupiter", ringSystem: true, moons: ["Europa", "Ganymede", "Io", "Callisto"] },
|
||||
{ name: "Saturn", ringSystem: true, moons: ["Titan", "Enceladus", "Rhea", "Mimas"] },
|
||||
{ name: "Uranus", ringSystem: true, moons: ["Miranda", "Titania", "Ariel", "Umbriel"] },
|
||||
{ name: "Neptune", ringSystem: true, moons: ["Triton", "Nereid"] }
|
||||
];
|
||||
|
||||
// Print the array of Jupiter's moons to the console.
|
||||
console.log(solarSystem[4].moons);
|
||||
|
||||
// Print the name of Neptune's moon "Nereid" to the console.
|
||||
console.log(solarSystem[7].moons[1]);
|
||||
|
||||
// Add a new moon called "Endor" to Venus' moons array.
|
||||
solarSystem[1].moons.push("Endor");
|
||||
|
||||
// Add a Pluto object to the solarSystem array using .push.
|
||||
// The object should contain Pluto's name, ringSystem boolean, and moons array
|
||||
// (which includes "Charon").
|
||||
solarSystem.push({ name: "Pluto", ringSystem: false, moons: ["Charon"]});
|
||||
|
||||
// Add a new key value pair to the the Earth object: the key should be 'diameter',
|
||||
// and the value should be Earth's diameter in miles.
|
||||
solarSystem[2].diameter = "7,915";
|
||||
|
||||
// Change Mercury's ringSystem boolean to true.
|
||||
solarSystem[0].ringSystem = true;
|
||||
|
||||
// Change Uranus' moon "Umbriel" to "Oberon"
|
||||
solarSystem[6].moons[3] = "Oberon";
|
||||
|
||||
// Iterate through the solarSystem array and print only the objects that
|
||||
// have a ringSystem (where ringSystem: true)
|
||||
for (var i=0; i < solarSystem.length; i++) {
|
||||
if (solarSystem[i].ringSystem) {
|
||||
console.log(solarSystem[i]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// BONDFILMS
|
||||
// =======================================
|
||||
|
||||
bondFilms = [
|
||||
{ "title" : "Skyfall", "year" : 2012, "actor" : "Daniel Craig", "gross" : "$1,108,561,008" },
|
||||
{ "title" : "Thunderball", "year" : 1965, "actor" : "Sean Connery", "gross" : "$1,014,941,117" },
|
||||
{ "title" : "Goldfinger", "year" : 1964, "actor" : "Sean Connery", "gross" : "$912,257,512" },
|
||||
{ "title" : "Live and Let Die", "year" : 1973, "actor" : "Roger Moore", "gross" : "$825,110,761" },
|
||||
{ "title" : "You Only Live Twice", "year" : 1967, "actor" : "Sean Connery", "gross" : "$756,544,419" },
|
||||
{ "title" : "The Spy Who Loved Me", "year" : 1977, "actor" : "Roger Moore", "gross" : "$692,713,752" },
|
||||
{ "title" : "Casino Royale", "year" : 2006, "actor" : "Daniel Craig", "gross" : "$669,789,482" },
|
||||
{ "title" : "Moonraker", "year" : 1979, "actor" : "Roger Moore", "gross" : "$655,872,400" },
|
||||
{ "title" : "Diamonds Are Forever", "year" : 1971, "actor" : "Sean Connery", "gross" : "$648,514,469" },
|
||||
{ "title" : "Quantum of Solace", "year" : 2008, "actor" : "Daniel Craig", "gross" : "$622,246,378" },
|
||||
{ "title" : "From Russia with Love", "year" : 1963, "actor" : "Sean Connery", "gross" : "$576,277,964" },
|
||||
{ "title" : "Die Another Day", "year" : 2002, "actor" : "Pierce Brosnan", "gross" : "$543,639,638" },
|
||||
{ "title" : "Goldeneye", "year" : 1995, "actor" : "Pierce Brosnan", "gross" : "$529,548,711" },
|
||||
{ "title" : "On Her Majesty's Secret Service", "year" : 1969, "actor" : "George Lazenby", "gross" : "$505,899,782" },
|
||||
{ "title" : "The World is Not Enough", "year" : 1999, "actor" : "Pierce Brosnan", "gross" : "$491,617,153" },
|
||||
{ "title" : "For Your Eyes Only", "year" : 1981, "actor" : "Roger Moore", "gross" : "$486,468,881" },
|
||||
{ "title" : "Tomorrow Never Dies", "year" : 1997, "actor" : "Pierce Brosnan", "gross" : "$478,946,402" },
|
||||
{ "title" : "The Man with the Golden Gun", "year" : 1974, "actor" : "Roger Moore", "gross" : "$448,249,281" },
|
||||
{ "title" : "Dr. No", "year" : 1962, "actor" : "Sean Connery", "gross" : "$440,759,072" },
|
||||
{ "title" : "Octopussy", "year" : 1983, "actor" : "Roger Moore", "gross" : "$426,244,352" },
|
||||
{ "title" : "The Living Daylights", "year" : 1987, "actor" : "Timothy Dalton", "gross" : "$381,088,866" },
|
||||
{ "title" : "A View to a Kill", "year" : 1985, "actor" : "Roger Moore", "gross" : "$321,172,633" },
|
||||
{ "title" : "License to Kill", "year" : 1989, "actor" : "Timothy Dalton", "gross" : "$285,157,191" }
|
||||
];
|
||||
|
||||
// Determine the total cumulative gross of the Bond franchise.
|
||||
var sum = 0;
|
||||
for (var i=0; i < bondFilms.length; i++) {
|
||||
var value = parseInt(bondFilms[i].gross.replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, ''));
|
||||
sum += value;
|
||||
}
|
||||
console.log('Total gross: ' + sum);
|
||||
|
||||
|
||||
|
||||
// Create a new array with the names of the Bond films.
|
||||
var bondTitles = [];
|
||||
for (var i=0; i < bondFilms.length; i++) {
|
||||
bondTitles.push(bondFilms[i].title);
|
||||
}
|
||||
console.log(bondTitles);
|
||||
|
||||
|
||||
// Create a new array `oddBonds`, of only the Bond films released on odd-numbered years.
|
||||
var oddBonds = [];
|
||||
for (var i=0; i < bondFilms.length; i++) {
|
||||
if (bondFilms[i].year % 2 !== 0) {
|
||||
oddBonds.push(bondFilms[i]);
|
||||
}
|
||||
}
|
||||
console.log(oddBonds);
|
||||
|
||||
|
||||
|
||||
// HUMDINGER
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
@ -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.
|
||||
|
||||
Loading…
Reference in new issue