YelpCamp V1

I finally started working on the YelpCamp part of the tutorials. This is the first time I’m creating a working app with a database so I’m very excited to see what new things I’ll…

I finally started working on the YelpCamp part of the tutorials. This is the first time I’m creating a working app with a database so I’m very excited to see what new things I’ll from this. In this app the user will be able to search campgrounds that are listed here and create any new entry for another campground they would like to list. I managed to finish version 1 of the app. This is how the work looked. For this version we haven’t connected to any database just yet but I will be using mongoDB.

This is the javascript page where I’ll be setting up the routes for the app.

var express = require("express");
var app = express();
var bodyParser = require("body-parser");

app.use(bodyParser.urlencoded({extended: true}));
app.set("view engine", "ejs");

var campgrounds = [
     
   {name: "Salmon Creek", image: "https://farm4.staticflickr.com/3872/14435096036_39db8f04bc.jpg"},
   {name: "Granite Hill", image: "https://farm8.staticflickr.com/7268/7121859753_e7f787dc42.jpg"}, 
   {name: "Mountain Goat's Rest", image: "https://farm9.staticflickr.com/8577/16263386718_c019b13f77.jpg"} 
     
];

app.get("/", function(req, res){
    
   res.render("landing");
    
});

app.get("/campgrounds", function(req, res){
        
   res.render("campgrounds", {campgrounds: campgrounds});
    
});

app.post("/campgrounds", function(req, res){

   //get data from form and add to campgrounds array
   
   var name = req.body.name;
   var image = req.body.image;
   var newCampgrounds = { name: name, image: image };
   
   campgrounds.push(newCampgrounds);
   //redirect back to campgrounds page
   
   res.redirect("/campgrounds");
   
});

app.get("/campgrounds/new", function(req, res){
   
   res.render("new");
   
});

app.listen(process.env.PORT, process.env.IP, function(){
    
   console.log("Server Started"); 
    
});

The first version of our landing page.

<% include partials/header %>

<h1> This is the landing page. </h1>

<p> Welcome to YelpCamp!</p>

<a href = "campgrounds"> View all Campgrounds </a>

<% include partials/footer %>

This page is where all the campgrounds will be shown. At this point we have added bootstrap but I have only done some internal styling but this wil be moved to an external styling sheet.

<% include partials/header %>

<div class="container">
    <header class="jumbotron">
        
        <h1> Welcome to YelpCamp </h1>
        <p> View our hand-picked campgrounds from all over the world </p>
        <p> <a class="btn btn-primary btn-large" href="/campgrounds/new"> Add New Campground </a> </p>
    
    </header>
    
    <div class="row">
        <div class="col-lg-12">
            <h3> Our Most Popular Campgrounds! </h3>
        </div>
    </div>
    
    <div class="row text-center" style="display: flex; flexwrap: wrap;">
        <% campgrounds.forEach(function(campgrounds){ %>
        
            <div class="col-md-3 col-sm-6">
                
                <div class="thumbnail">
                    
                    <img src = "<%= campgrounds.image %>">
                    <div class="caption"> <h4> <%= campgrounds.name %> </h4> </div>
                    
                </div>
                
            </div>
            
        <% }) %>
    </div>
    
</div>

<% include partials/footer %>

This page will hold the form where a user can list a new campground to the database.

<% include partials/header %>
    
<div class="container">    
    <div class="row">
        <h1 style="text-align: center;"> Create a new Campground </h1>
           
        <div style="width:30%; margin: 30px auto;">
            <form action="/campgrounds" method="POST">
                
                <div class="form-group">
                <input class="form-control" type="text" name="name" placeholder="name">
                </div>
                <div class="form-group">
                <input class="form-control" type="text" name="image" placeholder="image url">
                </div>
                <div class="form-group">
                <button class="btn btn-lg btn-primary btn-block"> Submit! </button>
                </div>
                
            </form>
            <a href="/campgrounds"> Go Back </a>
        </div>
    </div>
</div>

<% include partials/footer %>

I also made 2 partials for the header and footer that will be include in other ejs files.

<!DOCTYPE html>
<html>

    <header>
        <title> YelpCamp </title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </header>
    
    <body>
        
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/"> YelpCamp </a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li> <a href="/"> Login </a> </li>
                        <li> <a href="/"> Sign Up </a> </li>
                        <li> <a href="/"> Log Out </a> </li>
                    </ul>
                </div>
            </div>
        </nav>

</body>
 
</html>

 

First Express App – 1 95

This is the way I did the App for the express exercise. [crayon-5a26174b7557c436418799/] This is the way Cole did his app. [crayon-5a26174b7558f684940248/] I did not have to watch the video where the answer was…

This is the way I did the App for the express exercise.

var express = require("express");
var app = express();

app.get("/", function(req, res){
    
   res.send("Hello, welcome to my assignment!"); 
    
});

