├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── day01
    ├── final
    │   ├── index.html
    │   └── style.css
    └── starter
    │   ├── index.html
    │   └── style.css
├── day02
    ├── final
    │   └── index.html
    └── starter
    │   ├── part1
    │       └── index.html
    │   ├── part2
    │       └── index.html
    │   └── part3
    │       └── index.html
├── day03
    ├── final
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
    └── starter
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
├── day04
    ├── final
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
    └── starter
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
├── day05
    ├── hawaiiTravelSite
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
    └── tokyoTravelPage
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
├── day06
    ├── final
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
    └── starter
    │   ├── index.html
    │   ├── script.js
    │   └── style.css
├── day07
    └── README.md
├── day08
    ├── final
    │   └── secretMessageApp
    │   │   ├── .gitignore
    │   │   ├── database.rules.json
    │   │   ├── firebase.json
    │   │   └── public
    │   │       ├── 404.html
    │   │       ├── css
    │   │           └── style.css
    │   │       ├── index.html
    │   │       ├── js
    │   │           ├── viewMessages.js
    │   │           └── writeMessage.js
    │   │       └── viewMessages.html
    └── starter
    │   └── secretMessageApp
    │       └── public
    │           ├── css
    │               └── style.css
    │           ├── index.html
    │           ├── js
    │               ├── viewMessages.js
    │               └── writeMessage.js
    │           └── viewMessages.html
├── day09
    ├── final
    │   └── secretMessageApp
    │   │   ├── database.rules.json
    │   │   ├── firebase.json
    │   │   └── public
    │   │       ├── 404.html
    │   │       ├── css
    │   │           └── style.css
    │   │       ├── index.html
    │   │       ├── js
    │   │           ├── viewMessages.js
    │   │           └── writeMessage.js
    │   │       └── viewMessages.html
    └── starter
    │   └── secretMessageApp
    │       ├── .gitignore
    │       ├── database.rules.json
    │       ├── firebase.json
    │       └── public
    │           ├── 404.html
    │           ├── css
    │               └── style.css
    │           ├── index.html
    │           ├── js
    │               ├── viewMessages.js
    │               └── writeMessage.js
    │           └── viewMessages.html
├── day10
    ├── bookRecsExemplar
    │   ├── .firebaserc
    │   ├── .gitignore
    │   ├── README.md
    │   ├── database.rules.json
    │   ├── firebase.json
    │   ├── public
    │   │   ├── 404.html
    │   │   ├── addBook.html
    │   │   ├── css
    │   │   │   └── style.css
    │   │   ├── index.html
    │   │   └── js
    │   │   │   ├── dbConnection.js
    │   │   │   └── script.js
    │   └── remoteconfig.template.json
    └── bookSearchExemplar
    │   ├── .firebaserc
    │   ├── .gitignore
    │   ├── README.md
    │   ├── database.rules.json
    │   ├── firebase.json
    │   └── public
    │       ├── 404.html
    │       ├── css
    │           └── style.css
    │       ├── index.html
    │       └── js
    │           ├── dbConnection.js
    │           └── script.js
├── day11
    ├── final
    │   └── firebaseNotes
    │   │   ├── .firebaserc
    │   │   ├── .gitignore
    │   │   ├── database.rules.json
    │   │   ├── firebase.json
    │   │   └── public
    │   │       ├── 404.html
    │   │       ├── css
    │   │           └── writeNote.css
    │   │       ├── index.html
    │   │       ├── js
    │   │           ├── signIn.js
    │   │           └── writeNote.js
    │   │       └── writeNote.html
    └── starter
    │   └── firebaseNotes
    │       └── public
    │           ├── css
    │               └── writeNote.css
    │           ├── index.html
    │           ├── js
    │               ├── signIn.js
    │               └── writeNote.js
    │           └── writeNote.html
├── day12
    ├── final
    │   └── firebaseNotes
    │   │   ├── .firebaserc
    │   │   ├── .gitignore
    │   │   ├── database.rules.json
    │   │   ├── firebase.json
    │   │   └── public
    │   │       ├── 404.html
    │   │       ├── css
    │   │           ├── cards.css
    │   │           └── writeNote.css
    │   │       ├── index.html
    │   │       ├── js
    │   │           ├── signIn.js
    │   │           ├── viewNotes.js
    │   │           └── writeNote.js
    │   │       ├── viewNotes.html
    │   │       └── writeNote.html
    └── starter
    │   └── firebaseNotes
    │       ├── .firebaserc
    │       ├── .gitignore
    │       ├── database.rules.json
    │       ├── firebase.json
    │       └── public
    │           ├── 404.html
    │           ├── css
    │               ├── cards.css
    │               └── writeNote.css
    │           ├── index.html
    │           ├── js
    │               ├── signIn.js
    │               ├── viewNotes.js
    │               └── writeNote.js
    │           ├── viewNotes.html
    │           └── writeNote.html
└── day13
    ├── final
        └── firebaseNotes
        │   ├── .firebaserc
        │   ├── .gitignore
        │   ├── database.rules.json
        │   ├── firebase.json
        │   └── public
        │       ├── 404.html
        │       ├── css
        │           ├── cards.css
        │           └── writeNote.css
        │       ├── index.html
        │       ├── js
        │           ├── signIn.js
        │           ├── viewNotes.js
        │           └── writeNote.js
        │       ├── viewNotes.html
        │       └── writeNote.html
    └── starter
        └── firebaseNotes
            ├── .firebaserc
            ├── .gitignore
            ├── database.rules.json
            ├── firebase.json
            └── public
                ├── 404.html
                ├── css
                    ├── cards.css
                    └── writeNote.css
                ├── index.html
                ├── js
                    ├── signIn.js
                    ├── viewNotes.js
                    └── writeNote.js
                ├── viewNotes.html
                └── writeNote.html


/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # How to Contribute
 2 | 
 3 | We'd love to accept your patches and contributions to this project. There are
 4 | just a few small guidelines you need to follow.
 5 | 
 6 | ## Contributor License Agreement
 7 | 
 8 | Contributions to this project must be accompanied by a Contributor License
 9 | Agreement. You (or your employer) retain the copyright to your contribution;
10 | this simply gives us permission to use and redistribute your contributions as
11 | part of the project. Head over to <https://cla.developers.google.com/> to see
12 | your current agreements on file or to sign a new one.
13 | 
14 | You generally only need to submit a CLA once, so if you've already submitted one
15 | (even if it was for a different project), you probably don't need to do it
16 | again.
17 | 
18 | ## Code reviews
19 | 
20 | All submissions, including submissions by project members, require review. We
21 | use GitHub pull requests for this purpose. Consult
22 | [GitHub Help](https://help.github.com/articles/about-pull-requests/) for more
23 | information on using pull requests.
24 | 
25 | ## Community Guidelines
26 | 
27 | This project follows [Google's Open Source Community
28 | Guidelines](https://opensource.google.com/conduct/).
29 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # CSSI Curriculum Labs
 2 | 
 3 | Welcome to the CSSI Curriculum Labs.
 4 | 
 5 | This repository contains the code and instructions for the student activities
 6 | and labs that complement the CSSI curriculum.
 7 | 
 8 | ## How to download and complete these labs.
 9 | 
10 | You will clone this repository to your local machine, and complete the exercises
11 | locally. You will **not** contribute your solutions to this repository, but
12 | you can, if you choose, create your own repository and use it to store your
13 | solutions for later.
14 | 
15 | ### Cloning the repository
16 | 
17 | To create your own local copy of this repository, use the following command:
18 | 
19 | ``` shell
20 | git clone https://github.com/google/cssi-labs
21 | ```
22 | 
23 | This will create a new folder with all the files you will need for the course.
24 | 
25 | ### Writing your solutions
26 | 
27 | The main level folders divide the content by topic, inside each folder you
28 | will find all the activities for that topic. Each lab or activity has a
29 | `README.md` file with the instructions. You can find the same instructions in
30 | the CSSI curriculum website shared with you by your instructors.
31 | 
32 | ### Saving your solutions (optional)
33 | 
34 | If you choose to use GitHub to track your solutions, you will **not** be saving
35 | them to Google's original repository, but you can create your own repository in
36 | GitHub, and link it to your local copy by running
37 | 
38 | ```
39 | git remote add personal <your repository url>
40 | ```
41 | 
42 | You can find your repository URL on the GitHub web interface after you created
43 | it.
44 | 
45 | Once you have added your remote repository, which is now named `personal`, you
46 | can store your changes following these steps:
47 | 
48 | 1. Add the files you created or modified:
49 | ```shell
50 | git add <filenames>
51 | ```
52 | 2. Save the changes locally:
53 | ```shell
54 | git commit -m "<insert some description of your change here>"
55 | ```
56 | 3. Push the changes to your remote repository:
57 | ```shell
58 | git push personal
59 | ```
60 | 
61 | Don't simply run `git push`, because that will try to update our original
62 | repository, which will reject your changes.
63 | 


--------------------------------------------------------------------------------
/day01/final/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <title>Pete's Pizza</title>
 7 |   <link rel="stylesheet" href="style.css" type="text/css">
 8 | </head>
 9 | 
10 | <body>
11 |   <section id="greeting">
12 |     <h1>Pizza Pete's Palace</h1>
13 |     <h3>Don't roll the dice, get a nice slice!</h3>
14 |   </section>
15 |   <section id="about">
16 |     <h2>About</h2>
17 |     <p>Founded in 2021, Pete's Pizza offers only the finest pizzas, pastas, and soups. Stop by and try a pie!</p>
18 |   </section>
19 |   <section id="menu">
20 |     <h2>Menu</h2>
21 |     <div>
22 |       <h4>Plain</h4>
23 |       <img src="https://www.seriouseats.com/2018/10/20181015-state-of-slice-delmar-clay-williams.jpg" />
24 |       <p>Our classic cheese pizza is oven fired with ingredients sourced from right in in New York. You won't find a
25 |         fresher pie!</p>
26 |       <h5>$1.50 / slice</h5>
27 |     </div>
28 |     <div>
29 |       <h4>Pepperoni</h4>
30 |       <img src="http://nyslices.com/wp-content/uploads/2012/08/pepperoni-pizza.jpg" />
31 |       <p>Grab a favorite classic topping with our special pepperoni fresh from the butcher shop from down the street.
32 |       </p>
33 |       <h5>$2.75 / slice</h5>
34 |     </div>
35 |   </section>
36 |   <footer>
37 |     <p>Interested in learning more? Read this <a
38 |         href="https://www.thespruceeats.com/what-is-new-york-style-pizza-2708764#:~:text=History,which%20served%20large%2C%20wide%20pies.">history
39 |         of New York Pizza</a>.</p>
40 |   </footer>
41 | </body>
42 | 
43 | </html>
44 | 


--------------------------------------------------------------------------------
/day01/final/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   width: 90%;
 3 |   margin: auto;
 4 |   padding: 20px;
 5 |   background-color: aliceblue;
 6 |   font: "IBM Plex Sans", sans-serif;
 7 | }
 8 | 
 9 | section {
10 |   padding: 20px;
11 |   margin: 20px;
12 |   background-color: #d5e1eb;
13 |   min-height: 20px;
14 | }
15 | 
16 | h1 {
17 |   text-align: center;
18 |   font-size: 64px;
19 | }
20 | 
21 | h3 {
22 |   text-align: center;
23 |   font-style: italic;
24 | }
25 | 
26 | div {
27 |   padding: 20px;
28 |   margin: 20px;
29 |   background-color: #607482;
30 |   color: white;
31 |   display: flex;
32 |   flex-direction: column;
33 |   min-height: 20px;
34 | }
35 | 
36 | h2 {
37 |   font-size: 34px;
38 | }
39 | 
40 | h4 {
41 |   font-size: 30px;
42 | }
43 | 
44 | p {
45 |   margin-top: 30px;
46 | }
47 | 
48 | h5 {
49 |   font-size: 30px;
50 |   text-align: right;
51 | }
52 | 
53 | img {
54 |   width: 100%;
55 |   max-width: 600px;
56 |   margin: auto;
57 | }
58 | 
59 | footer {
60 |   background-color: #7cbdeb;
61 | }
62 | 


--------------------------------------------------------------------------------
/day01/starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <title>Pete's Pizza</title>
 7 |   <link rel="stylesheet" href="style.css" type="text/css">
 8 | </head>
 9 | 
10 | <body>
11 | 
12 | </body>
13 | 
14 | </html>
15 | 


--------------------------------------------------------------------------------
/day01/starter/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   width: 90%;
 3 |   margin: auto;
 4 |   padding: 20px;
 5 |   background-color: aliceblue;
 6 |   font: "IBM Plex Sans", sans-serif;
 7 | }
 8 | 
 9 | section {
10 |   padding: 20px;
11 |   margin: 20px;
12 |   background-color: #d5e1eb;
13 | }
14 | 
15 | h1 {
16 |   text-align: center;
17 |   font-size: 64px;
18 | }
19 | 
20 | h3 {
21 |   text-align: center;
22 |   font-style: italic;
23 | }
24 | 
25 | div {
26 |   padding: 20px;
27 |   margin: 20px;
28 |   background-color: #607482;
29 |   color: white;
30 |   display: flex;
31 |   flex-direction: column;
32 | }
33 | 
34 | h2 {
35 |   font-size: 34px;
36 | }
37 | 
38 | h4 {
39 |   font-size: 30px;
40 | }
41 | 
42 | p {
43 |   margin-top: 30px;
44 | }
45 | 
46 | h5 {
47 |   font-size: 30px;
48 |   text-align: right;
49 | }
50 | 
51 | img {
52 |   width: 100%;
53 |   max-width: 600px;
54 |   margin: auto;
55 | }
56 | 
57 | footer {
58 |   padding: 30px;
59 |   padding-top: 20px;
60 |   margin-bottom: -20px;
61 |   margin-left: -40px;
62 |   margin-right: -40px;
63 |   background-color: #7cbdeb;
64 | }
65 | 


--------------------------------------------------------------------------------
/day02/final/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |   <title>CSSI 102's Top 10 Songs!</title>
  9 |   <script src="https://use.fontawesome.com/5cd833ef09.js"></script>
 10 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
 11 | </head>
 12 | 
 13 | <body>
 14 |   <!-- HERO -->
 15 |   <section class="hero has-background-info-dark has-text-centered">
 16 |     <div class="hero-body">
 17 |       <p class="title is-size-1">
 18 |         CSSI 102's Playlist
 19 |       </p>
 20 |       <p class="subtitle is-size-3">
 21 |         Our Top 10 Favorite Tunes
 22 |       </p>
 23 |     </div>
 24 |   </section>
 25 | 
 26 |   <section class="section">
 27 |     <h1 class="title has-text-centered">Featured Song</h1>
 28 |   </section>
 29 | 
 30 |   <!-- ROW 1 -->
 31 |   <div class="columns is-centered">
 32 | 
 33 |     <!-- COLUMN 1 -->
 34 |     <div class="column is-one-third mt-4">
 35 | 
 36 |       <!-- CARD -->
 37 |       <div class="card">
 38 |         <div class="card-image p-5">
 39 |           <figure class="image">
 40 |             <img src="https://resources.tidal.com/images/e59f5bde/ab6c/433b/b864/bd4c9374371e/640x640.jpg"
 41 |               alt="Placeholder image">
 42 |           </figure>
 43 |         </div>
 44 |         <div class="card-content">
 45 |           <div class="content">
 46 |             <p class="title is-4">Good Days</p>
 47 |             <p class="subtitle is-6">SZA</p>
 48 |           </div>
 49 |         </div>
 50 |       </div>
 51 |     </div>
 52 |   </div>
 53 | 
 54 |   <section class="section">
 55 |     <h1 class="title has-text-centered">Top Songs</h1>
 56 |   </section>
 57 | 
 58 |   <!-- ROW 2 -->
 59 |   <div class="columns is-centered is-variable is-5">
 60 | 
 61 |     <!-- COLUMN 1 -->
 62 |     <div class="column is-one-quarter">
 63 | 
 64 |       <!-- CARD -->
 65 |       <div class="card">
 66 |         <div class="card-image">
 67 |           <figure class="image">
 68 |             <img src="https://images.genius.com/b874f2aa0e09f2b03d337752954c252d.1000x1000x1.jpg"
 69 |               alt="Placeholder image">
 70 |           </figure>
 71 |         </div>
 72 |         <div class="card-content">
 73 |           <div class="content">
 74 |             <p class="title is-4">Les Fleurs</p>
 75 |             <p class="subtitle is-6">Minnie Riperton</p>
 76 |           </div>
 77 |         </div>
 78 |       </div>
 79 |     </div>
 80 | 
 81 |     <!-- COLUMN 2 -->
 82 |     <div class="column is-one-quarter">
 83 | 
 84 |       <!-- CARD -->
 85 |       <div class="card">
 86 |         <div class="card-image">
 87 |           <figure class="image">
 88 |             <img
 89 |               src="https://t2.genius.com/unsafe/1890x0/https%3A%2F%2Fimages.genius.com%2Fbfb3abdbdc51ed5d52dc21e998b638ab.1000x1000x1.jpg"
 90 |               alt="Placeholder image">
 91 |           </figure>
 92 |         </div>
 93 |         <div class="card-content">
 94 |           <div class="content">
 95 |             <p class="title is-4">That's The Way of The World</p>
 96 |             <p class="subtitle is-6">Earth, Wind & Fire</p>
 97 |           </div>
 98 |         </div>
 99 |       </div>
100 |     </div>
101 | 
102 |     <!-- COLUMN 3 -->
103 |     <div class="column is-one-quarter">
104 | 
105 |       <!-- CARD -->
106 |       <div class="card">
107 |         <div class="card-image">
108 |           <figure class="image">
109 |             <img src="https://f4.bcbits.com/img/a4127648818_10.jpg" alt="Placeholder image">
110 |           </figure>
111 |         </div>
112 |         <div class="card-content">
113 |           <div class="content">
114 |             <p class="title is-4">Brush The Heat</p>
115 |             <p class="subtitle is-6">Little Dragon</p>
116 |           </div>
117 |         </div>
118 |       </div>
119 |     </div>
120 |   </div>
121 | 
122 | 
123 |   <!-- ROW 3 -->
124 |   <div class="columns is-centered is-variable is-5">
125 | 
126 |     <!-- COLUMN 1 -->
127 |     <div class="column is-one-quarter">
128 | 
129 |       <!-- CARD -->
130 |       <div class="card">
131 | 
132 |         <div class="card-image">
133 |           <figure class="image">
134 |             <img
135 |               src="https://img.discogs.com/1jzVi3qaTGzKnjkWX8hPOcwu2kg=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-31381-1433259143-8522.jpeg.jpg"
136 |               alt="chainlink cactus">
137 |           </figure>
138 |         </div>
139 | 
140 |         <div class="card-content">
141 |           <div class="content">
142 |             <p class="title is-3">Watermelon Man</p>
143 |             <p class="subtitle is-5">Herbie Hancock</p>
144 |           </div>
145 |         </div>
146 | 
147 |       </div>
148 |     </div>
149 | 
150 |     <!-- COLUMN 2 -->
151 |     <div class="column is-one-quarter">
152 | 
153 |       <!-- CARD -->
154 |       <div class="card">
155 | 
156 |         <div class="card-image">
157 |           <figure class="image">
158 |             <img src="https://images-na.ssl-images-amazon.com/images/I/81v2nxnWSOL._SL1425_.jpg"
159 |               alt="Crassula arborescens">
160 |           </figure>
161 |         </div>
162 | 
163 |         <div class="card-content">
164 |           <div class="content">
165 |             <p class="title is-3">Disparate Youth</p>
166 |             <p class="subtitle is-5">Santigold</p>
167 |           </div>
168 |         </div>
169 | 
170 |       </div>
171 |     </div>
172 | 
173 |     <!-- COLUMN 3 -->
174 |     <div class="column is-one-quarter">
175 | 
176 |       <!-- CARD -->
177 |       <div class="card">
178 | 
179 |         <div class="card-image">
180 |           <figure class="image">
181 |             <img
182 |               src="https://img.discogs.com/NgvE2qrWTkL9ubP7xcVv2no7TQQ=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-726705-1511891241-5849.jpeg.jpg"
183 |               alt="Sans pinguicula">
184 |           </figure>
185 |         </div>
186 | 
187 |         <div class="card-content">
188 |           <div class="content">
189 |             <p class="title is-3">So In Love</p>
190 |             <p class="subtitle is-5">Curtis Mayfield</p>
191 |           </div>
192 |         </div>
193 | 
194 |       </div>
195 |     </div>
196 |   </div>
197 | 
198 |   <!-- ROW 3 -->
199 |   <div class="columns is-centered is-variable is-5">
200 | 
201 |     <!-- COLUMN 1  -->
202 |     <div class="column is-one-quarter">
203 | 
204 |       <!-- CARD -->
205 |       <div class="card">
206 | 
207 |         <div class="card-image">
208 |           <figure class="image">
209 |             <img src="https://f4.bcbits.com/img/a0377980978_10.jpg" alt="Paperspine cactus">
210 |           </figure>
211 |         </div>
212 | 
213 |         <div class="card-content">
214 |           <div class="content">
215 |             <p class="title is-3">C-Side</p>
216 |             <p class="subtitle is-5">Khruangbin, Leon Bridges</p>
217 |           </div>
218 |         </div>
219 | 
220 |       </div>
221 |     </div>
222 | 
223 |     <!-- COLUMN 2 -->
224 |     <div class="column is-one-quarter">
225 | 
226 |       <!-- CARD -->
227 |       <div class="card">
228 | 
229 |         <div class="card-image">
230 |           <figure class="image">
231 |             <img
232 |               src="https://img.discogs.com/uMedte0Gjml8D3JDoK8WU9WRxP4=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-14182499-1571147906-1388.jpeg.jpg"
233 |               alt="Crassula arborescens">
234 |           </figure>
235 |         </div>
236 | 
237 |         <div class="card-content">
238 |           <div class="content">
239 |             <p class="title is-3">1,000 Rads</p>
240 |             <p class="subtitle is-5">David Axelrod</p>
241 |           </div>
242 |         </div>
243 | 
244 |       </div>
245 |     </div>
246 | 
247 |     <!-- COLUMN 3 -->
248 |     <div class="column is-one-quarter">
249 | 
250 |       <!-- CARD -->
251 |       <div class="card">
252 | 
253 |         <div class="card-image">
254 |           <figure class="image">
255 |             <img
256 |               src="https://i2.wp.com/ratingsgamemusic.com/wp-content/uploads/2019/07/1564099176_3589f2285d41975e9b214c4286a4f3c0.jpg?w=750&ssl=1"
257 |               alt="Sans pinguicula">
258 |           </figure>
259 |         </div>
260 | 
261 |         <div class="card-content">
262 |           <div class="content">
263 |             <p class="title is-3">Pull Up</p>
264 |             <p class="subtitle is-5">Burna Boy</p>
265 |           </div>
266 |         </div>
267 |       </div>
268 |     </div>
269 |   </div>
270 | 
271 | 
272 | </body>
273 | 
274 | </html>
275 | 


--------------------------------------------------------------------------------
/day02/starter/part1/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>CSSI 102's Top 10 Songs!</title>
  8 | <!--     <script src="https://use.fontawesome.com/5cd833ef09.js"></script>
  9 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"> -->
 10 |   </head>
 11 | 
 12 |   <body>
 13 |     <!-- HERO -->
 14 |     <section class="hero has-background-info-dark has-text-centered">
 15 |       <div class="hero-body">
 16 |         <p class="title is-size-1">
 17 |           CSSI 102's Playlist
 18 |         </p>
 19 |         <p class="subtitle is-size-3">
 20 |           Our Top 10 Favorite Tunes
 21 |         </p>
 22 |       </div>
 23 |     </section>
 24 | 
 25 |     <section class="section">
 26 |       <h1 class="title has-text-centered">Featured Song</h1>
 27 |     </section>
 28 | 
 29 |     <!-- ROW 1 -->
 30 |     <div class="columns is-centered">
 31 | 
 32 |       <!-- COLUMN 1 -->
 33 |       <div class="column is-one-third mt-4">
 34 | 
 35 |         <!-- CARD -->
 36 |         <div class="card">
 37 |           <div class="card-image p-5">
 38 |             <figure class="image">
 39 |               <img src="https://resources.tidal.com/images/e59f5bde/ab6c/433b/b864/bd4c9374371e/640x640.jpg" alt="Placeholder image">
 40 |             </figure>
 41 |           </div>
 42 |           <div class="card-content">
 43 |             <div class="content">
 44 |               <p class="title is-4">Good Days</p>
 45 |               <p class="subtitle is-6">SZA</p>
 46 |             </div>
 47 |           </div>
 48 |         </div>
 49 |       </div>
 50 |     </div>
 51 | 
 52 |     <section class="section">
 53 |       <h1 class="title has-text-centered">Top Songs</h1>
 54 |     </section>
 55 | 
 56 |     <!-- ROW 2 -->
 57 |     <div class="columns is-centered is-variable is-5">
 58 | 
 59 |       <!-- COLUMN 1 -->
 60 |       <div class="column is-one-quarter">
 61 | 
 62 |         <!-- CARD -->
 63 |         <div class="card">
 64 |           <div class="card-image">
 65 |             <figure class="image">
 66 |               <img src="https://images.genius.com/b874f2aa0e09f2b03d337752954c252d.1000x1000x1.jpg" alt="Placeholder image">
 67 |             </figure>
 68 |           </div>
 69 |           <div class="card-content">
 70 |             <div class="content">
 71 |               <p class="title is-4">Les Fleurs</p>
 72 |               <p class="subtitle is-6">Minnie Riperton</p>
 73 |             </div>
 74 |           </div>
 75 |         </div>
 76 |       </div>
 77 | 
 78 |       <!-- COLUMN 2 -->
 79 |       <div class="column is-one-quarter">
 80 | 
 81 |         <!-- CARD -->
 82 |         <div class="card">
 83 |           <div class="card-image">
 84 |             <figure class="image">
 85 |               <img src="https://t2.genius.com/unsafe/1890x0/https%3A%2F%2Fimages.genius.com%2Fbfb3abdbdc51ed5d52dc21e998b638ab.1000x1000x1.jpg" alt="Placeholder image">
 86 |             </figure>
 87 |           </div>
 88 |           <div class="card-content">
 89 |             <div class="content">
 90 |               <p class="title is-4">That's The Way of The World</p>
 91 |               <p class="subtitle is-6">Earth, Wind & Fire</p>
 92 |             </div>
 93 |           </div>
 94 |         </div>
 95 |       </div>
 96 | 
 97 |       <!-- COLUMN 3 -->
 98 |       <div class="column is-one-quarter">
 99 | 
