├── 01_Simple_App └── template.html └── 02_Complex_App ├── 01_HTML_Templates ├── 404.html ├── chat-visible.html ├── create-post.html ├── home-guest.html ├── home-logged-in-no-results.html ├── home-logged-in-results.html ├── main.css ├── post.html ├── profile-posts.html ├── profile-users.html └── search-visible.html └── webpack.config.js /01_Simple_App/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Simple To-Do App 7 | 8 | 9 | 10 |
11 |

To-Do App

12 | 13 |
14 |
15 |
16 | 17 | 18 |
19 |
20 |
21 | 22 | 45 | 46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /02_Complex_App/01_HTML_Templates/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | OurApp 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

OurApp

17 |
18 | 19 | 20 | 21 | Create Post 22 |
23 | 24 |
25 |
26 |
27 |
28 | 29 | 30 |
31 |
32 |

Whoops, we cannot find that page.

33 |

You can always visit the homepage to get a fresh start.

34 |
35 |
36 | 37 | 38 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /02_Complex_App/01_HTML_Templates/chat-visible.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | OurApp 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

OurApp

17 |
18 | 19 | 20 | 21 | Create Post 22 |
23 | 24 |
25 |
26 |
27 |
28 | 29 | 30 |
31 |

The Latest From Those You Follow

32 |
33 | 34 | 35 | Example Post #1 36 | by kittydoe on 1/3/2019 37 | 38 | 39 | 40 | Example Post #2 41 | by barksalot on 1/3/2019 42 | 43 | 44 | 45 | Example Post #3 46 | by kittydoe on 1/3/2019 47 | 48 | 49 | 50 | Example Post #4 51 | by barksalot 52 | on 1/3/2019 53 | 54 |
55 |
56 | 57 | 58 |
59 |
Chat
60 |
61 | 62 | 63 |
64 |
65 |
66 | Hello, how are you? 67 |
68 |
69 | 70 |
71 | 72 | 73 | 74 |
75 | 76 |
77 | barksalot: 78 | I am doing well. How about you? 79 |
80 |
81 | 82 | 83 |
84 | 85 |
86 | 87 |
88 |
89 | 90 | 91 | 92 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /02_Complex_App/01_HTML_Templates/create-post.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | OurApp 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

OurApp

17 |
18 | 19 | 20 | 21 | Create Post 22 |
23 | 24 |
25 |
26 |
27 |
28 | 29 | 30 |
31 |
32 |
33 | 34 | 35 |
36 | 37 |
38 | 39 | 40 |
41 | 42 | 43 |
44 |
45 | 46 | 47 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /02_Complex_App/01_HTML_Templates/home-guest.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | OurApp 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

OurApp

17 |
18 |
19 |
20 | 21 |
22 |
23 | 24 |
25 |
26 | 27 |
28 |
29 |
30 |
31 |
32 | 33 | 34 |
35 | 36 |
37 |
38 |

Remember Writing?

39 |

Are you sick of short tweets and impersonal “shared” posts that are reminiscent of the late 90’s email forwards? We believe getting back to actually writing is the key to enjoying the internet again.

40 |
41 |
42 |
43 | 44 |
45 | 46 | 47 |
48 | 49 |
50 | 51 | 52 |
53 | 54 |
55 | 56 | 57 |
58 | 59 | 60 | 61 |
62 |
63 |
64 |
65 | 66 | 67 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /02_Complex_App/01_HTML_Templates/home-logged-in-no-results.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | OurApp 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

OurApp

17 |
18 | 19 | 20 | 21 | Create Post 22 |
23 | 24 |
25 |
26 |
27 |
28 | 29 | 30 |
31 |
32 |

Hello username, your feed is empty.

33 |

Your feed displays the latest posts from the people you follow. If you don’t have any friends to follow that’s okay; you can use the “Search” feature in the top menu bar to find content written by people with similar interests and then follow them.

34 |
35 |
36 | 37 | 38 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /02_Complex_App/01_HTML_Templates/home-logged-in-results.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | OurApp 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

OurApp

17 |
18 | 19 | 20 | 21 | Create Post 22 |
23 | 24 |
25 |
26 |
27 |
28 | 29 | 30 |
31 |

The Latest From Those You Follow

