Node.js – EJS

 

 

“E” is for “effective.” EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It’s just plain JavaScript.

What is EJS: Link

Documentation: Link-1   Link-2

Text Tutorial: Link

 

 

express-ejs-layouts

Another tool is ” express-ejs-layouts ”

that allows you to import or stick HTML elements into the ejs file

Documentation: LInk-1   Link-2

Tex Tutorial: Link-1

YouTube: Vdo-1

 

.

Category: Node | Comments Off on Node.js – EJS

How to Deploy a Node.js App

Node.js Deployment to Heroku:

Here is a Online tutorial step by step:  SCOTCH.IO

 

Node.js Deployment to Digital Ocean:

Text Tutorial: LINK.

 

 

.

Category: Node | Comments Off on How to Deploy a Node.js App

JavaScript DOM Manipulation

Here are some of my notes in how to do some of the dome manipulation using JavaScript.

How to change a picture when clicking a button

There are several ways to do this one is, “event listeners”, and other would be using “onclick”

In the following examples, we have the pictures in a folder call “IMG” and I name them numerically, from 0 to 36. and the js code generate a random number and it gets cocatenated in to a string containing the location and name of the file to load to img-frame.

Example using Function and onclick=””

Example using event listeners.

Here are some examples of the code working:

works good.

.

Category: JS | Comments Off on JavaScript DOM Manipulation

XMLHttp

The XMLHttpRequest API : Link

Basic example of a call processed:

.

Category: JS | Comments Off on XMLHttp

Fetch() API – JavaScript

Before you study this topic make sure to understand: PromisesJSON 

Video Tutorial Resources: Link1Link2 – Link3

Examples using the “FETCH() API

This example is from this: Video-Link, in this example we:

  • create a constant named “root” and load it with a Free API-Url 
  • Invoke fetch( root, { method: “GET” } ) with the parameters “root”, and the method: “GET”
  • Use “.then” passing an anonymous function that receives the response when the promise is fulfill
  • This anonymous uses the proto method “.json” to modify the data, and return it.
  • Use “.then” by chaining, it receives the data and prints it.

In the next example we do the same but we add “.catch()” so we can catch if the API do not provide a 200 response:

Another example:

One practice exercise:

Here we are getting the Title: “Harry Potter 1 and the Philosopher’s Stone” from the API and rend it to the DOM  <div id=”div1″>

 

.

 

Category: JS | Comments Off on Fetch() API – JavaScript