JenniferChao4
/
JSON-Lab-1
forked from Cohort4.2/JSON-Lab-1
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

initial commit

Froilan Miranda 8 years ago
commit
e803bda2e5
8 changed files with 366 additions and 0 deletions
Split View Show Diff Stats
  1. 37
    0
      .gitignore
  2. 5
    0
      README.md
  3. 121
    0
      css/style.css
  4. BIN
      images/logos/js_logo.png
  5. BIN
      images/logos/zip_logo.jpg
  6. 31
    0
      index.html
  7. 33
    0
      js/colors.js
  8. 139
    0
      js/index.js

+ 37
- 0
.gitignore View File 

@@ -0,0 +1,37 @@
1 
+# Compiled source #
2 
+###################
3 
+*.com
4 
+*.class
5 
+*.dll
6 
+*.exe
7 
+*.o
8 
+*.so
9 
+
10 
+# Packages #
11 
+############
12 
+# it's better to unpack these files and commit the raw source
13 
+# git has its own built in compression methods
14 
+*.7z
15 
+*.dmg
16 
+*.gz
17 
+*.iso
18 
+*.jar
19 
+*.rar
20 
+*.tar
21 
+*.zip
22 
+
23 
+# Logs and databases #
24 
+######################
25 
+*.log
26 
+*.sql
27 
+*.sqlite
28 
+
29 
+# OS generated files #
30 
+######################
31 
+.DS_Store
32 
+.DS_Store?
33 
+._*
34 
+.Spotlight-V100
35 
+.Trashes
36 
+ehthumbs.db
37 
+Thumbs.db

+ 5
- 0
README.md View File 

@@ -0,0 +1,5 @@
1 
+Instructions
2 
+##################################################################
3 
+Your missioin is to debug js/colors.js. The javascript application depends on this file to feed it the color data to write to screen.
4 
+
5 
+Use the developer tools in your browser to debug and fix the code.

+ 121
- 0
css/style.css View File 

