Forem: Ethan Goddard

Software Dev Update #13: DOM Events

Ethan Goddard — Wed, 25 May 2022 13:01:31 +0000

In this update we are going to dig deeper into The DOM and discuss events. MDN actually has a great introduction to the topic and I recommend checking it out alongside my post.

DOM Events

Events are the key to creating any sort of interactive websites that do anything in response to what users are doing.

Inline Events: Are written directly in the HTML element we can add an attribute called "onclick="". There are others such as onfocus, onpause, ondrag, and more. This isn't the recommended way to add JS to HTML elements but it is an option. Also note the functionality only applies to the one HTML element and would need to be coded for every one you want to do that function/action.

<!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>Inline Events</title>
</head>
<body>
    <h1>Inline Events</h1>
    <button onclick="alert('You clicked on me!'); alert('Stop clicking me!')">Click Me!</button>
</body>
</html>

onclick: Specifies some script to run when the element is clicked.

function scream(){
    console.log("AHHHH!");
    console.log("I wasn't expecting that!");
}

btn.onmouseenter = scream;

document.querySelector("h1").onclick = function(){
    alert("You clicked the h1!");
}

addEventListener: Sets up a function that will be called whenever the specified event is triggered.

const button = document.querySelector('h1');

button.addEventListener("click", () => {
    alert("You clicked me!")
})

Exercise: Events and the keyword This
Keyboard Events & Event Objects: The Event object is automatically passed in whenever we use a callback and it contains information about the object. Key value is used if you want the actual key letter that was pressed. Code value is used for the key's physical location and is not language specific. (WASD for gaming or something similar)

document.querySelector('button').addEventListener('click', (event) => {
    console.log(event);
})

const input = document.querySelector('input');
input.addEventListener('keydown', (event) => {
    // console.log("Key Down")
    console.log(event);
    console.log(`Key: ${event.key}`);
    console.log(`Code: ${event.code}`);
})

//We can also look at the window for key presses and not just an input
// window.addEventListener('keydown', (event) => {
//     console.log(event.code);
// })

Form Events & Prevent Default: The default action of a form can be set in HTML using action="". The default action of a form is to submit whatever data you input to the location that you set using action="" and take you to that new page. This can be overridden with the method event.preventDefault
Input & Change Events: The input event triggers when the value of an input, select, or textarea element has been changed. The change event is triggered for input, select, and textarea elements when an alteration to the element's value is committed by the user but will not necessarily happen for each alteration to an element's value depending on the kind of element being changed and the way the user interacts with the element
Event Bubbling: When a nested event inside another event is triggered, it will trigger parent event(s) as well. Using .stopPropagation will stop the event bubbling.
Event Delegation: We can add an event listener to an element that is a parent to the element we want it to apply to. This ensures the children elements will always have access to the event listener, even if they are created after the page has loaded.

Week In Review

That wraps up the DOM specific sections of the bootcamp and I hope makes some topics clearer, especially event bubbling and delegation. I provided examples because sometimes seeing it in action is more beneficial that reading the definition!

Bootcamp lessons completed: 272/579

I hope you enjoyed the read!

Feel free to follow me on GitHub, LinkedIn and DEV for more!

Software Dev Update #12: The World Of DOM

Ethan Goddard — Tue, 17 May 2022 17:41:54 +0000

This week's update covers the major topic of DOM (Document Object Model). I'm going to breakdown some of the most important pieces to understand and share some examples to illustrate those concepts.

Definitions

DOM: Known as the Document object model, it is a Javascript representation of a webpage. It's your JS "window" into the content of the webpage. It is essentially a bunch of objects that you can interact with via JS. It's how we do things such as creating drop down menus.
JavaScript Element: An Element in Javascript is an object with properties that represents a single HTML Element. You can select elements in three different ways, those being getElementById, getElementsByTagName, and getElementsByClassName
HTML Collection: Is an array like object that displays HTML Element properties and methods. Is Generated when we use getElementById, getElementsByTagName, and getElementsByClassName.

Attributes, Properties, & Methods

Query Selector: A newer addition to the DOM, querySelector is an all-in-one method to select a single Element.

//Select by ID
console.log(document.querySelector('#banner'));

//Select by class
console.log(document.querySelector('.square'));

//You can also chain on other CSS style selectors
console.log(document.querySelector('img:nth-of-type(2)'));

//We can add multiple selectors. In this example we are selecting by type (anchor tag) and attribute (title="java")
console.log(document.querySelector('a[title="java"]'));

//And an example of querySelectorAll, this will create a collection of all paragraphs
console.log(document.querySelectorAll('p'));

//Here's an example of nested selectors. We'll create a colletion of all anchor tags inside a paragraph tag.
console.log(document.querySelectorAll('p a'));

innerHTML, textContent, innerText: These are DOM properties that can be used to set or update the content of an Element.

//innerText
//This will only show what's actually shown on the page at the moment. If an Element is hidden, innerText will not capture it
console.log(document.querySelector('p').innerText);

//textContent
//Notice the spacing in the console which is from the actual HTML markup because textContent returns every Element, hidden or not
console.log(document.querySelector('p').textContent);

