Browse Source

initial commit

Froilan Miranda 8 years ago
commit
e803bda2e5
8 changed files with 366 additions and 0 deletions
  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
+}