Category Archives: Uncategorized

First we sign in. Make sure you select post.
Use signin as url. Make sure you have the Body tab selected.
Then select radio button raw, and JSON application/json at the pull down.

Put the body below, where you specify the email and password using json:

{

"email": "Ricky_Tsao2@haha.com",

"password" : "yourpasswordhere"

}

Then press send. If the user exists, you’ll get a result back with a token property. Copy the value of the token.

Select Headers tab. Make sure there is a key Authorization. For the value type in “Bearer “, with a space behind it, then paste the token. Then change the url to /users so that we can get a list of all users.

You’ll see a lot of find the user that matches the user you’ve just authenticated and copy the id. Paste the id behind localhost:8080/user/{id}, then change the http verb to PUT. In the Body, make sure you specify the JSON key/value of whatever you want to change. So if you want to change the name property to something just go:

{

"name": "Reeeeecky"

}

Let’s double check to make sure your update took place. Make sure you select ‘Get’, use the ID of the user that you’ve authenticated, and run it. You’ll see that the authenticated user’s name have been updated.

DNY Node API (5 – Authorization)

January 17, 2020Uncategorizedadmin

dnyNodeAPI-Authorization

DNY Node API (3 – validator)

January 15, 2020Uncategorizedadmin

down dnyNodeAPI-validator

install the package:
npm i express-validator

In package.json, change to 5.3.1

re-install everything:
npm install

create validator folder. Then create index.js file:

exports.createPostValidator = (req, res, next) => {

// title

req.check('title', 'Write a title').notEmpty();

req.check('title', 'Title must be between 4 to 140 characters').isLength({

min: 4,

max: 150

});

// body

req.check('body', 'Write a Body').notEmpty();

req.check('body', 'Body must be between 4 to 2000 characters').isLength({

min: 4,

max: 2000

});

// check for errors

const errors = req.validationErrors()

if (errors) {

const firstError = errors.map(error => error.msg)[0];

return res.status(400).json({error: firstError});

}

next();

}

DNY node api (2 – POSTS)

January 14, 2020Uncategorizedadmin

Forkify Web app (part 5 – Displaying the recipe view)

January 13, 2020Uncategorizedadmin

forkify-part5 source

install npm modules: npm install
run web app: open command line and type ‘npm run start’

We implement our files according to MVC paradigm:

We first create a recipe view file

src/js/views/recipeViews.js

We use fractional module to calculate integer display of fractions: npm install fractional –save

This is so that we can apply the effects to ingredient.count and ingredient.unit

import { elements } from './base'

import { Fraction } from 'fractional'