//innerHTML retrieves the full contents (including the tag names) of the Element between the opening and closing tags
//We can overwrite an Element's HTML. Example will be the first h1 of the page
document.querySelector("h1").innerHTML = "<i>Silkie Chickens</i>";

getAttribute and setAttribute: Gets or sets the value of an attribute on the specified element.
JavaScript Style Object: It will not display any style attributes set in another file (like a .css file) but it will display any in-line styles found in the HTML. Those are pretty uncommon so we use the Style object to override those values from the .css file using JavaScript.
classList: Is an object that we can interact with to control the classes on an element and to retrieve or manipulate them. It has useful methods such as .add, .remove, and .toggle
Traversing: All of these properties allow us to navigate from one Element to a relative (parent/child/sibling). parentElement, childElementCount, children, nextSibling, nextElementSibling, previousSibling, and previousElementSibling
Append and Remove: appendChild, append, prepend, insertAdjacentElement, after, removeChild, and remove

//Append Child---------------------------------------------------------------
//We are creating a new image with a source, but it's not on the page yet
const newImage = document.createElement("img");
newImage.src = "https://i.imgur.com/Gz7nBcv.jpg";

//Now we'll append the image to the body as a child
document.body.appendChild(newImage);

//Now lets apply a class so css will have an effect
newImage.classList.add("square");

//We'll combine a few things we've leanred
const newH3 = document.createElement("h3");
newH3.innerText = "I am a new H3!"
document.body.appendChild(newH3);

//Append---------------------------------------------------------------------
const p = document.querySelector("p");
p.append("I can be a full sentance!", "And I can be a second added Element!");

//Prepend--------------------------------------------------------------------
const newBold = document.createElement("b");
newBold.innerText = "Hello!";
p.prepend(newBold);

//insertAdjacentElement------------------------------------------------------
const h2 = document.createElement("h2");
h2.innerText = "I am insertAdjacentElement";

const h1 = document.querySelector("h1");
h1.insertAdjacentElement("afterend", h2);

//After----------------------------------------------------------------------
const h4 = document.createElement("h4");
h4.innerText = "I am an 'after' H4";

h2.after(h4);

//removeChild------------------------------------------------------------
const firstLi = document.querySelector("li");
const ul = firstLi.parentElement;

//Now we can pass in the child we want to remove by selecting the parent
ul.removeChild(firstLi);

//remove-----------------------------------------------------------------
//Remove is newer and allows you to directly select the Element you want to rmeove instead of needing to select the parent
//first and then defining the child Element to be removed
const image = document.querySelector("img");
image.remove();

Week In Review

Understanding the basics of the DOM seems to be a foundational knowledge that is going to build upon itself in the next several sections of my bootcamp. I'm looking forward to playing around with this more as we learn about DOM Events coming next!

Bootcamp lessons completed: 253/579

I hope you enjoyed the read!

Feel free to follow me on GitHub, LinkedIn and DEV for more!

Software Dev Weekly Update #11: Modern JavaScript Features

Ethan Goddard — Tue, 12 Apr 2022 21:31:09 +0000

This past week I wrapped up the pure JavaScript sections and began moving onto the world of DOM. Let's highlight those topics covered!

Topics From Section 22

These next few are all about built-in array methods that require us to pass in functions. It's a crucial part of working with arrays in JavaScript and arrays are crucial to working with JavaScript, so the topic is important.

For Each: Accepts a callback function. Calls the function once per element in an array. They are also older and there are times you could substitute these for newer syntax.

const numbers = [9, 8, 7, 6, 5, 4, 3, 2, 1];

//We are passing an in-line function, though we could define a
//function outside of the forEach and instead plug in the 
//function name
numbers.forEach(function(n){
    console.log(n * n)
    //Prints: 81, 64, 49, 36, 25, 16, 9, 4, 1
});

Map: Creates a new array with the results of calling a callback on every element in the array. Works very much like forEach but then generates a new array based on the result.

const movies = [
    {
        title: "\"Toy Story\","
        score: 92
    },
    {
        title: "\"Stand By Me\","
        score: 85
    },
    {
        title: "\"Soul\","
        score: 95
    },
    {
        title: "\"Avengers: End Game\","
        score: 94
    },
    {
        title: "\"Finding Nemo\","
        score: 86
    },
];

//Creates a new array called "titles" pulling from the movies array
const titles = movies.map(function(movie){
    return movie.title;
})

Arrow Functions: Allows us to write functions without having to use the keyword "function".
setTimeout and setInterval: Two functions that expect you to pass a callback function in, but are not array methods. They delay/postpone code execution for a
later time.

//setTimeout-----------------------------------------------
//runs and prints 1st
console.log("Hello!")

//This will run just one time, and will print 3rd
setTimeout(function(){
    console.log("I waited 3 seconds...");
}, 3000)

//this runs 3rd but will print out 2nd because setTimeout is on a
//3 second delay
console.log("Last coded console.log message!")


//setInterval-----------------------------------------------
//Using an arrow function this time, doesn't matter but is shorter
//Will run forever every two seconds
//We set this to a variable so we can call clearInterval(id)
const id = setInterval(() =>{
    console.log(Math.random());
}, 2000)

