Code Monkey home page Code Monkey logo

02-con-a-thon's People

Watchers

 avatar

02-con-a-thon's Issues

Dead code! โ˜ ๏ธ

Delete dead code!

/* .helper-trigger,
.helper-show {
display: none;
width: 500px;
margin-left: 95%;
z-index: 1;
}
.helper-trigger[type="checkbox"]:checked + .helper-show {
display: block;
}
.helper-trigger[type="checkbox"]:checked + .helper-show + .helper-hide {
display: none;
} */

Put all your CSS in one place (a stylesheet!)

You have CSS in a stylesheet, in the head and inline - as your application grows that will become difficult to manage. You should generally just keep all your CSS in a stylesheet anyway

<style>
html {
display: block;
}
html, body {
width: 100%;
height: 100%;
position: relative;
}
body {
display: block;
font-family: 'Ubuntu', sans-serif;
margin: 0 auto;
background: black;
}
footer p a, footer p {
text-decoration: none;
color: white;
margin: 0;
padding-top: 3px;
}
footer {
background: #F85B1A;
height: 50px;
text-align: center;
display: block;
position: sticky;
width: 100%;
font-size: 12px;
box-shadow: 0 -10px 3px #072083;
padding-top: 18px;
}
</style>

Merge with Master

I had a small panic attack when I first cloned your project! โ˜ ๏ธโ˜ ๏ธโ˜ ๏ธโ˜ ๏ธ

Once I realized you had multiple branches it went away. But still! Merge with master so it's up to date. Your instincts here to use multiple branches is ๐Ÿ’ฏ spot on - we're going to have a lesson on branching strategies for big projects next week where we'll dig into why. You just also want to keep master up to date! ๐Ÿ˜€

Index.js

This file is super well organized! Only thought is you may want to switch the order of these two:

02-Con-A-Thon/index.js

Lines 29 to 36 in 56e4fad

app.get('/', (req, res) => {
res.redirect('/conventions')
})
app.use(function (req, res, next) {
res.locals.currentUser = req.user
next()
})

Use Mongo/Mongoose Aggregate

Con.find({}).then(con => {
var animeCon = con.filter((i) => {
return i.genre === 'anime'
})
var comicCon = con.filter((i) => {
return i.genre === 'comic'
})
var gameCon = con.filter((i) => {
return i.genre === 'gaming'
})
res.render('index', { animeCon, comicCon, gameCon })
})

This is an alright way to do this, a better way is to use MongoDB $group Aggregation, which you can do through Mongoose Aggregate. Your query would look something like this:

 Con.find({}, [], { groupBy: '$genre' }).then(cons => {
   res.render('index', { cons }) 
 }) 

I'd suggest also adding a limit so you're not getting every convention in your database.

Responsive!๐Ÿ“ฑ

This is a great start to responsive!

/* smaller screen */
@media screen and (max-width: 1240px) {
.conthon {
font-size: 40px;
width: 70%;
height: 45px;
}
.my-con-edit {
margin-top: 200px;
width: 45%;
}
.about {
font-size: 15px;
}
.logs a {
font-size: 15px;
}
.logs {
margin-top: 25px;
margin-right: 10px;
}
.ten-container {
height: 550px;
}
li {
margin: 10px;
}
}

Handlebars Partials

Handlebars and most other templating languages have this thing called partials, which you can use to abstract out repetitive blocks of HTML. You could use a partial here and then render the partial inside each of these loops or create a partial that takes an array and loops through it.

{{#each animeCon}}
<li><a class="button cons-list" href="#popup{{this.id}}">{{this.name}}</a></li>
<div id="popup{{this.id}}" class="overlay">
<div class="popup">
<a class="close" href="#"></a>
<ul class="content">
<li><span>Name:</span> {{this.name}}</li>
<li><span>When:</span> {{this.date}}</li>
<iframe src="{{this.location}}" width="400" height="350" frameborder="0" style="border:0" allowfullscreen></iframe>
<li><a href="{{this.url}}">Visit their Website!</a></li>
</ul>
<form action="/conventions/index/{{this.id}}" method="POST">
<input type="submit" value="Fave" class="buttons">
</form>
</div>
</div>
{{/each}}
</ul>

Inline styles! โ˜ ๏ธ

You're using inline styles throughout your application - inline styles are bad! You want to put that styling in a CSS file.

Fill out your Readme

We slacked out this self-guided lesson during project 2: Documentation

Give it a look through, specifically this section on documentation content (i.e. what to put in your readme. You have the first item (a description of your project) but you could use this as an outline to fill in the rest. You could also use this readme template, which gets you most of the way there!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.