app.get("/speak/:animalname", function(req, res){
    
   var animal = req.params.animalname;
   var sound = sounds();
   
   function sounds(){
       
       if (animal === "pig"){
           
           sound = "'Oink'";
           
       }
       
        if (animal === "cow"){
           
           sound = "'Moo'";
           
       }
       
        if (animal === "dog"){
           
           sound = "'Woof Woof'";
           
       }
       
        if (animal === "cat"){
           
           sound = "'Meow'";
           
       }
       
        if (animal === "duck"){
           
           sound = "'Quack'";
           
       }
       
       return sound;
       
   }
   
   res.send("The " + animal + " says " + sound + ".");
    
});

app.get("/repeat/:words/:numbers", function(req, res) {
    
    var word = req.params.words;
    var number = parseInt(req.params.numbers);
    var words = repeat(word);
    
    function repeat (word){
        
        var holder = [];
         
        for (var i = 0; i < number; i++){
        
          
            holder.push(word);
            
        
        }
        
        return holder.join(' ');
    }
    
    res.send(words);
    
});


app.get("*", function(req, res){
    
    res.send("Sorry, page not found...What are you doing with your life?");
    
});

app.listen(process.env.PORT,process.env.IP, function(req, res){
    
    console.log("Server started");
    
});

This is the way Cole did his app.

var express = require("express");
var app = express();

app.get("/", function(req, res){
    
   res.send("Hello, welcome to my assignment!"); 
    
});

app.get("/speak/:animalname", function(req, res){
    
   var sounds = {
       
        pig: "Oink",
        cow: "Moo",
        dog: "Woof Woof",
        cat: "I hate you human",
        goldfish: "..."
       
   };
   var animal = req.params.animalname.toLowerCase();
   var sound = sounds[animal];
   
   res.send("The " + animal + " says '" + sound + "'.");
    
});

app.get("/repeat/:words/:numbers", function(req, res) {
    
    var word = req.params.words;
    var number = Number(req.params.numbers);
    var result = "";
         
        for (var i = 0; i < number; i++){
            
            result += word + " ";
        
        }
    
    res.send(result);
    
});


app.get("*", function(req, res){
    
    res.send("Sorry, page not found...What are you doing with your life?");
    
});

app.listen(process.env.PORT,process.env.IP, function(req, res){
    
    console.log("Server started");
    
});

I did not have to watch the video where the answer was shown because I manage to write my own code and got it to run the same way Cole did. There was a few differences between out codes. For the first part I used a function with if statements while Cole used objects. The second part used a function with a for loop in it and Cole just used a for loop alone. For this week I’ll try to get through lesson 24 Intermediate Express and if I finish before Wednesday I go ahead and start with lesson 24.5 and 25.

Node.js

185 Echo Exercise: [crayon-5a26174b76115381526623/] For this exercise I did manage to complete it without have to look at the answer portion of the video. Though his code was different from mine and his code…

185 Echo Exercise:

function echo (str, num){
    for(var i = 0; i <= num; i++){
    
    console.log(str);
    
    }
}

echo("Echo!!!", 10)
echo("Tater Tots", 3)

For this exercise I did manage to complete it without have to look at the answer portion of the video. Though his code was different from mine and his code looks cleaner than the one I had. I feel pretty comfortable with For loops so I manage to complete.

186 Average Exercise:

function average (scores){
    
    var total = 0;
    
    scores.forEach(function(score){
        
       total += score; 
        
    });
    
    var avg = total/scores.length
    
    return Math.round(avg);
    
}

console.log("This is the average for scores.")

var scores = [90, 98, 89, 100, 100, 86, 94];

console.log(average(scores));

console.log("This is the average for scores2.")

var scores2 = [40, 65, 77, 82, 80, 54, 73, 63, 95, 49];

console.log(average(scores2));

For this exercise I had to look at the solution because I got a bit lost half way of trying to figure out how to solve this exercise. I did get a bit confused on the method he used to call on arrays. I did review and understand how it works but I do feel like I should review this a bit more.

189 NPM Faker Exercise:

var faker = require("faker");

    
for(var i = 0; i < 10; i++){
        
    console.log(faker.commerce.productName() + " - $"+ faker.commerce.price());
        
};

For the faker exercise I was able to complete pretty quick. Everything was in the documentation. So far I’m enjoying these exercises.

As for the last one I have not finished it. These past few days I was out of commission due to me getting very sick. So this week I know I’m going to be playing a lot of catch up but this weekend I’ll manage to get  a lot more done.

 

To-Do List

I manage to watch all the tutorials and understand the way the shortcuts that were used in jQuery. Its really awesome to use for the shortcuts but the videos also helped understand why it’s…

I manage to watch all the tutorials and understand the way the shortcuts that were used in jQuery. Its really awesome to use for the shortcuts but the videos also helped understand why it’s not being used as much anymore. But here’s my to-do list.

To-do List