Filter Method: Creates a new array with all elements that pass the test implemented by the provided function. Typically we pass in a function that needs to return true or false and for any element that returns true it gets added into the new filtered array that is created.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const odds = numbers.filter(n => {
    return n % 2 === 1;
    //Our callback returns true or false, if true n is added to the filtered array
})
//Will return [1, 3, 5, 7, 9]

const smallNumbers = numbers.filter(n => n < 5);
//will return [1, 2, 3, 4]

Some and Every: Some returns true if any of the array elements pass the test function. Every tests whether all elements in the array pass the test function, and if so will return true.
Reduce: Executes a reducer method function on each element of the array, resulting in a single value. This could be via math, but also could be via comparison of values which could be in an array or part of an object.

[3, 5, 7, 9, 11].reduce((accumulator, currentValue) =>{
    return accumulator + currentValue;
});
//The final return value for this will be 35

Topics From Section 23

Default Params: When creating a function, it can optional to have a user input a value, and if they don't we cab use a default value (parameter).

//We've set this function's default params so that if the user
//doesn't input a value when calling rollDie() then it will
//use 6 as the default for numSides
function rollDie(numSides = 6){
    return Math.floor(Math.random() * numSides) +1;
}

"Spread" In Function Calls: It's kind of like the swiss army knife of JavaScript. We are taking something and expanding or spreading" it out (array, string, etc).

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

//To use Math.max we need to "spread" the array of numbers into individual values so the function can find the maximum value
//We use ... before calling the nums array to "spread" the values inside the nums array
//Spread creates the seperate arguments (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15) from the nums array and then 
//executes the .max() function with those arguments
console.log(`The maximum number is: ${Math.max(...nums)}`);

"Spread" With Array Literals: Create a new array using an existing array. Spreads the elements from one array into another.

const cats = ["Ella", "Tommy", "Buddy"];
const dogs = ["Daisy", "Piston"];

//We are spreading the two arrays into a new array
const allPets = [...cats, ...dogs];
console.log(allPets);

"Spread With Object Literals: Copies properties from one object into another object. Often used when copying objects.

//A real world example, a user signs up for our website and we want to copy their input and add data of our own
const dataFromform = {
    email: "fake@gmail.com",
    username: "SirFaketon",
    password: "fakepassword123"
}

//Now lets add data to their input
const newUser = {...dataFromform, id: 12345, isAdmin: false}

Rest Params: The syntax looks like spread but it's not, we're not spreading things out we are collecting them into a single parameter. Collects all remaining arguments not specifically called out into an actual array of their own.

function raceResults(gold, silver, ...everyoneElse){
    console.log(`Gold medal goes to: ${gold}`);
    console.log(`Silver medal goes to: ${silver}`);
    console.log(`And thanks to everyone else for participating: ${everyoneElse}`);

console.log(raceResults("Ethan", "Dan", "Tim", "Ashley"));
}

Destructuring Arrays: A short, clean syntax to "unpack" values from arrays and properties from objects into distinct variables.

const pinballScores = [984537, 912385, 872357, 817490, 817245, 726349, 613279];

//With this we are making 3 variables (gold, silver, and bronze)
//and the order of the array determines what values they are
//Gold will be index 0, silver will be index 1, and bronze will be index 2
//The [] indicate we are destructing from an array
//Also we are using the ... or "rest" parameter to define the rest of the scores
const [gold, silver, bronze, ...everyoneElse] = pinballScores;

console.log(`Gold score is: ${gold}`);
console.log(`Silver score is: ${silver}`);
console.log(`Bronze score is: ${bronze}`);
console.log(`Runner up scores are: ${everyoneElse}`);

Destructing Objects: Destructing is more commonly used with an object because it's not all about the order of the elements, but instead looks at their key value property. Example: {name: Ethan} instead of look for index 0 of an array. This doesn't change the original object in any way.

//An exmaple of destructing an object
const runner = {
    firstName: "Eliud",
    lastName: "Kipchoge",
    country: "Kenya",
    title: "Elder of the Order of the Golden Heart of Kenya"
}
const {firstName, lastName, country} = runner;

console.log(`The winner of the race is ${firstName} ${lastName} from ${country}!`);

Destructing Params: Most frequently used with objects, we can destructure values that are being passed into the function.

const user1 = {
    email: "stacy@gmail.com",
    firstName: "Stacy",
    lastName: "LaPreaze",
    born: 1975,
    city: "Morley",
    state: "Michigan"
}

const user2 = {
    email: "george@gmail.com",
    firstName: "George",
    lastName: "Windfall",
    born: 1935,
    died: 1987,
    city: "Morley",
    state: "Michigan",
    occupation: "Systems Engineer"
}

//Destructure and only grab firstName and lastName. Also setting a
//default value (param) in case there's no info, but this is
//totally optional
function fullName({firstName = "Missing Value", lastName = "Missing Value"}){
    return `${firstName} ${lastName}`;
}

Week In Review

Well that was a lot of ground to cover in a week but I made great progress and am excited to finally begin to combine HTML/CSS/JavaScript into something usable. Next up is the world of the DOM!

Bootcamp lessons completed: 244/579

I hope you enjoyed the read!

Feel free to follow me on GitHub, LinkedIn and DEV for more!