100 |         <!-- CARD -->
101 |         <div class="card">
102 |           <div class="card-image">
103 |             <figure class="image">
104 |               <img src="https://f4.bcbits.com/img/a4127648818_10.jpg" alt="Placeholder image">
105 |             </figure>
106 |           </div>
107 |           <div class="card-content">
108 |             <div class="content">
109 |               <p class="title is-4">Brush The Heat</p>
110 |               <p class="subtitle is-6">Little Dragon</p>
111 |             </div>
112 |           </div>
113 |         </div>
114 |       </div>
115 |     </div>
116 | 
117 |   </body>
118 | </html>
119 | 


--------------------------------------------------------------------------------
/day02/starter/part2/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>CSSI 102's Top 10 Songs!</title>
  8 |     <script src="https://use.fontawesome.com/5cd833ef09.js"></script>
  9 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
 10 |   </head>
 11 | 
 12 |   <body>
 13 |     <!-- HERO -->
 14 |     <section class="hero has-background-info-dark has-text-centered">
 15 |       <div class="hero-body">
 16 |         <p class="title is-size-1">
 17 |           CSSI 102's Playlist
 18 |         </p>
 19 |         <p class="subtitle is-size-3">
 20 |           Our Top 10 Favorite Tunes
 21 |         </p>
 22 |       </div>
 23 |     </section>
 24 | 
 25 |     <section class="section">
 26 |       <h1 class="title has-text-centered">Featured Song</h1>
 27 |     </section>
 28 | 
 29 |     <!-- ROW 1 -->
 30 |     <div class="columns is-centered">
 31 | 
 32 |       <!-- COLUMN 1 -->
 33 |       <div class="column is-one-third mt-4">
 34 | 
 35 |         <!-- CARD -->
 36 |         <div class="card">
 37 |           <div class="card-image p-5">
 38 |             <figure class="image">
 39 |               <img src="https://resources.tidal.com/images/e59f5bde/ab6c/433b/b864/bd4c9374371e/640x640.jpg" alt="Placeholder image">
 40 |             </figure>
 41 |           </div>
 42 |           <div class="card-content">
 43 |             <div class="content">
 44 |               <p class="title is-4">Good Days</p>
 45 |               <p class="subtitle is-6">SZA</p>
 46 |             </div>
 47 |           </div>
 48 |         </div>
 49 |       </div>
 50 |     </div>
 51 | 
 52 |     <section class="section">
 53 |       <h1 class="title has-text-centered">Top Songs</h1>
 54 |     </section>
 55 | 
 56 |     <!-- ROW 2 -->
 57 |     <div class="columns is-centered is-variable is-5">
 58 | 
 59 |       <!-- COLUMN 1 -->
 60 |       <div class="column is-one-quarter">
 61 | 
 62 |         <!-- CARD -->
 63 |         <div class="card">
 64 |           <div class="card-image">
 65 |             <figure class="image">
 66 |               <img src="https://images.genius.com/b874f2aa0e09f2b03d337752954c252d.1000x1000x1.jpg" alt="Placeholder image">
 67 |             </figure>
 68 |           </div>
 69 |           <div class="card-content">
 70 |             <div class="content">
 71 |               <p class="title is-4">Les Fleurs</p>
 72 |               <p class="subtitle is-6">Minnie Riperton</p>
 73 |             </div>
 74 |           </div>
 75 |         </div>
 76 |       </div>
 77 | 
 78 |       <!-- COLUMN 2 -->
 79 |       <div class="column is-one-quarter">
 80 | 
 81 |         <!-- CARD -->
 82 |         <div class="card">
 83 |           <div class="card-image">
 84 |             <figure class="image">
 85 |               <img src="https://t2.genius.com/unsafe/1890x0/https%3A%2F%2Fimages.genius.com%2Fbfb3abdbdc51ed5d52dc21e998b638ab.1000x1000x1.jpg" alt="Placeholder image">
 86 |             </figure>
 87 |           </div>
 88 |           <div class="card-content">
 89 |             <div class="content">
 90 |               <p class="title is-4">That's The Way of The World</p>
 91 |               <p class="subtitle is-6">Earth, Wind & Fire</p>
 92 |             </div>
 93 |           </div>
 94 |         </div>
 95 |       </div>
 96 | 
 97 |       <!-- COLUMN 3 -->
 98 |       <div class="column is-one-quarter">
 99 | 
100 |         <!-- CARD -->
101 |         <div class="card">
102 |           <div class="card-image">
103 |             <figure class="image">
104 |               <img src="https://f4.bcbits.com/img/a4127648818_10.jpg" alt="Placeholder image">
105 |             </figure>
106 |           </div>
107 |           <div class="card-content">
108 |             <div class="content">
109 |               <p class="title is-4">Brush The Heat</p>
110 |               <p class="subtitle is-6">Little Dragon</p>
111 |             </div>
112 |           </div>
113 |         </div>
114 |       </div>
115 |     </div>
116 | 
117 | 
118 |     <!-- ROW 3 -->
119 |     <div class="columns is-centered is-variable is-5">
120 | 
121 |       <!-- COLUMN 1 -->
122 |       <div class="column is-one-quarter">
123 | 
124 |         <!-- CARD -->
125 |         <div class="card">
126 | 
127 |           <div class="card-image">
128 |             <figure class="image">
129 |               <img src="https://img.discogs.com/1jzVi3qaTGzKnjkWX8hPOcwu2kg=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-31381-1433259143-8522.jpeg.jpg" alt="chainlink cactus">
130 |             </figure>
131 |           </div>
132 | 
133 |           <div class="card-content">
134 |             <div class="content">
135 |               <p class="title is-3">Watermelon Man</p>
136 |               <p class="subtitle is-5">Herbie Hancock</p>
137 |             </div>
138 |           </div>
139 | 
140 |         </div>
141 |       </div>
142 | 
143 |       <!-- COLUMN 2 -->
144 |       <div class="column is-one-quarter">
145 | 
146 |         <!-- CARD -->
147 |         <div class="card">
148 | 
149 |           <div class="card-image">
150 |             <figure class="image">
151 |               <img src="https://images-na.ssl-images-amazon.com/images/I/81v2nxnWSOL._SL1425_.jpg" alt="Crassula arborescens">
152 |             </figure>
153 |           </div>
154 | 
155 |           <div class="card-content">
156 |             <div class="content">
157 |               <p class="title is-3">Disparate Youth</p>
158 |               <p class="subtitle is-5">Santigold</p>
159 |             </div>
160 |           </div>
161 | 
162 |         </div>
163 |       </div>
164 | 
165 |       <!-- COLUMN 3 -->
166 |       <div class="column is-one-quarter">
167 | 
168 |         <!-- CARD -->
169 |         <div class="card">
170 | 
171 |           <div class="card-image">
172 |             <figure class="image">
173 |               <img src="https://img.discogs.com/NgvE2qrWTkL9ubP7xcVv2no7TQQ=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-726705-1511891241-5849.jpeg.jpg" alt="Sans pinguicula">
174 |             </figure>
175 |           </div>
176 | 
177 |           <div class="card-content">
178 |             <div class="content">
179 |               <p class="title is-3">So In Love</p>
180 |               <p class="subtitle is-5">Curtis Mayfield</p>
181 |             </div>
182 |           </div>
183 | 
184 |         </div>
185 |       </div>
186 |     </div>
187 | 
188 |   </body>
189 | </html>
190 | 


--------------------------------------------------------------------------------
/day03/final/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Welcome to the Zoo!</title>
 9 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
10 |   <link rel="stylesheet" href="style.css" type="text/css">
11 | </head>
12 | 
13 | <body>
14 |   <section class="hero is-small is-dark has-text-centered">
15 |     <div class="hero-body">
16 |       <p class="title">
17 |         Petting Zoo!
18 |       </p>
19 |       <p class="subtitle">
20 |         Welcome to the world's first digital petting zoo!
21 |       </p>
22 |     </div>
23 |   </section>
24 |   <div class="container">
25 | 
26 |     <section class="section">
27 |       <h1 class="title">Tippy the Baby Goat</h1>
28 |       <h2 class="subtitle">
29 |         Tippy the baby goat walks right up to you and bonks his head against your legs. It looks like he wants to be
30 |         pet!
31 |       </h2>
32 |       <figure class="image">
33 |         <img src="https://i1.wp.com/packgoats.com/wp-content/uploads/2019/11/babygoat.jpeg?fit=1800%2C1350&ssl=1"
34 |           alt="a cream-colored baby goat" />
35 |       </figure>
36 |       <p id="status1">He may bleat, but he won't bite!</p>
37 |       <div class="mt-4">
38 |         <button id="button1" class="button is-large">Click to pet the baby goat</button>
39 |       </div>
40 |     </section>
41 |     <section class="section">
42 |       <h1 class="title">Brodie the Bunny</h1>
43 |       <h2 class="subtitle">
44 |         Brodie the bunny loves gentle pets on the head! Go ahead and give him a little pet.
45 |       </h2>
46 |       <figure class="image">
47 |         <img src="https://www.rd.com/wp-content/uploads/2020/04/GettyImages-694542042-e1586274805503.jpg"
48 |           alt="close-up of small white bunny" />
49 |       </figure>
50 |       <p id="status2">Brodie is really quiet. He probably won't say much.</p>
51 |       <div class="mt-4">
52 |         <button id="button2" class="button is-large">Click to pet the bunny</button>
53 |       </div>
54 |     </section>
55 |     <section class="section">
56 |       <h1 class="title">Coco the Mama Goat</h1>
57 |       <h2 class="subtitle">
58 |         Coco is Tippy's mother! She loves carrots. Would you like to feed her one?
59 |       </h2>
60 |       <figure class="image">
61 |         <img src="https://5.imimg.com/data5/PG/YS/MY-27909549/boer-female-goat-500x500.jpg"
62 |           alt="white and brown female goat" />
63 |       </figure>
64 |       <p id="status3">Coco has had 2 carrots today.</p>
65 |       <div class="mt-4">
66 |         <button id="button3" class="button is-large">Click to feed the mama goat</button>
67 |       </div>
68 |     </section>
69 |     <section class="section">
70 |       <h1 class="title">Arno the Alligator</h1>
71 |       <h2 class="subtitle">
72 |         Please do not pet the alligator! He's not part of the petting zoo.
73 |       </h2>
74 |       <figure class="image">
75 |         <img
76 |           src="https://static01.nyt.com/images/2020/01/21/science/17TB-ALLIGATORCARCASS02/17TB-ALLIGATORCARCASS02-videoSixteenByNineJumbo1600.jpg"
77 |           alt="alligator on a small pile of rocks in a lake" />
78 |       </figure>
79 |       <p>Please just look.</p>
80 |       <p id="status4">No Touching!</p>
81 |       <div class="mt-4">
82 |         <button id="button4" class="button is-large is-danger">Pet the alligator anyways</button>
83 |       </div>
84 |     </section>
85 |   </div>
86 |   <script src="script.js" type="text/javascript" defer></script>
87 | </body>
88 | 
89 | </html>
90 | 


--------------------------------------------------------------------------------
/day03/final/script.js:
--------------------------------------------------------------------------------
 1 | console.log("script running!");
 2 | 
 3 | const button1 = document.querySelector("#button1");
 4 | const button2 = document.querySelector("#button2");
 5 | const button3 = document.querySelector("#button3");
 6 | const button4 = document.querySelector("#button4");
 7 | 
 8 | console.log(button1);
 9 | console.log(button2);
10 | console.log(button3);
11 | console.log(button4);
12 | 
13 | button1.addEventListener("click", e => {
14 |   console.log("button 1 pressed!");
15 |   alert("Meh-eh-eh-eh-eh!");
16 | });
17 | 
18 | const status2 = document.querySelector("#status2");
19 | console.log(status2);
20 | 
21 | button2.addEventListener("click", e => {
22 |   console.log("button 2 pressed!");
23 |   status2.innerHTML = "Thanks for petting Brodie! He looks really happy!";
24 | });
25 | 
26 | const status3 = document.querySelector("#status3");
27 | console.log(status3);
28 | 
29 | let carrots = 2;
30 | 
31 | button3.addEventListener("click", e => {
32 |   console.log("button 3 pressed!");
33 |   carrots = carrots + 1;
34 |   status3.innerHTML = "Coco has had " + carrots + " carrots today!";
35 | });
36 | 
37 | const zoo = document.querySelector(".container");
38 | console.log(zoo);
39 | 
40 | button4.addEventListener("click", e => {
41 |   console.log("button 4 pressed!");
42 |   zoo.innerHTML = `<h1 class="title">Due to some dangerous rulebreaking, the petting zoo is temporarily closed</h1>`
43 | });
44 | 


--------------------------------------------------------------------------------
/day03/final/style.css:
--------------------------------------------------------------------------------
1 | img {
2 |   max-width: 400px;
3 | }
4 | 


--------------------------------------------------------------------------------
/day03/starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Welcome to the Zoo!</title>
 9 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
10 |   <link rel="stylesheet" href="style.css" type="text/css">
11 | </head>
12 | 
13 | <body>
14 |   <section class="hero is-small is-dark has-text-centered">
15 |     <div class="hero-body">
16 |       <p class="title">
17 |         Petting Zoo!
18 |       </p>
19 |       <p class="subtitle">
20 |         Welcome to the world's first digital petting zoo!
21 |       </p>
22 |     </div>
23 |   </section>
24 |   <div class="container">
25 | 
26 |     <section class="section">
27 |       <h1 class="title">Tippy the Baby Goat</h1>
28 |       <h2 class="subtitle">
29 |         Tippy the baby goat walks right up to you and bonks his head against your legs. It looks like he wants to be
30 |         pet!
31 |       </h2>
32 |       <figure class="image">
33 |         <img src="https://i1.wp.com/packgoats.com/wp-content/uploads/2019/11/babygoat.jpeg?fit=1800%2C1350&ssl=1"
34 |           alt="a cream-colored baby goat" />
35 |       </figure>
36 |       <p id="status1">He may bleat, but he won't bite!</p>
37 |       <div class="mt-4">
38 |         <button id="button1" class="button is-large">Click to pet the baby goat</button>
39 |       </div>
40 |     </section>
41 |     <section class="section">
42 |       <h1 class="title">Brodie the Bunny</h1>
43 |       <h2 class="subtitle">
44 |         Brodie the bunny loves gentle pets on the head! Go ahead and give him a little pet.
45 |       </h2>
46 |       <figure class="image">
47 |         <img src="https://www.rd.com/wp-content/uploads/2020/04/GettyImages-694542042-e1586274805503.jpg"
48 |           alt="close-up of small white bunny" />
49 |       </figure>
50 |       <p id="status2">Brodie is really quiet. He probably won't say much.</p>
51 |       <div class="mt-4">
52 |         <button id="button2" class="button is-large">Click to pet the bunny</button>
53 |       </div>
54 |     </section>
55 |     <section class="section">
56 |       <h1 class="title">Coco the Mama Goat</h1>
57 |       <h2 class="subtitle">
58 |         Coco is Tippy's mother! She loves carrots. Would you like to feed her one?
59 |       </h2>
60 |       <figure class="image">
61 |         <img src="https://5.imimg.com/data5/PG/YS/MY-27909549/boer-female-goat-500x500.jpg"
62 |           alt="white and brown female goat" />
63 |       </figure>
64 |       <p id="status3">Coco has had 2 carrots today.</p>
65 |       <div class="mt-4">
66 |         <button id="button3" class="button is-large">Click to feed the mama goat</button>
67 |       </div>
68 |     </section>
69 |     <section class="section">
70 |       <h1 class="title">Arno the Alligator</h1>
71 |       <h2 class="subtitle">
72 |         Please do not pet the alligator! He's not part of the petting zoo.
73 |       </h2>
74 |       <figure class="image">
75 |         <img
76 |           src="https://static01.nyt.com/images/2020/01/21/science/17TB-ALLIGATORCARCASS02/17TB-ALLIGATORCARCASS02-videoSixteenByNineJumbo1600.jpg"
77 |           alt="alligator on a small pile of rocks in a lake" />
78 |       </figure>
79 |       <p>Please just look.</p>
80 |       <p id="status4">No Touching!</p>
81 |       <div class="mt-4">
82 |         <button id="button4" class="button is-large is-danger">Pet the alligator anyways</button>
83 |       </div>
84 |     </section>
85 |   </div>
86 |   <script src="" type="text/javascript" defer></script>
87 | </body>
88 | 
89 | </html>
90 | 


--------------------------------------------------------------------------------
/day03/starter/script.js:
--------------------------------------------------------------------------------
1 | console.log("script running!");
2 | 
3 | const button1 = document.querySelector("#button1");
4 | 


--------------------------------------------------------------------------------
/day03/starter/style.css:
--------------------------------------------------------------------------------
1 | img {
2 |   max-width: 400px;
3 | }
4 | 


--------------------------------------------------------------------------------
/day04/final/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |   <title>Languages Quiz</title>
  9 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
 10 |   <link rel="stylesheet" href="style.css" type="text/css">
 11 | </head>
 12 | 
 13 | <body>
 14 |   <section class="hero is-small notification is-info has-text-centered">
 15 |     <div class="hero-body">
 16 |       <p class="title">
 17 |         Language Quiz
 18 |       </p>
 19 |       <p class="subtitle">
 20 |         Can you guess the top 9 languages spoken in the United States?
 21 |       </p>
 22 |     </div>
 23 |   </section>
 24 |   <div class="container">
 25 |     <section class="section">
 26 |       <h1 class="title">Make some guesses!</h1>
 27 |       <h2 class="subtitle">
 28 |         Type your guesses below! If you get a match, it should show up instantly.
 29 |       </h2>
 30 |       <input id="guess" class="input is-primary is-large" type="text" name="language" placeholder="Guess a language!">
 31 |     </section>
 32 |     <section>
 33 |       <div class="tile is-ancestor">
 34 |         <div class="tile is-parent is-4">
 35 |           <div class="tile is-child notification is-info hidden" id="English">
 36 |             <p class="title">English</p>
 37 |             <p class="subtitle">Hello World</p>
 38 |           </div>
 39 |         </div>
 40 |         <div class="tile is-parent is-4">
 41 |           <div class="tile is-child notification is-info hidden" id="Spanish">
 42 |             <p class="title">Spanish</p>
 43 |             <p class="subtitle">Hola Mundo</p>
 44 |           </div>
 45 |         </div>
 46 |         <div class="tile is-parent is-4">
 47 |           <div class="tile is-child notification is-info hidden" id="Chinese">
 48 |             <p class="title">Chinese</p>
 49 |             <p class="subtitle">你好世界</p>
 50 |           </div>
 51 |         </div>
 52 |       </div>
 53 |       <div class="tile is-ancestor">
 54 |         <div class="tile is-parent">
 55 |           <div class="tile is-child notification is-info hidden" id="Tagalog">
 56 |             <p class="title">Tagalog</p>
 57 |             <p class="subtitle">Kamusta sa Mundo</p>
 58 |           </div>
 59 |         </div>
 60 |         <div class="tile is-parent is-4">
 61 |           <div class="tile is-child notification is-info hidden" id="Vietnamese">
 62 |             <p class="title">Vietnamese</p>
 63 |             <p class="subtitle">Chào thế giới</p>
 64 |           </div>
 65 |         </div>
 66 |         <div class="tile is-parent is-4">
 67 |           <div class="tile is-child notification is-info hidden" id="Arabic">
 68 |             <p class="title">Arabic</p>
 69 |             <p class="subtitle">مرحبا بالعالم</p>
 70 |           </div>
 71 |         </div>
 72 |       </div>
 73 |       <div class="tile is-ancestor">
 74 |         <div class="tile is-parent is-4">
 75 |           <div class="tile is-child notification is-info hidden" id="French">
 76 |             <p class="title">French</p>
 77 |             <p class="subtitle">Bonjour le monde</p>
 78 |           </div>
 79 |         </div>
 80 |         <div class="tile is-parent is-4">
 81 |           <div class="tile is-child notification is-info hidden" id="Korean">
 82 |             <p class="title">Korean</p>
 83 |             <p class="subtitle">안녕하세요 세계</p>
 84 |           </div>
 85 |         </div>
 86 |         <div class="tile is-parent is-4">
 87 |           <div class="tile is-child notification is-info hidden" id="Russian">
 88 |             <p class="title">Russian</p>
 89 |             <p class="subtitle">Привет мир</p>
 90 |           </div>
 91 |         </div>
 92 |       </div>
 93 |     </section>
 94 |   </div>
 95 |   <footer class="footer notification is-info mt-5 mb-0">
 96 |     <div class="content has-text-centered">
 97 |       <p class="subtitle">
 98 |         Thanks for playing!
 99 |       </p>
100 |       <p>Source: <a
101 |           href="https://www.accreditedlanguage.com/languages/the-10-most-popular-languages-in-the-us/">Accredited
102 |           Language Services</a>, translations of "Hello World" prodived by Google Translate</p>
103 |     </div>
104 |   </footer>
105 |   <script src="script.js" type="text/javascript" defer></script>
106 | </body>
107 | 
108 | </html>
109 | 


--------------------------------------------------------------------------------
/day04/final/script.js:
--------------------------------------------------------------------------------
 1 | console.log("script running");
 2 | 
 3 | // Fix these querySelectors so that they each select the correct element.
 4 | const englishTile = document.querySelector("#English");
 5 | const spanishTile = document.querySelector("#Spanish");
 6 | const chineseTile = document.querySelector("#Chinese");
 7 | const tagalogTile = document.querySelector("#Tagalog");
 8 | const vietnameseTile = document.querySelector("#Vietnamese");
 9 | const arabicTile = document.querySelector("#Arabic");
10 | const frenchTile = document.querySelector("#French");
11 | const koreanTile = document.querySelector("#Korean");
12 | const russianTile = document.querySelector("#Russian");
13 | 
14 | console.log(englishTile);
15 | console.log(spanishTile);
16 | console.log(chineseTile);
17 | console.log(tagalogTile);
18 | console.log(vietnameseTile);
19 | console.log(arabicTile);
20 | console.log(frenchTile);
21 | console.log(koreanTile);
22 | console.log(russianTile);
23 | 
24 | // Add the id of the input field so we can access it!
25 | const inputField = document.querySelector("#guess");
26 | 
27 | inputField.addEventListener("change", (e) => {
28 |   console.log("Guess submitted!");
29 |   let guess = inputField.value;
30 |   console.log(guess);
31 |   if (guess === "English" || guess === "english") {
32 |     englishTile.classList.remove("hidden");
33 |   } else if (guess === "Spanish" || guess === "spanish") {
34 |     spanishTile.classList.remove("hidden");
35 |   } else if (guess === "Chinese" || guess === "chinese") {
36 |     chineseTile.classList.remove("hidden");
37 |   } else if (guess === "Tagalog" || guess === "tagalog") {
38 |     tagalogTile.classList.remove("hidden");
39 |   } else if (guess === "Vietnamese" || guess === "vietnamese") {
40 |     vietnameseTile.classList.remove("hidden");
41 |   } else if (guess === "Arabic" || guess === "arabic") {
42 |     arabicTile.classList.remove("hidden");
43 |   } else if (guess === "French" || guess === "french") {
44 |     frenchTile.classList.remove("hidden");
45 |   } else if (guess === "Korean" || guess === "korean") {
46 |     koreanTile.classList.remove("hidden");
47 |   } else if (guess === "Russian" || guess === "russian") {
48 |     russianTile.classList.remove("hidden");
49 |   }
50 |   inputField.value = "";
51 | });
52 | 


--------------------------------------------------------------------------------
/day04/final/style.css:
--------------------------------------------------------------------------------
1 | .hidden {
2 |   display: none;
3 | }
4 | 