@@ -0,0 +1,121 @@
1 
+/* ZipcodeWilmington 2015 */
2 
+
3 
+/* ===================================== FONTS ========================================= */
4 
+@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700);
5 
+
6 
+
7 
+/* ===================================== GLOBAL STYLE ========================================= */
8 
+* {
9 
+    margin: 0;
10 
+    padding: 0;
11 
+}
12 
+
13 
+body { font: 14px/1.4 arial, sans-serif; background-color: #F5F5F5;);}
14 
+
15 
+article, aside, figure, footer, header, nav, section { display: block; }
16 
+a:link, a:visited {
17 
+    text-decoration: none;
18 
+
19 
+    color: inherit;
20 
+}
21 
+
22 
+a:hover, a:active {
23 
+    text-decoration: none;
24 
+
25 
+    color: inherit;
26 
+}
27 
+
28 
+.group:before,
29 
+.group:after {
30 
+    content:"";
31 
+    display:table;
32 
+}
33 
+.group:after {
34 
+    clear:both;
35 
+}
36 
+.group {
37 
+    zoom:1; /* For IE 6/7 (trigger hasLayout) */
38 
+}
39 
+
40 
+#main:focus {
41 
+    outline: none;
42 
+}
43 
+
44 
+
45 
+/* ===================================== HEADER STYLE ========================================= */
46 
+
47 
+.main-header {
48 
+    width: 100%;
49 
+    height: 150px;
50 
+
51 
+    background-color: #144e64;}
52 
+
53 
+.main-header .title {
54 
+    float: left;
55 
+    text-transform: uppercase;
56 
+
57 
+    font-family: 'Droid Sans', sans-serif;
58 
+    font-weight: 400;
59 
+    font-size: 1em;
60 
+
61 
+    width: 55%;
62 
+
63 
+    padding-left: 5%;
64 
+
65 
+    color: #fff;
66 
+
67 
+    position: relative;
68 
+    top: 50%;
69 
+    transform: translateY(-50%);
70 
+}
71 
+
72 
+.main-header .zip-link {
73 
+    float: right;
74 
+
75 
+    width: 16%;
76 
+    height: 100%;
77 
+
78 
+    background-color: white;
79 
+}
80 
+
81 
+.main-header .lesson-link {
82 
+    float: right;
83 
+
84 
+    width: 16%;
85 
+    height: 100%;
86 
+
87 
+    background-color: #3c790a;
88 
+}
89 
+
90 
+.main-header div {
91 
+    /* fix blurriness of children due to them
92 
+       being placed on half pixels */
93 
+    -webkit-transform-style: preserve-3d;
94 
+    -moz-transform-style: preserve-3d;
95 
+    transform-style: preserve-3d;
96 
+}
97 
+
98 
+.main-header div img {
99 
+    display: block;
100 
+
101 
+    margin: auto;
102 
+
103 
+    width: 55%;
104 
+
105 
+    position: relative;
106 
+    top: 50%;
107 
+    transform: translateY(-50%);
108 
+}
109 
+
110 
+/* page styles */
111 
+article {margin: 5%;}
112 
+article p { margin-bottom: 20px;}
113 
+section {margin: 5%;}
114 
+h1 {font-weight: bold;}
115 
+ol {list-style-type: lower-alpha; margin-left:15px}
116 
+ol li {margin-bottom: 15px;}
117 
+ul li {margin-left: 20px; margin-bottom: 0;}
118 
+#result {border: 1px #aaa solid; height: 300px; width:100%; background:#eee; margin-bottom: 15px;}
119 
+
120 
+
121 
+

BIN
images/logos/js_logo.png View File


BIN
images/logos/zip_logo.jpg View File


+ 31
- 0
index.html View File 

@@ -0,0 +1,31 @@
1 
+<!DOCTYPE html>
2 
+<html lang="en">
3 
+<head>
4 
+    <meta charset="UTF-8">
5 
+    <link href="./css/style.css" type="text/css" rel="stylesheet">
6 
+    <title>Debug Local Data | Zipcode Wilmington</title>
7 
+</head>
8 
+<body>
9 
+    <header class="main-header group">
10 
+        <div class="title"><h1>Zipcode Wilmington<br>Javascript Lab - Fall 2015</h1></div>
11 
+        <div class="lesson-link"><img src="./images/logos/js_logo.png" alt="Javascript"/></div>
12 
+        <div class="zip-link"><img src="./images/logos/zip_logo.jpg" alt="Zipcode Wilmington"/></div>
13 
+    </header>
14 
+
15 
+    <article>
16 
+	    <h1>Instructions</h1>
17 
+        <p>Your missioin is to debug js/colors.js. The javascript application depends on this file to feed it the color data to write to screen.</p>
18 
+        <p>Use the developer tools in your browser to debug and fix the code.</p>
19 
+	</article>
20 
+
21 
+    <section>
22 
+    	<h1>Program Output</h1>
23 
+    	<div id="result">
24 
+            <canvas id="c"></canvas>
25 
+        </div>
26 
+    </section>
27 
+
28 
+    <script type="text/javascript" src="js/colors.js"></script>
29 
+    <script type="text/javascript" src="js/index.js"></script>
30 
+</body>
31 
+</html>

+ 33
- 0
js/colors.js View File 

@@ -0,0 +1,33 @@
1 
+var colorsArray : {
2 
+    colors=[
3 
+        {
4 
+            "name":"green",
5 
+            "red":"64",
6 
+            "green":"175",
7 
+            "blue":"63",
8 
+        },
9 
+        {
10 
+            "name":"yellow",
11 
+            "red":"239",
12 
+            "green":"183",
13 
+            "blue":"62"
14 
+        },
15 
+        {
16 
+            name:"red",
17 
+            red:"192",
18 
+            green:"46",
19 
+            blue:"35"
20 
+        }
21 
+        {
22 
+            "name":"blue",
23 
+            "red":"19",
24 
+            "green":"71",
25 
+            "blue":"144",
26 
+        },
27 
+        {
28 
+            "name"="orange",
29 
+            "red"="253",
30 
+            "green"="92",
31 
+            "blue"="48"
32 
+        },
33 
+    ]

+ 139
- 0
js/index.js View File 

@@ -0,0 +1,139 @@
1 
+//Function to grab random int between min - max
2 
+var randomInt = function (min, max) {
3 
+  return Math.floor(Math.random() * (max - min + 1)) + min;
4 
+}
5 
+
6 
+window.onload = function()
7 
+{
8 
+	// lets git the HTML canvas element so we draw on it
9 
+	var canvas = document.getElementById("c");
10 
+	var ctx = canvas.getContext("2d");
11 
+
12 
+	var W = document.getElementById("result").offsetWidth, /// get the width of our window
13 
+		H = document.getElementById("result").offsetHeight; // get the height
14 
+
15 
+	console.log(document.getElementById("result").style.height);
16 
+	// set our canvas to our siz of Width and Height
17 
+	canvas.width = W;
18 
+	canvas.height = H;
19 
+
20 
+	//console.log("my color request: "+colorsArray);
21 
+
22 
+	/*===============Box class=================================*/
23 
+	function Box(_x, _y)
24 
+	{
25 
+		// the X/Y position
26 
+		this.x = _x;
27 
+		this.y = _y;
28 
+
29 
+		//lets give it velocity X and Y
30 
+		this.xVel = 10 + Math.random()*20;
31 
+		this.yVel = 1;
32 
+
33 
+		//the box width and height
34 
+		this.width = 20;
35 
+		this.height = 20;
36 
+
37 
+		//random colors for our box
38 
+		/*this.r = Math.round(Math.random()*255);
39 
+		this.g = Math.round(Math.random()*255);
40 
+		this.b = Math.round(Math.random()*255);*/
41 
+
42 
+		this.randomColor = randomInt(0,colorsArray.colors.length-1);
43 
+		this.r = colorsArray.colors[this.randomColor].red;
44 
+		this.g = colorsArray.colors[this.randomColor].green;
45 
+		this.b = colorsArray.colors[this.randomColor].blue;
46 
+
47 
+		console.log(colorsArray);
48 
+
49 
+
50 
+		this.rgba = "rgba("+this.r+","+this.g+","+this.b+",1)";
51 
+
52 
+		//lets make draw method for out box
53 
+		this.draw = function()
54 
+		{
55 
+			ctx.strokeStyle = this.rgba;
56 
+			ctx.strokeRect(this.x,this.y,this.width,this.height);
57 
+
58 
+			this.update();
59 
+		}
60 
+
61 
+		//function that handle our logincss for our box
62 
+		this.update = function()
63 
+		{
64 
+			//lets check if the ball get out of our screen and when it does that , make it bounce
65 
+			//check the left window border
66 
+			if(this.x<0){
67 
+				this.x = 0;		//set its position to 0
68 
+				this.xVel *= -1; //make it bounce
69 
+			}
70 
+
71 
+			//check the right border
72 
+			if(this.x > W - this.width)
73 
+			{
74 
+				this.x = W - this.width; //set its position to 0
75 
+				this.xVel *= -1; //make it bounce
76 
+			}
77 
+
78 
+			//check the top border
79 
+			if(this.y < 0){
80 
+				this.y = 0;	//this is what happen when u copy/paste
81 
+				this.yVel *= -1; //make it bounce
82 
+			}
83 
+
84 
+			// the reaason why we did this if functin so the boxes dont
85 
+			//try to add y by its belocity whe it reaches the bottom
86 
+			//now we add gravity
87 
+			if(this.y < H - this.height)
88 
+				this.yVel += .25;
89 
+
90 
+			//check the bottom border
91 
+			if(this.y > H - this.height)
92 
+			{
93 
+				//when it bounces off the bottom decrease the ball speed
94 
+				this.xVel *= .5;
95 
+				this.yVel *= .5;
96 
+
97 
+				this.y = H - this.height; //set its position to 0
98 
+				this.yVel *= -1; //make it bounce
99 
+			}
100 
+
101 
+			//move add speed to our x/y
102 
+			this.x += this.xVel;
103 
+			this.y += this.yVel;
104 
+		}
105 
+	}// Box Class
106 
+
107 
+	// lets make array of boxes
108 
+	var boxes = [];
109 
+
110 
+	// Function to draw stuff on our screen :)
111 
+	function draw()
112 
+	{
113 
+		//Background
114 
+		ctx.globalCompositeOperation = "source-over";
115 
+		ctx.fillStyle = 'rgba(32,38,57,0.5)';
116 
+		ctx.fillRect(0,0,W,H);
117 
+
118 
+		ctx.globalCompositeOperation = "lighter";
119 
+
120 
+		//loop through the boxes and draw them
121 
+		for(i=0; i<boxes.length; i++)
122 
+			boxes[i].draw();
123 
+
124 
+		update();
125 
+	}
126 
+
127 
+	//Function for our logic
128 
+	function update()
129 
+	{
130 
+		for(i=0; i<boxes.length; i++)
131 
+			boxes[i].update();
132 
+	}
133 
+
134 
+	setInterval(function(){boxes.push(new Box(0,0))},1000);
135 
+
136 
+	//set interval so we can draw then update our drawing
137 
+	// every 30 milisecond
138 
+	setInterval(draw,30);
139 
+}