Software Dev Weekly Update #10: Functions, functions, and more functions...

Ethan Goddard — Wed, 06 Apr 2022 15:01:11 +0000

This week was all about functions! I hope you have some coffee (or tea) in hand, there's a lot to recap!

Topics

Return keyword: Built-in methods "return" values when we call them. We can store those values to a new variable. Also the return keyword stops the execution of your function. You can only return 1 thing. It could be an array of things, but only 1 array.
Function scope: Where we define a variable in JavaScript impacts where we have access to it.

//In the example below, totalEggs is only accessible within the function
function collectEggs(){
    let totalEggs = 6;
    console.log(totalEggs);
}

//An example showing that console.log is referencing the bird 
//variable that's inside the function because they are more 
//closely connected due to both being inside the same function. 
//This is overriding the global variable bird.
let bird = "Scarlet Macaw";
function birdWatch(){
    let bird = "Great Blue Heron";
    console.log(bird);
}

birdWatch();
//Would print: Great Blue Heron

Block scope: Refers to any content with {} that isn't a function (Example: conditional statements or loop)

//An example of scope within a conditional.
let radius = 8;
if (radius > 0){
    const PI = 3.14159;
    let message = "Hello!";
}

//This will print the radius variable
console.log(radius);

//This will print undefined because the PI variable is 
//inside the radius conditional statement, called a Block
console.log(PI);

Lexical scope: A child (or inner) function nested inside a parent (or outter) function has access to the parent's functions. This continues on for every nested function inside another nested function. They all have access to their "parent"'s functions.

//An example of nesting functions, where the inner function has 
//access to the hero variable in the outer function.
function outer(){
    let hero = "Black Panther";

    function inner(){
        let cryForHelp = `${hero}, please save me!`;
        console.log(cryForHelp);
    }
    inner();
}

Function expression: Is a way of storing a function in a variable. JavaScript considers function just another value like any other.

//Function Expression
const square = function(num){
    return num * num;
};

Higher Order Functions: They are functions that operate on or with other functions. They can accept other functions as an argument and/or "return" a function.

//An example where ine function calls other functions by passing a function as an argument
function callTwice(func){
    func();
    func();
}

//Example using for loop with higher order function
function callTenTimes(f){
    for(let i = 0; i < 10; i++){
        f();
    }
}

function rollDie(){
    const roll = Math.floor(Math.random() * 6) + 1;
    console.log(`Your dice roll is: ${roll}`);
}

callTwice(rollDie)

Method: Is simply a function that has been placed as a property on an object. All Methods are function, but not all functions are methods. (Examples: .indexOf() and .toUppercase)

//An example of creating our own methods on an object, in this
//case the object is myMath and the methods are multiple,
//divide, square, and PI
const myMath = {
    multiply: function(x, y){
        return x * y;
    },
    divide: function (x, y){
        return x / y;
    },
    square: function(x){
        return X * x;
    },
    PI: 3.14159
};

Keyword "This": You can use the keyword to access other properties on the same object. "This" can change based on how we call the function (from inside the object). If we call a function that refers to "this" that is being used inside an object, it will actually refer to the window object instead of the object that it exists in. A weird quirk, but something to be aware of.

//The default reference of "this" is the window object. But in
//the example below we are overriding it by using it inside
//the person object
const person = {
    first: "Ethan",
    last: "Goddard",
    fullName(){
        return `${this.first} ${this.last}`
    }
}

//person.fullName() would return "Ethan Goddard"

Try and Catch: Two statements in JavaScript that have to do with errors. They "catch" errors and prevent the stopping of the execution of our code.

//An example of code we know will have an error
try {
    hello.toUpperCase()
} catch {
    console.log("Opps! Looks like I ran into an error.");
}

console.log("If you see this message, the code still ran after an error was encountered!");

//Another example, using it in a function
function yell(message){
    try {
        console.log(message.toUpperCase().repeat(3));
    } catch (e) {
        //We'll print out the error message by "catch"ing it 
        //with e and using console.log(e)
        console.log(e);
        console.log("Please enter a string next time!");
    }
}

Week In Review

There was a lot to absorb this week, functions are a key component of JavaScript and understanding the topic is crucial. I hope that you found my notes and examples helpful, I make them to hold myself accountable that I understand it well enough to explain. Looking forward to new topics this coming week!

Bootcamp lessons completed: 219/579

I hope you enjoyed the read!

Feel free to follow me on GitHub, LinkedIn and DEV for more!

Software Dev Weekly Update #9: Back to code

Ethan Goddard — Wed, 30 Mar 2022 15:39:49 +0000

It's hard to believe how quickly the weeks and months flew by. Life can take sudden turns you aren't expecting and I needed to set aside coding for a time to focus on family. But things have settled down and I'm ready to continue the journey!

This past week I stepped back into the world of code and decided to start by refreshing my JavaScript skills. The topics I studied included:

