BCN-FT-DanielDuque

app.js

@@ -4,39 +4,44 @@ const path = require('path');
 const cookieParser = require('cookie-parser');
 const logger = require('morgan');
 const hbs = require('hbs');
-
-// require spotify-web-api-node package here:
-
+const hbsutils = require('hbs-utils')(hbs); // Load hbs-utils (watches partials for nodemon)
 const indexRouter = require('./routes/index');
+const app = express();
 
- const app = express();
-
- // view engine setup
+// View engine setup
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'hbs');
 
- app.use(logger('dev'));
+// Initialize hbs-util
+hbsutils.registerPartials(__dirname + '/views/partials');
+hbsutils.registerWatchedPartials(__dirname + '/views/partials');
+
+app.use(logger('dev'));
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));
+app.use('/', indexRouter);
 
- app.use('/', indexRouter);
-
- // catch 404 and forward to error handler
+// Catch 404 and forward to error handler
 app.use((req, res, next) => {
   next(createError(404));
 });
 
- // error handler
+// Error handler
 app.use((err, req, res, next) => {
   // set locals, only providing error in development
   res.locals.message = err.message;
   res.locals.error = req.app.get('env') === 'development' ? err : {};
 
-   // render the error page
+  // Render the error page
   res.status(err.status || 500);
   res.render('error');
 });
 
- module.exports = app;
+ module.exports = app;
+
+ // Start server in port 3000
+ app.listen(3000, () => {
+   console.log('Server listening on port 3000')
+ });

package.json

@@ -11,6 +11,7 @@
     "debug": "~2.6.9",
     "express": "~4.16.0",
     "hbs": "~4.0.1",
+    "hbs-utils": "0.0.4",
     "http-errors": "~1.6.2",
     "morgan": "~1.9.0",
     "spotify-web-api-js": "^1.2.0",

public/stylesheets/style.css

@@ -1,90 +1,218 @@
-:root{
-  --primary-color: #1DB954;
-  --white: #ffffff;
-  --black: #222326;
+html, body {
+  margin: 0;
+  padding: 0;
 }
 
- html {
-  box-sizing: border-box;
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  background-color: #66a8a6;
+  background: url(/images/concert.jpg) no-repeat center center fixed;
 }
 
- *, *:before, *:after {
-  box-sizing: inherit;
+.index-box {
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: space-between;
+  background-color: #fff;
+  border-radius: 15px;
+  width: 80%;
+  max-width: 800px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border: 0px;
+  box-shadow: 0px 1px 5px .1px rgba(0, 0, 0, 0.4);
 }
 
- body {
-  font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
-  color: var(--black);
-  font-size: 16px;
-  line-height: 147%;
-  margin: 0;
-  padding: 0;
+@media only screen and (min-width: 900px) {
+  .index-box {
+    flex-direction: row;
+    max-height: 50%;
+    max-width: 50%;
+  }
+
+  .tracks {
+    max-width: 60%;
+  }
+
+  .hero-image {
+    max-height: 100%;
+    width: auto;
+  }
 }
 
- h1{
-  color: var(--primary-color);
-  text-align: center;
+.a-panel {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 1.5rem;
 }
 
- a {
-  color: var(--primary-color);
+.title > h1 {
+  font-size: 2.5rem;
+  color: #478b8a;
 }
 
- ul, li{
-  margin: 0;
-  padding: 0;
+.search-bar {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
 }
 
- li{
-  list-style: none;
+.search-input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 12px 0px 12px 12px;
 }
 
- .text-truncate {
-  max-width: 300px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.search-input::placeholder {
+  color: gray;
 }
 
- section, article {
-  margin-bottom: 20px;
-  padding-top: 20px;
+.search-btn {
+  background-color: #66a8a6;
+  color: #fff;
+  padding: 11px;
+  border: 0px;
+  border-top-right-radius: 30px;
+  border-bottom-right-radius: 30px;
+  font-size: 1.2rem;
 }
 
- .container {
-  margin: 0 auto;
-  max-width: 1024px;
+.search-btn:hover, .albums-btn:hover {
+  cursor: pointer;
+  background-color: #478b8a;
 }
 
- .search-box{
+.albums-btn {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #66a8a6;
+  color: #fff;
+  padding: 11px;
+  border: 0px;
+  border-radius: 30px;
+  font-size: 1.2rem;
+  max-width: 150px;
+  box-shadow: 0px 1px 5px .1px rgba(0, 0, 0, 0.4);
 }
 
- .search-input{
-  margin-right: 2rem;
-}
 
- .btn{
-  color: var(--white);
-  background: var(--primary-color);
-  padding: 0.75rem 3rem;
-  font-weight: 700;
-  letter-spacing: 2px;
-  text-transform: uppercase;
-  border: 1px solid transparent;
-  border-radius: 500px;
-  cursor: pointer;
+.hero-image {
+  max-width: 100%;
+  height: auto;
+  border-radius: 15px;
 }
 
- .cards{
+.cards {
   display: flex;
-  flex-direction: row;
   flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.card {
+  display: flex;
+  flex-wrap: none;
+  flex-direction: column-reverse;
+  justify-content: space-between;
+  background-color: #fff;
+  border-radius: 15px;
+  width: 80%;
+  margin: 20px;
+  padding: 1rem;
+  border: 0px;
+  box-shadow: 0px 1px 5px .1px rgba(0, 0, 0, 0.4);
+  max-width: 400px;
+}
+
+.card-title {
+  font-size: 1.2rem;
+  font-weight: bolder;
+  color: hsl(202, 57%, 15%);
+}
+
+.card-image {
+  width: 100%;
+  height: auto;
+  box-shadow: 0px 1px 5px .1px rgba(0, 0, 0, 0.4);
+  border-radius: 5px;
+}
+
+.likes {
+  color: hsl(201, 23%, 34%);
+}
+
+.followers {
+  color: hsl(202, 57%, 15%);
+  font-weight: bolder;
+  font-size: 1.1rem;
+}
+
+.genres {
+  text-transform: capitalize;
+  color: hsl(201, 23%, 34%);
 }
 
- .card{
+.tracks {
   display: flex;
   flex-direction: column;
-  padding: 1rem 0.75rem;
+  justify-content: space-between;
+  margin: 30px;
+
+  width: 90%;
+  padding: 1rem;
+}
+
+.track {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 1px;
+  padding: 5px;
+  background-color: #fff;
+  box-shadow: 0px 1px 5px .1px rgba(0, 0, 0, 0.4);
+}
+
+.nav-bar {
+  display: flex;
+  color: #fff;
+  padding: 6px;
+  height: 100px;
+}
+
+.logo > a {
+  text-decoration: none;
+  color: #fff;
+  padding-left: 30px;
+  font-size: 2rem;
+}
+
+.track-player {
+  padding-left: 10px;
+}
+
+.track-name {
+  padding-left: 15px;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+}
+
+.title-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin: 1px;
+  padding: 15px;
+  background-color: #66a8a6;
+  color: #fff;
+  font-weight: bolder;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  box-shadow: 0px 1px 5px .1px rgba(0, 0, 0, 0.4);
 }