--------------------------------------------------------------------------------
/day04/starter/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |   <title>Languages Quiz</title>
  9 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
 10 |   <link rel="stylesheet" href="style.css" type="text/css">
 11 | </head>
 12 | 
 13 | <body>
 14 |   <section class="hero is-small notification is-info has-text-centered">
 15 |     <div class="hero-body">
 16 |       <p class="title">
 17 |         Language Quiz
 18 |       </p>
 19 |       <p class="subtitle">
 20 |         Can you guess the top 9 languages spoken in the United States?
 21 |       </p>
 22 |     </div>
 23 |   </section>
 24 |   <div class="container">
 25 |     <section class="section">
 26 |       <h1 class="title">Make some guesses!</h1>
 27 |       <h2 class="subtitle">
 28 |         Type your guesses below! If you get a match, it should show up instantly.
 29 |       </h2>
 30 |       <input id="guess" class="input is-primary is-large" type="text" name="language" placeholder="Guess a language!">
 31 |     </section>
 32 |     <section>
 33 |       <div class="tile is-ancestor">
 34 |         <div class="tile is-parent is-4">
 35 |           <div class="tile is-child notification is-info" id="English">
 36 |             <p class="title">English</p>
 37 |             <p class="subtitle">Hello World</p>
 38 |           </div>
 39 |         </div>
 40 |         <div class="tile is-parent is-4">
 41 |           <div class="tile is-child notification is-info" id="Spanish">
 42 |             <p class="title">Spanish</p>
 43 |             <p class="subtitle">Hola Mundo</p>
 44 |           </div>
 45 |         </div>
 46 |         <div class="tile is-parent is-4">
 47 |           <div class="tile is-child notification is-info" id="Chinese">
 48 |             <p class="title">Chinese</p>
 49 |             <p class="subtitle">你好世界</p>
 50 |           </div>
 51 |         </div>
 52 |       </div>
 53 |       <div class="tile is-ancestor">
 54 |         <div class="tile is-parent">
 55 |           <div class="tile is-child notification is-info" id="Tagalog">
 56 |             <p class="title">Tagalog</p>
 57 |             <p class="subtitle">Kamusta sa Mundo</p>
 58 |           </div>
 59 |         </div>
 60 |         <div class="tile is-parent is-4">
 61 |           <div class="tile is-child notification is-info" id="Vietnamese">
 62 |             <p class="title">Vietnamese</p>
 63 |             <p class="subtitle">Chào thế giới</p>
 64 |           </div>
 65 |         </div>
 66 |         <div class="tile is-parent is-4">
 67 |           <div class="tile is-child notification is-info" id="Arabic">
 68 |             <p class="title">Arabic</p>
 69 |             <p class="subtitle">مرحبا بالعالم</p>
 70 |           </div>
 71 |         </div>
 72 |       </div>
 73 |       <div class="tile is-ancestor">
 74 |         <div class="tile is-parent is-4">
 75 |           <div class="tile is-child notification is-info" id="French">
 76 |             <p class="title">French</p>
 77 |             <p class="subtitle">Bonjour le monde</p>
 78 |           </div>
 79 |         </div>
 80 |         <div class="tile is-parent is-4">
 81 |           <div class="tile is-child notification is-info" id="Korean">
 82 |             <p class="title">Korean</p>
 83 |             <p class="subtitle">안녕하세요 세계</p>
 84 |           </div>
 85 |         </div>
 86 |         <div class="tile is-parent is-4">
 87 |           <div class="tile is-child notification is-info" id="Russian">
 88 |             <p class="title">Russian</p>
 89 |             <p class="subtitle">Привет мир</p>
 90 |           </div>
 91 |         </div>
 92 |       </div>
 93 |     </section>
 94 |   </div>
 95 |   <footer class="footer notification is-info mt-5 mb-0">
 96 |     <div class="content has-text-centered">
 97 |       <p class="subtitle">
 98 |         Thanks for playing!
 99 |       </p>
100 |       <p>Source: <a
101 |           href="https://www.accreditedlanguage.com/languages/the-10-most-popular-languages-in-the-us/">Accredited
102 |           Language Services</a>, translations of "Hello World" prodived by Google Translate</p>
103 |     </div>
104 |   </footer>
105 |   <script src="" type="text/javascript" defer></script>
106 | </body>
107 | 
108 | </html>
109 | 


--------------------------------------------------------------------------------
/day04/starter/script.js:
--------------------------------------------------------------------------------
 1 | console.log("script running");
 2 | 
 3 | // Fix these querySelectors so that they each select the correct element.
 4 | const englishTile = document.querySelector("#English");
 5 | const spanishTile = document.querySelector("#Spanish");
 6 | const chineseTile = document.querySelector("#chinese");
 7 | const tagalogTile = querySelector("#Tagalog");
 8 | const vietnameseTile = document.queryselector("#Vietnamese");
 9 | const arabicTile = document.querySelector("#");
10 | const frenchTile = document.querySelector("#French");
11 | const koreanTile = document.querySelector("Korean");
12 | const russianTile = document.querySelector("#Russiian");
13 | 
14 | console.log(englishTile);
15 | console.log(spanishTile);
16 | console.log(chineseTile);
17 | console.log(tagalogTile);
18 | console.log(vietnameseTile);
19 | console.log(arabicTile);
20 | console.log(frenchTile);
21 | console.log(koreanTile);
22 | console.log(russianTile);
23 | 
24 | // Add the id of the input field so we can access it!
25 | const inputField = document.querySelector("#");
26 | 


--------------------------------------------------------------------------------
/day04/starter/style.css:
--------------------------------------------------------------------------------
1 | .hidden {
2 |   display: none;
3 | }
4 | 


--------------------------------------------------------------------------------
/day05/hawaiiTravelSite/script.js:
--------------------------------------------------------------------------------
 1 | // EAT MODAL event handlers
 2 | const handleEat = () => {
 3 |   let eatModal = document.getElementById('eatModal');
 4 |   eatModal.classList.toggle('is-active');
 5 | }
 6 | 
 7 | const closeEatModal = () => {
 8 |   let eatModal = document.getElementById('eatModal');
 9 |   eatModal.classList.toggle('is-active');
10 | }
11 | 
12 | // SLEEP MODAL event handlers
13 | const handleSleep = () => {
14 |   let eatModal = document.getElementById('sleepModal');
15 |   eatModal.classList.toggle('is-active');
16 | }
17 | 
18 | const closeSleepModal = () => {
19 |   let eatModal = document.getElementById('sleepModal');
20 |   eatModal.classList.toggle('is-active');
21 | }
22 | 
23 | // LEARN MODAL event handlers
24 | const handleLearn = () => {
25 |   let eatModal = document.getElementById('learnModal');
26 |   eatModal.classList.toggle('is-active');
27 | }
28 | 
29 | const closeLearnModal = () => {
30 |   let eatModal = document.getElementById('learnModal');
31 |   eatModal.classList.toggle('is-active');
32 | }
33 | 
34 | // PLAY MODAL event handlers
35 | const handlePlay = () => {
36 |   let eatModal = document.getElementById('playModal');
37 |   eatModal.classList.toggle('is-active');
38 | }
39 | 
40 | const closePlayModal = () => {
41 |   let eatModal = document.getElementById('playModal');
42 |   eatModal.classList.toggle('is-active');
43 | }
44 | 


--------------------------------------------------------------------------------
/day05/hawaiiTravelSite/style.css:
--------------------------------------------------------------------------------
 1 | /* CSS files add styling rules to your content */
 2 | body {
 3 |   font-family: helvetica, arial, sans-serif;
 4 |   margin: 2em;
 5 | }
 6 | 
 7 | .hero-body, .hero-foot {
 8 |   background-image: url('https://cdn.glitch.com/c701f73d-b6fd-4900-b986-32ba4f1563b5%2FPikPng.com_rainbow-png-image_3283328.png?v=1616004347601');
 9 |   background-repeat: no-repeat;
10 |   background-attachment: fixed;
11 |   background-position: center;
12 |   background-size: cover;
13 | }
14 | 
15 | .center-content {
16 |   margin-left: 10%;
17 |   margin-right: 10%;
18 | }
19 | 


--------------------------------------------------------------------------------
/day05/tokyoTravelPage/script.js:
--------------------------------------------------------------------------------
 1 | console.log("script running");
 2 | // Select the input elements!
 3 | const goSearch = document.querySelector("#go-search");
 4 | const eatSearch = document.querySelector("#eat-search");
 5 | const doSearch = document.querySelector("#do-search");
 6 | 
 7 | // Select the go cards
 8 | const shinjuku = document.querySelector("#go-1");
 9 | const ueno = document.querySelector("#go-2");
10 | const harajuku = document.querySelector("#go-3");
11 | 
12 | // Select the eat cards
13 | const shabu = document.querySelector("#eat-1");
14 | const okonomiyaki = document.querySelector("#eat-2");
15 | const gyudon = document.querySelector("#eat-3");
16 | 
17 | // Select the do cards
18 | const wheel = document.querySelector("#do-1");
19 | const ghibli = document.querySelector("#do-2");
20 | const onsen = document.querySelector("#do-3");
21 | const mountain = document.querySelector("#do-4");
22 | 
23 | 
24 | goSearch.addEventListener('input', e => {
25 |   let choice = e.target.value;
26 |   let result = handleChoice(choice);
27 |   if (result === "found!") {
28 |     e.target.value = "";
29 |   }
30 | })
31 | 
32 | eatSearch.addEventListener('input', e => {
33 |   let choice = e.target.value;
34 |   let result = handleChoice(choice);
35 |   if (result === "found!") {
36 |     e.target.value = "";
37 |   }
38 | })
39 | 
40 | doSearch.addEventListener('input', e => {
41 |   let choice = e.target.value;
42 |   let result = handleChoice(choice);
43 |   if (result === "found!") {
44 |     e.target.value = "";
45 |   }
46 | })
47 | 
48 | function handleChoice(choice) {
49 |   if (choice.toLowerCase().includes("plants")) {
50 |     shinjuku.classList.remove("hidden")
51 |     return "found!";
52 |   } else if (choice.toLowerCase().includes("animals")) {
53 |     ueno.classList.remove("hidden")
54 |     return "found!";
55 |   } else if (choice.toLowerCase().includes("shopping")) {
56 |     harajuku.classList.remove("hidden")
57 |     return "found!";
58 |   } else if (choice.toLowerCase().includes("expensive")) {
59 |     shabu.classList.remove("hidden")
60 |     return "found!";
61 |   } else if (choice.toLowerCase().includes("average")) {
62 |     okonomiyaki.classList.remove("hidden")
63 |     return "found!";
64 |   } else if (choice.toLowerCase().includes("cheap")) {
65 |     gyudon.classList.remove("hidden")
66 |     return "found!";
67 |   } else if (choice.toLowerCase().includes("ride")) {
68 |     wheel.classList.remove("hidden")
69 |     return "found!";
70 |   } else if (choice.toLowerCase().includes("museum")) {
71 |     ghibli.classList.remove("hidden")
72 |     return "found!";
73 |   } else if (choice.toLowerCase().includes("spa")) {
74 |     onsen.classList.remove("hidden")
75 |     return "found!";
76 |   } else if (choice.toLowerCase().includes("hike")) {
77 |     mountain.classList.remove("hidden")
78 |     return "found!";
79 |   }
80 | }
81 | 


--------------------------------------------------------------------------------
/day05/tokyoTravelPage/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   font-family: 'IBM Plex Sans', sans-serif;
  3 | }
  4 | 
  5 | .navbar {
  6 |   background-color: #80B4D9;
  7 |   display: flex;
  8 |   justify-content: flex-end;
  9 |   margin: -10px;
 10 |   margin-bottom: 0px;
 11 |   min-height: 80px;
 12 | }
 13 | 
 14 | .nav-item {
 15 |   display: flex;
 16 |   flex-direction: column;
 17 |   justify-content: center;
 18 |   padding: 15px 30px;
 19 | }
 20 | 
 21 | .nav-item:hover {
 22 |   background-color: white;
 23 |   color: #80B4D9;
 24 | }
 25 | 
 26 | .nav-item a {
 27 |   color: black;
 28 |   text-decoration: none;
 29 | }
 30 | 
 31 | .header {
 32 |   background-image: url('https://www.japan-guide.com/thumb/destination_tokyo.jpg');
 33 |   background-position: center center;
 34 |   background-size: cover;
 35 |   min-height: 400px;
 36 |   margin: 0px -10px 20px;
 37 |   display: flex;
 38 |   flex-direction: column;
 39 |   justify-content: center;
 40 |   padding: 20px;
 41 | }
 42 | 
 43 | .header h1 {
 44 |   color: white;
 45 |   text-align: center;
 46 |   font-size: 50px;
 47 | }
 48 | 
 49 | .container {
 50 |   width: 80%;
 51 |   margin: auto;
 52 |   max-width: 1200px;
 53 | }
 54 | 
 55 | .intro {
 56 |   font-size: 22px;
 57 |   padding: 10%;
 58 |   text-align: center;
 59 | }
 60 | 
 61 | .section-header {
 62 |   text-align: center;
 63 |   background-color: #80B4D9;
 64 |   color: white;
 65 |   font-size: 30px;
 66 |   padding: 30px;
 67 | }
 68 | 
 69 | .recommendation {
 70 |   display: flex;
 71 |   margin-top: 50px;
 72 |   margin-bottom: 50px;
 73 | }
 74 | 
 75 | .recommendation.reverse {
 76 |   flex-direction: row-reverse;
 77 | }
 78 | 
 79 | .img-container {
 80 |   width: 50%;
 81 |   min-height: 400px;
 82 |   background-position: center center;
 83 |   background-size: cover;
 84 | }
 85 | 
 86 | .img-container#shin {background-image: url('http://img.timeinc.net/time/photoessays/2009/tokyo/tokyo_shinjuku.jpg');}
 87 | .img-container#ueno {background-image: url('http://japan.apike.ca/sites/default/files/jp_img/tokyo_ueno_zoo/tokyo-ueno-zoo-20060826-15-30-57.jpg');}
 88 | .img-container#hara {background-image: url('https://images.japan-experience.com/guide-japon/33378/s880x460/laurentiu-morariu-lfznupiixd4-unsplash.jpg');}
 89 | .img-container#shabu {background-image: url('https://cdn.vox-cdn.com/thumbor/L33PT8M2-84dCYkh6hysa-VKto4=/0x0:4896x3037/1200x800/filters:focal(1741x1068:2523x1850)/cdn.vox-cdn.com/uploads/chorus_image/image/63750007/shutterstock_707212795.0.jpg');}
 90 | .img-container#okonomi {background-image: url('https://lh3.googleusercontent.com/proxy/HGspa45YYUXkyY_g7snMS5eZN89SjrCb2vkLpXXNr0R3wZml9KR50XedcHyy_GS0Wy9Yj55VwKxlI8551XtxRENOqto4rmv0mzpiusTLCcAGZ0UuZxZbQB7wRAwBoe4iRTj_Fno');}
 91 | .img-container#gyudon {background-image: url('https://thedomesticatedman.files.wordpress.com/2016/09/img_9926.jpg');}
 92 | .img-container#wheel {background-image: url('https://www.shutoko.jp/ss/shutokodeikou/special/yakei/img/p007_main-960x450.jpg');}
 93 | .img-container#ghibli {background-image: url('https://en.compathy.net/magazine/wp-content/uploads/2016/11/74778993_YBRtrKtjNufe-wcdTq-S1Q_X1GW-4KlxOkojZzRta10.jpg');}
 94 | .img-container#onsen {background-image: url('https://cdn.cheapoguides.com/wp-content/uploads/sites/2/2017/07/Park-Pools-1024x600.jpg');}
 95 | .img-container#mountain {background-image: url('https://www.japan-guide.com/g18/3036_05.jpg');}
 96 | 
 97 | .recommendation-content {
 98 |   margin: 0px 40px;
 99 |   width: 50%;
100 | }
101 | 
102 | .recommendation-title {
103 |   font-weight: 100;
104 |   font-size: 1.5rem;
105 | /*   transform: scaleY(1.5); */
106 | }
107 | 
108 | .recommendation-body {
109 |   font-size: 18px;
110 |   font-weight: 100;
111 |   line-height: 2;
112 | }
113 | 
114 | .hidden {
115 |   display: none;
116 | }
117 | 
118 | .dashboard {
119 |   display: flex;
120 |   margin-top: 20px;
121 |   margin-bottom: 20px;
122 |   justify-content: space-between;
123 | }
124 | 
125 | .dashboard input {
126 |   width: 25%;
127 |   border: none;
128 |   border-bottom: 1px black solid;
129 |   font-size: 22px;
130 |   margin-left: 10px;
131 | }
132 | 
133 | .dashboard p {
134 |   font-size: 18px;
135 | 
136 | }
137 | 
138 | input:focus, textarea:focus, select:focus{
139 |   outline: none;
140 | }
141 | 


--------------------------------------------------------------------------------
/day06/final/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |   <title>GifMaker!</title>
 9 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css" />
10 |   <link rel="stylesheet" href="style.css" />
11 | </head>
12 | 
13 | <body>
14 |   <section class="hero is-small is-primary has-text-centered">
15 |     <div class="hero-body">
16 |       <p class="title">
17 |         Welcome to the GifFinder!
18 |       </p>
19 |       <p class="subtitle">
20 |         Gifs like grandma used to make :)
21 |       </p>
22 |       <img
23 |         src="https://cdn.glitch.com/89fb5b85-4c20-461c-abe1-c7f1bd17c13c%2FPoweredby_100px-White_VertText.png?v=1619531592690"
24 |         alt="Powered by Giphy" />
25 |     </div>
26 |   </section>
27 |   <div class="container">
28 |     <section class="section">
29 |       <h1 class="title">Ingredients</h1>
30 |       <h2 class="subtitle">
31 |         Go ahead and let us know what kind of gif you'd like us to cook up for you!
32 |       </h2>
33 |       <input id="search" class="input is-primary is-large" type="text" placeholder="Enter a search term">
34 |       <div class="mt-4">
35 |         <button id="submit" class="button is-large">Gif-it!</button>
36 |       </div>
37 |     </section>
38 |     <section class="section">
39 |       <h1 class="title">Results</h1>
40 |       <h2 class="subtitle">
41 |         Your gifs will appear below:
42 |       </h2>
43 |       <div id="imageholder">
44 |         <img src="https://i.pinimg.com/originals/2e/a1/1e/2ea11ee6a5ef8b94da9f0659f92904df.jpg"
45 |           alt="Close up of a tiny pig" />
46 |       </div>
47 |     </section>
48 |   </div>
49 |   <script src="/script.js" defer></script>
50 | </body>
51 | 
52 | </html>
53 | 


--------------------------------------------------------------------------------
/day06/final/script.js:
--------------------------------------------------------------------------------
 1 | console.log("Script running");
 2 | 
 3 | // We'll want to get some random integers, and that isn't built right into JavaScript.
 4 | // Here's a pre-built function that will do it for ya.
 5 | const getRandom = (max) => {
 6 |   return Math.floor(Math.random() * Math.floor(max));
 7 | }
 8 | 
 9 | // Capture the three major foci of user interaction in variables.
10 | const submitButton = document.querySelector("#submit");
11 | const queryField = document.querySelector("#search");
12 | const imageHolderDiv = document.querySelector("#imageholder");
13 | 
14 | // Log the elements to confirm that the querySelectors worked.
15 | console.log(submitButton);
16 | console.log(queryField);
17 | console.log(imageHolderDiv);
18 | 
19 | submitButton.addEventListener("click", (e) => {
20 |   let myKey = 'YOUR_API_KEY_HERE';
21 |   let topic = queryField.value;
22 |   let myQuery = `https://api.giphy.com/v1/gifs/search?api_key=${myKey}&q=${topic}+kitten`;
23 |   console.log(myQuery);
24 |   fetch(myQuery)
25 |     .then(response => response.json()) // read JSON response
26 |     .then(myjson => {
27 |       // code to execute once JSON response is available
28 |       let i = getRandom(10);
29 |       let imgurl = myjson.data[i].images.downsized.url;
30 |       console.log(imgurl);
31 |       imageHolderDiv.innerHTML = `<img src="${imgurl}"/>` + imageHolderDiv.innerHTML
32 |     })
33 |     .catch(error => {
34 |       console.log(error); // Log error if there is one
35 |     })
36 | })
37 | 


--------------------------------------------------------------------------------
/day06/final/style.css:
--------------------------------------------------------------------------------
 1 | #imageholder {
 2 |   display: flex;
 3 |   flex-wrap: wrap;
 4 |   justify-content: space-between;
 5 | }
 6 | 
 7 | #imageholder img {
 8 |   height: 250px;
 9 |   margin-bottom: 30px;
10 | }
11 | 


--------------------------------------------------------------------------------
/day06/starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |   <title>GifMaker!</title>
 9 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css" />
10 |   <link rel="stylesheet" href="style.css" />
11 | </head>
12 | 
13 | <body>
14 |   <section class="hero is-small is-primary has-text-centered">
15 |     <div class="hero-body">
16 |       <p class="title">
17 |         Welcome to the GifFinder!
18 |       </p>
19 |       <p class="subtitle">
20 |         Gifs like grandma used to make :)
21 |       </p>
22 |       <img
23 |         src="https://cdn.glitch.com/89fb5b85-4c20-461c-abe1-c7f1bd17c13c%2FPoweredby_100px-White_VertText.png?v=1619531592690"
24 |         alt="Powered by Giphy" />
25 |     </div>
26 |   </section>
27 |   <div class="container">
28 |     <section class="section">
29 |       <h1 class="title">Ingredients</h1>
30 |       <h2 class="subtitle">
31 |         Go ahead and let us know what kind of gif you'd like us to cook up for you!
32 |       </h2>
33 |       <input id="search" class="input is-primary is-large" type="text" placeholder="Enter a search term">
34 |       <div class="mt-4">
35 |         <button id="submit" class="button is-large">Gif-it!</button>
36 |       </div>
37 |     </section>
38 |     <section class="section">
39 |       <h1 class="title">Results</h1>
40 |       <h2 class="subtitle">
41 |         Your gifs will appear below:
42 |       </h2>
43 |       <div id="imageholder">
44 |         <img src="https://i.pinimg.com/originals/2e/a1/1e/2ea11ee6a5ef8b94da9f0659f92904df.jpg"
45 |           alt="Close up of a tiny pig" />
46 |       </div>
47 |     </section>
48 |   </div>
49 |   <script src="/script.js" defer></script>
50 | </body>
51 | 
52 | </html>
53 | 


--------------------------------------------------------------------------------
/day06/starter/script.js:
--------------------------------------------------------------------------------
 1 | console.log("Script running");
 2 | 
 3 | // We'll want to get some random integers, and that isn't built right into JavaScript.
 4 | // Here's a pre-built function that will do it for ya.
 5 | const getRandom = (max) => {
 6 |   return Math.floor(Math.random() * Math.floor(max));
 7 | }
 8 | 
 9 | // Capture the three major foci of user interaction in variables.
10 | const submitButton = document.querySelector("#submit");
11 | const queryField = document.querySelector("#search");
12 | const imageHolderDiv = document.querySelector("#imageholder");
13 | 
14 | // Log the elements to confirm that the querySelectors worked.
15 | console.log(submitButton);
16 | console.log(queryField);
17 | console.log(imageHolderDiv);
18 | 
19 | submitButton.addEventListener("click", (e) => {
20 |   let myKey = 'YOUR_API_KEY_HERE';
21 |   let topic = queryField.value;
22 |   console.log(topic);
23 | })
24 | 


--------------------------------------------------------------------------------
/day06/starter/style.css:
--------------------------------------------------------------------------------
 1 | #imageholder {
 2 |   display: flex;
 3 |   flex-wrap: wrap;
 4 |   justify-content: space-between;
 5 | }
 6 | 
 7 | #imageholder img {
 8 |   height: 250px;
 9 |   margin-bottom: 30px;
10 | }
11 | 


--------------------------------------------------------------------------------
/day07/README.md:
--------------------------------------------------------------------------------
1 | # Day 7
2 | 
3 | There is no starter code for day 7.
4 | 


--------------------------------------------------------------------------------
/day08/final/secretMessageApp/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | firebase-debug.log*
 8 | firebase-debug.*.log*
 9 | 
10 | # Firebase cache
11 | .firebase/
12 | 
13 | # Firebase config
14 | 
15 | # Uncomment this if you'd like others to create their own Firebase project.
16 | # For a team working on the same Firebase project(s), it is recommended to leave
17 | # it commented so all members can deploy to the same project(s) in .firebaserc.
18 | # .firebaserc
19 | 
20 | # Runtime data
21 | pids
22 | *.pid
23 | *.seed
24 | *.pid.lock
25 | 
26 | # Directory for instrumented libs generated by jscoverage/JSCover
27 | lib-cov
28 | 
29 | # Coverage directory used by tools like istanbul
30 | coverage
31 | 
32 | # nyc test coverage
33 | .nyc_output
34 | 
35 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
36 | .grunt
37 | 
38 | # Bower dependency directory (https://bower.io/)
39 | bower_components
40 | 
41 | # node-waf configuration
42 | .lock-wscript
43 | 
44 | # Compiled binary addons (http://nodejs.org/api/addons.html)
45 | build/Release
46 | 
47 | # Dependency directories
48 | node_modules/
49 | 
50 | # Optional npm cache directory
51 | .npm
52 | 
53 | # Optional eslint cache
54 | .eslintcache
55 | 
56 | # Optional REPL history
57 | .node_repl_history
58 | 
59 | # Output of 'npm pack'
60 | *.tgz
61 | 
62 | # Yarn Integrity file
63 | .yarn-integrity
64 | 
65 | # dotenv environment variables file
66 | .env
67 | 