const formatCount = count => {

console.log(count)

if (count) {

// 2.5 --> 2 1/2

const result = count.toString().split('.').map(el => parseInt(el, 10))

console.log('result', result)

if (!result[1]) return result[0]

else if (result[0] == 0) {

const fr = new Fraction(count.toFixed(1))

return `${fr.numerator}/${fr.denominator}`

} else {

const fr = new Fraction(count.toFixed(1) - result[0])

return `${result[0]} ${fr.numerator}/${fr.denominator}`

}

return '?';

}

const createIngredient = ingredient => {

return `<li class="recipe__item">

</svg>

<div class="recipe__count">${formatCount(ingredient.count)}</div>

<span class="recipe__unit">${ingredient.unit}</span>

pasta

</div>

</li>`

}

export const clearResults = () => {

elements.recipe.innerHTML = '';

}

renderRecipe is used in our controller (index.js) to display html when we click on an item. We use the html from the template, and then add data to it via the recipe object.

export const renderRecipe = recipe => {

const markup = `

<span>${recipe.title}</span>

</h1>

</figure>

</svg>

<span class="recipe__info-data recipe__info-data--minutes">${recipe.time}</span>

<span class="recipe__info-text"> minutes</span>

</div>

</svg>

<span class="recipe__info-data recipe__info-data--people">${recipe.servings}</span>

<span class="recipe__info-text"> servings</span>

<svg>

</svg>

</button>

<svg>

</svg>

</button>

</div>

</svg>

</button>

</div>

${recipe.ingredients.map(el => createIngredient(el)).join(' ')}

</ul>

</svg>

<span>Add to shopping list</span>

</button>

</div>

This recipe was carefully designed and tested by

<span class="recipe__by">${recipe.author}</span>. Please check out directions at their website.

</p>

<span>Directions</span>

</svg>

</a>

</div>

elements.recipe.insertAdjacentHTML('afterbegin', markup)

};

As you can see, when we fetched data for the recipe successfully, we then render the recipe.
src/js/index.js

import Search from './models/Search'

import Recipe from './models/Recipes'

import * as searchView from './views/searchView'

import * as recipeView from './views/recipeView'

import { elements, renderLoader, clearLoader } from './views/base'

const state = {}

// other code

////// recipe /////////////

const controlRecipe = async () => {

const id = window.location.hash.replace('#', ''); // entire url, then get the hash

if (id) {

// prepare ui for changes

renderLoader(elements.recipe);

// create new recipe object

state.recipe = new Recipe(id)

searchView.highlightSelected(id)

try {

await state.recipe.getRecipe();

state.recipe.parseIngredients();

state.recipe.calcTime()

state.recipe.calcServings();

clearLoader();

recipeView.clearResults();

recipeView.renderRecipe(state.recipe) // render recipe here

} catch (err) {

console.log(err)

}

};

['hashchange', 'load'].forEach(event => window.addEventListener(event, controlRecipe))

src/js/models/Recipes.js

import axios from 'axios'

export default class Recipe {

constructor(id) {

this.id = id;

}

async getRecipe() {

try {

const res = await axios(`https://forkify-api.herokuapp.com/api/get?rId=${this.id}`);

this.title = res.data.recipe.title;

this.author = res.data.recipe.publisher;

this.image = res.data.recipe.image_url;

this.url = res.data.recipe.source_url;

this.ingredients = res.data.recipe.ingredients;

console.log(res)

} catch (err) {

console.log(error)

}

calcTime() {

// assuming that we need 15 min for each 3 ingredients

const numIng = this.ingredients.length;

const periods = Math.ceil(numIng/3);

this.time = periods * 15;

}

calcServings() {

this.servings = 4;

}

// change ingredient long names to short

parseIngredients() {

const unitsLong = ['tablespoons', 'tablespoon', 'ounce', 'ounces',

'teaspoon', 'teaspoons', 'cups', 'pounds'];

const unitsShort = ['tbsp', 'tbsp', 'oz', 'oz', 'tsp', 'tsp', 'cup', 'pound'];

const newIngredients = this.ingredients.map( el => {

// 1) uniform units

let ingredient = el.toLowerCase();

unitsLong.forEach((unit, i) => {

ingredient = ingredient.replace(unit, unitsShort[i]);

})

// 2) remove parenthesis

ingredient = ingredient.replace(/ *$[^)]*$ */g, ' ')

// 3) parse ingredients into count, unit, and ingredient

const arrIng = ingredient.split(' ');

const unitIndex = arrIng.findIndex(el2 => unitsShort.includes(el2));

let objIng;

if (unitIndex > -1) {

// there is a unit

// Ex. 4 1/2 cups, arrCount is [4, 1/2] ---> "4+1/2" ---> 4.5

// Ex. 4 cups, arrCunt is [4]

const arrCount = arrIng.slice(0, unitIndex);

let count;

if (arrCount.length === 1) {

count = eval(arrIng[0].replace('-', '+'));

} else {

count = eval(arrIng.slice(0, unitIndex).join('+'));

}

objIng = {

count,

unit: arrIng[unitIndex],

ingredient: arrIng.slice(unitIndex+1).join(' ')

};

} else if (parseInt(arrIng[0], 10)) {

// there is NO unit, but 1st element is number

objIng = {

count: parseInt(arrIng[0], 10),

unit: '',

ingredient: arrIng.slice(1).join(' ')

}

} else if (unitIndex === -1) {

// there is no unit and no 1st position

objIng = {

count: 1,

unit: '',

ingredient

};

}

return objIng;

});

this.ingredients = newIngredients

}

Forkify Web app (part 2 – fetching data and presenting it)

January 6, 2020Uncategorizedadmin

forkify-part2 download

The url to fetch data is https://forkify-api.herokuapp.com/api

We get GET data like so:
https://forkify-api.herokuapp.com/api/search?q=pizza
https://forkify-api.herokuapp.com/api//get?rId=47746

src/js/models/Search.js

We use Axios library for data fetching:

1) We await the Promise object to be done
2) then we extract the status to make sure its all OK
3) we finally log the result

import axios from 'axios'

