Soujanya
/
JSON-Lab-2
forked from Cohort4.2/JSON-Lab-2
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
9b929f134f
6 changed files with 218 additions and 0 deletions
Split View Show Diff Stats
  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>