32 |
33 | 34 | 35 | Example Post #1 36 | by kittydoe on 1/3/2019 37 | 38 | 39 | 40 | Example Post #2 41 | by barksalot on 1/3/2019 42 | 43 | 44 | 45 | Example Post #3 46 | by kittydoe on 1/3/2019 47 | 48 | 49 | 50 | Example Post #4 51 | by barksalot 52 | on 1/3/2019 53 | 54 |
55 |
56 | 57 | 58 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /02_Complex_App/01_HTML_Templates/main.css: -------------------------------------------------------------------------------- 1 | body, .tooltip 2 | { 3 | font-family: 'Open Sans', sans-serif; 4 | } 5 | 6 | .header-bar { 7 | background-color: #292929; 8 | } 9 | 10 | .container--narrow { 11 | max-width: 732px; 12 | } 13 | 14 | .header-search-icon { 15 | position: relative; 16 | top: 3px; 17 | } 18 | 19 | .header-chat-icon { 20 | cursor: pointer; 21 | position: relative; 22 | top: 3px; 23 | } 24 | 25 | .avatar-small { 26 | width: 32px; 27 | height: 32px; 28 | border-radius: 16px; 29 | margin-right: 5px; 30 | position: relative; 31 | top: -3px; 32 | } 33 | 34 | .avatar-tiny { 35 | width: 24px; 36 | height: 24px; 37 | border-radius: 12px; 38 | margin-right: 4px; 39 | position: relative; 40 | top: -1px; 41 | } 42 | 43 | .form-control-title { 44 | font-size: 2rem; 45 | font-weight: 500; 46 | } 47 | 48 | .body-content { 49 | font-size: 1.2rem; 50 | line-height: 1.75; 51 | color: #292929; 52 | } 53 | 54 | .body-content p, 55 | .body-content ul, 56 | .body-content ol { 57 | margin-bottom: 1.75rem 58 | } 59 | 60 | .input-dark { 61 | background-color: #444; 62 | border-color: transparent; 63 | color: #FFFFFF; 64 | } 65 | 66 | .input-dark:focus { 67 | color: #FFFFFF; 68 | background-color: #555; 69 | border-color: #80bdff; 70 | outline: 0; 71 | box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); 72 | } 73 | 74 | .input-dark::-webkit-input-placeholder {color: #888;} 75 | .input-dark::-moz-placeholder {color: #888;} 76 | .input-dark:-ms-input-placeholder {color: #888;} 77 | .input-dark:-moz-placeholder {color: #888;} 78 | 79 | @media (min-width: 768px) { 80 | .input-dark { 81 | width: auto; 82 | } 83 | } 84 | 85 | .display-3 { 86 | font-size: 4.35rem; 87 | } 88 | 89 | @media (max-width: 768px) { 90 | .display-3 {font-size: 2.5rem} 91 | } 92 | 93 | .form-group { 94 | position: relative; 95 | } 96 | 97 | .liveValidateMessage { 98 | transition: all .5s ease-out; 99 | top: -6px; 100 | position: absolute; 101 | z-index: 1; 102 | padding-top: 6px; 103 | padding-bottom: 16px; 104 | opacity: 0; 105 | transform: translateY(100%) 106 | } 107 | 108 | .liveValidateMessage--visible { 109 | opacity: 1; 110 | transform: translateY(0) 111 | } 112 | 113 | .form-group input, 114 | .form-group textarea { 115 | position: relative; 116 | z-index: 2; 117 | } 118 | 119 | textarea.tall-textarea { 120 | height: 160px; 121 | } 122 | 123 | @media (min-width: 768px) { 124 | textarea.tall-textarea { 125 | height: 320px; 126 | } 127 | } 128 | 129 | .delete-post-button { 130 | cursor: pointer; 131 | background: none; 132 | border: none; 133 | padding: 0; 134 | margin: 0; 135 | } 136 | 137 | /* Search Overaly */ 138 | .search-overlay { 139 | display: flex; 140 | flex-direction: column; 141 | position: fixed; 142 | z-index: 500; 143 | top: 0; 144 | left: 0; 145 | bottom: 0; 146 | right: 0; 147 | background-color: rgba(215, 215, 215, 0.911); 148 | visibility: hidden; 149 | opacity: 0; 150 | transform: scale(1.3); 151 | transition: .33s visibility ease-in-out, .33s opacity ease-in-out, .33s transform ease-in-out; 152 | will-change: visibility, transform, opacity; 153 | } 154 | 155 | .search-overlay--visible { 156 | visibility: visible; 157 | opacity: 1; 158 | transform: scale(1); 159 | } 160 | 161 | .search-overlay-icon { 162 | color: #007bff; 163 | font-size: 1.4rem; 164 | margin: 0; 165 | margin-right: 10px; 166 | } 167 | 168 | .live-search-field { 169 | background-color: transparent; 170 | border: none; 171 | font-size: 1.1rem; 172 | outline: none; 173 | flex: 1; 174 | color: #007bff; 175 | } 176 | 177 | .live-search-results { 178 | opacity: 0; 179 | transition: all .3s ease-out; 180 | transform: scale(1.07) 181 | } 182 | 183 | .live-search-results--visible { 184 | opacity: 1; 185 | transform: scale(1) 186 | } 187 | 188 | .search-overlay-top { 189 | background-color: #FFF; 190 | /* background-color: rgba(0, 0, 0, .79); */ 191 | } 192 | 193 | .search-overlay-top .container { 194 | position: relative; 195 | display: flex; 196 | align-items: center; 197 | padding-top: 15px; 198 | padding-bottom: 15px; 199 | } 200 | 201 | .search-overlay-bottom { 202 | overflow: auto; 203 | } 204 | 205 | .close-live-search { 206 | font-size: 1.5rem; 207 | cursor: pointer; 208 | opacity: .75; 209 | line-height: 1; 210 | color: #292929; 211 | } 212 | 213 | @media (min-width: 700px) { 214 | .live-search-field { 215 | font-size: 2.5rem; 216 | } 217 | 218 | .close-live-search { 219 | font-size: 3rem; 220 | } 221 | 222 | .search-overlay-icon { 223 | font-size: 3rem; 224 | } 225 | } 226 | 227 | .close-live-search:hover { 228 | opacity: 1; 229 | } 230 | 231 | @-webkit-keyframes spin { 232 | 100% { 233 | -webkit-transform: rotate(360deg); 234 | transform: rotate(360deg); 235 | } 236 | } 237 | @keyframes spin { 238 | 100% { 239 | -webkit-transform: rotate(360deg); 240 | transform: rotate(360deg); 241 | } 242 | } 243 | 244 | .circle-loader { 245 | opacity: 0; 246 | transition: opacity .45s ease-out, visibility .45s ease-out; 247 | visibility: hidden; 248 | position: absolute; 249 | left: 50%; 250 | box-sizing: border-box; 251 | width: 65px; 252 | height: 65px; 253 | border-radius: 100%; 254 | border: 10px solid rgba(73, 80, 87, 0.2); 255 | border-top-color: #495057; 256 | will-change: -webkit-transform, transform; 257 | -webkit-transform: rotate(0deg); 258 | transform: rotate(0deg); 259 | -webkit-animation: spin 1s infinite linear; 260 | animation: spin 1s infinite linear; 261 | } 262 | 263 | .circle-loader--visible { 264 | visibility: visible; 265 | opacity: 1; 266 | } 267 | 268 | /* End Search Overlay */ 269 | 270 | /* Chat */ 271 | .chat-wrapper { 272 | position: fixed; 273 | z-index: 5; 274 | bottom: 0; 275 | right: 20px; 276 | width: 290px; 277 | height: 350px; 278 | background-color: #FFF; 279 | display: flex; 280 | flex-direction: column; 281 | transition: all .4s ease-in-out; 282 | opacity: 0; 283 | transform: translateY(100%) 284 | } 285 | 286 | .chat--visible { 287 | opacity: 1; 288 | transform: translateY(0) 289 | } 290 | 291 | .chat-title-bar { 292 | background-color: #292929; 293 | color: #FFF; 294 | padding: 4px 7px; 295 | display: flex; 296 | justify-content: space-between; 297 | } 298 | 299 | .chat-title-bar-close { 300 | opacity: .7; 301 | cursor: pointer; 302 | } 303 | 304 | .chat-title-bar-close:hover { 305 | opacity: 1; 306 | } 307 | 308 | .chat-log { 309 | padding: 8px; 310 | flex: 1; 311 | overflow: auto; 312 | } 313 | 314 | .chat-self, 315 | .chat-other { 316 | font-size: .75rem; 317 | display: flex; 318 | align-items: center; 319 | margin-bottom: 7px; 320 | } 321 | 322 | .chat-self { 323 | padding-left: 25%; 324 | } 325 | 326 | .chat-self .chat-avatar { 327 | margin-left: 6px; 328 | } 329 | 330 | .chat-self .chat-message { 331 | flex: 1; 332 | display: flex; 333 | justify-content: flex-end; 334 | } 335 | 336 | .chat-self .chat-message-inner { 337 | text-align: right; 338 | padding: 4px 7px; 339 | border-radius: 12px; 340 | background-color: #007bff; 341 | color: #FFF; 342 | } 343 | 344 | .chat-other { 345 | padding-right: 25%; 346 | } 347 | 348 | .chat-other .chat-avatar { 349 | margin-right: 6px; 350 | } 351 | 352 | .chat-other .chat-message { 353 | flex: 1; 354 | display: flex; 355 | justify-content: flex-start; 356 | } 357 | 358 | .chat-other .chat-message-inner { 359 | padding: 4px 7px; 360 | border-radius: 12px; 361 | background-color: #f1f0f0; 362 | } 363 | 364 | .chat-message a { 365 | color: #212529 366 | } 367 | 368 | .chat-field { 369 | width: 100%; 370 | box-sizing: border-box; 371 | padding: 10px 7px; 372 | border: none; 373 | outline: none; 374 | font-size: .75rem; 375 | } 376 | -------------------------------------------------------------------------------- /02_Complex_App/01_HTML_Templates/post.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | OurApp 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

OurApp

17 |
18 | 19 | 20 | 21 | Create Post 22 |
23 | 24 |
25 |
26 |
27 |
28 | 29 | 30 |
31 |
32 |

Example Post Title Here

33 | 34 | 35 |
36 | 37 |
38 | 39 |
40 | 41 |

42 | 43 | Posted by kittydoe on 2/3/2019

44 | 45 |
46 |

My roommate yells at me when I destroy things, but I do what I want.

47 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam praesentium laboriosam unde fuga accusamus reiciendis laudantium quis consequatur, beatae temporibus nemo, tempora voluptatum, perspiciatis accusantium ullam molestiae cupiditate incidunt architecto.

48 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam praesentium laboriosam unde fuga accusamus reiciendis laudantium quis consequatur, beatae temporibus nemo, tempora voluptatum, perspiciatis accusantium ullam molestiae cupiditate incidunt architecto.

49 |
50 | 51 |
52 | 53 | 54 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /02_Complex_App/01_HTML_Templates/profile-posts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | OurApp 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

OurApp

17 |
18 | 19 | 20 | 21 | Create Post 22 |
23 | 24 |
25 |
26 |
27 |
28 | 29 | 30 |
31 |

brad 32 |
33 | 34 | 35 |
36 |

37 | 38 |
39 | Posts: 3 40 | Followers: 3 41 | Following: 2 42 |
43 | 44 |
45 | 46 | 47 | Example Post #1 on 0/13/2019 48 | 49 | 50 | 51 | Example Post #2 on 0/13/2019 52 | 53 | 54 | 55 | Example Post #3 on 0/13/2019 56 | 57 |
58 |
59 | 60 | 61 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /02_Complex_App/01_HTML_Templates/profile-users.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | OurApp 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

OurApp

17 |
18 | 19 | 20 | 21 | Create Post 22 |
23 | 24 |
25 |
26 |
27 |
28 | 29 | 30 |
31 |

brad 32 |
33 | 34 | 35 |
36 |

37 | 38 |
39 | Posts: 3 40 | Followers: 3 41 | Following: 2 42 |
43 | 44 |
45 | 46 | User 1 47 | 48 | 49 | User 2 50 | 51 | 52 | User 3 53 | 54 |
55 |
56 | 57 | 58 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /02_Complex_App/01_HTML_Templates/search-visible.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | OurApp 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

OurApp

17 |
18 | 19 | 20 | 21 | Create Post 22 |
23 | 24 |
25 |
26 |
27 |
28 | 29 | 30 |
31 |

The Latest From Those You Follow

32 |
33 | 34 | 35 | Example Post #1 36 | by kittydoe on 1/3/2019 37 | 38 | 39 | 40 | Example Post #2 41 | by barksalot on 1/3/2019 42 | 43 | 44 | 45 | Example Post #3 46 | by kittydoe on 1/3/2019 47 | 48 | 49 | 50 | Example Post #4 51 | by barksalot 52 | on 1/3/2019 53 | 54 |
55 |
56 | 57 | 58 | 61 | 62 | 63 |
64 |
65 |
66 | 67 | 68 | 69 |
70 |
71 | 72 |
73 |
74 |
75 |
76 |
77 |
Search Results (4 items found)
78 | 79 | 80 | Example Post #1 81 | by barksalot on 0/14/2019 82 | 83 | 84 | Example Post #2 85 | by brad on 0/12/2019 86 | 87 | 88 | Example Post #3 89 | by barksalot on 0/14/2019 90 | 91 | 92 | Example Post #4 93 | by brad on 0/12/2019 94 | 95 |
96 |
97 |
98 |
99 |
100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /02_Complex_App/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './frontend-js/main.js', 6 | output: { 7 | filename: 'main-bundled.js', 8 | path: path.resolve(__dirname, 'public') 9 | }, 10 | mode: "production", 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.js$/, 15 | exclude: /node_modules/, 16 | use: { 17 | loader: 'babel-loader', 18 | options: { 19 | presets: ['@babel/preset-env'] 20 | } 21 | } 22 | } 23 | ] 24 | } 25 | } --------------------------------------------------------------------------------