JavaScript basics (primitive types, methods, arguments)
Conditionals
Logical Operators (AND &&, OR ||, NOT !
Array and Object
Loops (for loop, while loop, for...of loop, for...in loop)

If you are a fellow JavaScript beginner then I recommend checking out the MDN's JavaScript basics guide for a guided learning experience. Their documentation is VERY helpful and I reference it often.

Week In Review

Though these past few months were a step back in my coding journey, perseverance remains to be the key to accomplishing my goal and I am looking forward to reviewing concepts I've learned so as to get a deeper understanding and come out a stronger developer on the other end.

I couldn't be more excited. Here we go!

I hope you enjoyed the read!

Feel free to follow me on GitHub, LinkedIn and DEV for more!

Software Dev Weekly Update #8: Short & Sweet

Ethan Goddard — Fri, 17 Sep 2021 14:00:23 +0000

Time is a limited resource and during the past week other commitments took some precedence over my learning journey. I still squeezed in a dozen lessons from the bootcamp course but it was less than I typically strive for.

ExpressJS Middleware

Work continues on the YelpCamp project but we took some time to explore ExpressJS middleware. If you're not familiar with middleware or have heard the term but aren't clear on what it means:

middleware is a collection of functions that run at some point during the request and response lifecycle.

So middleware runs between the time a request enters Express and it leaves at which point our code stops executing.

Colt Steele, The Web Developer Bootcamp 2021

Middleware are just functions
Each middleware has access to the request and response objects
Middleware can end the HTTP request by sending back a response with methods like res.send()
OR middleware can be chained together, one after another by calling next()

If you want to explore middleware further, check out the ExpressJS documentation page.

Morgan is a handy middleware I recommend checking out. It logs HTTP request information to the terminal which can be very helpful when debugging your code.

YelpCamp

Work continues on this project! After wrapping up the middleware section we moved on to adding basic styles and using a new EJS tool for layouts.

Bootstrap 5 is our choice for an easy to use CSS Framework and a tool called EJS-Mate has been added to help us by adding functionality to EJS called layout (see more in the docs) which then allows us to define some boilerplates.

What's a boilerplate?

It's a basic file for every single page where sections of code are repeated in multiple places with little or no variation. It often includes code such as this:

<!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></title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>

<body></body>

</html>

Now we can insert <%-body -%> inside of our body element.

<!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></title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>

<body>
   <%-body -%>
</body>

</html>

Once that's added our code will pass through body content from other pages into our boilerplate so we can dynamically add content as desired.

It's a complex topic and we're still learning how to use it effectively so I recommend watching RaddyTheBrand's video to learn more.

Week In Review

It's hard to believe how quickly the weeks are moving by and though I didn't make the progress I wanted to this week, the important part is that I made steps forward. Perseverance is the key to success and every step forward is a step closer to your goals.

I hope you enjoyed the read!

Feel free to follow me on GitHub, LinkedIn and DEV for more!

Software Dev Weekly Update #7: Heads Down Work

Ethan Goddard — Wed, 08 Sep 2021 14:35:00 +0000

I spent the last week reinforcing recent lessons by practicing on SoloLearn, connecting with other developers, and enjoying a long holiday weekend here in the US.

I'm currently working on part 1 of our capstone project, YelpCamp. This project is a full production replication of Yelp with a focus on campgrounds. It will feature an interactive cluster map, user accounts, campsite reviews, the ability to add/edit campgrounds, image uploading, and more!

It combines all the technology we've learned about and incorporates new concepts as we build it out. These new concepts include express error handling, mongo relationships, authentication, cloud database, etc.

YelpCamp

To kickoff this project we started by creating our basic express app and moved into adding basic CRUD functionality after seeding our database with 50 randomly generated campgrounds.

This is our current route file that connects the MongoDB and our nodeJS modules all together and routes the GET requests:

const express = require('express');
const path = require('path');
const mongoose = require('mongoose');
const Campground = require('./models/campground');

//These options are no longer needed in v6 of Mongoose
// https://mongoosejs.com/docs/migrating_to_6.html#no-more-deprecation-warning-options
mongoose.connect('mongodb://localhost:27017/yelp-camp', {
    useNewUrlParser: true,
    useUnifiedTopology: true
});

//Setting up the database connection
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'Connection error:'));
db.once('open', function(){
    console.log('Database connected...')
});

const app = express();

//Setting viewengine to ejs
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

//Parse the body of the POST request for new campground
app.use(express.urlencoded({extended: true}))

//Home route
app.get('/', function(request, response){
    response.render('home')
});

//Campgrounds route
app.get('/campgrounds', async function(request, response){
    const campgrounds = await Campground.find({});
    response.render('campgrounds/index', {campgrounds})
});

//Used to confirm we can input and see data from database
// app.get('/makeCampground', async function(request, response){
//     const camp = new Campground({title: 'My Backyard', description: 'Cheap camping!'});
//     await camp.save();
//     response.send(camp)
// })

//New campground route
app.get('/campgrounds/new', function(request, response){
    response.render('campgrounds/new');
})

//New campround POST where the form is submitted to
app.post('/campgrounds', async function(request, response){
    const campground = new Campground(request.body.campground);
    await campground.save();
    response.redirect(`/campgrounds/${campground._id}`)
})

//Show/Details route
app.get('/campgrounds/:id', async function(request, response){
    const campground = await Campground.findById(request.params.id);
    response.render('campgrounds/show', {campground});
});

app.listen(3000, function(){
    console.log('Serving on port 3000...')
})