--------------------------------------------------------------------------------
/day08/final/secretMessageApp/database.rules.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rules": {
3 |     ".read": "now < 1620280800000",  // 2021-5-6
4 |     ".write": "now < 1620280800000",  // 2021-5-6
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/day08/final/secretMessageApp/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "database": {
 3 |     "rules": "database.rules.json"
 4 |   },
 5 |   "hosting": {
 6 |     "public": "public",
 7 |     "ignore": [
 8 |       "firebase.json",
 9 |       "**/.*",
10 |       "**/node_modules/**"
11 |     ]
12 |   },
13 |   "emulators": {
14 |     "hosting": {
15 |       "port": 5001
16 |     },
17 |     "database": {
18 |       "port": 3333
19 |     },
20 |     "ui": {
21 |       "enabled": true
22 |     }
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/day08/final/secretMessageApp/public/404.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Page Not Found</title>
 7 | 
 8 |     <style media="screen">
 9 |       body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
10 |       #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
11 |       #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
12 |       #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
13 |       #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
14 |       #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
15 |       #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
16 |       #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
17 |       #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
18 |       @media (max-width: 600px) {
19 |         body, #message { margin-top: 0; background: white; box-shadow: none; }
20 |         body { border-top: 16px solid #ffa100; }
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <div id="message">
26 |       <h2>404</h2>
27 |       <h1>Page Not Found</h1>
28 |       <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
29 |       <h3>Why am I seeing this?</h3>
30 |       <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
31 |     </div>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/day08/final/secretMessageApp/public/css/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   font-family: 'Nunito Sans', sans-serif;
 3 | }
 4 | 
 5 | :root {
 6 |   --shadowDark: #D9DDE6;
 7 |   --background: #E4E9F2;
 8 |   --shadowLight: #EFF5FE;
 9 | }
10 | 
11 | body {
12 |   background: var(--background);
13 | }
14 | 
15 | .hero-body {
16 |   justify-content: center;
17 | }
18 | 
19 | .login {
20 |   border-radius: 25px;
21 |   padding: 1.5rem;
22 |   box-shadow: 8px 8px 15px var(--shadowDark), -8px -8px 15px var(--shadowLight);
23 | }
24 | 
25 | input {
26 |   background: var(--shadowDark) !important;
27 | }
28 | 
29 | a {
30 |   font-weight: 600;
31 | }
32 | 


--------------------------------------------------------------------------------
/day08/final/secretMessageApp/public/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html>
 4 | 
 5 |   <head>
 6 |     <meta charset="utf-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>Secret Messaging App</title>
10 |     <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
11 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
12 |     <link rel="stylesheet" type="text/css" href="css/style.css">
13 |     <!-- The core Firebase JS SDK is always required and must be listed first -->
14 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
15 |     <!-- include only the Firebase features as you need -->
16 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
17 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
18 |   </head>
19 | 
20 |   <body>
21 |     <nav class="navbar" role="navigation" aria-label="main navigation">
22 |       <div class="navbar-menu is-active">
23 |         <a class="navbar-item" href="viewMessages.html">
24 |           View Your Messages
25 |         </a>
26 |       </div>
27 |     </nav>
28 |     <h1 class="title has-text-centered">Secret Messaging App</h1>
29 |     <section class="hero is-fullheight">
30 |       <div class="hero-body has-text-centered">
31 |         <div class="login">
32 |           <img src="https://image.freepik.com/free-vector/colorful-speech-bubbles-set_74855-6314.jpg" width="325px" />
33 |           <form action="javascript:void(0);">
34 |             <div class="field">
35 |               <div class="control">
36 |                 <input class="input is-medium is-rounded" type="text" id="passcode" placeholder="Enter a passcode" required />
37 |               </div>
38 |             </div>
39 |             <div class="field">
40 |               <div class="control">
41 |                 <textarea class="textarea is-medium is-rounded" type="text" id="message" placeholder="Share a secret message with your friend!" required></textarea>
42 |               </div>
43 |             </div>
44 |             <br />
45 |             <button class="button is-block is-fullwidth is-primary is-medium is-rounded">
46 |               Send Message
47 |             </button>
48 |           </form>
49 |           <br>
50 |         </div>
51 |       </div>
52 |     </section>
53 |     
54 |     <script src="js/writeMessage.js"></script>
55 |   </body>
56 | 
57 | </html>
58 | 


--------------------------------------------------------------------------------
/day08/final/secretMessageApp/public/js/viewMessages.js:
--------------------------------------------------------------------------------
 1 | const getMessages = () => {
 2 |     const messagesRef = firebase.database().ref();
 3 |     messagesRef.on('value', (snapshot) => {
 4 |     const data = snapshot.val();
 5 |     findMessage(data);
 6 |     });
 7 | };
 8 | 
 9 | const findMessage = (messages) => {
10 |     const passcodeAttempt = document.querySelector('#passcode').value;
11 |     for(message in messages) {
12 |         const messageData = messages[message];
13 |         if(messageData.passcode === passcodeAttempt) {
14 |             renderMessageAsHtml(messageData.message);
15 |         };
16 |     };
17 | };
18 | 
19 | const renderMessageAsHtml = (message) => {
20 |     // Hide Input Form
21 |     const passcodeInput = document.querySelector('#passcodeInput');
22 |     passcodeInput.style.display = 'none';
23 |     // Render messageas HTML
24 |     const messageDiv = document.querySelector('#message');
25 |     messageDiv.innerHTML = message;
26 | };
27 | 


--------------------------------------------------------------------------------
/day08/final/secretMessageApp/public/js/writeMessage.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/cssi-labs/f3c445753c96e3da5cf96bd5ad538aea72446aae/day08/final/secretMessageApp/public/js/writeMessage.js


--------------------------------------------------------------------------------
/day08/final/secretMessageApp/public/viewMessages.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 |   <head>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <title>Secret Messaging App</title>
 9 |     <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 |     <link rel="stylesheet" type="text/css" href="css/style.css">
12 |     <!-- The core Firebase JS SDK is always required and must be listed first -->
13 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
14 |     <!-- include only the Firebase features as you need -->
15 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
16 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
17 |   </head>
18 | 
19 |   <body>
20 |     <section class="hero is-fullheight">
21 |         <div class="content">
22 |             <h2 class="has-text-centered mt-6">View Your Messages!</h2>
23 |         </div>
24 |         <div id="passcodeInput" class="hero-body has-text-centered">
25 |             <div class="login">
26 |             <form action="javascript:void(0);">
27 |                 <div class="field">
28 |                     <div class="control">
29 |                         <input class="input is-medium is-rounded" type="text" placeholder="What's the passcode?" id="passcode" required />
30 |                     </div>
31 |                 </div>
32 |                 <button class="button is-block is-fullwidth is-primary is-medium is-rounded" onclick="getMessages()">
33 |                     Click Here
34 |                 </button>
35 |             </form>
36 |             <br>
37 |             </div>
38 |         </div>
39 |         <section class="container">
40 |             <h2 id="message" class="subtitle is-4"></h2>
41 |         </section>
42 | 
43 |     </section>
44 |     
45 |     <script src="js/viewMessages.js"></script>
46 |   </body>
47 | 
48 | </html>
49 | 


--------------------------------------------------------------------------------
/day08/starter/secretMessageApp/public/css/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   font-family: 'Nunito Sans', sans-serif;
 3 | }
 4 | 
 5 | :root {
 6 |   --shadowDark: #D9DDE6;
 7 |   --background: #E4E9F2;
 8 |   --shadowLight: #EFF5FE;
 9 | }
10 | 
11 | body {
12 |   background: var(--background);
13 | }
14 | 
15 | .hero-body {
16 |   justify-content: center;
17 | }
18 | 
19 | .login {
20 |   border-radius: 25px;
21 |   padding: 1.5rem;
22 |   box-shadow: 8px 8px 15px var(--shadowDark), -8px -8px 15px var(--shadowLight);
23 | }
24 | 
25 | input {
26 |   background: var(--shadowDark) !important;
27 | }
28 | 
29 | a {
30 |   font-weight: 600;
31 | }
32 | 


--------------------------------------------------------------------------------
/day08/starter/secretMessageApp/public/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html>
 4 | 
 5 |   <head>
 6 |     <meta charset="utf-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>Secret Messaging App</title>
10 |     <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
11 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
12 |     <link rel="stylesheet" type="text/css" href="css/style.css">
13 |   </head>
14 | 
15 |   <body>
16 |     <nav class="navbar" role="navigation" aria-label="main navigation">
17 |       <div class="navbar-menu is-active">
18 |         <a class="navbar-item" href="viewMessages.html">
19 |           View Your Messages
20 |         </a>
21 |       </div>
22 |     </nav>
23 |     <h1 class="title has-text-centered">Secret Messaging App</h1>
24 |     <section class="hero is-fullheight">
25 |       <div class="hero-body has-text-centered">
26 |         <div class="login">
27 |           <img src="https://image.freepik.com/free-vector/colorful-speech-bubbles-set_74855-6314.jpg" width="325px" />
28 |           <form action="javascript:void(0);">
29 |             <div class="field">
30 |               <div class="control">
31 |                 <input class="input is-medium is-rounded" type="text" id="passcode" placeholder="Enter a passcode" required />
32 |               </div>
33 |             </div>
34 |             <div class="field">
35 |               <div class="control">
36 |                 <textarea class="textarea is-medium is-rounded" type="text" id="message" placeholder="Share a secret message with your friend!" required></textarea>
37 |               </div>
38 |             </div>
39 |             <br />
40 |             <button class="button is-block is-fullwidth is-primary is-medium is-rounded">
41 |               Send Message
42 |             </button>
43 |           </form>
44 |           <br>
45 |         </div>
46 |       </div>
47 |     </section>
48 |     
49 |     <script src="js/writeMessage.js"></script>
50 |   </body>
51 | 
52 | </html>
53 | 


--------------------------------------------------------------------------------
/day08/starter/secretMessageApp/public/js/viewMessages.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/cssi-labs/f3c445753c96e3da5cf96bd5ad538aea72446aae/day08/starter/secretMessageApp/public/js/viewMessages.js


--------------------------------------------------------------------------------
/day08/starter/secretMessageApp/public/js/writeMessage.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/cssi-labs/f3c445753c96e3da5cf96bd5ad538aea72446aae/day08/starter/secretMessageApp/public/js/writeMessage.js


--------------------------------------------------------------------------------
/day08/starter/secretMessageApp/public/viewMessages.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 |   <head>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <title>Secret Messaging App</title>
 9 |     <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 |     <link rel="stylesheet" type="text/css" href="css/style.css">
12 |     <!-- The core Firebase JS SDK is always required and must be listed first -->
13 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
14 |     <!-- include only the Firebase features as you need -->
15 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
16 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
17 |   </head>
18 | 
19 |   <body>
20 |     <section class="hero is-fullheight">
21 |         <div class="content">
22 |             <h2 class="has-text-centered mt-6">View Your Messages!</h2>
23 |         </div>
24 |         <div id="passcodeInput" class="hero-body has-text-centered">
25 |             <div class="login">
26 |             <form action="javascript:void(0);">
27 |                 <div class="field">
28 |                     <div class="control">
29 |                         <input class="input is-medium is-rounded" type="text" placeholder="What's the passcode?" id="passcode" required />
30 |                     </div>
31 |                 </div>
32 |                 <button class="button is-block is-fullwidth is-primary is-medium is-rounded" type="submit" id="viewMsg" onclick="getMessages()">
33 |                     Click Here
34 |                 </button>
35 |             </form>
36 |             <br>
37 |             </div>
38 |         </div>
39 |         <section class="container">
40 |             <h2 id="message" class="subtitle is-4"></h2>
41 |         </section>
42 | 
43 |     </section>
44 |   <script src="js/viewMessages.js"></script>
45 |   </body>
46 | 
47 | </html>
48 | 


--------------------------------------------------------------------------------
/day09/final/secretMessageApp/database.rules.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rules": {
3 |     ".read": "now < 1620280800000",  // 2021-5-6
4 |     ".write": "now < 1620280800000",  // 2021-5-6
5 |   }
6 | }


--------------------------------------------------------------------------------
/day09/final/secretMessageApp/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "database": {
 3 |     "rules": "database.rules.json"
 4 |   },
 5 |   "hosting": {
 6 |     "public": "public",
 7 |     "ignore": [
 8 |       "firebase.json",
 9 |       "**/.*",
10 |       "**/node_modules/**"
11 |     ]
12 |   },
13 |   "emulators": {
14 |     "hosting": {
15 |       "port": 5001
16 |     },
17 |     "database": {
18 |       "port": 3333
19 |     },
20 |     "ui": {
21 |       "enabled": true
22 |     }
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/day09/final/secretMessageApp/public/404.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Page Not Found</title>
 7 | 
 8 |     <style media="screen">
 9 |       body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
10 |       #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
11 |       #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
12 |       #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
13 |       #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
14 |       #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
15 |       #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
16 |       #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
17 |       #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
18 |       @media (max-width: 600px) {
19 |         body, #message { margin-top: 0; background: white; box-shadow: none; }
20 |         body { border-top: 16px solid #ffa100; }
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <div id="message">
26 |       <h2>404</h2>
27 |       <h1>Page Not Found</h1>
28 |       <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
29 |       <h3>Why am I seeing this?</h3>
30 |       <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
31 |     </div>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/day09/final/secretMessageApp/public/css/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   font-family: 'Nunito Sans', sans-serif;
 3 | }
 4 | 
 5 | :root {
 6 |   --shadowDark: #D9DDE6;
 7 |   --background: #E4E9F2;
 8 |   --shadowLight: #EFF5FE;
 9 | }
10 | 
11 | body {
12 |   background: var(--background);
13 | }
14 | 
15 | .hero-body {
16 |   justify-content: center;
17 | }
18 | 
19 | .login {
20 |   border-radius: 25px;
21 |   padding: 1.5rem;
22 |   box-shadow: 8px 8px 15px var(--shadowDark), -8px -8px 15px var(--shadowLight);
23 | }
24 | 
25 | input {
26 |   background: var(--shadowDark) !important;
27 | }
28 | 
29 | a {
30 |   font-weight: 600;
31 | }


--------------------------------------------------------------------------------
/day09/final/secretMessageApp/public/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html>
 4 | 
 5 |   <head>
 6 |     <meta charset="utf-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>Secret Messaging App</title>
10 |     <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
11 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
12 |     <link rel="stylesheet" type="text/css" href="css/style.css">
13 |     <!-- The core Firebase JS SDK is always required and must be listed first -->
14 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
15 |     <!-- include only the Firebase features as you need -->
16 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
17 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
18 |   </head>
19 | 
20 |   <body>
21 |     <nav class="navbar" role="navigation" aria-label="main navigation">
22 |       <div class="navbar-menu is-active">
23 |         <a class="navbar-item" href="viewMessages.html">
24 |           View Your Messages
25 |         </a>
26 |       </div>
27 |     </nav>
28 |     <h1 class="title has-text-centered">Secret Messaging App</h1>
29 |     <section class="hero is-fullheight">
30 |       <div class="hero-body has-text-centered">
31 |         <div class="login">
32 |           <img src="https://image.freepik.com/free-vector/colorful-speech-bubbles-set_74855-6314.jpg" width="325px" />
33 |           <form action="javascript:void(0);">
34 |             <div class="field">
35 |               <div class="control">
36 |                 <input class="input is-medium is-rounded" type="text" id="passcode" placeholder="Enter a passcode" required />
37 |               </div>
38 |             </div>
39 |             <div class="field">
40 |               <div class="control">
41 |                 <textarea class="textarea is-medium is-rounded" type="text" id="message" placeholder="Share a secret message with your friend!" required></textarea>
42 |               </div>
43 |             </div>
44 |             <br />
45 |             <button class="button is-block is-fullwidth is-primary is-medium is-rounded" onclick="submitMessage()">
46 |               Send Message
47 |             </button>
48 |           </form>
49 |           <br>
50 |         </div>
51 |       </div>
52 |     </section>
53 |     
54 |     <script src="js/writeMessage.js"></script>
55 |   </body>
56 | 
57 | </html>
58 | 


--------------------------------------------------------------------------------
/day09/final/secretMessageApp/public/js/viewMessages.js:
--------------------------------------------------------------------------------
 1 | const getMessages = () => {
 2 |     const messagesRef = firebase.database().ref();
 3 |     messagesRef.on('value', (snapshot) => {
 4 |     const data = snapshot.val();
 5 |     findMessage(data);
 6 |     });
 7 | }
 8 | 
 9 | const findMessage = (messages) => {
10 |     const passcodeAttempt = document.querySelector('#passcode').value;
11 |     for(message in messages) {
12 |         const messageData = messages[message];
13 |         if(messageData.passcode === passcodeAttempt) {
14 |             renderMessageAsHtml(messageData.message)
15 |         }
16 |     }
17 | }
18 | 
19 | const renderMessageAsHtml = (message) => {
20 |     // Hide Input Form
21 |     const passcodeInput = document.querySelector('#passcodeInput');
22 |     passcodeInput.style.display = 'none';
23 |     // Render messageas HTML
24 |     const messageDiv = document.querySelector('#message');
25 |     messageDiv.innerHTML = message;   
26 | }


--------------------------------------------------------------------------------
/day09/final/secretMessageApp/public/js/writeMessage.js:
--------------------------------------------------------------------------------
1 | const submitMessage = () => {
2 |     const passcodeInput = document.querySelector('#passcode').value;
3 |     const messageInput = document.querySelector('#message').value;
4 |     
5 |     firebase.database().ref().push({
6 |         passcode: passcodeInput,
7 |         message: messageInput
8 |     });
9 | };


--------------------------------------------------------------------------------
/day09/final/secretMessageApp/public/viewMessages.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 |   <head>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <title>Secret Messaging App</title>
 9 |     <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 |     <link rel="stylesheet" type="text/css" href="css/style.css">
12 |     <!-- The core Firebase JS SDK is always required and must be listed first -->
13 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
14 |     <!-- include only the Firebase features as you need -->
15 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
16 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
17 |   </head>
18 | 
19 |   <body>
20 |     <section class="hero is-fullheight">
21 |         <div class="content">
22 |             <h2 class="has-text-centered mt-6">View Your Messages!</h2>
23 |         </div>
24 |         <div id="passcodeInput" class="hero-body has-text-centered">
25 |             <div class="login">
26 |             <form action="javascript:void(0);">
27 |                 <div class="field">
28 |                     <div class="control">
29 |                         <input class="input is-medium is-rounded" type="text" placeholder="What's the passcode?" id="passcode" required />
30 |                     </div>
31 |                 </div>
32 |                 <button class="button is-block is-fullwidth is-primary is-medium is-rounded" onclick="getMessages()">
33 |                     Click Here
34 |                 </button>
35 |             </form>
36 |             <br>
37 |             </div>
38 |         </div>
39 |         <section class="container">
40 |             <h2 id="message" class="subtitle is-4"></h2>
41 |         </section>
42 | 
43 |     </section>
44 |     
45 |     <script src="js/viewMessages.js"></script>
46 |   </body>
47 | 
48 | </html>
49 | 


--------------------------------------------------------------------------------
/day09/starter/secretMessageApp/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | firebase-debug.log*
 8 | firebase-debug.*.log*
 9 | 
10 | # Firebase cache
11 | .firebase/
12 | 
13 | # Firebase config
14 | 
15 | # Uncomment this if you'd like others to create their own Firebase project.
16 | # For a team working on the same Firebase project(s), it is recommended to leave
17 | # it commented so all members can deploy to the same project(s) in .firebaserc.
18 | # .firebaserc
19 | 
20 | # Runtime data
21 | pids
22 | *.pid
23 | *.seed
24 | *.pid.lock
25 | 
26 | # Directory for instrumented libs generated by jscoverage/JSCover
27 | lib-cov
28 | 
29 | # Coverage directory used by tools like istanbul
30 | coverage
31 | 
32 | # nyc test coverage
33 | .nyc_output
34 | 
35 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
36 | .grunt
37 | 
38 | # Bower dependency directory (https://bower.io/)
39 | bower_components
40 | 
41 | # node-waf configuration
42 | .lock-wscript
43 | 
44 | # Compiled binary addons (http://nodejs.org/api/addons.html)
45 | build/Release
46 | 
47 | # Dependency directories
48 | node_modules/
49 | 
50 | # Optional npm cache directory
51 | .npm
52 | 
53 | # Optional eslint cache
54 | .eslintcache
55 | 
56 | # Optional REPL history
57 | .node_repl_history
58 | 
59 | # Output of 'npm pack'
60 | *.tgz
61 | 
62 | # Yarn Integrity file
63 | .yarn-integrity
64 | 
65 | # dotenv environment variables file
66 | .env
67 | 


--------------------------------------------------------------------------------
/day09/starter/secretMessageApp/database.rules.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rules": {
3 |     ".read": "now < 1620280800000",  // 2021-5-6
4 |     ".write": "now < 1620280800000",  // 2021-5-6
5 |   }
6 | }