export default class Search {

constructor(query) {

this.query = query

this.result = null

}

async getResults() {

try {

const res = await axios(`https://forkify-api.herokuapp.com/api/search?q=${this.query}`);

const {status, statusText} = res

if (status === 200 && statusText === 'OK') {

this.result = res.data && res.data.recipes;

console.log(this.result)

}

} catch (err) {

console.log(err)

}

The default http grammar is GET. axios(…) automatically use this if we only give it an url.

We will be using this Search’s getResults in the view. However, we need to set up utility functionality first.

src/js/views/base.js

This is just a way to get the DOM element of a certain class or id. Typically, we use document.querySelector, and then we store it in a literal object like so:

export const elements = {

searchForm: document.querySelector('.search'),

searchInput: document.querySelector('.search__field'),

searchResList: document.querySelector('.results__list')

}

Once we get the DOM element, we can use textContent, innerText, innerHTML to get the content.

src/js/views/searchView.js

The whole point to this searchView is to create a renderResults function that our controller can use.
We implement a renderResults function that outputs HTML for rending the content. We render the content. It takes in an recipe object and then uses the object’s properties along with the HTML. We also shorten the incoming titles to the length we want by using reduce.

Other purpose is to clear textfields and such:

– clearResults
– clearInputs

We first import the base. Then we simply access value, or innerHTML, according to what we want. From there we can clear certain HTML controls.

import { elements } from './base'

export const getInput = () => elements.searchInput.value;

export const clearInput = () => {

elements.searchInput.value = '';

}

export const clearResults = () => {

elements.searchResList.innerHTML = '';

}

const limitRecipeTitle = (title, limit = 17) => {

const newTitle = [];

if (title.length > limit) {

title.split(' ').reduce((acc, cur) => {

if (acc + cur.length <= limit) {

newTitle.push(cur)

}

return acc + cur.length;

}, 0);

return `${newTitle.join(' ')}`

}

return title

}

const renderRecipe = receipe => {

const markup = `<li>

</figure>

<h4 class="results__name">${limitRecipeTitle(receipe.title)}</h4>

<p class="results__author">${receipe.publisher}</p>

</div>

</a>

</li>`;

elements.searchResList. insertAdjacentHTML('beforeend', markup)

}

export const renderResults = recipes => {

recipes.forEach(recipe => renderRecipe(recipe))

}

component prop ‘key’

October 28, 2019Uncategorizedadmin

https://medium.com/@albertogasparin/forcing-state-reset-on-a-react-component-by-using-the-key-prop-14b36cd7448e

it helps React identifying a component but it also can be used to tell React that the component identity has changed, forcing a full re-instantiation of that component

On change, React will discard the current component instance and create a new one with a fresh state.

Operators in JS

September 14, 2019Uncategorizedadmin

operators are functions

They have precednece

Adding a Page and linking it in a React Project

September 10, 2019Uncategorizedadmin

routes/contact.js

add the route so we know where to go after a click event on a link.

src/contact.js

Add our component

src/app.js

Let’s add our page to routing

views/contact.hjs

add a template in our views

Permutation in code

August 23, 2019Uncategorizedadmin

A permutation is an act of arranging members in a set in all possible orders.

For example, for 1 2 3:

1 2 3
1 3 2
2 1 3
2 3 1
3 1 2
3 2 1

A total of 6 combinations.

Mathmetically it is denoted as 3! = 3 * 2 * 1.

This means that if I had 3 things, There are 3 of 2 of 1 way in which I can arrange them.

Mathematically we’d say 3! = 3 * 2 * 1 = 6 permutations
4! = 4 * 3 * 2 * 1 = 24 permutations
…etc

In order to put this permutation into code, each column is a for-loop.
When we process the next recursion, we subtract 1 from n, we call recursion( n – 1 ).

In other words:

At n = 3, which is column 3, there are three ticks. We loop through each of them.

For each index of the 3rd column, we call recursion with n – 1.

This brings us to n = 2, at the 2nd column. There are two ticks. We loop through them and call recursion with n – 1 for each of those ticks.

The recursion brings us to n = 1, at column 1. We display whatever is there.

If you were to run through it all, you’d log 6 times.

Hence what we’re essentially doing is 3 * 2 * 1 = 6 combination.

recursion(3);

function recursion(n) {

if (n == 1) { return; } // display

for (var i = 0; i < n; i+= 1) {

recursion (n - 1);

}

Chinese Rule of Eight

Category Archives: Uncategorized

DNY Node API (6 – Users)

DNY Node API (5 – Authorization)

DNY Node API (3 – validator)

DNY node api (2 – POSTS)

Forkify Web app (part 5 – Displaying the recipe view)

Forkify Web app (part 2 – fetching data and presenting it)

component prop ‘key’

Operators in JS

Adding a Page and linking it in a React Project

routes/contact.js

src/contact.js

src/app.js

views/contact.hjs

Permutation in code