Those routes send you to dynamic HTML template files we've created using Embedded JavaScript (ejs). Here is an example of our index page showing a list of all 50 seeded campgrounds:

<!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>Campgrounds</title>
</head>

<body>
    <h1>All Campgrounds</h1>
    <div>
        <a href="/campgrounds/new">Add Campground</a>
    </div>
    <ul>
        <% for(let campground of campgrounds){ %>
            <li>
                <a href="/campgrounds/<%= campground._id %>">
                    <%= campground.title %>
                </a>
            </li>
            <% } %>
    </ul>
</body>

</html>

It looks like normal HTML but you'll notice the ejs tags <%= %> in the UL. This allows us to embed JavaScript directly into the HTML element. You can learn more about ejs tags here, scroll down until you see Tags.

If you'd like to check out the current project code, head over to my Github!

Week In Review

Things are looking really bright! I'm excited to start this project and really get my hands on building something complex. It feels like I've been building up to this for so long and I want to make something worth talking about.

I also want to use this project to serve as a reference for building other projects on my own, a big one being a ticket system clone. I have done desktop support for several years I want to improve upon the tools I've used.

More to come, see you next week!

I hope you enjoyed the read!

Feel free to follow me on GitHub, LinkedIn and DEV for more!

Software Dev Weekly Update #6: "With our combined powers!"

Ethan Goddard — Wed, 01 Sep 2021 15:52:59 +0000

I don't know it anyone remembers that old show Captain Planet and the Planeteers, but much like our planet saving heroes and with their powers combined we used MongoDB, Mongoose & Express to build a fully functioning CRUD (Create, Read, Update, Delete) web app!

Meet the most fully functional and inspired roadside farm stand application we've seen yet. -Trendy News Today

Ok... it's not so pretty to look at and it is probably missing some functionality but it successfully combines those technologies into a great example of something more complex than static HTML and the fake JSON database files that we've been working with so far.

To make this project happen, we learned about a few key topics:

Those combined with the HTML templating we spoke about in update #4, gives us the bones to build something more complex.

What the heck is Mongoose?

Nick Karnik over at FreeCodeCamp has a great writeup about Mongoose and he says:

Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js. It manages relationships between data, provides schema validation, and is used to translate between objects in code and the representation of those objects in MongoDB.

I highly recommend you check out his writeup if you want to know more about Mongoose and how it connects with MongoDB and NodeJS.

Week In Review

This week was about combining past knowledge with the last missing piece of the pie, MongoDB. We finally made something that can persist data across sessions and from here on out we'll be refining our knowledge of the basics to build better web applications.

Our next major focus is to expand on existing knowledge and start building the capstone project, something called YelpCamp. I will share more on that over the next few weeks.

I'm no where near out of the woods yet, but I'm on a good path.

"Education is the key, and perseverance opens the door." - Zach Al-Kharusy

I hope you enjoyed the read!

Feel free to follow me on GitHub, LinkedIn and DEV for more!

Software Dev Weekly Update #5: RESTful Routes & CRUD

Ethan Goddard — Wed, 25 Aug 2021 13:11:11 +0000

This week was all about using HTML templating and RESTful routes to create a CRUD web application! I know that might be some unfamiliar terminology so let me break it down.

HTML Templating

See last week's update for more information about the topic but in short: Templating is the creation of HTML files that share the same (or similar) element pattern. Think of reddit pages, the sizing or the theme might be different across subreddits but they all share the same basic structure.

We used the templating methodology to construct the bones of our (admittedly basic) web application. The pages look simple, but on the backend they are setup to enable RESTful routing. GitHub Repo

RESTful Routes

So what are RESTful routes? They are a standard set of rules used to carry out CRUD operations (create, read, update, delete) by using a set of HTTP verbs (get, post, patch, delete) to make server requests.

This enables the functionality you commonly use on websites today such as creating a tweet on Twitter, reading the top Reddit posts, editing your article on Dev.to, or deleting a rouge comment on Facebook. To take these actions on our web applications we need to define the desired behavior when creating that logic.

Below is the backend to the CRUD app we created this week which shows the routes defined. (app.get / app.pst / app.patch / app.delete)

const express = require('express');
const app = express();
const path = require('path');
const methodOverride = require('method-override');
const { v4: uuid } = require('uuid');

//Allows us to submit form data
app.use(express.urlencoded({ extended: true}))
//Allows us to submit json data
app.use(express.json())
app.use(methodOverride('_method'))
app.set('views', path.join(__dirname, 'views'))
//Set the view engine
app.set('view engine', 'ejs')

//This is our data array as we don't have a database yet
let comments = [
    {
        id: uuid(),
        username: 'Todd',
        comment: 'You should buy Skyrim again!'
    },
    {
        id: uuid(),
        username: 'Skyler',
        comment: 'I like to go birdwatching and sip coffee on cool mornings.'
    },
    {
        id: uuid(),
        username: 'Sk8erBoi',
        comment: 'Anyone know where I can find good used board parts?'
    },
    {
        id: uuid(),
        username: 'onlysaywoof',
        comment: 'woof woof woof'
    }
]

app.get('/comments', function(request, response){
    response.render('comments/index', { comments });
})