--------------------------------------------------------------------------------
/day09/starter/secretMessageApp/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "database": {
 3 |     "rules": "database.rules.json"
 4 |   },
 5 |   "hosting": {
 6 |     "public": "public",
 7 |     "ignore": [
 8 |       "firebase.json",
 9 |       "**/.*",
10 |       "**/node_modules/**"
11 |     ]
12 |   },
13 |   "emulators": {
14 |     "hosting": {
15 |       "port": 5001
16 |     },
17 |     "database": {
18 |       "port": 3333
19 |     },
20 |     "ui": {
21 |       "enabled": true
22 |     }
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/day09/starter/secretMessageApp/public/404.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Page Not Found</title>
 7 | 
 8 |     <style media="screen">
 9 |       body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
10 |       #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
11 |       #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
12 |       #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
13 |       #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
14 |       #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
15 |       #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
16 |       #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
17 |       #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
18 |       @media (max-width: 600px) {
19 |         body, #message { margin-top: 0; background: white; box-shadow: none; }
20 |         body { border-top: 16px solid #ffa100; }
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <div id="message">
26 |       <h2>404</h2>
27 |       <h1>Page Not Found</h1>
28 |       <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
29 |       <h3>Why am I seeing this?</h3>
30 |       <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
31 |     </div>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/day09/starter/secretMessageApp/public/css/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   font-family: 'Nunito Sans', sans-serif;
 3 | }
 4 | 
 5 | :root {
 6 |   --shadowDark: #D9DDE6;
 7 |   --background: #E4E9F2;
 8 |   --shadowLight: #EFF5FE;
 9 | }
10 | 
11 | body {
12 |   background: var(--background);
13 | }
14 | 
15 | .hero-body {
16 |   justify-content: center;
17 | }
18 | 
19 | .login {
20 |   border-radius: 25px;
21 |   padding: 1.5rem;
22 |   box-shadow: 8px 8px 15px var(--shadowDark), -8px -8px 15px var(--shadowLight);
23 | }
24 | 
25 | input {
26 |   background: var(--shadowDark) !important;
27 | }
28 | 
29 | a {
30 |   font-weight: 600;
31 | }


--------------------------------------------------------------------------------
/day09/starter/secretMessageApp/public/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html>
 4 | 
 5 |   <head>
 6 |     <meta charset="utf-8">
 7 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <title>Secret Messaging App</title>
10 |     <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
11 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
12 |     <link rel="stylesheet" type="text/css" href="css/style.css">
13 |     <!-- The core Firebase JS SDK is always required and must be listed first -->
14 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
15 |     <!-- include only the Firebase features as you need -->
16 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
17 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
18 |   </head>
19 | 
20 |   <body>
21 |     <nav class="navbar" role="navigation" aria-label="main navigation">
22 |       <div class="navbar-menu is-active">
23 |         <a class="navbar-item" href="viewMessages.html">
24 |           View Your Messages
25 |         </a>
26 |       </div>
27 |     </nav>
28 |     <h1 class="title has-text-centered">Secret Messaging App</h1>
29 |     <section class="hero is-fullheight">
30 |       <div class="hero-body has-text-centered">
31 |         <div class="login">
32 |           <img src="https://image.freepik.com/free-vector/colorful-speech-bubbles-set_74855-6314.jpg" width="325px" />
33 |           <form action="javascript:void(0);">
34 |             <div class="field">
35 |               <div class="control">
36 |                 <input class="input is-medium is-rounded" type="text" id="passcode" placeholder="Enter a passcode" required />
37 |               </div>
38 |             </div>
39 |             <div class="field">
40 |               <div class="control">
41 |                 <textarea class="textarea is-medium is-rounded" type="text" id="message" placeholder="Share a secret message with your friend!" required></textarea>
42 |               </div>
43 |             </div>
44 |             <br />
45 |             <button class="button is-block is-fullwidth is-primary is-medium is-rounded">
46 |               Send Message
47 |             </button>
48 |           </form>
49 |           <br>
50 |         </div>
51 |       </div>
52 |     </section>
53 |     
54 |     <script src="js/writeMessage.js"></script>
55 |   </body>
56 | 
57 | </html>
58 | 


--------------------------------------------------------------------------------
/day09/starter/secretMessageApp/public/js/viewMessages.js:
--------------------------------------------------------------------------------
 1 | const getMessages = () => {
 2 |     const messagesRef = firebase.database().ref();
 3 |     messagesRef.on('value', (snapshot) => {
 4 |     const data = snapshot.val();
 5 |     findMessage(data);
 6 |     });
 7 | }
 8 | 
 9 | const findMessage = (messages) => {
10 |     const passcodeAttempt = document.querySelector('#passcode').value;
11 |     for(message in messages) {
12 |         const messageData = messages[message];
13 |         if(messageData.passcode === passcodeAttempt) {
14 |             renderMessageAsHtml(messageData.message)
15 |         }
16 |     }
17 | }
18 | 
19 | const renderMessageAsHtml = (message) => {
20 |     // Hide Input Form
21 |     const passcodeInput = document.querySelector('#passcodeInput');
22 |     passcodeInput.style.display = 'none';
23 |     // Render messageas HTML
24 |     const messageDiv = document.querySelector('#message');
25 |     messageDiv.innerHTML = message;   
26 | }


--------------------------------------------------------------------------------
/day09/starter/secretMessageApp/public/js/writeMessage.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/cssi-labs/f3c445753c96e3da5cf96bd5ad538aea72446aae/day09/starter/secretMessageApp/public/js/writeMessage.js


--------------------------------------------------------------------------------
/day09/starter/secretMessageApp/public/viewMessages.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 |   <head>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <title>Secret Messaging App</title>
 9 |     <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 |     <link rel="stylesheet" type="text/css" href="css/style.css">
12 |     <!-- The core Firebase JS SDK is always required and must be listed first -->
13 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
14 |     <!-- include only the Firebase features as you need -->
15 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
16 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
17 |   </head>
18 | 
19 |   <body>
20 |     <section class="hero is-fullheight">
21 |         <div class="content">
22 |             <h2 class="has-text-centered mt-6">View Your Messages!</h2>
23 |         </div>
24 |         <div id="passcodeInput" class="hero-body has-text-centered">
25 |             <div class="login">
26 |             <form action="javascript:void(0);">
27 |                 <div class="field">
28 |                     <div class="control">
29 |                         <input class="input is-medium is-rounded" type="text" placeholder="What's the passcode?" id="passcode" required />
30 |                     </div>
31 |                 </div>
32 |                 <button class="button is-block is-fullwidth is-primary is-medium is-rounded" onclick="getMessages()">
33 |                     Click Here
34 |                 </button>
35 |             </form>
36 |             <br>
37 |             </div>
38 |         </div>
39 |         <section class="container">
40 |             <h2 id="message" class="subtitle is-4"></h2>
41 |         </section>
42 | 
43 |     </section>
44 |     
45 |     <script src="js/viewMessages.js"></script>
46 |   </body>
47 | 
48 | </html>
49 | 


--------------------------------------------------------------------------------
/day10/bookRecsExemplar/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "book-recs-1580a"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/day10/bookRecsExemplar/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | firebase-debug.log*
 8 | firebase-debug.*.log*
 9 | 
10 | # Firebase cache
11 | .firebase/
12 | 
13 | # Firebase config
14 | 
15 | # Uncomment this if you'd like others to create their own Firebase project.
16 | # For a team working on the same Firebase project(s), it is recommended to leave
17 | # it commented so all members can deploy to the same project(s) in .firebaserc.
18 | # .firebaserc
19 | 
20 | # Runtime data
21 | pids
22 | *.pid
23 | *.seed
24 | *.pid.lock
25 | 
26 | # Directory for instrumented libs generated by jscoverage/JSCover
27 | lib-cov
28 | 
29 | # Coverage directory used by tools like istanbul
30 | coverage
31 | 
32 | # nyc test coverage
33 | .nyc_output
34 | 
35 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
36 | .grunt
37 | 
38 | # Bower dependency directory (https://bower.io/)
39 | bower_components
40 | 
41 | # node-waf configuration
42 | .lock-wscript
43 | 
44 | # Compiled binary addons (http://nodejs.org/api/addons.html)
45 | build/Release
46 | 
47 | # Dependency directories
48 | node_modules/
49 | 
50 | # Optional npm cache directory
51 | .npm
52 | 
53 | # Optional eslint cache
54 | .eslintcache
55 | 
56 | # Optional REPL history
57 | .node_repl_history
58 | 
59 | # Output of 'npm pack'
60 | *.tgz
61 | 
62 | # Yarn Integrity file
63 | .yarn-integrity
64 | 
65 | # dotenv environment variables file
66 | .env
67 | 


--------------------------------------------------------------------------------
/day10/bookRecsExemplar/README.md:
--------------------------------------------------------------------------------
1 | # book-recs-exemplar
2 | 


--------------------------------------------------------------------------------
/day10/bookRecsExemplar/database.rules.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rules": {
3 |     ".read": "now < 1618639200000",  // 2021-4-17
4 |     ".write": "now < 1618639200000",  // 2021-4-17
5 |   }
6 | }


