├── .gitignore ├── README.md ├── app ├── app.js ├── data │ ├── data.json │ └── feedback.json ├── public │ ├── css │ │ └── style.css │ ├── images │ │ ├── artwork │ │ │ ├── Hillary_Goldwynn_01.jpg │ │ │ ├── Hillary_Goldwynn_01_tn.jpg │ │ │ ├── Hillary_Goldwynn_02.jpg │ │ │ ├── Hillary_Goldwynn_02_tn.jpg │ │ │ ├── Hillary_Goldwynn_03.jpg │ │ │ ├── Hillary_Goldwynn_03_tn.jpg │ │ │ ├── Hillary_Goldwynn_04.jpg │ │ │ ├── Hillary_Goldwynn_04_tn.jpg │ │ │ ├── Hillary_Goldwynn_05.jpg │ │ │ ├── Hillary_Goldwynn_05_tn.jpg │ │ │ ├── Hillary_Goldwynn_06.jpg │ │ │ ├── Hillary_Goldwynn_06_tn.jpg │ │ │ ├── Hillary_Goldwynn_07.jpg │ │ │ ├── Hillary_Goldwynn_07_tn.jpg │ │ │ ├── Lorenzo_Garcia_01.jpg │ │ │ ├── Lorenzo_Garcia_01_tn.jpg │ │ │ ├── Lorenzo_Garcia_02.jpg │ │ │ ├── Lorenzo_Garcia_02_tn.jpg │ │ │ ├── Lorenzo_Garcia_03.jpg │ │ │ ├── Lorenzo_Garcia_03_tn.jpg │ │ │ ├── Lorenzo_Garcia_04.jpg │ │ │ ├── Lorenzo_Garcia_04_tn.jpg │ │ │ ├── Riley_Rewington_01.jpg │ │ │ ├── Riley_Rewington_01_tn.jpg │ │ │ ├── Riley_Rewington_02.jpg │ │ │ ├── Riley_Rewington_02_tn.jpg │ │ │ ├── Riley_Rewington_03.jpg │ │ │ ├── Riley_Rewington_03_tn.jpg │ │ │ ├── Riley_Rewington_04.jpg │ │ │ ├── Riley_Rewington_04_tn.jpg │ │ │ ├── Riley_Rewington_05.jpg │ │ │ ├── Riley_Rewington_05_tn.jpg │ │ │ ├── Riley_Rewington_06.jpg │ │ │ └── Riley_Rewington_06_tn.jpg │ │ ├── misc │ │ │ └── background.jpg │ │ └── speakers │ │ │ ├── Hillary_Goldwynn.jpg │ │ │ ├── Hillary_Goldwynn_tn.jpg │ │ │ ├── Lorenzo_Garcia.jpg │ │ │ ├── Lorenzo_Garcia_tn.jpg │ │ │ ├── Riley_Rewington.jpg │ │ │ └── Riley_Rewington_tn.jpg │ └── js │ │ ├── chat.js │ │ ├── feedback.js │ │ └── pixgrid.js ├── routes │ ├── api.js │ ├── chat.js │ ├── feedback.js │ ├── index.js │ └── speakers.js └── views │ ├── chat.ejs │ ├── feedback.ejs │ ├── index.ejs │ ├── partials │ ├── content │ │ ├── artworklist.ejs │ │ ├── maincontent.ejs │ │ ├── speakerslist.ejs │ │ └── whoshouldcome.ejs │ └── template │ │ ├── head.ejs │ │ ├── header.ejs │ │ └── jsdefaults.ejs │ └── speakers.ejs ├── hero.jpg └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .tmp 4 | .jshintrc 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Building a Website with Node.js and Express.js 2 | This is the repository for my course Building a Website with Node.js and Express.js. The full course is available on [LinkedIn Learning](https://www.linkedin.com/learning/building-a-website-with-node-js-and-express-js?trk=insiders_6787408_learning) and [Lynda.com](https://www.lynda.com/Express-js-tutorials/Building-Website-Node-js-Express-js/502310-2.html) 3 | 4 | [![Building a Website with Node.js and Express.js](https://media-exp2.licdn.com/media-proxy/ext?w=1200&h=675&f=n&hash=e1P0u0YoBCeiMKFIjsJVxCTwgbU%3D&ora=1%2CaFBCTXdkRmpGL2lvQUFBPQ%2CxAVta5g-0R6plxVUzgUv5K_PrkC9q0RIUJDPBy-kWyep-9WfZXfresbfZLSiol8TeCwAkgExfeuoQzTjFI69LcLmY4Yx3A)](https://www.linkedin.com/learning/building-a-website-with-node-js-and-express-js) 5 | 6 | Interested in building JavaScript websites that do more? Node.js and Express.js are a perfect match. Express is a fast, minimalist framework that sits on top of Node.js and allows you to build powerful single- and multi-page web applications and websites. 7 | 8 | In this course, Ray Villalobos walks through the process of creating full-featured websites with these technologies. First, find out how to install each package and leverage Node.js features from within Express. Then learn how to build a basic application with templating engines like EJS; create more flexible, modular code with includes and conditional statements; build APIs to manage HTTP requests to add and delete content dynamically; and configure more complex routing. Along the way, Ray implements features like customer feedback forms and real-time live chat, so you can see exactly what Node.js and Express are capable of. 9 | ## Instructions 10 | This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage. Or you can simply add `/tree/BRANCH_NAME` to the URL to go to the branch you want to peek at. 11 | 12 | ## Branches 13 | The branches are structured so that they correspond to the videos in the course. So, for example if I name a branch `02_03b` then that branch corresponds to the second chapter and the third video in that chapter. The extra letter at the end of the name corresponds to the state of the branch. A `b` means that this is how the code looks at the beginning of the video, an `e` means that is how the code looked at the end of the video. 14 | 15 | You may find additional branches that correspond to other states, so for example, you may see a `t`, which means this is a target branch. A target branch is something I use during development or updates of a course and it's for a branch that I'm working towards. For the purposes of taking a course, you may ignore any additional branches. The `master` branch usually has the state of the project as I'm working through it and the final state of the code when I finish the course. 16 | 17 | ## Installing 18 | 1. Make sure you have these installed 19 | - [node.js](http://nodejs.org/) 20 | - [git](http://git-scm.com/) 21 | 2. Clone this repository into your local machine using the terminal (mac) or Gitbash (PC) `> git clone CLONEURL` 22 | 3. CD to the folder `cd FOLDERNAME` 23 | Run `> npm install -g nodemon` to install nodemod globally 24 | Run `> npm install` to install the project dependencies 25 | Run `> npm start` command to start the automation 26 | 27 | ## More Stuff 28 | Check out some of my other courses on [LinkedIn Learning](https://www.linkedin.com/learning/instructors/ray-villalobos?trk=insiders_6787408_learning) and [lynda.com](http://lynda.com/rayvillalobos). You can follow me on [LinkedIn](https://www.linkedin.com/in/planetoftheweb/), read [my blog](http://raybo.org), [follow me on twitter](http://twitter.com/planetoftheweb), or check out my [youtube channel](http://youtube.com/planetoftheweb). 29 | -------------------------------------------------------------------------------- /app/app.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var reload = require('reload'); 3 | var app = express(); 4 | var dataFile = require('./data/data.json'); 5 | var io = require('socket.io')(); 6 | 7 | app.set('port', process.env.PORT || 3000 ); 8 | app.set('appData', dataFile); 9 | app.set('view engine', 'ejs'); 10 | app.set('views', 'app/views'); 11 | 12 | app.locals.siteTitle = 'Roux Meetups'; 13 | app.locals.allSpeakers = dataFile.speakers; 14 | 15 | app.use(express.static('app/public')); 16 | app.use(require('./routes/index')); 17 | app.use(require('./routes/speakers')); 18 | app.use(require('./routes/feedback')); 19 | app.use(require('./routes/api')); 20 | app.use(require('./routes/chat')); 21 | 22 | var server = app.listen(app.get('port'), function() { 23 | console.log('Listening on port ' + app.get('port')); 24 | }); 25 | 26 | io.attach(server); 27 | io.on('connection', function(socket) { 28 | socket.on('postMessage', function(data) { 29 | io.emit('updateMessages', data); 30 | }); 31 | }); 32 | 33 | reload(server, app); 34 | -------------------------------------------------------------------------------- /app/data/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "speakers": [{ 3 | "title" : "Art in Full Bloom", 4 | "name": "Lorenzo Garcia", 5 | "shortname" : "Lorenzo_Garcia", 6 | "summary" : "Drawing and painting flowers may seem like a first-year art student's assignment, but Lorenzo Garcia brings depth, shadows, light, form and color to new heights with his unique and revolutionary technique of painting on canvas with ceramic glaze. This session is sure to be a hit with mixed media buffs.", 7 | "description": "

Lorenzo was born in Mexico, but grew up in Southern California after his mother immigrated to Los Angeles when he was a year old. His mother worked as a seamstress in the Fashion District and brought home scrap materials for Lorenzo to create his early mixed media art. From that point on, Lorenzo became hooked on creating art from scrap metals, fabrics, wood, canvas, and many others. During his junior year at Bischon Art School in Los Angeles, he perfected his own proprietary method of painting on canvas with ceramic glaze, which he will demonstrate on Monday in his session, 'Art in Full Bloom'.

Lorenzo paints with an extraordinary amount of color, and prefers to create art centered around nature, animals, and science. Now in his senior year at Bischon, Lorenzo has been creating mixed media totem poles made from old telephone poles, and other recycled materials, and is already planning his next new technique that will likely inspire a trend for years to come.

", 8 | "artwork": ["Lorenzo_Garcia_01_tn.jpg", "Lorenzo_Garcia_02_tn.jpg", "Lorenzo_Garcia_03_tn.jpg", "Lorenzo_Garcia_04_tn.jpg"] 9 | },{ 10 | "title" : "Deep Sea Wonders", 11 | "name": "Hilary Goldywynn Post", 12 | "shortname" : "Hillary_Goldwynn", 13 | "summary": "Hillary is a sophomore art sculpture student at New York University, and has won the major international prizes for painters, including the Divinity Circle and the International Painter's Medal. Hillary's exhibit features paintings that contain only water including waves, deep sea, and river.", 14 | "description": "

Hillary is a sophomore art sculpture student at New York University, and has already won all the major international prizes for new painters, including the Divinity Circle, the International Painter's Medal, and the Academy of Paris Award. Hillary's CAC exhibit features paintings that contain only water images including waves, deep sea, and river.

An avid water sports participant, Hillary understands the water in many ways in which others do not, or may not ever have the opportunity. Her goal in creating the CAC exhibit was to share with others the beauty, power, and flow of natural bodies of water throughout the world. In addition to the display, Hilary also hosts a session on Tuesday called Deep Sea Wonders, which combines her love of deep sea diving and snorkeling, with instruction for capturing the beauty of underwater explorations on canvas.

", 15 | "artwork" : ["Hillary_Goldwynn_01_tn.jpg" , "Hillary_Goldwynn_02_tn.jpg" , "Hillary_Goldwynn_03_tn.jpg" , "Hillary_Goldwynn_04_tn.jpg" , "Hillary_Goldwynn_05_tn.jpg" , "Hillary_Goldwynn_06_tn.jpg" , "Hillary_Goldwynn_07_tn.jpg"] 16 | },{ 17 | "title" : "The Art of Abstract", 18 | "name": "Riley Rudolph Rewington", 19 | "shortname" : "Riley_Rewington", 20 | "summary": "The leader of the MMA artistic movement in his hometown of Portland, Riley Rudolph Rewington draws a crowd wherever he goes. Mixing street performance, video, music, and traditional art, Riley has created some of the most unique and deeply poignant abstract works of his generation.", 21 | "description": "

Riley started out as musician and street performance artist, and now blends painting and photography with audio, video, and computer multimedia to create what he calls 'Music and Multimedia Artworks.' Riley's innovations in using multimedia to express art have created a youth culture movement in his town of Portland, in which he remains at the forefront. In his role as the founder of the MMA art form, Riley has become an inspiration to many up and coming artists. However, the part Riley insists is most important to him, is that he's helped many troubled youth take control of their lives, and create their own unique, positive futures. Seeing kids he's mentored graduate from high school and enroll in college, gives art the purpose that Riley so craves.

A first-year student at the Roux Academy of Art, Media, and Design, Riley is already changing the face of modern art at the university. Riley's exquisite abstract pieces have no intention of ever being understood, but instead beg the viewer to dream, create, pretend, and envision with their mind's eye. Riley will be speaking on the 'Art of Abstract' during Thursday's schedule.

", 22 | "artwork" : ["Riley_Rewington_01_tn.jpg","Riley_Rewington_02_tn.jpg","Riley_Rewington_03_tn.jpg","Riley_Rewington_04_tn.jpg","Riley_Rewington_05_tn.jpg","Riley_Rewington_06_tn.jpg"] 23 | }] 24 | } 25 | -------------------------------------------------------------------------------- /app/data/feedback.json: -------------------------------------------------------------------------------- 1 | [{"name":"Awesome","title":"Best Meetup Ever","message":"I really love this meetup. Please don't let it end."},{"name":"Jane","title":"Meeting Time","message":"Would you consider moving the meeting time 30 minutes to about 6pm. It's tough to make it to the meetings on time right after work."},{"name":"Roy","title":"Great Speaker","message":"I really enjoyed the speaker this month. Would love to hear another presentation."}] -------------------------------------------------------------------------------- /app/public/css/style.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Roboto:100, 300); 2 | 3 | body { 4 | margin: 0; 5 | padding: 0; 6 | font-size: 16px; 7 | } 8 | 9 | h1, h2, h3, h4, h5, h6 { 10 | font-family: 'Roboto', sans-serif; 11 | font-weight: 300; 12 | color: #C1343F; 13 | } 14 | 15 | p { 16 | font-family: inherit; 17 | font-weight: 100; 18 | } 19 | 20 | 21 | li { 22 | font-family: inherit; 23 | font-weight: 100; 24 | } 25 | 26 | 27 | a { 28 | color: #DD4F53; 29 | } 30 | 31 | /** Header Navigation **/ 32 | 33 | header { 34 | font-size: 2rem; 35 | } 36 | 37 | header .jumbotron { 38 | height: 40vh; 39 | margin-bottom: 0; 40 | background: url(../images/misc/background.jpg) no-repeat 100% 5%; 41 | -webkit-background-size: cover; 42 | -moz-background-size: cover; 43 | -o-background-size: cover; 44 | background-size: cover; 45 | } 46 | 47 | /** Navbar **/ 48 | 49 | header .navbar { 50 | background: #CF5565; 51 | margin-bottom: 0; 52 | border-radius: 0; 53 | font-family: "Roboto", sans-serif; 54 | font-weight: 100; 55 | } 56 | 57 | header .navbar-default { 58 | border: none; 59 | border-radius: 0; 60 | padding: 10px 0; 61 | } 62 | 63 | .navbar-inverse { 64 | border: 0; 65 | } 66 | 67 | 68 | header .navbar-brand { 69 | font-family: 'Roboto', sans-serif; 70 | font-size: 1.3em; 71 | font-weight: 300; 72 | } 73 | 74 | header .navbar-inverse .navbar-brand { 75 | color: white; 76 | } 77 | 78 | header .navbar-inverse .navbar-nav>li>a { 79 | color: white; 80 | } 81 | 82 | .maincontent { 83 | font-family: 'Roboto', sans-serif; 84 | font-size: 1.8rem; 85 | line-height: 160%; 86 | } 87 | 88 | .sidebar { 89 | font-family: 'Roboto', sans-serif; 90 | font-size: 1.8rem; 91 | line-height: 130%; 92 | } 93 | 94 | .sidebar .sidebar-title { 95 | font-size: 1.5em; 96 | } 97 | 98 | .sidebar .sidebar-body li { 99 | margin-bottom: 10px; 100 | } 101 | 102 | @media (max-width: 768px) { 103 | .sidebar { 104 | line-height: 160%; 105 | } 106 | .sidebar .sidebar-title { 107 | font-size: 2em; 108 | } 109 | } 110 | 111 | .speakerslist { 112 | font-family: 'Roboto', sans-serif; 113 | font-size: 1.8rem; 114 | line-height: 160%; 115 | } 116 | 117 | #speakerList .speakerslist-img { 118 | margin-right: 20px; 119 | } 120 | 121 | .speakerslist-title { 122 | font-size: 1.7em; 123 | } 124 | 125 | #home .speakerslist-title { 126 | font-size: 1.5em; 127 | } 128 | 129 | #speakerDetail .speakerslist-title { 130 | font-size: 2.4em; 131 | } 132 | 133 | #speakerDetail .speakerslist-img { 134 | margin: 20px 0; 135 | } 136 | 137 | .form-control { 138 | font-weight: 100; 139 | font-size: 1.7rem; 140 | } 141 | 142 | .chat-form { 143 | margin-top: 20px; 144 | font-family: "Roboto", sans-serif; 145 | font-size: 1.5rem; 146 | } 147 | 148 | .jumbotron { 149 | padding: 20px 0; 150 | background-color: #FFEB8B; 151 | } 152 | 153 | /** chat-display **/ 154 | 155 | .chat-display { 156 | min-height: 150px; 157 | max-height: 40vh; 158 | overflow: scroll; 159 | font-size: 1.2em; 160 | } 161 | 162 | .chat-display p { 163 | font-size: .9em; 164 | padding: 0 10px; 165 | } 166 | 167 | .feedback, .feedback-form-title { 168 | font-size: 2rem; 169 | } 170 | 171 | .feedback-form { 172 | margin-top: 20px; 173 | font-family: "Roboto", sans-serif; 174 | font-size: 1.5rem; 175 | } 176 | 177 | 178 | .feedback-title { 179 | font-size: 1.2em; 180 | } 181 | 182 | .feedback-form-title { 183 | font-size: 2em; 184 | } 185 | 186 | .feedback-name { 187 | font-size: .6em; 188 | font-weight: 100; 189 | } 190 | 191 | .feedback-message { 192 | font-weight: 100; 193 | font-size: .9em; 194 | line-height: 120%; 195 | margin-top: 5px; 196 | } 197 | 198 | .feedback-item { 199 | border-bottom: 1px solid gray; 200 | padding: 8px 0; 201 | } 202 | 203 | .feedback-item:last-of-type { 204 | border-bottom: none; 205 | } 206 | 207 | 208 | /** pixgrid **/ 209 | 210 | .pixgrid { 211 | cursor: pointer; 212 | margin-top: 20px; 213 | } 214 | 215 | .pixgrid img { 216 | display: block; 217 | padding: 5px; 218 | float: left; 219 | width: 33.33%; 220 | border-radius: 10px; 221 | } 222 | 223 | @media (min-width: 500px) and (max-width: 768px) { 224 | .pixgrid img { 225 | width: 20%; 226 | } 227 | } 228 | -------------------------------------------------------------------------------- /app/public/images/artwork/Hillary_Goldwynn_01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Hillary_Goldwynn_01.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Hillary_Goldwynn_01_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Hillary_Goldwynn_01_tn.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Hillary_Goldwynn_02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Hillary_Goldwynn_02.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Hillary_Goldwynn_02_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Hillary_Goldwynn_02_tn.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Hillary_Goldwynn_03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Hillary_Goldwynn_03.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Hillary_Goldwynn_03_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Hillary_Goldwynn_03_tn.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Hillary_Goldwynn_04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Hillary_Goldwynn_04.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Hillary_Goldwynn_04_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Hillary_Goldwynn_04_tn.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Hillary_Goldwynn_05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Hillary_Goldwynn_05.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Hillary_Goldwynn_05_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Hillary_Goldwynn_05_tn.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Hillary_Goldwynn_06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Hillary_Goldwynn_06.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Hillary_Goldwynn_06_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Hillary_Goldwynn_06_tn.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Hillary_Goldwynn_07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Hillary_Goldwynn_07.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Hillary_Goldwynn_07_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Hillary_Goldwynn_07_tn.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Lorenzo_Garcia_01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Lorenzo_Garcia_01.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Lorenzo_Garcia_01_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Lorenzo_Garcia_01_tn.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Lorenzo_Garcia_02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Lorenzo_Garcia_02.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Lorenzo_Garcia_02_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Lorenzo_Garcia_02_tn.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Lorenzo_Garcia_03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Lorenzo_Garcia_03.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Lorenzo_Garcia_03_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Lorenzo_Garcia_03_tn.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Lorenzo_Garcia_04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Lorenzo_Garcia_04.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Lorenzo_Garcia_04_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Lorenzo_Garcia_04_tn.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Riley_Rewington_01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Riley_Rewington_01.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Riley_Rewington_01_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Riley_Rewington_01_tn.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Riley_Rewington_02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Riley_Rewington_02.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Riley_Rewington_02_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Riley_Rewington_02_tn.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Riley_Rewington_03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Riley_Rewington_03.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Riley_Rewington_03_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Riley_Rewington_03_tn.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Riley_Rewington_04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Riley_Rewington_04.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Riley_Rewington_04_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Riley_Rewington_04_tn.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Riley_Rewington_05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Riley_Rewington_05.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Riley_Rewington_05_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Riley_Rewington_05_tn.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Riley_Rewington_06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Riley_Rewington_06.jpg -------------------------------------------------------------------------------- /app/public/images/artwork/Riley_Rewington_06_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/artwork/Riley_Rewington_06_tn.jpg -------------------------------------------------------------------------------- /app/public/images/misc/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/misc/background.jpg -------------------------------------------------------------------------------- /app/public/images/speakers/Hillary_Goldwynn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/speakers/Hillary_Goldwynn.jpg -------------------------------------------------------------------------------- /app/public/images/speakers/Hillary_Goldwynn_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/speakers/Hillary_Goldwynn_tn.jpg -------------------------------------------------------------------------------- /app/public/images/speakers/Lorenzo_Garcia.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/speakers/Lorenzo_Garcia.jpg -------------------------------------------------------------------------------- /app/public/images/speakers/Lorenzo_Garcia_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/speakers/Lorenzo_Garcia_tn.jpg -------------------------------------------------------------------------------- /app/public/images/speakers/Riley_Rewington.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/speakers/Riley_Rewington.jpg -------------------------------------------------------------------------------- /app/public/images/speakers/Riley_Rewington_tn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/app/public/images/speakers/Riley_Rewington_tn.jpg -------------------------------------------------------------------------------- /app/public/js/chat.js: -------------------------------------------------------------------------------- 1 | var socket = io(); 2 | var chatUsername = document.querySelector('#chat-username'); 3 | var chatMessage = document.querySelector('#chat-message'); 4 | 5 | socket.on('connect', function() { 6 | var chatForm = document.forms.chatForm; 7 | 8 | if (chatForm) { 9 | chatForm.addEventListener('submit', function(e) { 10 | e.preventDefault(); 11 | socket.emit('postMessage',{ 12 | username: chatUsername.value, 13 | message: chatMessage.value, 14 | }); 15 | chatMessage.value=''; 16 | chatMessage.focus(); 17 | }); //chatform event 18 | 19 | socket.on('updateMessages', function(data) { 20 | showMessage(data); 21 | }); //updateMessages 22 | } //chatform 23 | }); //socket 24 | 25 | function showMessage(data) { 26 | var chatDisplay = document.querySelector('.chat-display'); 27 | var newMessage = document.createElement('p'); 28 | 29 | if (chatUsername.value == data.username) { 30 | newMessage.className = 'bg-success chat-text'; 31 | } else { 32 | newMessage.className = 'bg-info text-warning chat-text'; 33 | } 34 | 35 | newMessage.innerHTML = '' + data.username + ': ' + data.message; 36 | chatDisplay.insertBefore(newMessage, chatDisplay.firstChild); 37 | } 38 | -------------------------------------------------------------------------------- /app/public/js/feedback.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | $.getJSON('api', updateFeedback); 3 | 4 | $('.feedback-form').submit(function(e) { 5 | e.preventDefault(); 6 | $.post('api', { 7 | name: $('#feedback-form-name').val(), 8 | title: $('#feedback-form-title').val(), 9 | message: $('#feedback-form-message').val() 10 | }, updateFeedback); 11 | }); 12 | 13 | $('.feedback-messages').on('click', function(e) { 14 | if (e.target.className == 'glyphicon glyphicon-remove') { 15 | $.ajax({ 16 | url: 'api/' + e.target.id, 17 | type: 'DELETE', 18 | success: updateFeedback 19 | }); //ajax 20 | } // the target is a delete button 21 | }); //feedback messages 22 | 23 | function updateFeedback(data) { 24 | var output = ''; 25 | $.each(data,function(key, item) { 26 | output += '
'; 27 | output += '
'; 28 | output += '
'; 29 | output += ' '; 35 | output += '
'; 36 | output += '
'; 37 | }); 38 | $('.feedback-messages').html(output); 39 | } 40 | }); 41 | -------------------------------------------------------------------------------- /app/public/js/pixgrid.js: -------------------------------------------------------------------------------- 1 | var pixGrid = function() { 2 | function centerImage(theImage) { 3 | var myDifX = (window.innerWidth - theImage.width) / 2, myDifY = (window.innerHeight - theImage.height) / 2; 4 | return theImage.style.top = myDifY + "px", theImage.style.left = myDifX + "px", 5 | theImage; 6 | } 7 | var myNode = document.querySelector(".pixgrid"); 8 | myNode.addEventListener("click", function(e) { 9 | if ("IMG" === e.target.tagName) { 10 | var myOverlay = document.createElement("div"); 11 | myOverlay.id = "overlay", document.body.appendChild(myOverlay), myOverlay.style.position = "absolute", 12 | myOverlay.style.top = 0, myOverlay.style.backgroundColor = "rgba(0,0,0,0.7)", myOverlay.style.cursor = "pointer", 13 | myOverlay.style.width = window.innerWidth + "px", myOverlay.style.height = window.innerHeight + "px", 14 | myOverlay.style.top = window.pageYOffset + "px", myOverlay.style.left = window.pageXOffset + "px"; 15 | var imageSrc = e.target.src, largeImage = document.createElement("img"); 16 | largeImage.id = "largeImage", largeImage.src = imageSrc.substr(0, imageSrc.length - 7) + ".jpg", 17 | largeImage.style.display = "block", largeImage.style.position = "absolute", largeImage.addEventListener("load", function() { 18 | this.height > window.innerHeight && (this.ratio = window.innerHeight / this.height, 19 | this.height = this.height * this.ratio, this.width = this.width * this.ratio), this.width > window.innerWidth && (this.ratio = window.innerWidth / this.width, 20 | this.height = this.height * this.ratio, this.width = this.width * this.ratio), centerImage(this), 21 | myOverlay.appendChild(largeImage); 22 | }), largeImage.addEventListener("click", function() { 23 | myOverlay && (window.removeEventListener("resize", window, !1), window.removeEventListener("scroll", window, !1), 24 | myOverlay.parentNode.removeChild(myOverlay)); 25 | }, !1), window.addEventListener("scroll", function() { 26 | myOverlay && (myOverlay.style.top = window.pageYOffset + "px", myOverlay.style.left = window.pageXOffset + "px"); 27 | }, !1), window.addEventListener("resize", function() { 28 | myOverlay && (myOverlay.style.width = window.innerWidth + "px", myOverlay.style.height = window.innerHeight + "px", 29 | myOverlay.style.top = window.pageYOffset + "px", myOverlay.style.left = window.pageXOffset + "px", 30 | centerImage(largeImage)); 31 | }, !1); 32 | } 33 | }, !1); 34 | }(); -------------------------------------------------------------------------------- /app/routes/api.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | var bodyParser = require('body-parser'); 4 | var fs = require('fs'); 5 | var feedbackData = require('../data/feedback.json'); 6 | 7 | router.get('/api', function(req, res) { 8 | res.json(feedbackData); 9 | }); 10 | 11 | router.use(bodyParser.json()); 12 | router.use(bodyParser.urlencoded({ extended: false })); 13 | 14 | router.post('/api', function(req, res) { 15 | feedbackData.unshift(req.body); 16 | fs.writeFile('app/data/feedback.json', JSON.stringify(feedbackData), 'utf8', function(err) { 17 | if (err) { 18 | console.log(err); 19 | } 20 | }); 21 | res.json(feedbackData); 22 | }); 23 | 24 | 25 | router.delete('/api/:id', function(req, res) { 26 | feedbackData.splice(req.params.id, 1); 27 | fs.writeFile('app/data/feedback.json', JSON.stringify(feedbackData), 'utf8', function(err) { 28 | if (err) { 29 | console.log(err); 30 | } 31 | }); 32 | res.json(feedbackData); 33 | }); 34 | 35 | 36 | 37 | module.exports = router; 38 | -------------------------------------------------------------------------------- /app/routes/chat.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | 4 | router.get('/chat', function(req, res) { 5 | 6 | res.render('chat', { 7 | pageTitle: 'Chat', 8 | pageID: 'chat' 9 | }); 10 | 11 | }); 12 | 13 | module.exports = router; 14 | -------------------------------------------------------------------------------- /app/routes/feedback.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | 4 | router.get('/feedback', function(req, res) { 5 | 6 | res.render('feedback', { 7 | pageTitle: 'Feedback', 8 | pageID: 'feedback' 9 | }); 10 | 11 | }); 12 | 13 | module.exports = router; 14 | -------------------------------------------------------------------------------- /app/routes/index.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | 4 | router.get('/', function(req, res) { 5 | var data = req.app.get('appData'); 6 | var pagePhotos = []; 7 | var pageSpeakers = data.speakers; 8 | 9 | data.speakers.forEach(function(item) { 10 | pagePhotos = pagePhotos.concat(item.artwork); 11 | }); 12 | 13 | res.render('index', { 14 | pageTitle: 'Home', 15 | artwork: pagePhotos, 16 | speakers: pageSpeakers, 17 | pageID: 'home' 18 | }); 19 | 20 | }); 21 | 22 | module.exports = router; 23 | -------------------------------------------------------------------------------- /app/routes/speakers.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | 4 | router.get('/speakers', function(req, res) { 5 | var data = req.app.get('appData'); 6 | var pagePhotos = []; 7 | var pageSpeakers = data.speakers; 8 | 9 | data.speakers.forEach(function(item) { 10 | pagePhotos = pagePhotos.concat(item.artwork); 11 | }); 12 | 13 | res.render('speakers', { 14 | pageTitle: 'Speakers', 15 | artwork: pagePhotos, 16 | speakers: pageSpeakers, 17 | pageID: 'speakerList' 18 | }); 19 | }); 20 | 21 | router.get('/speakers/:speakerid', function(req, res) { 22 | var data = req.app.get('appData'); 23 | var pagePhotos = []; 24 | var pageSpeakers = []; 25 | 26 | data.speakers.forEach(function(item) { 27 | if (item.shortname == req.params.speakerid) { 28 | pageSpeakers.push(item); 29 | pagePhotos = pagePhotos.concat(item.artwork); 30 | } 31 | }); 32 | 33 | res.render('speakers', { 34 | pageTitle: 'Speaker Info', 35 | artwork: pagePhotos, 36 | speakers: pageSpeakers, 37 | pageID: 'speakerDetail' 38 | }); 39 | }); 40 | 41 | module.exports = router; 42 | -------------------------------------------------------------------------------- /app/views/chat.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | <% include partials/template/head.ejs %> 4 | 5 | <% include partials/template/header.ejs %> 6 |
7 |
8 |
9 |
10 |
11 |
Roux Chat 12 |
13 |
14 |
15 |
16 | 17 |
18 | 19 |
20 |
21 |
22 | 23 |
24 |
25 | 27 | 28 | 29 | 30 |
31 |
32 |
33 |
34 |
35 |
36 |

Welcome...add your message using the form above

37 |
38 |
39 |
40 |
41 |
42 |
43 | <% include partials/template/jsdefaults.ejs %> 44 | 45 | 46 | -------------------------------------------------------------------------------- /app/views/feedback.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | <% include partials/template/head.ejs %> 4 | 5 | <% include partials/template/header.ejs %> 6 |
7 |
8 |
9 |

Send us feedback

10 | 27 |
28 | 34 |
35 |
36 | <% include partials/template/jsdefaults.ejs %> 37 | 38 | 39 | -------------------------------------------------------------------------------- /app/views/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | <% include partials/template/head.ejs %> 4 | 5 | <% include partials/template/header.ejs %> 6 | <% include partials/content/speakerslist.ejs %> 7 |
8 |
9 |
10 | <% include partials/content/maincontent.ejs %> 11 |
12 | 16 |
17 |
18 | <% include partials/template/jsdefaults.ejs %> 19 | 20 | 21 | -------------------------------------------------------------------------------- /app/views/partials/content/artworklist.ejs: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /app/views/partials/content/maincontent.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Who are we?

4 |

The Roux Academy gets thousands of submissions every year for artists interesting in participating in the CAC exhibits, and selects approximately 200 distinct pieces of contemporary art for display in their collective exhibit. In addition, 12 individuals are honored as Featured Artists - each being granted his or her own exhibit hall to display entire collections or themed pieces.

5 |

Each Featured Artist has an opportunity to speak at one of our meetups and share his or her vision, perspective, and techniques with attendees on a more personal level than at our large conference. It is truly an honor to be a CAC Featured Artist and many past students artists who were featured at CAC have gone on to brilliant careers in art.

6 |
7 | 8 |
9 |

Get Busy!

10 |

If you want to keep up with what's going on with the group, join our meetup group, follow us on twitter. If you're in FaceBook, you can also join our FaceBook group.

11 |
12 | 13 |
14 |

Who should come?

15 | 20 |
21 |
22 | -------------------------------------------------------------------------------- /app/views/partials/content/speakerslist.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | <% speakers.forEach(function(item) { %> 5 |
6 |

<%= item.title %>

7 |
with <%= item.name %>
8 |

9 | 10 | 11 | <% if (pageID == 'home') { %> 12 | Photo of <%= item.name %> 13 | <% } %> 14 | 15 | <% if (pageID == 'speakerList') { %> 16 | Photo of <%= item.name %> 17 | <% } %> 18 | 19 | 20 | <% if (pageID == 'speakerDetail') { %> 21 | Photo of <%= item.name %> 22 | <% } %> 23 | 24 | 25 | <% if (pageID !== 'home') { %> 26 | <% if (pageID == 'speakerList') { %> 27 | <%= item.summary %> 28 | <% } else { %> 29 | <%- item.description %> 30 | <% } %> 31 | <% } %> 32 |

33 |
34 | <% }); %> 35 |
36 |
37 |
38 | -------------------------------------------------------------------------------- /app/views/partials/content/whoshouldcome.ejs: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /app/views/partials/template/head.ejs: -------------------------------------------------------------------------------- 1 | <%= siteTitle %>--<%= pageTitle %> 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /app/views/partials/template/header.ejs: -------------------------------------------------------------------------------- 1 |
2 | 4 | 5 | 36 |
37 | -------------------------------------------------------------------------------- /app/views/partials/template/jsdefaults.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <% if(typeof artwork !== "undefined") { %> 5 | 6 | <% } %> 7 | 8 | <% if(pageID == 'feedback') { %> 9 | 10 | <% } %> 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /app/views/speakers.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | <% include partials/template/head.ejs %> 4 | 5 | <% include partials/template/header.ejs %> 6 |
7 |
8 |
9 | <% include partials/content/speakerslist.ejs %> 10 |
11 | 14 |
15 |
16 | <% include partials/template/jsdefaults.ejs %> 17 | 18 | 19 | -------------------------------------------------------------------------------- /hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/planetoftheweb/expressjs/15b25cd5dd0604fdaa908e8958367db46b1a5552/hero.jpg -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "expressjs", 3 | "version": "1.0.0", 4 | "description": "Files for my Building a Website with Node & ExpressJS course on Lynda.com", 5 | "main": "app/app.js", 6 | "scripts": { 7 | "start": "nodemon -e css,ejs,js,json --watch app --ignore feedback.json" 8 | }, 9 | "author": "Ray Villalobos", 10 | "license": "MIT", 11 | "dependencies": { 12 | "body-parser": "^1.15.2", 13 | "ejs": "^2.4.2", 14 | "express": "^4.14.0", 15 | "reload": "^1.0.0", 16 | "socket.io": "^1.4.8" 17 | } 18 | } 19 | --------------------------------------------------------------------------------