//This route serves and renders a form
app.get('/comments/new', function(request, response){
    response.render('comments/new');
})

//Where the form submits it's data to and extracts the body, then sending the user back to /comments
app.post('/comments', function(request, response){
    const {username, comment} = request.body;
    comments.push({username, comment, id: uuid() });
    response.redirect('/comments');
})

//this grabs the comment by ID and renders the response with the data on /comments/show (normally could be a tweet, a subreddit, anything really that used an ID)
app.get('/comments/:id', function(request, response){
    const { id } = request.params;
    const comment = comments.find(c => c.id === id);
    response.render('comments/show', { comment });
})

//A route to setup a form to edit a resource
app.get('/comments/:id/edit', function(request, response){
    //Get the comment id
    const { id } = request.params;
    // Use id to pass through any info to the form we might need
    const comment = comments.find(c => c.id === id);
    //We pre-populated the form with that information
    response.render('comments/edit', { comment });
})

//Setting up a route for patching comments
app.patch('/comments/:id', function(request, response){
    //Grab ID from URL
    const {id} = request.params;
    //Taking whatever was sent in the request body.comments
    const newCommentText = request.body.comment;
    //Find a comment with the matching ID
    const foundComment = comments.find(c => c.id === id);
    //Update the comment's comment property with whatever was in request.body.comment
    foundComment.comment = newCommentText;
    //Send the user back to the comments index page
    response.redirect('/comments');
})

app.delete('/comments/:id', function(request, response){
    const { id } = request.params;
    //comments.filter will actually return a new array so we aren't mutating the existing array
    comments = comments.filter(c => c.id !== id);
    response.redirect('/comments');
})

app.listen(3000, function(){
    console.log('Listening on port 3000!');
})

//Our basic CRUD app functionality blueprint:
//(Index Route) GET /comments - list all comments
//(Create Route) POST /comments/new - create a new comment
//(Show Route) GET /comments/:id - get one comments (using ID)
//(Update Route) PATCH /comments/:id/edit - update one comments (using ID)
//(Destroy Route) DELETE /comments/:id - destroy one comment (using ID)

Here's that functionality and you can find all the code on my GitHub repository!

Week In Review

It really was a great week for learning. I absolutely enjoyed making my first CRUD app and I'm looking forward to setting up a database in the next section so we can add data persistence.

I also connected with a couple of local programming recruiters to get a better understanding of what local companies are looking for. They were able to send over some job descriptions and it was very helpful. I'm thankful to have such great local resources!

Speaking of great local resources, I'll be attending a GR WebDev meetup online on Sept 27th at 6:15pm. It's all about "building simple microservices that enables CRUD operations on a database table with the Spring Boot framework".

All are welcome! More information here.

I hope you enjoyed the read!

Feel free to follow me on GitHub, LinkedIn and DEV for more!

Software Dev Weekly Update #4: New Tools, New Community

Ethan Goddard — Thu, 19 Aug 2021 00:00:46 +0000

This week saw the completion of sections 32, 33, and the start of 34 (out of 60)! I'm really hitting a stride and it's exciting to see the progress made!

I spent time connecting with other developers thanks to Danny Thompson, a self taught developer who made his way from gas station fry cook to developer at Google. He hosts regular virtual meetups through Twitter Spaces and most recently he put together a panel for new developers to pose their questions and get real answers from industry professionals. It was an incredible conversation and thank you so much to everyone involved!

I also attended a virtual meetup with Google Developer Group New Orleans and participated in their Eleventy demo. Sia Karamalegos led the discussion as we worked through what HTML templating can do and how she's utilized it in her blog, Sia.codes. This talk directly relates to what I've been studying this past week, Creating Dynamic HTML with Templating!

Creating Dynamic HTML with Templating
So what is templating and why would you use it? Templating is the creation of HTML files that share the same (or similar) element pattern. Think of reddit pages, the sizing or the theme might be different across subreddits but they all share the same basic structure.

So why manually write a page for each new subreddit and post? With templates we can dynamically generate HTML pages and swap out the information as needed but retain the shared elements such as 'upvote', 'downvote', the comments and share buttons.

To take a closer look at templating check out Sia's 11ty blog repository where she outlines how to implement your own blog and The Eleventy Meetup's Templating Superpower video where they review how to use templating to make your static site feel dynamic!

Creating Servers with Node
As part of this week's lessons we learned how to configure and operate a localhost server using node.js in conjunction with the express and nodemon packages.

Express

A minimalist web framework that allows us to design and build web applications quickly.

You can think of Express as a utility belt for creating web applications with Node.js. It provides functions for pretty much everything you need to do to build a web server. If you were to write the same functionality with vanilla Node.js, you would have to write significantly more code. - Jondlm, Stack Overflow

Nodemon

"A tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected." -Nodemon Module Description

This allows up to makes changes on the fly and reload the server to review our pages automatically! It may seem small, but it's a wonderful tool :)

Week In Review

I had a great time connecting with other developers and exploring different node modules. I'm realizing how many helpful resources are out there and I'm excited to share what I've learned. See you next week!

I hope you enjoyed the read!

Feel free to follow me on GitHub, LinkedIn and DEV for more!

