Browse Source

initial commit

Froilan Miranda 8 years ago
commit
9b929f134f
6 changed files with 218 additions and 0 deletions
  1. 37
    0
      .gitignore
  2. 18
    0
      README.md
  3. 121
    0
      css/style.css
  4. BIN
      images/logos/js_logo.png
  5. BIN
      images/logos/zip_logo.jpg
  6. 42
    0
      index.html

+ 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 

+ 18
- 0
README.md View File

@@ -0,0 +1,18 @@
1
+Instructions
2
+#######################################################################################
3
+Us the XMLHttpRequest() to receive the remote json feed from the following website
4
+https://data.sfgov.org/api/views/yitu-d5am/rows.json?accessType=DOWNLOAD
5
+
6
+The json feed list movies made in San Francisco
7
+
8
+Write the following info for each movie to the webpage:
9
+
10
+    movie title
11
+    release year
12
+    production company
13
+
14
+Only list movies that were made at the Golden State Bridge
15
+
16
+Use document.getElementById('result').innerHTML += your_output; to write the movie's info to the page.
17
+
18
+Append "<br>" to output code to create a new line

+ 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; padding:10px; min-height: 30; background:#eee; margin-bottom: 15px;}
119
+
120
+
121
+

BIN
images/logos/js_logo.png View File


BIN
images/logos/zip_logo.jpg View File


+ 42
- 0
index.html View File

@@ -0,0 +1,42 @@
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>Import Local JSON 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>Us the <code>XMLHttpRequest()</code> to receive the remote json feed from the following website<br>
18
+        https://data.sfgov.org/api/views/yitu-d5am/rows.json?accessType=DOWNLOAD
19
+        </p>
20
+
21
+        <p>The json feed list movies made in San Francisco</p>
22
+
23
+        <p>Write the following info for each movie to the webpage:
24
+            <ul>
25
+                <li>movie title</li>
26
+                <li>release year</li>
27
+                <li>production company</li>
28
+            </ul>
29
+        </p>
30
+
31
+        <p>Only list movies that were made at the Golden Gate Bridge</p>
32
+
33
+        <p>Use <code>document.getElementById('result').innerHTML += <i>your_output</i>;</code> to write the movie's info to the page.</p>
34
+        <p>Append <code>"&ltbr&gt"</code> to output code to create a new line</p>
35
+    </article>
36
+
37
+    <section>
38
+    	<h1>Movie Information</h1>
39
+    	<div id="result"></div>
40
+    </section>
41
+</body>
42
+</html>