--------------------------------------------------------------------------------
/day10/bookRecsExemplar/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "database": {
 3 |     "rules": "database.rules.json"
 4 |   },
 5 |   "hosting": {
 6 |     "public": "public",
 7 |     "ignore": [
 8 |       "firebase.json",
 9 |       "**/.*",
10 |       "**/node_modules/**"
11 |     ]
12 |   },
13 |   "emulators": {
14 |     "auth": {
15 |       "port": 1111
16 |     },
17 |     "database": {
18 |       "port": 2222
19 |     },
20 |     "hosting": {
21 |       "port": 3333,
22 |       "headers": [
23 |         { "source":"/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}] }
24 |     ]},
25 |     "ui": {
26 |       "enabled": true
27 |     }
28 |   },
29 |   "remoteconfig": {
30 |     "template": "remoteconfig.template.json"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/day10/bookRecsExemplar/public/404.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Page Not Found</title>
 7 | 
 8 |     <style media="screen">
 9 |       body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
10 |       #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
11 |       #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
12 |       #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
13 |       #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
14 |       #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
15 |       #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
16 |       #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
17 |       #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
18 |       @media (max-width: 600px) {
19 |         body, #message { margin-top: 0; background: white; box-shadow: none; }
20 |         body { border-top: 16px solid #ffa100; }
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <div id="message">
26 |       <h2>404</h2>
27 |       <h1>Page Not Found</h1>
28 |       <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
29 |       <h3>Why am I seeing this?</h3>
30 |       <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
31 |     </div>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/day10/bookRecsExemplar/public/addBook.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8">
 6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 	<title>Find your next book!</title>
 9 | 	<link rel="shortcut icon" href="../images/fav_icon.png" type="image/x-icon">
10 | 	<!-- Bulma Version 0.9.0-->
11 | 	<link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
12 | 	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
13 | 		integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>
14 |     <link rel="stylesheet" href="css/style.css"/>
15 |     <script defer src="/__/firebase/8.2.6/firebase-app.js"></script>
16 |     <!-- include only the Firebase features as you need -->
17 |     <script defer src="/__/firebase/8.2.6/firebase-auth.js"></script>
18 |     <script defer src="/__/firebase/8.2.6/firebase-database.js"></script>
19 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
20 | </head>
21 | 
22 | <body id="body">
23 |     <h1 class="title is-1 has-text-centered">Add A Book To Your Library</h1>
24 |     <div class="field">
25 |     <label class="label">Title</label>
26 |     <div class="control">
27 |         <input id="title" class="input" type="text" placeholder="Title">
28 |     </div>
29 |     </div>
30 | 
31 |     <div class="field">
32 |     <label class="label">Author</label>
33 |     <div class="control">
34 |         <input id="author" class="input" type="text" placeholder="Author">
35 |     </div>
36 |     </div>
37 | 
38 |     <div class="field">
39 |     <label class="label">Cover Image</label>
40 |     <div class="control">
41 |         <input id="cover" class="input" type="text" placeholder="Cover Image">
42 |     </div>
43 |     </div>
44 | 
45 |     <div class="field">
46 |     <label class="label">Emotions</label>
47 |     <div class="control">
48 |         <input id="emotions" class="input" type="text" placeholder="Enter emotions seperated by a comma">
49 |     </div>
50 |     </div>
51 | 
52 |     <div class="field">
53 |     <label class="label">Genre</label>
54 |     <div class="control">
55 |         <input id="genres" class="input" type="text" placeholder="Enter genres seperated by a comma">
56 |     </div>
57 |     </div>
58 | 
59 |     <div class="field">
60 |         <p class="label">A part of a series?</p>
61 |         <input type="radio" name="series" value="true">
62 |         <label for="series">Yes</label><br>
63 |         <input type="radio" name="series" value="false">
64 |         <label for="no_series">No</label><br>
65 |     </div>
66 | 
67 |     <button class="button is-link has-text-weight-medium is-medium" onclick="handleAddBook()">Add Book</button>
68 |     <script src="js/script.js"></script>
69 | </body>
70 | </html>
71 | 


--------------------------------------------------------------------------------
/day10/bookRecsExemplar/public/css/style.css:
--------------------------------------------------------------------------------
 1 | /* .survey {
 2 |     position: fixed;
 3 | } */
 4 | 
 5 | #coverImg {
 6 |     max-width: 500px;
 7 |     height: auto;
 8 | }
 9 | 
10 | .field:not(:last-child) {
11 |   margin-bottom: 20px;
12 | }
13 | 
14 | @media screen and (min-width: 768px) {
15 |   body {
16 |     padding-top: calc(3.25rem + 20px);
17 |   }
18 | 
19 |   .navbar {
20 |     padding: 10px 0;
21 |     position: fixed;
22 |     top: 0;
23 |     width: 100%;
24 |   }
25 | 
26 |   .hero.is-fullheight {
27 |     min-height: calc(100vh - 6.5rem - 40px);
28 |   }
29 | }


--------------------------------------------------------------------------------
/day10/bookRecsExemplar/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8">
 6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 	<title>Find your next book!</title>
 9 | 	<link rel="shortcut icon" href="../images/fav_icon.png" type="image/x-icon">
10 | 	<!-- Bulma Version 0.9.0-->
11 | 	<link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
12 | 	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
13 | 		integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>
14 |     <link rel="stylesheet" href="css/style.css"/>
15 |     <script defer src="/__/firebase/8.2.6/firebase-app.js"></script>
16 |     <!-- include only the Firebase features as you need -->
17 |     <script defer src="/__/firebase/8.2.6/firebase-auth.js"></script>
18 |     <script defer src="/__/firebase/8.2.6/firebase-database.js"></script>
19 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
20 | </head>
21 | 
22 | <body id="body">
23 | 	<!-- START NAV -->
24 | 	<nav class="navbar">
25 | 		<div class="container">
26 | 			<div class="navbar-brand">
27 | 				<span class="navbar-burger burger" data-target="navbarMenu">
28 | 					<span></span>
29 | 					<span></span>
30 | 					<span></span>
31 | 				</span>
32 | 			</div>
33 | 		</div>
34 | 	</nav>
35 |     <!-- END NAV -->    
36 | 	<section class="hero is-fullheight">
37 | 		<div class="hero-body">
38 | 			<div class="container has-text-centered">
39 | 				<div class="columns is-8 is-variable ">
40 | 					<div class="column is-two-thirds has-text-left">
41 |                         <h1 class="title is-1">Find Your Next Book!</h1>
42 |                         <p class="subtitle"><a class="button is-link has-text-weight-medium is-medium" href="addBook.html">Add a Book</a> to Your Library</p>
43 | 						<div>
44 |                             <img class="coverImg" id="coverImg">
45 |                         </div>
46 |                     </div>
47 |                     
48 | <!-------------------------------------- BOOK SURVEY -------------------------------------->
49 | 					<div class="column is-one-third has-text-left">
50 | 						<div class="field">
51 | 							<label class="label">What genre are you interested in?</label>
52 | 							<div class="control">
53 | 								<select id="genre" name="genre">
54 |                                     <option value="action">Action and Adventure</option>
55 |                                     <option value="sci-fi">Science Fiction</option>
56 |                                     <option value="non-fiction">Non-Fiction</option>
57 |                                 </select>
58 | 							</div>
59 |                         </div>
60 |                         
61 | 						<div class="field">
62 |                             <p class="label">Are you interested in a series?</p>
63 |                             <input type="radio" name="series" value="true">
64 |                             <label for="series">Yes</label><br>
65 |                             <input type="radio" name="series" value="false">
66 |                             <label for="no_series">No</label><br>
67 |                         </div>
68 |                         
69 | 						    <div class="field">
70 | 						        <label class="label">How do you want this book to make you feel?</label>
71 |                                 <div class="control">
72 |                                     <select id="emotion" name="emotion">
73 |                                         <option value="happy">Feel Good</option>
74 |                                         <option value="pensive">Pensive</option>
75 |                                         <option value="enlightened">Enlightened</option>
76 |                                     </select>
77 |                                 </div>
78 |                             </div>
79 | 
80 | 						<div class="control">
81 | 							<button class="button is-link is-fullwidth has-text-weight-medium is-medium" id="surveySubmit" onclick="handleSubmitSurvey()">Submit</button>
82 | 						</div>
83 | 					</div>
84 | 				</div>
85 | 			</div>
86 | 		</div>
87 |     </section>
88 |     <script src="js/dbConnection.js"></script>
89 |     <script src="js/script.js"></script>
90 | </body>
91 | 
92 | </html>
93 | 


--------------------------------------------------------------------------------
/day10/bookRecsExemplar/public/js/dbConnection.js:
--------------------------------------------------------------------------------
 1 | const firebaseConfig = {
 2 |     apiKey: "AIzaSyDQBUs3YMBVXOQTVq4C68EKLwl0NkU6RmE",
 3 |     authDomain: "book-recs-1580a.firebaseapp.com",
 4 |     databaseURL: "https://book-recs-1580a-default-rtdb.firebaseio.com",
 5 |     projectId: "book-recs-1580a",
 6 |     storageBucket: "book-recs-1580a.appspot.com",
 7 |     messagingSenderId: "842740101788",
 8 |     appId: "1:842740101788:web:4ef31653c803f124863359",
 9 |     measurementId: "G-843YS38J6C"
10 | };


--------------------------------------------------------------------------------
/day10/bookRecsExemplar/public/js/script.js:
--------------------------------------------------------------------------------
 1 | const handleSubmitSurvey = () => {
 2 |     if (!firebase.apps.length) {
 3 |         firebase.initializeApp(firebaseConfig);
 4 |     }
 5 |     else {
 6 |         firebase.app(); // if already initialized, use that one
 7 |     }
 8 | 
 9 |     const genre = getGenre();
10 |     const series = getSeriesPref();
11 |     const emotion = getEmotion();
12 |     let shuffledBooks;
13 |     // Get books from DB
14 |     const getBookRec = firebase.database().ref('books').orderByChild('series');
15 |     getBookRec.on('value', (snapshot) => {
16 |         const allBooks = snapshot.val();
17 |         console.log(allBooks)
18 | 
19 |         const allBooksArray = Object.entries(allBooks);
20 |         // Filter books based on survey results
21 |         const allRecommendations = allBooksArray.filter(book => {
22 |             // book[0] is the title of the book, book[1] is all of the data associated with it
23 |             const bookData = book[1];
24 |             const bookGenre = bookData.genre;
25 |             const bookEmotion = bookData.emotions;
26 | 
27 |             // Firebase RTBD does not support booleans, converts all text to strings
28 |             // console.log(bookData.series)
29 |             const seriesBoolToStr = bookData.series.toString();
30 |             return seriesBoolToStr === series && bookGenre.includes(genre) && bookEmotion.includes(emotion);
31 |         });
32 |         shuffledBooks = shuffleBookRecs(allRecommendations);
33 |         const bookRecommendation = shuffledBooks[0][1];
34 |         document.getElementById('coverImg').setAttribute('src', bookRecommendation.cover_img);
35 |         return shuffledBooks;  
36 |     })
37 | }
38 | 
39 | const getGenre = () => {
40 |     const genre = document.getElementById('genre').value;
41 |     return genre;
42 | }
43 | 
44 | const getSeriesPref = () => {
45 |     const seriesSelection = document.getElementsByName('series');
46 |     let series;
47 | 
48 |     for (let i = 0; i < seriesSelection.length; i++) {
49 |         if (seriesSelection[i].checked) {
50 |             series = seriesSelection[i].value;
51 |             // only one radio can be logically checked, don't check the rest
52 |             break;
53 |         }
54 |     }
55 |     return series;
56 | }
57 | 
58 | const getEmotion = () => {
59 |     const emotion = document.getElementById('emotion').value;
60 |     return emotion;   
61 | }
62 | 
63 | const shuffleBookRecs = (books) => {
64 |     let shuffledBooks = [];
65 |     for(let i = books.length; i > 0; i--) {
66 |         const randomNum = Math.random() 
67 |         const randomFloat = randomNum * books.length         
68 |         const randomIdx = Math.floor(randomFloat)
69 |         shuffledBooks.push(books[randomIdx])
70 |         books.splice(randomIdx, 1)
71 |     }
72 |     console.log(shuffledBooks)
73 |     return shuffledBooks;
74 | }
75 | 
76 | const handleAddBook = () => {
77 |     const title = document.getElementById('title').value;
78 |     const author = document.getElementById('author').value;
79 |     const cover = document.getElementById('cover').value;
80 |     const emotions = document.getElementById('emotions').value;
81 |     const genres = document.getElementById('genres').value
82 |     const series = getSeriesPref();
83 | 
84 |     const emotionsArray = emotions.split(',');
85 |     const genresArray = genres.split(',')
86 | 
87 |     firebase.database().ref('books').push({
88 |         author: author,
89 |         title: title, 
90 |         cover_img: cover,
91 |         emotions: emotionsArray,
92 |         genre: genresArray,
93 |         series: series
94 |     });
95 | }


--------------------------------------------------------------------------------
/day10/bookRecsExemplar/remoteconfig.template.json:
--------------------------------------------------------------------------------
1 | {}


--------------------------------------------------------------------------------
/day10/bookSearchExemplar/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "book-recs-1580a"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/day10/bookSearchExemplar/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | firebase-debug.log*
 8 | firebase-debug.*.log*
 9 | 
10 | # Firebase cache
11 | .firebase/
12 | 
13 | # Firebase config
14 | 
15 | # Uncomment this if you'd like others to create their own Firebase project.
16 | # For a team working on the same Firebase project(s), it is recommended to leave
17 | # it commented so all members can deploy to the same project(s) in .firebaserc.
18 | # .firebaserc
19 | 
20 | # Runtime data
21 | pids
22 | *.pid
23 | *.seed
24 | *.pid.lock
25 | 
26 | # Directory for instrumented libs generated by jscoverage/JSCover
27 | lib-cov
28 | 
29 | # Coverage directory used by tools like istanbul
30 | coverage
31 | 
32 | # nyc test coverage
33 | .nyc_output
34 | 
35 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
36 | .grunt
37 | 
38 | # Bower dependency directory (https://bower.io/)
39 | bower_components
40 | 
41 | # node-waf configuration
42 | .lock-wscript
43 | 
44 | # Compiled binary addons (http://nodejs.org/api/addons.html)
45 | build/Release
46 | 
47 | # Dependency directories
48 | node_modules/
49 | 
50 | # Optional npm cache directory
51 | .npm
52 | 
53 | # Optional eslint cache
54 | .eslintcache
55 | 
56 | # Optional REPL history
57 | .node_repl_history
58 | 
59 | # Output of 'npm pack'
60 | *.tgz
61 | 
62 | # Yarn Integrity file
63 | .yarn-integrity
64 | 
65 | # dotenv environment variables file
66 | .env
67 | 


--------------------------------------------------------------------------------
/day10/bookSearchExemplar/README.md:
--------------------------------------------------------------------------------
1 | # book-search-exemplar
2 | 


--------------------------------------------------------------------------------
/day10/bookSearchExemplar/database.rules.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rules": {
3 |     ".read": "now < 1618639200000",  // 2021-4-17
4 |     ".write": "now < 1618639200000",  // 2021-4-17
5 |   }
6 | }


--------------------------------------------------------------------------------
/day10/bookSearchExemplar/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "database": {
 3 |     "rules": "database.rules.json"
 4 |   },
 5 |   "hosting": {
 6 |     "public": "public",
 7 |     "ignore": [
 8 |       "firebase.json",
 9 |       "**/.*",
10 |       "**/node_modules/**"
11 |     ]
12 |   },
13 |   "emulators": {
14 |     "auth": {
15 |       "port": 1111
16 |     },
17 |     "functions": {
18 |       "port": 2222
19 |     },
20 |     "database": {
21 |       "port": 3333
22 |     },
23 |     "hosting": {
24 |       "port": 4444,
25 |       "headers": [
26 |         { "source":"/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}] }
27 |     ]},
28 |     "ui": {
29 |       "enabled": true
30 |     }
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/day10/bookSearchExemplar/public/404.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Page Not Found</title>
 7 | 
 8 |     <style media="screen">
 9 |       body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
10 |       #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
11 |       #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
12 |       #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
13 |       #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
14 |       #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
15 |       #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
16 |       #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
17 |       #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
18 |       @media (max-width: 600px) {
19 |         body, #message { margin-top: 0; background: white; box-shadow: none; }
20 |         body { border-top: 16px solid #ffa100; }
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <div id="message">
26 |       <h2>404</h2>
27 |       <h1>Page Not Found</h1>
28 |       <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
29 |       <h3>Why am I seeing this?</h3>
30 |       <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
31 |     </div>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/day10/bookSearchExemplar/public/css/style.css:
--------------------------------------------------------------------------------
 1 | #coverImg {
 2 |     max-width: 500px;
 3 |     height: auto;
 4 |     margin-left: 22%;
 5 | }
 6 | 
 7 | .navbar {
 8 |     position: fixed;
 9 |     left: 0;
10 |     top: 0;
11 |     z-index: 2;
12 |     background-color: white;
13 |     justify-content: space-around;
14 |     width: 100%;
15 |     border-bottom: 1px solid lightgray;
16 | }
17 | .navbar-menu {
18 |     flex-grow: 0.5;
19 |     justify-content: center;
20 | }
21 | .navbar-menu .navbar-item {
22 |     flex-grow: 1;
23 |     justify-content: center;
24 | }
25 | .navbar-menu .navbar-item .control {
26 |     width: 50%;
27 | }
28 | .body-columns {
29 |     margin-top: 10vh;
30 | }
31 | .card {
32 |     margin-top: 5rem;
33 | }
34 | .card .header {
35 |     padding: 5px 10px;
36 | }
37 | .card-footer .columns {
38 |     width: 100%;
39 | }
40 | .card-footer .columns input {
41 |     border: none;
42 |     border-radius: 0;
43 |     box-shadow: none;
44 | }
45 | .card-footer .columns .column:last-child {
46 |     display: flex;
47 |     align-items: center;
48 | }
49 | .card-footer .columns .column:last-child button {
50 |     border: none;
51 | }
52 | .footer {
53 |     margin-top: 10vh;
54 |     padding: 2rem 1.5rem;
55 | }
56 | 
57 | /* @media screen and (max-width: 786px){
58 |     .navbar {
59 |         justify-content: space-between;
60 |     }
61 | } */


--------------------------------------------------------------------------------
/day10/bookSearchExemplar/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Find a Book</title>
 7 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
 8 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 9 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
10 | 	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
11 | 		integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
12 |     <link rel="stylesheet" type="text/css" href="css/style.css">
13 |     <!-- update the version number as needed -->
14 |     <script defer src="/__/firebase/8.3.0/firebase-app.js"></script>
15 |     <!-- include only the Firebase features as you need -->
16 |     <script defer src="/__/firebase/8.3.0/firebase-auth.js"></script>
17 |     <script defer src="/__/firebase/8.3.0/firebase-database.js"></script>
18 |     <script defer src="/__/firebase/8.3.0/firebase-firestore.js"></script>
19 |     <script defer src="/__/firebase/8.3.0/firebase-functions.js"></script>
20 |     <script defer src="/__/firebase/8.3.0/firebase-messaging.js"></script>
21 |     <script defer src="/__/firebase/8.3.0/firebase-storage.js"></script>
22 |     <script defer src="/__/firebase/8.3.0/firebase-analytics.js"></script>
23 |     <script defer src="/__/firebase/8.3.0/firebase-remote-config.js"></script>
24 |     <script defer src="/__/firebase/8.3.0/firebase-performance.js"></script>
25 |     <!-- 
26 |       initialize the SDK after all desired features are loaded, set useEmulator to false
27 |       to avoid connecting the SDK to running emulators.
28 |     -->
29 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
30 |   </head>
31 |   <body>
32 | 
33 |     <div class="navbar is-inline-flex is-transparent">
34 |         <div class="navbar-menu">
35 |             <div class="navbar-item">
36 |                 <div class="control has-icons-left">
37 |                     <input class="input is-small has-text-centered" type="text" placeholder="search" id="search">
38 |                     <span class="icon is-left is-small">
39 |                         <i class="material-icons">search</i>
40 |                     </span>
41 |                 </div>
42 |             </div>
43 |         </div>
44 |     </div>
45 |     <div class="columns body-columns">
46 |         <div class="column is-half is-offset-one-quarter">
47 |             <h1 class="title has-text-centered">SEARCH A BOOK!</h1>
48 |             <div class="card">
49 |                 <div class="card-image">
50 |                     <figure class="image">
51 |                         <img id="coverImg" src="https://images-platform.99static.com/NLpAAq0zbU-F60KQn1tcEspjPgU=/96x96:864x864/500x500/top/smart/99designs-contests-attachments/113/113716/attachment_113716726">
52 |                     </figure>
53 |                 </div>
54 |                 <div class="card-content">
55 |                     <div class="content">
56 |                         <p id="bookContent">
57 |                         </p>
58 |                         <br>
59 |                     </div>
60 |                 </div>
61 |             </div>
62 | 
63 |             <footer class="footer">
64 |                 <div class="container is-fluid">
65 |                     <div class="content has-text-centered">
66 |                         <p>
67 |                             <strong>Bulma</strong> by
68 |                             <a href="http://jgthms.com">Jeremy Thomas</a>. The source code is licensed
69 |                             <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content is licensed
70 |                             <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
71 |                         </p>
72 |                     </div>
73 |                 </div>
74 |             </footer>
75 |         </div>
76 |     </div>
77 | 
78 |     <script>
79 |         // For Firebase JS SDK v7.20.0 and later, measurementId is optional
80 |         // const firebaseConfig = {
81 |         //     apiKey: "AIzaSyDQBUs3YMBVXOQTVq4C68EKLwl0NkU6RmE",
82 |         //     authDomain: "book-recs-1580a.firebaseapp.com",
83 |         //     databaseURL: "https://book-recs-1580a-default-rtdb.firebaseio.com",
84 |         //     projectId: "book-recs-1580a",
85 |         //     storageBucket: "book-recs-1580a.appspot.com",
86 |         //     messagingSenderId: "842740101788",
87 |         //     appId: "1:842740101788:web:4ef31653c803f124863359",
88 |         //     measurementId: "G-843YS38J6C"
89 |         // };
90 |         // firebase.initializeApp(config);
91 |     </script>
92 |     <script src="js/dbConnection.js"></script>
93 |     <script src="js/script.js" defer></script>
94 |   </body>
95 | </html>


--------------------------------------------------------------------------------
/day10/bookSearchExemplar/public/js/dbConnection.js:
--------------------------------------------------------------------------------
 1 | const firebaseConfig = {
 2 |     apiKey: "AIzaSyDQBUs3YMBVXOQTVq4C68EKLwl0NkU6RmE",
 3 |     authDomain: "book-recs-1580a.firebaseapp.com",
 4 |     databaseURL: "https://book-recs-1580a-default-rtdb.firebaseio.com",
 5 |     projectId: "book-recs-1580a",
 6 |     storageBucket: "book-recs-1580a.appspot.com",
 7 |     messagingSenderId: "842740101788",
 8 |     appId: "1:842740101788:web:4ef31653c803f124863359",
 9 |     measurementId: "G-843YS38J6C"
10 | };
11 | 


--------------------------------------------------------------------------------
/day10/bookSearchExemplar/public/js/script.js:
--------------------------------------------------------------------------------
 1 | let search = document.getElementById('search');
 2 | search.addEventListener("keyup", function(event) {
 3 |   // On Enter keystroke
 4 |   if (event.keyCode === 13) {
 5 |     // // Cancel the default action, if needed
 6 |     // event.preventDefault();
 7 |     if (!firebase.apps.length) {
 8 |         firebase.initializeApp(firebaseConfig);
 9 |     }
10 |     else {
11 |         firebase.app(); // if already initialized, use that one
12 |     }
13 |     
14 |     // Capture the search string, convert to lowercase
15 |     const searchStr = search.value.toLowerCase();
16 | 
17 |     const bookList = firebase.database().ref('books');
18 |     bookList.on('value', (snapshot) => {
19 |         const books = snapshot.val();
20 |         const bookArray = Object.entries(books);
21 |         const findBookByTitle = bookArray.find(arr => {
22 |             const bookTitle = arr[1].title;
23 |             const bookTitleLowercase = bookTitle.toLowerCase();
24 |             console.log(searchStr, bookTitle)
25 |             return searchStr === bookTitleLowercase;
26 |         })
27 |         const imgEle = document.getElementById('coverImg');
28 |         const message = document.getElementById('bookContent');
29 | console.log(findBookByTitle)        
30 |         if(!findBookByTitle) {
31 |             imgEle.setAttribute('src', 'https://media.giphy.com/media/14uQ3cOFteDaU/giphy.gif');
32 |             message.innerHTML = `<strong>Sorry we weren't able to find that title! Try searching for another one.</strong>`;
33 |             message.classList.add('has-text-centered')
34 |         }
35 |         else {
36 |             const bookInfo = findBookByTitle[1];
37 |             imgEle.setAttribute('src', bookInfo.cover_img);
38 |             const formattedHTML = formatHTML(bookInfo);
39 |             message.innerHTML = formattedHTML;
40 |         }
41 |       });
42 |   }
43 | });
44 | 
45 | const formatHTML = (info) => {
46 |     let innerHTML = '';
47 |     innerHTML += `<strong>Author:</strong> ${info.author}`;
48 |     innerHTML += `<br>`;
49 |     innerHTML += `<strong>Title:</strong> ${info.title}`;
50 |     innerHTML += `<br>`;
51 |     innerHTML += `<strong><a href="https://www.google.com/search?q=${info.title}&tbm=shop">Purchase This Book</a></strong>`
52 |     return innerHTML;
53 | }


--------------------------------------------------------------------------------
/day11/final/firebaseNotes/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "to-do-list-2a702"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/day11/final/firebaseNotes/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | firebase-debug.log*
 8 | firebase-debug.*.log*
 9 | 
10 | # Firebase cache
11 | .firebase/
12 | 
13 | # Firebase config
14 | 
15 | # Uncomment this if you'd like others to create their own Firebase project.
16 | # For a team working on the same Firebase project(s), it is recommended to leave
17 | # it commented so all members can deploy to the same project(s) in .firebaserc.
18 | # .firebaserc
19 | 
20 | # Runtime data
21 | pids
22 | *.pid
23 | *.seed
24 | *.pid.lock
25 | 
26 | # Directory for instrumented libs generated by jscoverage/JSCover
27 | lib-cov
28 | 
29 | # Coverage directory used by tools like istanbul
30 | coverage
31 | 
32 | # nyc test coverage
33 | .nyc_output
34 | 
35 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
36 | .grunt
37 | 
38 | # Bower dependency directory (https://bower.io/)
39 | bower_components
40 | 
41 | # node-waf configuration
42 | .lock-wscript
43 | 
44 | # Compiled binary addons (http://nodejs.org/api/addons.html)
45 | build/Release
46 | 
47 | # Dependency directories
48 | node_modules/
49 | 
50 | # Optional npm cache directory
51 | .npm
52 | 
53 | # Optional eslint cache
54 | .eslintcache
55 | 
56 | # Optional REPL history
57 | .node_repl_history
58 | 
59 | # Output of 'npm pack'
60 | *.tgz
61 | 
62 | # Yarn Integrity file
63 | .yarn-integrity
64 | 
65 | # dotenv environment variables file
66 | .env
67 | 


--------------------------------------------------------------------------------
/day11/final/firebaseNotes/database.rules.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rules": {
3 |     ".read": true,
4 |     ".write": true
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/day11/final/firebaseNotes/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "database": {
 3 |     "rules": "database.rules.json"
 4 |   },
 5 |   "hosting": {
 6 |     "public": "public",
 7 |     "ignore": [
 8 |       "firebase.json",
 9 |       "**/.*",
10 |       "**/node_modules/**"
11 |     ]
12 |   },
13 |   "emulators": {
14 |     "auth": {
15 |       "port": 8111
16 |     },
17 |     "database": {
18 |       "port": 8112
19 |     },
20 |     "hosting": {
21 |       "port": 8113
22 |     },
23 |     "ui": {
24 |       "enabled": true
25 |     }
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/day11/final/firebaseNotes/public/404.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Page Not Found</title>
 7 | 
 8 |     <style media="screen">
 9 |       body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
10 |       #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
11 |       #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
12 |       #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
13 |       #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
14 |       #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
15 |       #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
16 |       #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
17 |       #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
18 |       @media (max-width: 600px) {
19 |         body, #message { margin-top: 0; background: white; box-shadow: none; }
20 |         body { border-top: 16px solid #ffa100; }
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <div id="message">
26 |       <h2>404</h2>
27 |       <h1>Page Not Found</h1>
28 |       <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
29 |       <h3>Why am I seeing this?</h3>
30 |       <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
31 |     </div>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/day11/final/firebaseNotes/public/css/writeNote.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/cssi-labs/f3c445753c96e3da5cf96bd5ad538aea72446aae/day11/final/firebaseNotes/public/css/writeNote.css


--------------------------------------------------------------------------------
/day11/final/firebaseNotes/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Fire Notes</title>
 7 | 
 8 |     <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
 9 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 |     <style type="text/css">
12 |       html,
13 |       body {
14 |           font-family: 'Open Sans';
15 |       }
16 | 
17 |       img {
18 |           padding: 5px;
19 |           border: 1px solid #ccc;
20 |       }
21 |     </style>
22 |     <!-- update the version number as needed -->
23 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
24 |     <!-- include only the Firebase features as you need -->
25 |     <script defer src="/__/firebase/8.3.1/firebase-auth.js"></script>
26 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
27 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
28 |     <script src="js/signIn.js"></script>
29 |   </head>
30 |   <body>
31 | 
32 |     <section class="hero is-fullheight is-default is-bold">
33 |         <div class="hero-body">
34 |             <div class="container has-text-centered">
35 |                 <div class="columns is-vcentered">
36 |                     <div class="column is-6 is-offset-3">
37 |                         <h1 class="title is-2">
38 |                             Welcome to 🔥Fire Notes📝!
39 |                         </h1>
40 |                         <h2 class="subtitle is-4">
41 |                             Log in to view your notes or create a new one. 
42 |                         </h2>
43 |                         <br>
44 |                         <p class="has-text-centered">
45 |                             <a class="button is-medium is-info is-outlined" onclick="signIn()">
46 |                                 Sign In
47 |                             </a>
48 |                         </p>
49 |                     </div>
50 |                 </div>
51 |             </div>
52 |         </div>
53 |     </section>
54 |     
55 |   </body>
56 | </html>


--------------------------------------------------------------------------------
/day11/final/firebaseNotes/public/js/signIn.js:
--------------------------------------------------------------------------------
 1 | const signIn = () => {
 2 |   var provider = new firebase.auth.GoogleAuthProvider();
 3 |   // console.log(provider)
 4 |   firebase.auth()
 5 |   .signInWithPopup(provider)
 6 |   .then((result) => {
 7 |     /** @type {firebase.auth.OAuthCredential} */
 8 |     var credential = result.credential;
 9 |     var token = credential.accessToken;
10 | 
11 |     // The signed-in user info.
12 |     var user = result.user;
13 |     window.location = 'writeNote.html';
14 |   }).catch((error) => {
15 |     // Handle Errors here.
16 |     var errorCode = error.code;
17 |     var errorMessage = error.message;
18 |     // The email of the user's account used.
19 |     var email = error.email;
20 |     // The firebase.auth.AuthCredential type that was used.
21 |     var credential = error.credential;
22 |     const err = {
23 |       errorCode,
24 |       errorMessage,
25 |       email,
26 |       credential
27 |     };
28 |     console.log(err);
29 |   });
30 | }


--------------------------------------------------------------------------------
/day11/final/firebaseNotes/public/js/writeNote.js:
--------------------------------------------------------------------------------
 1 | let googleUser;
 2 | 
 3 | window.onload = (event) => {
 4 |   // Use this to retain user state between html pages.
 5 |   firebase.auth().onAuthStateChanged(function(user) {
 6 |     if (user) {
 7 |       console.log('Logged in as: ' + user.displayName);
 8 |       googleUser = user;
 9 |     } else {
10 |       window.location = 'index.html'; // If not logged in, navigate back to login page.
11 |     }
12 |   });
13 | };
14 | 
15 | const handleNoteSubmit = () => {
16 |   // 1. Capture the form data
17 |   const noteTitle = document.querySelector('#noteTitle');
18 |   const noteText = document.querySelector('#noteText');
19 |   // 2. Format the data and write it to our database
20 |   firebase.database().ref(`users/${googleUser.uid}`).push({
21 |     title: noteTitle.value,
22 |     text: noteText.value
23 |   })
24 |   // 3. Clear the form so that we can write a new note
25 |   .then(() => {
26 |     noteTitle.value = "";
27 |     noteText.value = "";
28 |   });
29 | };


--------------------------------------------------------------------------------
/day11/final/firebaseNotes/public/writeNote.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Fire Notes</title>
 7 | 
 8 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 9 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 | 	  <link rel="stylesheet" href="css/writeNote.css">
12 |     <!-- update the version number as needed -->
13 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
14 |     <!-- include only the Firebase features as you need -->
15 |     <script defer src="/__/firebase/8.3.1/firebase-auth.js"></script>
16 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
17 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
18 |     <script src="js/writeNote.js"></script>
19 |   </head>
20 |   <body>
21 | 
22 |     <section class="hero is-fullheight">
23 |       <div class="hero-body">
24 |         <div class="container has-text-centered">
25 |           <div class="columns is-8 is-variable ">
26 | 
27 |             <!-- WELCOME HERO -->
28 |             <div class="column is-two-thirds has-text-left">
29 |               <h1 class="title is-1">What's on your mind?</h1>
30 |               <h1 class="title is-3">
31 |                 “The most beautiful things are those that madness prompts and reason writes."
32 |               </h1>
33 |               <h1 class="subtitle is-5">
34 |                 —Andre Gide
35 |               </h1>
36 |               <a><button class="button is-link has-text-weight-medium is-medium is-centered">Click Here</button></a>
37 |               to view your notes.
38 |             </div>
39 | 
40 |             <!-- NOTE FORM -->
41 |             <div class="column is-one-third has-text-left">
42 |               <div class="field">
43 |                 <label class="label">Title</label>
44 |                 <div class="control">
45 |                   <input class="input is-medium" type="text" id="noteTitle">
46 |                 </div>
47 |               </div>
48 |               <div class="field">
49 |                 <label class="label">Note</label>
50 |                 <div class="control">
51 |                   <textarea class="textarea is-medium" id="noteText"></textarea>
52 |                 </div>
53 |               </div>
54 |               <div class="control">
55 |                 <button class="button is-link is-fullwidth has-text-weight-medium is-medium" onclick="handleNoteSubmit()">Create Note</button>
56 |               </div>
57 |             </div>
58 |             
59 |           </div>
60 |         </div>
61 |       </div>
62 |     </section>
63 | 
64 |   </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/day11/starter/firebaseNotes/public/css/writeNote.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/cssi-labs/f3c445753c96e3da5cf96bd5ad538aea72446aae/day11/starter/firebaseNotes/public/css/writeNote.css


--------------------------------------------------------------------------------
/day11/starter/firebaseNotes/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Fire Notes</title>
 7 | 
 8 |     <!--MAYBE DELETE <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
 9 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 |     <style type="text/css">
12 |       html,
13 |       body {
14 |           font-family: 'Open Sans';
15 |       }
16 | 
17 |       img {
18 |           padding: 5px;
19 |           border: 1px solid #ccc;
20 |       }
21 |     </style>
22 |     <!-- update the version number as needed -->
23 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
24 |     <!-- include only the Firebase features as you need -->
25 |     <script defer src="/__/firebase/8.3.1/firebase-auth.js"></script>
26 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
27 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
28 |   </head>
29 |   <body>
30 | 
31 |     <section class="hero is-fullheight is-default is-bold">
32 |         <div class="hero-body">
33 |             <div class="container has-text-centered">
34 |                 <div class="columns is-vcentered">
35 |                     <div class="column is-6 is-offset-3">
36 |                         <h1 class="title is-2">
37 |                             Welcome to 🔥Fire Notes📝!
38 |                         </h1>
39 |                         <h2 class="subtitle is-4">
40 |                             Log in to view your notes or create a new one. 
41 |                         </h2>
42 |                         <br>
43 |                         <p class="has-text-centered">
44 |                             <a class="button is-medium is-info is-outlined">
45 |                                 Sign In
46 |                             </a>
47 |                         </p>
48 |                     </div>
49 |                 </div>
50 |             </div>
51 |         </div>
52 |     </section>
53 |     
54 |   </body>
55 | </html>


--------------------------------------------------------------------------------
/day11/starter/firebaseNotes/public/js/signIn.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/cssi-labs/f3c445753c96e3da5cf96bd5ad538aea72446aae/day11/starter/firebaseNotes/public/js/signIn.js


--------------------------------------------------------------------------------
/day11/starter/firebaseNotes/public/js/writeNote.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/cssi-labs/f3c445753c96e3da5cf96bd5ad538aea72446aae/day11/starter/firebaseNotes/public/js/writeNote.js


--------------------------------------------------------------------------------
/day11/starter/firebaseNotes/public/writeNote.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Fire Notes</title>
 7 | 
 8 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 9 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 | 	  <link rel="stylesheet" href="css/writeNote.css">
12 |     <!-- update the version number as needed -->
13 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
14 |     <!-- include only the Firebase features as you need -->
15 |     <script defer src="/__/firebase/8.3.1/firebase-auth.js"></script>
16 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
17 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
18 |     <script src="js/writeNote.js"></script>
19 |   </head>
20 |   <body>
21 | 
22 |     <section class="hero is-fullheight">
23 |       <div class="hero-body">
24 |         <div class="container has-text-centered">
25 |           <div class="columns is-8 is-variable ">
26 | 
27 |             <!-- WELCOME HERO -->
28 |             <div class="column is-two-thirds has-text-left">
29 |               <h1 class="title is-1">What's on your mind?</h1>
30 |               <h1 class="title is-3">
31 |                 “The most beautiful things are those that madness prompts and reason writes."
32 |               </h1>
33 |               <h1 class="subtitle is-5">
34 |                 —Andre Gide
35 |               </h1>
36 |               <a><button class="button is-link has-text-weight-medium is-medium is-centered">Click Here</button></a>
37 |               to view your notes.
38 |             </div>
39 | 
40 |             <!-- NOTE FORM -->
41 |             <div class="column is-one-third has-text-left">
42 |               <div class="field">
43 |                 <label class="label">Title</label>
44 |                 <div class="control">
45 |                   <input class="input is-medium" type="text" id="noteTitle">
46 |                 </div>
47 |               </div>
48 |               <div class="field">
49 |                 <label class="label">Note</label>
50 |                 <div class="control">
51 |                   <textarea class="textarea is-medium" id="noteText"></textarea>
52 |                 </div>
53 |               </div>
54 |               <div class="control">
55 |                 <button class="button is-link is-fullwidth has-text-weight-medium is-medium">Create Note</button>
56 |               </div>
57 |             </div>
58 |             
59 |           </div>
60 |         </div>
61 |       </div>
62 |     </section>
63 | 
64 |   </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/day12/final/firebaseNotes/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "to-do-list-2a702"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/day12/final/firebaseNotes/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | firebase-debug.log*
 8 | firebase-debug.*.log*
 9 | 
10 | # Firebase cache
11 | .firebase/
12 | 
13 | # Firebase config
14 | 
15 | # Uncomment this if you'd like others to create their own Firebase project.
16 | # For a team working on the same Firebase project(s), it is recommended to leave
17 | # it commented so all members can deploy to the same project(s) in .firebaserc.
18 | # .firebaserc
19 | 
20 | # Runtime data
21 | pids
22 | *.pid
23 | *.seed
24 | *.pid.lock
25 | 
26 | # Directory for instrumented libs generated by jscoverage/JSCover
27 | lib-cov
28 | 
29 | # Coverage directory used by tools like istanbul
30 | coverage
31 | 
32 | # nyc test coverage
33 | .nyc_output
34 | 
35 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
36 | .grunt
37 | 
38 | # Bower dependency directory (https://bower.io/)
39 | bower_components
40 | 
41 | # node-waf configuration
42 | .lock-wscript
43 | 
44 | # Compiled binary addons (http://nodejs.org/api/addons.html)
45 | build/Release
46 | 
47 | # Dependency directories
48 | node_modules/
49 | 
50 | # Optional npm cache directory
51 | .npm
52 | 
53 | # Optional eslint cache
54 | .eslintcache
55 | 
56 | # Optional REPL history
57 | .node_repl_history
58 | 
59 | # Output of 'npm pack'
60 | *.tgz
61 | 
62 | # Yarn Integrity file
63 | .yarn-integrity
64 | 
65 | # dotenv environment variables file
66 | .env
67 | 


--------------------------------------------------------------------------------
/day12/final/firebaseNotes/database.rules.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rules": {
3 |     ".read": true,
4 |     ".write": true
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/day12/final/firebaseNotes/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "database": {
 3 |     "rules": "database.rules.json"
 4 |   },
 5 |   "hosting": {
 6 |     "public": "public",
 7 |     "ignore": [
 8 |       "firebase.json",
 9 |       "**/.*",
10 |       "**/node_modules/**"
11 |     ]
12 |   },
13 |   "emulators": {
14 |     "auth": {
15 |       "port": 8111
16 |     },
17 |     "database": {
18 |       "port": 8112
19 |     },
20 |     "hosting": {
21 |       "port": 8113
22 |     },
23 |     "ui": {
24 |       "enabled": true
25 |     }
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/day12/final/firebaseNotes/public/404.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Page Not Found</title>
 7 | 
 8 |     <style media="screen">
 9 |       body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
10 |       #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
11 |       #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
12 |       #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
13 |       #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
14 |       #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
15 |       #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
16 |       #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
17 |       #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
18 |       @media (max-width: 600px) {
19 |         body, #message { margin-top: 0; background: white; box-shadow: none; }
20 |         body { border-top: 16px solid #ffa100; }
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <div id="message">
26 |       <h2>404</h2>
27 |       <h1>Page Not Found</h1>
28 |       <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
29 |       <h3>Why am I seeing this?</h3>
30 |       <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
31 |     </div>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/day12/final/firebaseNotes/public/css/cards.css:
--------------------------------------------------------------------------------
 1 | input::placeholder {
 2 |   color: antiquewhite;
 3 | }
 4 | 
 5 | .navbar {
 6 |   background: var(--card-bg);
 7 | }
 8 | 
 9 | /* Card start*/
10 | .card {
11 |   overflow: hidden;
12 |   background: yellow;
13 |   /* color: var(--bg); */
14 | }
15 | 
16 | .card.large {
17 |   border-radius: 5px;
18 | }
19 | 
20 | .title.no-padding {
21 |   margin-bottom: 0 !important;
22 | }
23 | 
24 | .footer {
25 |   background: white;
26 | }
27 | 
28 | .footer a:hover {
29 |   color: crimson;
30 | }
31 | 
32 | .fa {
33 |   color: ghostwhite;
34 |   margin: 10px
35 | }


--------------------------------------------------------------------------------
/day12/final/firebaseNotes/public/css/writeNote.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/cssi-labs/f3c445753c96e3da5cf96bd5ad538aea72446aae/day12/final/firebaseNotes/public/css/writeNote.css


--------------------------------------------------------------------------------
/day12/final/firebaseNotes/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Fire Notes</title>
 7 | 
 8 |     <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
 9 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 |     <style type="text/css">
12 |       html,
13 |       body {
14 |           font-family: 'Open Sans';
15 |       }
16 | 
17 |       img {
18 |           padding: 5px;
19 |           border: 1px solid #ccc;
20 |       }
21 |     </style>
22 |     <!-- update the version number as needed -->
23 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
24 |     <!-- include only the Firebase features as you need -->
25 |     <script defer src="/__/firebase/8.3.1/firebase-auth.js"></script>
26 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
27 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
28 |     <script src="js/signIn.js"></script>
29 |   </head>
30 |   <body>
31 | 
32 |     <section class="hero is-fullheight is-default is-bold">
33 |         <div class="hero-body">
34 |             <div class="container has-text-centered">
35 |                 <div class="columns is-vcentered">
36 |                     <div class="column is-6 is-offset-3">
37 |                         <h1 class="title is-2">
38 |                             Welcome to 🔥Fire Notes📝!
39 |                         </h1>
40 |                         <h2 class="subtitle is-4">
41 |                             Log in to view your notes or create a new one. 
42 |                         </h2>
43 |                         <br>
44 |                         <p class="has-text-centered">
45 |                             <a class="button is-medium is-info is-outlined" onclick="signIn()">
46 |                                 Sign In
47 |                             </a>
48 |                         </p>
49 |                     </div>
50 |                 </div>
51 |             </div>
52 |         </div>
53 |     </section>
54 |     
55 |   </body>
56 | </html>


--------------------------------------------------------------------------------
/day12/final/firebaseNotes/public/js/signIn.js:
--------------------------------------------------------------------------------
 1 | const signIn = () => {
 2 |   var provider = new firebase.auth.GoogleAuthProvider();
 3 |   // console.log(provider)
 4 |   firebase.auth()
 5 |   .signInWithPopup(provider)
 6 |   .then((result) => {
 7 |     /** @type {firebase.auth.OAuthCredential} */
 8 |     var credential = result.credential;
 9 |     var token = credential.accessToken;
10 | 
11 |     // The signed-in user info.
12 |     var user = result.user;
13 |     window.location = 'writeNote.html';
14 |   }).catch((error) => {
15 |     // Handle Errors here.
16 |     var errorCode = error.code;
17 |     var errorMessage = error.message;
18 |     // The email of the user's account used.
19 |     var email = error.email;
20 |     // The firebase.auth.AuthCredential type that was used.
21 |     var credential = error.credential;
22 |     const err = {
23 |       errorCode,
24 |       errorMessage,
25 |       email,
26 |       credential
27 |     };
28 |     console.log(err);
29 |   });
30 | }


--------------------------------------------------------------------------------
/day12/final/firebaseNotes/public/js/viewNotes.js:
--------------------------------------------------------------------------------
 1 | window.onload = (event) => {
 2 |   // Use this to retain user state between html pages.
 3 |   firebase.auth().onAuthStateChanged(function(user) {
 4 |     if (user) {
 5 |       console.log('Logged in as: ' + user.displayName);
 6 |       const googleUserId = user.uid;
 7 |       getNotes(googleUserId);
 8 |     } else {
 9 |       // If not logged in, navigate back to login page.
10 |       window.location = 'index.html'; 
11 |     };
12 |   });
13 | };
14 | 
15 | const getNotes = (userId) => {
16 |   const notesRef = firebase.database().ref(`users/${userId}`);
17 |   notesRef.on('value', (snapshot) => {
18 |     const data = snapshot.val();
19 |     renderDataAsHtml(data);
20 |   });
21 | };
22 | 
23 | const renderDataAsHtml = (data) => {
24 |   let cards = ``;
25 |   for(const noteItem in data) {
26 |     const note = data[noteItem];
27 |     // For each note create an HTML card
28 |     cards += createCard(note)
29 |   };
30 |   // Inject our string of HTML into our viewNotes.html page
31 |   document.querySelector('#app').innerHTML = cards;
32 | };
33 | 
34 | const createCard = (note) => {
35 |   let innerHTML = "";
36 |   innerHTML += `<div class="column is-one-quarter">`
37 |   innerHTML += `<div class="card">`
38 |   innerHTML += `<header class="card-header">`
39 |   innerHTML += `<p class="card-header-title">`
40 |   innerHTML += `${note.title}`
41 |   innerHTML += `</p>`
42 |   innerHTML += `</header>`
43 |   innerHTML += `<div class="card-content">`
44 |   innerHTML += `<div class="content">`
45 |   innerHTML += `${note.text}`
46 |   innerHTML += `</div>`
47 |   innerHTML += `</div>`
48 |   innerHTML += `</div>`
49 |   innerHTML += `</div>`
50 |   return innerHTML;
51 | };


--------------------------------------------------------------------------------
/day12/final/firebaseNotes/public/js/writeNote.js:
--------------------------------------------------------------------------------
 1 | let googleUser;
 2 | 
 3 | window.onload = (event) => {
 4 |   // Use this to retain user state between html pages.
 5 |   firebase.auth().onAuthStateChanged(function(user) {
 6 |     if (user) {
 7 |       console.log('Logged in as: ' + user.displayName);
 8 |       googleUser = user;
 9 |     } else {
10 |       window.location = 'index.html'; // If not logged in, navigate back to login page.
11 |     }
12 |   });
13 | };
14 | 
15 | const handleNoteSubmit = () => {
16 |   // 1. Capture the form data
17 |   const noteTitle = document.querySelector('#noteTitle');
18 |   const noteText = document.querySelector('#noteText');
19 |   // 2. Format the data and write it to our database
20 |   firebase.database().ref(`users/${googleUser.uid}`).push({
21 |     title: noteTitle.value,
22 |     text: noteText.value
23 |   })
24 |   // 3. Clear the form so that we can write a new note
25 |   .then(() => {
26 |     noteTitle.value = "";
27 |     noteText.value = "";
28 |   });
29 | }


--------------------------------------------------------------------------------
/day12/final/firebaseNotes/public/viewNotes.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Welcome to Firebase Hosting</title>
 7 | 
 8 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 9 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 | 	  <link rel="stylesheet" href="css/cards.css">
12 |     <!-- update the version number as needed -->
13 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
14 |     <!-- include only the Firebase features as you need -->
15 |     <script defer src="/__/firebase/8.3.1/firebase-auth.js"></script>
16 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
17 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
18 |     <script src="js/viewNotes.js"></script>
19 |   </head>
20 |   <body>
21 |     <nav class="navbar" role="navigation" aria-label="main navigation">
22 |       <div class="navbar-menu">
23 |         <a class="navbar-item" href="writeNote.html">
24 |           Add a new note
25 |         </a>
26 |       </div>
27 |     </nav>
28 |     <div class="container">
29 |       <div class="section">
30 |         <div class="columns">
31 |           <div class="column has-text-centered">
32 |             <h1 class="title">Some of Your Greatest Ideas Started Here</h1><br>
33 |           </div>
34 |         </div>
35 |         <div id="app" class="columns is-multiline">
36 |           <!-- Note cards will render here -->
37 |         </div>
38 |       </div>
39 |     </div>
40 |     <footer class="footer">
41 |       <div class="container">
42 |         <div class="content has-text-centered">
43 |           <p>
44 |             <strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>.
45 |             The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. <br>
46 |           </p>
47 |         </div>
48 |       </div>
49 |     </footer>
50 |   </body>
51 | 
52 | </html>


--------------------------------------------------------------------------------
/day12/final/firebaseNotes/public/writeNote.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Fire Notes</title>
 7 | 
 8 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 9 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 | 	  <link rel="stylesheet" href="css/writeNote.css">
12 |     <!-- update the version number as needed -->
13 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
14 |     <!-- include only the Firebase features as you need -->
15 |     <script defer src="/__/firebase/8.3.1/firebase-auth.js"></script>
16 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
17 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
18 |     <script src="js/writeNote.js"></script>
19 |   </head>
20 |   <body>
21 | 
22 |     <section class="hero is-fullheight">
23 |       <div class="hero-body">
24 |         <div class="container has-text-centered">
25 |           <div class="columns is-8 is-variable ">
26 | 
27 |             <!-- WELCOME HERO -->
28 |             <div class="column is-two-thirds has-text-left">
29 |               <h1 class="title is-1">What's on your mind?</h1>
30 |               <h1 class="title is-3">
31 |                 “The most beautiful things are those that madness prompts and reason writes."
32 |               </h1>
33 |               <h1 class="subtitle is-5">
34 |                 —Andre Gide
35 |               </h1>
36 |               <a href="viewNotes.html"><button class="button is-link has-text-weight-medium is-medium is-centered">Click Here</button></a>
37 |               to view your notes.
38 |             </div>
39 | 
40 |             <!-- NOTE FORM -->
41 |             <div class="column is-one-third has-text-left">
42 |               <div class="field">
43 |                 <label class="label">Title</label>
44 |                 <div class="control">
45 |                   <input class="input is-medium" type="text" id="noteTitle">
46 |                 </div>
47 |               </div>
48 |               <div class="field">
49 |                 <label class="label">Note</label>
50 |                 <div class="control">
51 |                   <textarea class="textarea is-medium" id="noteText"></textarea>
52 |                 </div>
53 |               </div>
54 |               <div class="control">
55 |                 <button class="button is-link is-fullwidth has-text-weight-medium is-medium" onclick="handleNoteSubmit()">Create Note</button>
56 |               </div>
57 |             </div>
58 |             
59 |           </div>
60 |         </div>
61 |       </div>
62 |     </section>
63 | 
64 |   </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/day12/starter/firebaseNotes/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "to-do-list-2a702"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/day12/starter/firebaseNotes/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | firebase-debug.log*
 8 | firebase-debug.*.log*
 9 | 
10 | # Firebase cache
11 | .firebase/
12 | 
13 | # Firebase config
14 | 
15 | # Uncomment this if you'd like others to create their own Firebase project.
16 | # For a team working on the same Firebase project(s), it is recommended to leave
17 | # it commented so all members can deploy to the same project(s) in .firebaserc.
18 | # .firebaserc
19 | 
20 | # Runtime data
21 | pids
22 | *.pid
23 | *.seed
24 | *.pid.lock
25 | 
26 | # Directory for instrumented libs generated by jscoverage/JSCover
27 | lib-cov
28 | 
29 | # Coverage directory used by tools like istanbul
30 | coverage
31 | 
32 | # nyc test coverage
33 | .nyc_output
34 | 
35 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
36 | .grunt
37 | 
38 | # Bower dependency directory (https://bower.io/)
39 | bower_components
40 | 
41 | # node-waf configuration
42 | .lock-wscript
43 | 
44 | # Compiled binary addons (http://nodejs.org/api/addons.html)
45 | build/Release
46 | 
47 | # Dependency directories
48 | node_modules/
49 | 
50 | # Optional npm cache directory
51 | .npm
52 | 
53 | # Optional eslint cache
54 | .eslintcache
55 | 
56 | # Optional REPL history
57 | .node_repl_history
58 | 
59 | # Output of 'npm pack'
60 | *.tgz
61 | 
62 | # Yarn Integrity file
63 | .yarn-integrity
64 | 
65 | # dotenv environment variables file
66 | .env
67 | 


--------------------------------------------------------------------------------
/day12/starter/firebaseNotes/database.rules.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rules": {
3 |     ".read": true,
4 |     ".write": true
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/day12/starter/firebaseNotes/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "database": {
 3 |     "rules": "database.rules.json"
 4 |   },
 5 |   "hosting": {
 6 |     "public": "public",
 7 |     "ignore": [
 8 |       "firebase.json",
 9 |       "**/.*",
10 |       "**/node_modules/**"
11 |     ]
12 |   },
13 |   "emulators": {
14 |     "auth": {
15 |       "port": 8111
16 |     },
17 |     "database": {
18 |       "port": 8112
19 |     },
20 |     "hosting": {
21 |       "port": 5000
22 |     },
23 |     "ui": {
24 |       "enabled": true
25 |     }
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/day12/starter/firebaseNotes/public/404.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Page Not Found</title>
 7 | 
 8 |     <style media="screen">
 9 |       body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
10 |       #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
11 |       #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
12 |       #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
13 |       #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
14 |       #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
15 |       #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
16 |       #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
17 |       #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
18 |       @media (max-width: 600px) {
19 |         body, #message { margin-top: 0; background: white; box-shadow: none; }
20 |         body { border-top: 16px solid #ffa100; }
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <div id="message">
26 |       <h2>404</h2>
27 |       <h1>Page Not Found</h1>
28 |       <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
29 |       <h3>Why am I seeing this?</h3>
30 |       <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
31 |     </div>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/day12/starter/firebaseNotes/public/css/cards.css:
--------------------------------------------------------------------------------
 1 | input::placeholder {
 2 |   color: antiquewhite;
 3 | }
 4 | 
 5 | .navbar {
 6 |   background: var(--card-bg);
 7 | }
 8 | 
 9 | /* Card start*/
10 | .card {
11 |   overflow: hidden;
12 |   background: yellow;
13 |   /* color: var(--bg); */
14 | }
15 | 
16 | .card.large {
17 |   border-radius: 5px;
18 | }
19 | 
20 | .title.no-padding {
21 |   margin-bottom: 0 !important;
22 | }
23 | 
24 | .footer {
25 |   background: white;
26 | }
27 | 
28 | .footer a:hover {
29 |   color: crimson;
30 | }
31 | 
32 | .fa {
33 |   color: ghostwhite;
34 |   margin: 10px
35 | }


--------------------------------------------------------------------------------
/day12/starter/firebaseNotes/public/css/writeNote.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/cssi-labs/f3c445753c96e3da5cf96bd5ad538aea72446aae/day12/starter/firebaseNotes/public/css/writeNote.css


--------------------------------------------------------------------------------
/day12/starter/firebaseNotes/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Fire Notes</title>
 7 | 
 8 |     <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
 9 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 |     <style type="text/css">
12 |       html,
13 |       body {
14 |           font-family: 'Open Sans';
15 |       }
16 | 
17 |       img {
18 |           padding: 5px;
19 |           border: 1px solid #ccc;
20 |       }
21 |     </style>
22 |     <!-- update the version number as needed -->
23 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
24 |     <!-- include only the Firebase features as you need -->
25 |     <script defer src="/__/firebase/8.3.1/firebase-auth.js"></script>
26 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
27 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
28 |     <script src="js/signIn.js"></script>
29 |   </head>
30 |   <body>
31 | 
32 |     <section class="hero is-fullheight is-default is-bold">
33 |         <div class="hero-body">
34 |             <div class="container has-text-centered">
35 |                 <div class="columns is-vcentered">
36 |                     <div class="column is-6 is-offset-3">
37 |                         <h1 class="title is-2">
38 |                             Welcome to 🔥Fire Notes📝!
39 |                         </h1>
40 |                         <h2 class="subtitle is-4">
41 |                             Log in to view your notes or create a new one. 
42 |                         </h2>
43 |                         <br>
44 |                         <p class="has-text-centered">
45 |                             <a class="button is-medium is-info is-outlined" onclick="signIn()">
46 |                                 Sign In
47 |                             </a>
48 |                         </p>
49 |                     </div>
50 |                 </div>
51 |             </div>
52 |         </div>
53 |     </section>
54 |     
55 |   </body>
56 | </html>


--------------------------------------------------------------------------------
/day12/starter/firebaseNotes/public/js/signIn.js:
--------------------------------------------------------------------------------
 1 | const signIn = () => {
 2 |   var provider = new firebase.auth.GoogleAuthProvider();
 3 |   // console.log(provider)
 4 |   firebase.auth()
 5 |   .signInWithPopup(provider)
 6 |   .then((result) => {
 7 |     /** @type {firebase.auth.OAuthCredential} */
 8 |     var credential = result.credential;
 9 |     var token = credential.accessToken;
10 | 
11 |     // The signed-in user info.
12 |     var user = result.user;
13 |     window.location = 'writeNote.html';
14 |   }).catch((error) => {
15 |     // Handle Errors here.
16 |     var errorCode = error.code;
17 |     var errorMessage = error.message;
18 |     // The email of the user's account used.
19 |     var email = error.email;
20 |     // The firebase.auth.AuthCredential type that was used.
21 |     var credential = error.credential;
22 |     const err = {
23 |       errorCode,
24 |       errorMessage,
25 |       email,
26 |       credential
27 |     };
28 |     console.log(err);
29 |   });
30 | }


--------------------------------------------------------------------------------
/day12/starter/firebaseNotes/public/js/viewNotes.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/cssi-labs/f3c445753c96e3da5cf96bd5ad538aea72446aae/day12/starter/firebaseNotes/public/js/viewNotes.js


--------------------------------------------------------------------------------
/day12/starter/firebaseNotes/public/js/writeNote.js:
--------------------------------------------------------------------------------
 1 | let googleUser;
 2 | 
 3 | window.onload = (event) => {
 4 |   // Use this to retain user state between html pages.
 5 |   firebase.auth().onAuthStateChanged(function(user) {
 6 |     if (user) {
 7 |       console.log('Logged in as: ' + user.displayName);
 8 |       googleUser = user;
 9 |     } else {
10 |       window.location = 'index.html'; // If not logged in, navigate back to login page.
11 |     }
12 |   });
13 | };
14 | 
15 | const handleNoteSubmit = () => {
16 |   // 1. Capture the form data
17 |   const noteTitle = document.querySelector('#noteTitle');
18 |   const noteText = document.querySelector('#noteText');
19 |   // 2. Format the data and write it to our database
20 |   firebase.database().ref(`users/${googleUser.uid}`).push({
21 |     title: noteTitle.value,
22 |     text: noteText.value
23 |   })
24 |   // 3. Clear the form so that we can write a new note
25 |   .then(() => {
26 |     noteTitle.value = "";
27 |     noteText.value = "";
28 |   });
29 | }


--------------------------------------------------------------------------------
/day12/starter/firebaseNotes/public/viewNotes.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Welcome to Firebase Hosting</title>
 7 | 
 8 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 9 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 | 	  <link rel="stylesheet" href="css/cards.css">
12 |     <!-- update the version number as needed -->
13 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
14 |     <!-- include only the Firebase features as you need -->
15 |     <script defer src="/__/firebase/8.3.1/firebase-auth.js"></script>
16 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
17 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
18 |     <script src="js/viewNotes.js"></script>
19 |   </head>
20 |   <body>
21 |     <nav class="navbar" role="navigation" aria-label="main navigation">
22 |       <div class="navbar-menu">
23 |         <a class="navbar-item" href="writeNote.html">
24 |           Add a new note
25 |         </a>
26 |       </div>
27 |     </nav>
28 |     <div class="container">
29 |       <div class="section">
30 |         <div class="columns">
31 |           <div class="column has-text-centered">
32 |             <h1 class="title">Some of Your Greatest Ideas Started Here</h1><br>
33 |           </div>
34 |         </div>
35 |         <div id="app" class="columns is-multiline">
36 |           <!-- Note cards will render here -->
37 |         </div>
38 |       </div>
39 |     </div>
40 |     <footer class="footer">
41 |       <div class="container">
42 |         <div class="content has-text-centered">
43 |           <p>
44 |             <strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>.
45 |             The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. <br>
46 |           </p>
47 |         </div>
48 |       </div>
49 |     </footer>
50 |   </body>
51 | 
52 | </html>
53 | 


--------------------------------------------------------------------------------
/day12/starter/firebaseNotes/public/writeNote.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Fire Notes</title>
 7 | 
 8 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 9 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 | 	  <link rel="stylesheet" href="css/writeNote.css">
12 |     <!-- update the version number as needed -->
13 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
14 |     <!-- include only the Firebase features as you need -->
15 |     <script defer src="/__/firebase/8.3.1/firebase-auth.js"></script>
16 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
17 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
18 |     <script src="js/writeNote.js"></script>
19 |   </head>
20 |   <body>
21 | 
22 |     <section class="hero is-fullheight">
23 |       <div class="hero-body">
24 |         <div class="container has-text-centered">
25 |           <div class="columns is-8 is-variable ">
26 | 
27 |             <!-- WELCOME HERO -->
28 |             <div class="column is-two-thirds has-text-left">
29 |               <h1 class="title is-1">What's on your mind?</h1>
30 |               <h1 class="title is-3">
31 |                 “The most beautiful things are those that madness prompts and reason writes."
32 |               </h1>
33 |               <h1 class="subtitle is-5">
34 |                 —Andre Gide
35 |               </h1>
36 |               <a href="/viewNotes.html"><button class="button is-link has-text-weight-medium is-medium is-centered">Click Here</button></a>
37 |               to view your notes.
38 |             </div>
39 | 
40 |             <!-- NOTE FORM -->
41 |             <div class="column is-one-third has-text-left">
42 |               <div class="field">
43 |                 <label class="label">Title</label>
44 |                 <div class="control">
45 |                   <input class="input is-medium" type="text" id="noteTitle">
46 |                 </div>
47 |               </div>
48 |               <div class="field">
49 |                 <label class="label">Note</label>
50 |                 <div class="control">
51 |                   <textarea class="textarea is-medium" id="noteText"></textarea>
52 |                 </div>
53 |               </div>
54 |               <div class="control">
55 |                 <button class="button is-link is-fullwidth has-text-weight-medium is-medium" onclick="handleNoteSubmit()">Create Note</button>
56 |               </div>
57 |             </div>
58 |             
59 |           </div>
60 |         </div>
61 |       </div>
62 |     </section>
63 | 
64 |   </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/day13/final/firebaseNotes/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "to-do-list-2a702"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/day13/final/firebaseNotes/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | firebase-debug.log*
 8 | firebase-debug.*.log*
 9 | 
10 | # Firebase cache
11 | .firebase/
12 | 
13 | # Firebase config
14 | 
15 | # Uncomment this if you'd like others to create their own Firebase project.
16 | # For a team working on the same Firebase project(s), it is recommended to leave
17 | # it commented so all members can deploy to the same project(s) in .firebaserc.
18 | # .firebaserc
19 | 
20 | # Runtime data
21 | pids
22 | *.pid
23 | *.seed
24 | *.pid.lock
25 | 
26 | # Directory for instrumented libs generated by jscoverage/JSCover
27 | lib-cov
28 | 
29 | # Coverage directory used by tools like istanbul
30 | coverage
31 | 
32 | # nyc test coverage
33 | .nyc_output
34 | 
35 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
36 | .grunt
37 | 
38 | # Bower dependency directory (https://bower.io/)
39 | bower_components
40 | 
41 | # node-waf configuration
42 | .lock-wscript
43 | 
44 | # Compiled binary addons (http://nodejs.org/api/addons.html)
45 | build/Release
46 | 
47 | # Dependency directories
48 | node_modules/
49 | 
50 | # Optional npm cache directory
51 | .npm
52 | 
53 | # Optional eslint cache
54 | .eslintcache
55 | 
56 | # Optional REPL history
57 | .node_repl_history
58 | 
59 | # Output of 'npm pack'
60 | *.tgz
61 | 
62 | # Yarn Integrity file
63 | .yarn-integrity
64 | 
65 | # dotenv environment variables file
66 | .env
67 | 


--------------------------------------------------------------------------------
/day13/final/firebaseNotes/database.rules.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rules": {
3 |     ".read": true,
4 |     ".write": true
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/day13/final/firebaseNotes/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "database": {
 3 |     "rules": "database.rules.json"
 4 |   },
 5 |   "hosting": {
 6 |     "public": "public",
 7 |     "ignore": [
 8 |       "firebase.json",
 9 |       "**/.*",
10 |       "**/node_modules/**"
11 |     ]
12 |   },
13 |   "emulators": {
14 |     "auth": {
15 |       "port": 8115
16 |     },
17 |     "database": {
18 |       "port": 8116
19 |     },
20 |     "hosting": {
21 |       "port": 8117
22 |     },
23 |     "ui": {
24 |       "enabled": true
25 |     }
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/day13/final/firebaseNotes/public/404.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Page Not Found</title>
 7 | 
 8 |     <style media="screen">
 9 |       body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
10 |       #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
11 |       #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
12 |       #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
13 |       #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
14 |       #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
15 |       #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
16 |       #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
17 |       #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
18 |       @media (max-width: 600px) {
19 |         body, #message { margin-top: 0; background: white; box-shadow: none; }
20 |         body { border-top: 16px solid #ffa100; }
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <div id="message">
26 |       <h2>404</h2>
27 |       <h1>Page Not Found</h1>
28 |       <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
29 |       <h3>Why am I seeing this?</h3>
30 |       <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
31 |     </div>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/day13/final/firebaseNotes/public/css/cards.css:
--------------------------------------------------------------------------------
 1 | input::placeholder {
 2 |   color: antiquewhite;
 3 | }
 4 | 
 5 | .navbar {
 6 |   background: var(--card-bg);
 7 | }
 8 | 
 9 | /* Card start*/
10 | .card {
11 |   overflow: hidden;
12 |   background: yellow;
13 |   /* color: var(--bg); */
14 | }
15 | 
16 | .card.large {
17 |   border-radius: 5px;
18 | }
19 | 
20 | .title.no-padding {
21 |   margin-bottom: 0 !important;
22 | }
23 | 
24 | .footer {
25 |   background: white;
26 | }
27 | 
28 | .footer a:hover {
29 |   color: crimson;
30 | }
31 | 
32 | .fa {
33 |   color: ghostwhite;
34 |   margin: 10px
35 | }


--------------------------------------------------------------------------------
/day13/final/firebaseNotes/public/css/writeNote.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/cssi-labs/f3c445753c96e3da5cf96bd5ad538aea72446aae/day13/final/firebaseNotes/public/css/writeNote.css


--------------------------------------------------------------------------------
/day13/final/firebaseNotes/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Fire Notes</title>
 7 | 
 8 |     <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
 9 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 |     <style type="text/css">
12 |       html,
13 |       body {
14 |           font-family: 'Open Sans';
15 |       }
16 | 
17 |       img {
18 |           padding: 5px;
19 |           border: 1px solid #ccc;
20 |       }
21 |     </style>
22 |     <!-- update the version number as needed -->
23 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
24 |     <!-- include only the Firebase features as you need -->
25 |     <script defer src="/__/firebase/8.3.1/firebase-auth.js"></script>
26 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
27 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
28 |     <script src="js/signIn.js"></script>
29 |   </head>
30 |   <body>
31 | 
32 |     <section class="hero is-fullheight is-default is-bold">
33 |         <div class="hero-body">
34 |             <div class="container has-text-centered">
35 |                 <div class="columns is-vcentered">
36 |                     <div class="column is-6 is-offset-3">
37 |                         <h1 class="title is-2">
38 |                             Welcome to 🔥Fire Notes📝!
39 |                         </h1>
40 |                         <h2 class="subtitle is-4">
41 |                             Log in to view your notes or create a new one. 
42 |                         </h2>
43 |                         <br>
44 |                         <p class="has-text-centered">
45 |                             <a class="button is-medium is-info is-outlined" onclick="signIn()">
46 |                                 Sign In
47 |                             </a>
48 |                         </p>
49 |                     </div>
50 |                 </div>
51 |             </div>
52 |         </div>
53 |     </section>
54 |     
55 |   </body>
56 | </html>


--------------------------------------------------------------------------------
/day13/final/firebaseNotes/public/js/signIn.js:
--------------------------------------------------------------------------------
 1 | const signIn = () => {
 2 |   var provider = new firebase.auth.GoogleAuthProvider();
 3 |   // console.log(provider)
 4 |   firebase.auth()
 5 |   .signInWithPopup(provider)
 6 |   .then((result) => {
 7 |     /** @type {firebase.auth.OAuthCredential} */
 8 |     var credential = result.credential;
 9 |     var token = credential.accessToken;
10 | 
11 |     // The signed-in user info.
12 |     var user = result.user;
13 |     window.location = 'writeNote.html';
14 |   }).catch((error) => {
15 |     // Handle Errors here.
16 |     var errorCode = error.code;
17 |     var errorMessage = error.message;
18 |     // The email of the user's account used.
19 |     var email = error.email;
20 |     // The firebase.auth.AuthCredential type that was used.
21 |     var credential = error.credential;
22 |     const err = {
23 |       errorCode,
24 |       errorMessage,
25 |       email,
26 |       credential
27 |     };
28 |     console.log(err);
29 |   });
30 | }


--------------------------------------------------------------------------------
/day13/final/firebaseNotes/public/js/viewNotes.js:
--------------------------------------------------------------------------------
 1 | let googleUserId;
 2 | 
 3 | window.onload = (event) => {
 4 |   // Use this to retain user state between html pages.
 5 |   firebase.auth().onAuthStateChanged(function(user) {
 6 |     if (user) {
 7 |       console.log('Logged in as: ' + user.displayName);
 8 |       googleUserId = user.uid;
 9 |       getNotes(googleUserId);
10 |     } else {
11 |       // If not logged in, navigate back to login page.
12 |       window.location = 'index.html'; 
13 |     };
14 |   });
15 | };
16 | 
17 | const getNotes = (userId) => {
18 |   const notesRef = firebase.database().ref(`users/${userId}`);
19 |   notesRef.on('value', (snapshot) => {
20 |     const data = snapshot.val();
21 |     renderDataAsHtml(data);
22 |   });
23 | };
24 | 
25 | const renderDataAsHtml = (data) => {
26 |   let cards = ``;
27 |   for(const noteItem in data) {
28 |     const note = data[noteItem];
29 |     // For each note create an HTML card
30 |     cards += createCard(note, noteItem)
31 |   };
32 |   // Inject our string of HTML into our viewNotes.html page
33 |   document.querySelector('#app').innerHTML = cards;
34 | };
35 | 
36 | const editNote = (noteId) => {
37 |   const editNoteModal = document.querySelector('#editNoteModal');
38 |   const notesRef = firebase.database().ref(`users/${googleUserId}`);
39 |   notesRef.on('value', (snapshot) => {
40 |     const data = snapshot.val();
41 |     const noteDetails = data[noteId];
42 |     document.querySelector('#editNoteId').value = noteId;
43 |     document.querySelector('#editTitleInput').value = noteDetails.title;
44 |     document.querySelector('#editTextInput').value = noteDetails.text;
45 |   });
46 | 
47 |   editNoteModal.classList.toggle('is-active');
48 | };
49 | 
50 | const deleteNote = (noteId) => {
51 |   firebase.database().ref(`users/${googleUserId}/${noteId}`).remove();
52 | }
53 | 
54 | const saveEditedNote = () => {
55 |   const noteId = document.querySelector('#editNoteId').value;
56 |   const noteTitle = document.querySelector('#editTitleInput').value;
57 |   const noteText = document.querySelector('#editTextInput').value;
58 |   const noteEdits = {
59 |     title: noteTitle,
60 |     text: noteText
61 |   };
62 |   firebase.database().ref(`users/${googleUserId}/${noteId}`).update(noteEdits);
63 |   closeEditModal();
64 | }
65 | 
66 | const closeEditModal = () => {
67 |   const editNoteModal = document.querySelector('#editNoteModal');
68 |   editNoteModal.classList.toggle('is-active');
69 | };
70 | 
71 | const createCard = (note, noteId) => {
72 |   let innerHTML = "";
73 |   innerHTML += `<div class="column is-one-quarter">`
74 |   innerHTML += `<div class="card">`
75 |   innerHTML += `<header class="card-header">`
76 |   innerHTML += `<p class="card-header-title">`
77 |   innerHTML += `${note.title}`
78 |   innerHTML += `</p>`
79 |   innerHTML += `</header>`
80 |   innerHTML += `<div class="card-content">`
81 |   innerHTML += `<div class="content">`
82 |   innerHTML += `${note.text}`
83 |   innerHTML += `</div>`
84 |   innerHTML += `</div>`
85 |   innerHTML +=  `<footer class="card-footer">`
86 |   innerHTML +=  `<a id="${noteId}" class="card-footer-item" onclick="editNote(this.id)">Edit</a>`
87 |   innerHTML +=  `<a id="${noteId}" href="#" class="card-footer-item" onclick="deleteNote(this.id)">Delete</a>`
88 |   innerHTML +=  `</footer>`
89 |   innerHTML += `</div>`
90 |   innerHTML += `</div>`
91 | 
92 |   return innerHTML;
93 | };
94 | 


--------------------------------------------------------------------------------
/day13/final/firebaseNotes/public/js/writeNote.js:
--------------------------------------------------------------------------------
 1 | let googleUser;
 2 | 
 3 | window.onload = (event) => {
 4 |   // Use this to retain user state between html pages.
 5 |   firebase.auth().onAuthStateChanged(function(user) {
 6 |     if (user) {
 7 |       console.log('Logged in as: ' + user.displayName);
 8 |       googleUser = user;
 9 |     } else {
10 |       window.location = 'index.html'; // If not logged in, navigate back to login page.
11 |     }
12 |   });
13 | };
14 | 
15 | const handleNoteSubmit = () => {
16 |   // 1. Capture the form data
17 |   const noteTitle = document.querySelector('#noteTitle');
18 |   const noteText = document.querySelector('#noteText');
19 |   // 2. Format the data and write it to our database
20 |   firebase.database().ref(`users/${googleUser.uid}`).push({
21 |     title: noteTitle.value,
22 |     text: noteText.value
23 |   })
24 |   // 3. Clear the form so that we can write a new note
25 |   .then(() => {
26 |     noteTitle.value = "";
27 |     noteText.value = "";
28 |   });
29 | }


--------------------------------------------------------------------------------
/day13/final/firebaseNotes/public/viewNotes.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Welcome to Firebase Hosting</title>
 7 | 
 8 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 9 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 | 	  <link rel="stylesheet" href="css/cards.css">
12 |     <!-- update the version number as needed -->
13 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
14 |     <!-- include only the Firebase features as you need -->
15 |     <script defer src="/__/firebase/8.3.1/firebase-auth.js"></script>
16 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
17 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
18 |     <script src="js/viewNotes.js"></script>
19 |   </head>
20 |   <body>
21 |     <nav class="navbar" role="navigation" aria-label="main navigation">
22 |       <div class="navbar-menu">
23 |         <a class="navbar-item" href="writeNote.html">
24 |           Add a new note
25 |         </a>
26 |       </div>
27 |     </nav>
28 |     <div class="container">
29 |       <div class="section">
30 |         <div class="columns">
31 |           <div class="column has-text-centered">
32 |             <h1 class="title">Some of Your Greatest Ideas Started Here</h1><br>
33 |           </div>
34 |         </div>
35 |         <div id="app" class="columns is-multiline">
36 |           <!-- Note cards will render here -->
37 |         </div>
38 | 
39 |         <div id="editNoteModal" class="modal">
40 |           <div class="modal-background"></div>
41 |           <div class="modal-card">
42 |             <section class="modal-card-body">
43 | 	      <input id="editNoteId" type="hidden">
44 |               <p class="is-subtitle">Title</p>
45 |               <input class="input is-normal" id="editTitleInput" type="text">
46 |               <p class="is-subtitle">Text</p>
47 |               <input class="input is-normal" id="editTextInput" type="text">
48 |             </section>
49 |             <footer class="modal-card-foot">
50 |               <button class="button is-success" onclick="saveEditedNote()">Save changes</button>
51 |               <button class="button" onclick="closeEditModal()">Cancel</button>
52 |             </footer>
53 |           </div>
54 |         </div>
55 | 
56 |       </div>
57 |     </div>
58 |     <footer class="footer">
59 |       <div class="container">
60 |         <div class="content has-text-centered">
61 |           <p>
62 |             <strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>.
63 |             The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. <br>
64 |           </p>
65 |         </div>
66 |       </div>
67 |     </footer>
68 |   </body>
69 | 
70 | </html>
71 | 


--------------------------------------------------------------------------------
/day13/final/firebaseNotes/public/writeNote.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Fire Notes</title>
 7 | 
 8 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 9 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 | 	  <link rel="stylesheet" href="css/writeNote.css">
12 |     <!-- update the version number as needed -->
13 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
14 |     <!-- include only the Firebase features as you need -->
15 |     <script defer src="/__/firebase/8.3.1/firebase-auth.js"></script>
16 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
17 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
18 |     <script src="js/writeNote.js"></script>
19 |   </head>
20 |   <body>
21 | 
22 |     <section class="hero is-fullheight">
23 |       <div class="hero-body">
24 |         <div class="container has-text-centered">
25 |           <div class="columns is-8 is-variable ">
26 | 
27 |             <!-- WELCOME HERO -->
28 |             <div class="column is-two-thirds has-text-left">
29 |               <h1 class="title is-1">What's on your mind?</h1>
30 |               <h1 class="title is-3">
31 |                 “The most beautiful things are those that madness prompts and reason writes."
32 |               </h1>
33 |               <h1 class="subtitle is-5">
34 |                 —Andre Gide
35 |               </h1>
36 |               <a href="viewNotes.html"><button class="button is-link has-text-weight-medium is-medium is-centered">Click Here</button></a>
37 |               to view your notes.
38 |             </div>
39 | 
40 |             <!-- NOTE FORM -->
41 |             <div class="column is-one-third has-text-left">
42 |               <div class="field">
43 |                 <label class="label">Title</label>
44 |                 <div class="control">
45 |                   <input class="input is-medium" type="text" id="noteTitle">
46 |                 </div>
47 |               </div>
48 |               <div class="field">
49 |                 <label class="label">Note</label>
50 |                 <div class="control">
51 |                   <textarea class="textarea is-medium" id="noteText"></textarea>
52 |                 </div>
53 |               </div>
54 |               <div class="control">
55 |                 <button class="button is-link is-fullwidth has-text-weight-medium is-medium" onclick="handleNoteSubmit()">Create Note</button>
56 |               </div>
57 |             </div>
58 |             
59 |           </div>
60 |         </div>
61 |       </div>
62 |     </section>
63 | 
64 |   </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/day13/starter/firebaseNotes/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "to-do-list-2a702"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/day13/starter/firebaseNotes/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | firebase-debug.log*
 8 | firebase-debug.*.log*
 9 | 
10 | # Firebase cache
11 | .firebase/
12 | 
13 | # Firebase config
14 | 
15 | # Uncomment this if you'd like others to create their own Firebase project.
16 | # For a team working on the same Firebase project(s), it is recommended to leave
17 | # it commented so all members can deploy to the same project(s) in .firebaserc.
18 | # .firebaserc
19 | 
20 | # Runtime data
21 | pids
22 | *.pid
23 | *.seed
24 | *.pid.lock
25 | 
26 | # Directory for instrumented libs generated by jscoverage/JSCover
27 | lib-cov
28 | 
29 | # Coverage directory used by tools like istanbul
30 | coverage
31 | 
32 | # nyc test coverage
33 | .nyc_output
34 | 
35 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
36 | .grunt
37 | 
38 | # Bower dependency directory (https://bower.io/)
39 | bower_components
40 | 
41 | # node-waf configuration
42 | .lock-wscript
43 | 
44 | # Compiled binary addons (http://nodejs.org/api/addons.html)
45 | build/Release
46 | 
47 | # Dependency directories
48 | node_modules/
49 | 
50 | # Optional npm cache directory
51 | .npm
52 | 
53 | # Optional eslint cache
54 | .eslintcache
55 | 
56 | # Optional REPL history
57 | .node_repl_history
58 | 
59 | # Output of 'npm pack'
60 | *.tgz
61 | 
62 | # Yarn Integrity file
63 | .yarn-integrity
64 | 
65 | # dotenv environment variables file
66 | .env
67 | 


--------------------------------------------------------------------------------
/day13/starter/firebaseNotes/database.rules.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rules": {
3 |     ".read": true,
4 |     ".write": true
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/day13/starter/firebaseNotes/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "database": {
 3 |     "rules": "database.rules.json"
 4 |   },
 5 |   "hosting": {
 6 |     "public": "public",
 7 |     "ignore": [
 8 |       "firebase.json",
 9 |       "**/.*",
10 |       "**/node_modules/**"
11 |     ]
12 |   },
13 |   "emulators": {
14 |     "auth": {
15 |       "port": 8111
16 |     },
17 |     "database": {
18 |       "port": 8112
19 |     },
20 |     "hosting": {
21 |       "port": 5000
22 |     },
23 |     "ui": {
24 |       "enabled": true
25 |     }
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/day13/starter/firebaseNotes/public/404.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Page Not Found</title>
 7 | 
 8 |     <style media="screen">
 9 |       body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
10 |       #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
11 |       #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
12 |       #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
13 |       #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
14 |       #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
15 |       #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
16 |       #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
17 |       #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
18 |       @media (max-width: 600px) {
19 |         body, #message { margin-top: 0; background: white; box-shadow: none; }
20 |         body { border-top: 16px solid #ffa100; }
21 |       }
22 |     </style>
23 |   </head>
24 |   <body>
25 |     <div id="message">
26 |       <h2>404</h2>
27 |       <h1>Page Not Found</h1>
28 |       <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
29 |       <h3>Why am I seeing this?</h3>
30 |       <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
31 |     </div>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/day13/starter/firebaseNotes/public/css/cards.css:
--------------------------------------------------------------------------------
 1 | input::placeholder {
 2 |   color: antiquewhite;
 3 | }
 4 | 
 5 | .navbar {
 6 |   background: var(--card-bg);
 7 | }
 8 | 
 9 | /* Card start*/
10 | .card {
11 |   overflow: hidden;
12 |   background: yellow;
13 |   /* color: var(--bg); */
14 | }
15 | 
16 | .card.large {
17 |   border-radius: 5px;
18 | }
19 | 
20 | .title.no-padding {
21 |   margin-bottom: 0 !important;
22 | }
23 | 
24 | .footer {
25 |   background: white;
26 | }
27 | 
28 | .footer a:hover {
29 |   color: crimson;
30 | }
31 | 
32 | .fa {
33 |   color: ghostwhite;
34 |   margin: 10px
35 | }


--------------------------------------------------------------------------------
/day13/starter/firebaseNotes/public/css/writeNote.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/cssi-labs/f3c445753c96e3da5cf96bd5ad538aea72446aae/day13/starter/firebaseNotes/public/css/writeNote.css


--------------------------------------------------------------------------------
/day13/starter/firebaseNotes/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Fire Notes</title>
 7 | 
 8 |     <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
 9 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 |     <style type="text/css">
12 |       html,
13 |       body {
14 |           font-family: 'Open Sans';
15 |       }
16 | 
17 |       img {
18 |           padding: 5px;
19 |           border: 1px solid #ccc;
20 |       }
21 |     </style>
22 |     <!-- update the version number as needed -->
23 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
24 |     <!-- include only the Firebase features as you need -->
25 |     <script defer src="/__/firebase/8.3.1/firebase-auth.js"></script>
26 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
27 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
28 |     <script src="js/signIn.js"></script>
29 |   </head>
30 |   <body>
31 | 
32 |     <section class="hero is-fullheight is-default is-bold">
33 |         <div class="hero-body">
34 |             <div class="container has-text-centered">
35 |                 <div class="columns is-vcentered">
36 |                     <div class="column is-6 is-offset-3">
37 |                         <h1 class="title is-2">
38 |                             Welcome to 🔥Fire Notes📝!
39 |                         </h1>
40 |                         <h2 class="subtitle is-4">
41 |                             Log in to view your notes or create a new one. 
42 |                         </h2>
43 |                         <br>
44 |                         <p class="has-text-centered">
45 |                             <a class="button is-medium is-info is-outlined" onclick="signIn()">
46 |                                 Sign In
47 |                             </a>
48 |                         </p>
49 |                     </div>
50 |                 </div>
51 |             </div>
52 |         </div>
53 |     </section>
54 |     
55 |   </body>
56 | </html>


--------------------------------------------------------------------------------
/day13/starter/firebaseNotes/public/js/signIn.js:
--------------------------------------------------------------------------------
 1 | const signIn = () => {
 2 |   var provider = new firebase.auth.GoogleAuthProvider();
 3 |   // console.log(provider)
 4 |   firebase.auth()
 5 |   .signInWithPopup(provider)
 6 |   .then((result) => {
 7 |     /** @type {firebase.auth.OAuthCredential} */
 8 |     var credential = result.credential;
 9 |     var token = credential.accessToken;
10 | 
11 |     // The signed-in user info.
12 |     var user = result.user;
13 |     window.location = 'writeNote.html';
14 |   }).catch((error) => {
15 |     // Handle Errors here.
16 |     var errorCode = error.code;
17 |     var errorMessage = error.message;
18 |     // The email of the user's account used.
19 |     var email = error.email;
20 |     // The firebase.auth.AuthCredential type that was used.
21 |     var credential = error.credential;
22 |     const err = {
23 |       errorCode,
24 |       errorMessage,
25 |       email,
26 |       credential
27 |     };
28 |     console.log(err);
29 |   });
30 | }


--------------------------------------------------------------------------------
/day13/starter/firebaseNotes/public/js/viewNotes.js:
--------------------------------------------------------------------------------
 1 | window.onload = (event) => {
 2 |   // Use this to retain user state between html pages.
 3 |   firebase.auth().onAuthStateChanged(function(user) {
 4 |     if (user) {
 5 |       console.log('Logged in as: ' + user.displayName);
 6 |       const googleUserId = user.uid;
 7 |       getNotes(googleUserId);
 8 |     } else {
 9 |       // If not logged in, navigate back to login page.
10 |       window.location = 'index.html'; 
11 |     };
12 |   });
13 | };
14 | 
15 | const getNotes = (userId) => {
16 |   const notesRef = firebase.database().ref(`users/${userId}`);
17 |   notesRef.on('value', (snapshot) => {
18 |     const data = snapshot.val();
19 |     renderDataAsHtml(data);
20 |   });
21 | };
22 | 
23 | const renderDataAsHtml = (data) => {
24 |   let cards = ``;
25 |   for(const noteItem in data) {
26 |     const note = data[noteItem];
27 |     // For each note create an HTML card
28 |     cards += createCard(note)
29 |   };
30 |   // Inject our string of HTML into our viewNotes.html page
31 |   document.querySelector('#app').innerHTML = cards;
32 | };
33 | 
34 | const createCard = (note) => {
35 |   let innerHTML = "";
36 |   innerHTML += `<div class="column is-one-quarter">`
37 |   innerHTML += `<div class="card">`
38 |   innerHTML += `<header class="card-header">`
39 |   innerHTML += `<p class="card-header-title">`
40 |   innerHTML += `${note.title}`
41 |   innerHTML += `</p>`
42 |   innerHTML += `</header>`
43 |   innerHTML += `<div class="card-content">`
44 |   innerHTML += `<div class="content">`
45 |   innerHTML += `${note.text}`
46 |   innerHTML += `</div>`
47 |   innerHTML += `</div>`
48 |   innerHTML += `</div>`
49 |   innerHTML += `</div>`
50 |   return innerHTML;
51 | };


--------------------------------------------------------------------------------
/day13/starter/firebaseNotes/public/js/writeNote.js:
--------------------------------------------------------------------------------
 1 | let googleUser;
 2 | 
 3 | window.onload = (event) => {
 4 |   // Use this to retain user state between html pages.
 5 |   firebase.auth().onAuthStateChanged(function(user) {
 6 |     if (user) {
 7 |       console.log('Logged in as: ' + user.displayName);
 8 |       googleUser = user;
 9 |     } else {
10 |       window.location = 'index.html'; // If not logged in, navigate back to login page.
11 |     }
12 |   });
13 | };
14 | 
15 | const handleNoteSubmit = () => {
16 |   // 1. Capture the form data
17 |   const noteTitle = document.querySelector('#noteTitle');
18 |   const noteText = document.querySelector('#noteText');
19 |   // 2. Format the data and write it to our database
20 |   firebase.database().ref(`users/${googleUser.uid}`).push({
21 |     title: noteTitle.value,
22 |     text: noteText.value
23 |   })
24 |   // 3. Clear the form so that we can write a new note
25 |   .then(() => {
26 |     noteTitle.value = "";
27 |     noteText.value = "";
28 |   });
29 | }


--------------------------------------------------------------------------------
/day13/starter/firebaseNotes/public/viewNotes.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Welcome to Firebase Hosting</title>
 7 | 
 8 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 9 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 | 	  <link rel="stylesheet" href="css/cards.css">
12 |     <!-- update the version number as needed -->
13 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
14 |     <!-- include only the Firebase features as you need -->
15 |     <script defer src="/__/firebase/8.3.1/firebase-auth.js"></script>
16 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
17 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
18 |     <script src="js/viewNotes.js"></script>
19 |   </head>
20 |   <body>
21 |     <nav class="navbar" role="navigation" aria-label="main navigation">
22 |       <div class="navbar-menu">
23 |         <a class="navbar-item" href="writeNote.html">
24 |           Add a new note
25 |         </a>
26 |       </div>
27 |     </nav>
28 |     <div class="container">
29 |       <div class="section">
30 |         <div class="columns">
31 |           <div class="column has-text-centered">
32 |             <h1 class="title">Some of Your Greatest Ideas Started Here</h1><br>
33 |           </div>
34 |         </div>
35 |         <div id="app" class="columns is-multiline">
36 |           <!-- Note cards will render here -->
37 |         </div>
38 |       </div>
39 |     </div>
40 |     <footer class="footer">
41 |       <div class="container">
42 |         <div class="content has-text-centered">
43 |           <p>
44 |             <strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>.
45 |             The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. <br>
46 |           </p>
47 |         </div>
48 |       </div>
49 |     </footer>
50 |   </body>
51 | 
52 | </html>


--------------------------------------------------------------------------------
/day13/starter/firebaseNotes/public/writeNote.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <title>Fire Notes</title>
 7 | 
 8 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 9 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
10 |     <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" />
11 | 	  <link rel="stylesheet" href="css/writeNote.css">
12 |     <!-- update the version number as needed -->
13 |     <script defer src="/__/firebase/8.3.1/firebase-app.js"></script>
14 |     <!-- include only the Firebase features as you need -->
15 |     <script defer src="/__/firebase/8.3.1/firebase-auth.js"></script>
16 |     <script defer src="/__/firebase/8.3.1/firebase-database.js"></script>
17 |     <script defer src="/__/firebase/init.js?useEmulator=true"></script>
18 |     <script src="js/writeNote.js"></script>
19 |   </head>
20 |   <body>
21 | 
22 |     <section class="hero is-fullheight">
23 |       <div class="hero-body">
24 |         <div class="container has-text-centered">
25 |           <div class="columns is-8 is-variable ">
26 | 
27 |             <!-- WELCOME HERO -->
28 |             <div class="column is-two-thirds has-text-left">
29 |               <h1 class="title is-1">What's on your mind?</h1>
30 |               <h1 class="title is-3">
31 |                 “The most beautiful things are those that madness prompts and reason writes."
32 |               </h1>
33 |               <h1 class="subtitle is-5">
34 |                 —Andre Gide
35 |               </h1>
36 |               <a href="viewNotes.html"><button class="button is-link has-text-weight-medium is-medium is-centered">Click Here</button></a>
37 |               to view your notes.
38 |             </div>
39 | 
40 |             <!-- NOTE FORM -->
41 |             <div class="column is-one-third has-text-left">
42 |               <div class="field">
43 |                 <label class="label">Title</label>
44 |                 <div class="control">
45 |                   <input class="input is-medium" type="text" id="noteTitle">
46 |                 </div>
47 |               </div>
48 |               <div class="field">
49 |                 <label class="label">Note</label>
50 |                 <div class="control">
51 |                   <textarea class="textarea is-medium" id="noteText"></textarea>
52 |                 </div>
53 |               </div>
54 |               <div class="control">
55 |                 <button class="button is-link is-fullwidth has-text-weight-medium is-medium" onclick="handleNoteSubmit()">Create Note</button>
56 |               </div>
57 |             </div>
58 |             
59 |           </div>
60 |         </div>
61 |       </div>
62 |     </section>
63 | 
64 |   </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------