Software Dev Weekly Update #3: Class Constructors, Node.js, & Modules

Ethan Goddard — Wed, 11 Aug 2021 13:55:31 +0000

This past week was a whirlwind of learning!

I completed sections #29, #30, #31, then started #32. We wrapped up Class Constructor Functions, covered the setup of GitBash and Node.js, reviewed commonly used terminal/shell commands, created files/directories, learned how to 'export' and 'require' JS files, and more!

Class Constructor Function
The 'Extend' and 'Super' keywords demonstrate inheritance between functions by allowing us to remove duplicate code in many different functions and share it from one super function ('extend').

Using 'super' allows us to use part of the super function inside another constructor function when defining new properties.

//Pet is a Super class
class Pet {
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    eat(){
        return `${this.name} is eating!`
    }
}

class Cat extends Pet {
    constructor(name, age, livesLeft = 9){
        //Super allows us to call the constructor in the Super Function called Pet
        super(name, age)
        this.livesLeft = livesLeft;
    }
    meow(){
        return 'MEOWWW!!'
    }
}

class Dog extends Pet {
    bark(){
        return 'WOOOF!!'
    }
    //Dog having it's own Eat method means it will not look for Eat in the Pet function becuase it already found one in the Dog function
    eat(){
        return `${this.name} scarfs their food!`
    }
}

Quick Demo of a Color Converter Constructor Function

My First Brush With Node.js
Node.js is written with JavaScript but is a beast of its own. We learned that it can be used for all sorts of projects ranging from web servers to game development, its even used with Astronauts Spacesuits by NASA!

For the purposes of learning web development we focused on using Node.js as a console to execute JavaScript files we've written. For example, we wrote a program that creates a 'Project' folder and populates it with our boilerplate files (index.html, app.js, styles.css).

//File System Module in Node.js example
//https://nodejs.org/dist/latest-v14.x/docs/api/fs.html

//This is required for fs to work
const fs = require('fs');
// console.log(fs);

//This remove the executable file path and the file path to the new folder/file
const folderName = process.argv[2] || 'Project'

//ASync version of making a directory
// fs.mkdir('ASyncTest', { recursive: true }, (err) => {
//     console.log('In the callback!')
//     if(err) throw err;
//   });

//Sync version of making a directory
//fs.mkdirSync('SyncTest');

//console.log('I come after the mkdir in the file!')

//This is an example of how to create a directory and files within it. Also wrapped in a try/catch to catch any errors
try{
    fs.mkdirSync(folderName);
    fs.writeFileSync(`${folderName}/index.html`, '');
    fs.writeFileSync(`${folderName}/app.js`, '');
    fs.writeFileSync(`${folderName}/styles.css`, '');
} catch(error){
    console.log('Ope! An error was encountered:', error);
}

Exploring Modules and the NPM Universe
In this section we're reviewing the concept of 'export' and using index.js with 'require' to access data from one file inside another.

This lesson is still in progress but it's building to a better understanding of Modules and their key part in modern web apps.

The learning journey continues...

It's been a fantastic week and I'm very excited to be starting the 'backend' part of the course. Being able to deploy what I've written is the missing piece to the puzzle that I've never been able to solve but I feel it's within reach. It keeps me motivated to push on and I can't wait to share what I've learned next week!

I hope you enjoyed the read!

Feel free to follow me on GitHub, LinkedIn and DEV for more!

Software Dev Weekly Update #2: AJAX & APIs

Ethan Goddard — Sat, 07 Aug 2021 12:50:44 +0000

We covered AJAX (AJAJ), APIs, and Prototypes. Below is a simple/practical example of utilizing the TVMAZE API to get TV show information based on user input and displaying images of the first 10 results.

We used the Postman tool to test using different headers and get an easy visual of the data sent back.

I also spent time on a programming learning app called SoloLearn. The JavaScript course presents you with quick challenges and I focused on the Conditionals and Loops section. It's been a great way to practice concepts and helps the info sink in!

JavaScript


//This function makes the API data request for whatever search we input and also clears the images when a new search is performed
const form = document.querySelector('#searchForm');
const displayArea = document.getElementById('requestImages');
form.addEventListener('submit', async function(event){
    event.preventDefault();
    displayArea.innerHTML = '';
    const searchTerm =  form.elements.query.value;
    const config = {params:{q:searchTerm}}
    const response = await axios.get('https://api.tvmaze.com/search/shows', config);
    makeImages(response.data);
    form.elements.query.value = '';
})

//This function filters out just the medium image URLs and appends them to the page (and only if a medium image is availale) and clears the search box after submission
const makeImages = function(shows){
    for(let result of shows){
        if(result.show.image){
            const tvShowImage = document.createElement('IMG');
            tvShowImage.src = result.show.image.medium;
            displayArea.append(tvShowImage);
        }
    }
}

HTML

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <h1>TV Show Search App</h1>
    <form id="searchForm">
        <input type="text" placeholder="TV Show Title" name="query">
        <button>Search</button>
        <div id="requestImages"></div>
    </form>
    <script src="TV_Show_Search_App.js"></script>
</body>

</html>

I hope you enjoyed the read!

Feel free to follow me on GitHub, LinkedIn and DEV for more!