Skip to content

Commit

Permalink
Basic styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@moonpatel
moonpatel committed Aug 16, 2022
1 parent 46596ab commit 32fa6e5
Show file tree
Hide file tree
Showing 10 changed files with 168 additions and 47 deletions.
1 change: 1 addition & 0 deletions app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ app.post('/campgrounds', async (req,res) => {
// show individual campground
app.get('/campgrounds/:id', async (req,res) => {
const c = await Campground.findOne({_id: req.params.id})
console.log(c,req.params.id)
res.render('campgrounds/show',{c})
})
// render form to edit a campground
Expand Down
5 changes: 3 additions & 2 deletions models/campgrounds.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ const Schema = mongoose.Schema
const campgroundSchema = new Schema({
title: String,
location: String,
price: String,
description: String
description: String,
price: Number,
image: String
})

// create a model out of campgroundSchema
Expand Down
15 changes: 9 additions & 6 deletions seeds/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,25 +16,28 @@ db.on("error", console.error.bind(console, "connection error"))
db.once("open", () => console.log("Database connected"))

const cities = require('./cities')
const {places,descriptors} = require('./seedHelpers')
const { places, descriptors } = require('./seedHelpers')

const sample = data => data[Math.floor(Math.random()*data.length)]
const sample = data => data[Math.floor(Math.random() * data.length)]

const seedDB = async () => {
await Campground.deleteMany({}) // delete all the data first

for (let i = 0; i < 50; i++) {
const randomNum = Math.floor(Math.random() *1000)
const randomNum = Math.floor(Math.random() * 1000)
// create an instance of a campground
const cg = new Campground({
title: `${sample(descriptors)} ${sample(places)}`,
location: `${cities[randomNum].city}, ${cities[randomNum].state}`,
title: `${sample(descriptors)} ${sample(places)}`
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid aperiam modi quisquam quo sed deserunt, sit labore laudantium nobis facere nisi amet officiis explicabo excepturi tempora deleniti fugiat unde ducimus.',
price: Math.floor(Math.random()*19.99)+1,
image: 'https://source.unsplash.com/collection/483251'
})
// save it to database
await cg.save()
}
}

seedDB()
.then(() => mongoose.connection.close())
.catch(err => console.log('Error in seeding data',err))
.then(() => mongoose.connection.close())
.catch(err => console.log('Error in seeding data', err))
22 changes: 17 additions & 5 deletions views/campgrounds/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,22 @@
</p>
<ul>
<% for(let camp of camps) { %>
<li>
<a href="/campgrounds/<%=`${camp._id}`%>">
<%= `${camp.title} - ${camp.location}` %>
</a>
</li>
<div class="card">
<div class="row">
<div class="col-md-4">
<img src="<%= camp.image %>/900x600" alt="campground" class="img-fluid">
</div>
<div class="col-md-8">
<div class="card-body">
<h5><%= camp.title %></h5>
<p class="card-text"><%= camp.description %></p>
<p class="card-text">
<small class="text-muted"><%= camp.location%></small>
</p>
<a class="btn btn-primary" href="/campgrounds/<%=camp._id%>">View <%=camp.title%></a>
</div>
</div>
</div>
</div>
<% } %>
</ul>
40 changes: 27 additions & 13 deletions views/campgrounds/show.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,28 @@
<% layout('layouts/boilerplate.ejs') %>
<h1><%= c.title %></h1>
<p>
Title: <%= c.title %>
<br>
Location: <%= c.location %>
</p>
<p>
<a href="/campgrounds">Back</a>
<a href="/campgrounds/<%= c._id %>/edit">Edit campground</a>
<form action="/campgrounds/<%= c._id %>?_method=DELETE" method="post">
<button>Delete Campground</button>
</form>
</p>

<div class="row">
<div class="card px-0 mb-3">
<img src="<%= c.image %>/900x600" alt="campground" class="card-img-top">
<div class="card-body">
<h5 class="card-title mb-0">
<%= c.title %>
</h5>
<small class="text-muted">
<%=c.location%>
</small>
<p class="card-text mt-3">
<%=c.description%>
</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">$<%=c.price%>/night</li>
</ul>
<div class="card-body">
<!-- <a class="btn btn-primary" href="/campgrounds">Back</a> -->
<a class="btn btn-primary" href="/campgrounds/<%= c._id %>/edit">Edit</a>
<form action="/campgrounds/<%= c._id %>?_method=DELETE" method="post" class="mt-2 d-inline">
<button class="btn btn-danger">Delete</button>
</form>
</div>
</div>
</div>
41 changes: 33 additions & 8 deletions views/edit.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,34 @@
<% layout('layouts/boilerplate.ejs') %>


<h1>Edit campground</h1>
<form action="/campgrounds/<%= cg._id %>?_method=PUT" method="post">
<input type="text" name="campground[title]" value="<%=cg.title%>" placeholder="Title">
<input type="text" name="campground[location]" value="<%=cg.location%>" placeholder="Location">
<button>Edit campground</button>
</form>
<div class="row">
<h1 class="text-center">Edit Campground</h1>
<div class="col-6 offset-3">
<form action="/campgrounds/<%= cg._id %>?_method=PUT" method="post">
<div class="mb-3">
<label for="title" class="form-label">Title</label>
<input class="form-control" type="text" name="campground[title]" id="title" value="<%=cg.title%>">
</div>
<div class="mb-3">
<label for="location" class="form-label">Location</label>
<input class="form-control" type="text" name="campground[location]" id="location"
value="<%=cg.location%>">
</div>
<div class="mb-3">
<label for="img-url" class="form-label">Image URL</label>
<input class="form-control" type="text" name="campground[image]" id="img-url" value="<%=cg.image%>">
</div>
<div class="mb-3">
<label for="price" class="form-label">Price</label>
<input class="form-control" type="text" name="campground[image]" id="price" placeholder="0"
value="<%=cg.price%>">
</div>
<div class="mb-3">
<label for="description" class="form-label">Description</label>
<textarea class="form-control" type="text" name="campground[description]" id="description"
value="<%=cg.title%>"><%= cg.description %></textarea>
</div>
<div class="mb-3">
<button class="btn btn-success">Edit</button>
</div>
</form>
</div>
</div>
24 changes: 19 additions & 5 deletions views/layouts/boilerplate.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,26 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> YelpCamp </title>
</head>
<body>
<%- body -%>
</body>
<title> YelpCamp </title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

</head>

<body class="d-flex flex-column vh-100">
<%- include('../partials/navbar') %>
<main class="container mt-4">
<%- body -%>
</main>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
</body>
<%- include('../partials/footer') %>

</html>
38 changes: 30 additions & 8 deletions views/new.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,31 @@
<% layout('layouts/boilerplate.ejs') %>


<h1>Add a new Campground</h1>
<form action="/campgrounds" method="post">
<input type="text" name="campground[title]" id="title" placeholder="Title">
<input type="text" name="campground[location]" id="location" placeholder="Location">
<button>Submit</button>
</form>
<div class="row">
<h1 class="text-center">New Campground</h1>
<div class="col-6 offset-3">
<form action="/campgrounds" method="post">
<div class="mb-3">
<label for="title" class="form-label">Title</label>
<input class="form-control" type="text" name="campground[title]" id="title">
</div>
<div class="mb-3">
<label for="location" class="form-label">Location</label>
<input class="form-control" type="text" name="campground[location]" id="location">
</div>
<div class="mb-3">
<label for="img-url" class="form-label">Image URL</label>
<input class="form-control" type="text" name="campground[image]" id="img-url">
</div>
<div class="mb-3">
<label for="price" class="form-label">Price</label>
<input class="form-control" type="text" name="campground[image]" id="price" placeholder="0">
</div>
<div class="mb-3">
<label for="description" class="form-label">Description</label>
<textarea class="form-control" type="text" name="campground[description]" id="description"></textarea>
</div>
<div class="mb-3">
<button class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
5 changes: 5 additions & 0 deletions views/partials/footer.ejs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<footer class="footer bg-dark py-3 mt-auto">
<div class="container">
<span class="text-muted">&copy; YelpCamp 2022</span>
</div>
</footer>
24 changes: 24 additions & 0 deletions views/partials/navbar.ejs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">YelpCamp</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/campgrounds">Campgrounds</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/campgrounds/new">New Campground</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>

0 comments on commit 32fa6e5

Please sign in to comment.