Javascript

Time Conversion

Problem from Hackerranck.

I am practising algorithms and tried this one today.

I first get the two first characters of the string ‘s’, the ones that represent the hour and change them to a number with parseInt and assign them to the variable hour.

If this variable hour is bigger than 12 I rest 12, if it is equals 12, hour would be the string ’00’ and for the rest of the cases I add 12.

Then I add hour to a substring of the argument without the two first characters and delete the two last characters too, the one that should be “AM” or “PM”.

My solution:

JS Cheatsheet (work in process)

JavaScript engine makes multiply passes over the same code:

First pass to parse the syntax. During this pass the engine undertakes a process called automatic semicolon insertion.
Second pass to initialise variables and functions and store them in memory. Hoisting: is a JS default behaviour of moving all declarations to the top of the current scope ( to the top of the current script or the current function). Variables and constants declared with let or const are not hoisted.
The third pass is to actually execute the code line-by-line.

First and second passes are called the compilation phase and the third phase is called the execution phase.

Debugging:

No matter what combination of types you write, JS won’t throw an error and will return something, even a non sense and weird something.

alert(“Hola!”);
console.log(“Hola!”);
console.error(“Hola!”);
console.warn(“Hola!”);
console.table

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}
var me = new Person("Diana", "Badas");
console.table(me);

function Person(firstName, lastName) {

this.firstName = firstName;

this.lastName = lastName;

}

var me = new Person("Diana", "Badas");

console.table(me);

try statement lets you test a block of code for errors.

catch statement lets you handle the error.

function Myfunc() {
  this.twice=function(num){
    if(num<2){
      throw "num should be greater than 2"
    }
  return num*2;
  }
}

var myfunc = new Myfunc();
var list = new Array(0,4,1,3);
for(var i=0; i<4; i++){
  try{
    var res = myfunc.twice(list[i]);
    console.log(res);
  }
  catch(e){
    console.log(e);
  }
}

function Myfunc() {

this.twice=function(num){

if(num<2){

throw "num should be greater than 2"

}

return num*2;

}

var myfunc = new Myfunc();

var list = new Array(0,4,1,3);

for(var i=0; i<4; i++){

try{

var res = myfunc.twice(list[i]);

console.log(res);

}

catch(e){

console.log(e);

}

throw statement lets you create custom errors.

function getRectArea(width, height) {
  if (isNaN(width) || isNaN(height)) {
    throw "Parameter is not a number!";
  }
}

try {
  getRectArea(3, 'A');
}
catch(e) {
  console.error(e);
  // expected output: "Parameter is not a number!"
}

function getRectArea(width, height) {

if (isNaN(width) || isNaN(height)) {

throw "Parameter is not a number!";

}

try {

getRectArea(3, 'A');

}

catch(e) {

console.error(e);

// expected output: "Parameter is not a number!"

}

finally statement lets you execute code, after try and catch, regardless of the result.

let letsTry = () => {

  try {
    // there is a SyntaxError
    eval('alert("Hello world)');
    
  } catch(error) {
    console.error(error);
	
    // break the function completion
    return;
  } finally {
      console.log('finally')
  }

  // This line will never get executed
  console.log('after try catch')
}

letsTry();

let letsTry = () => {

try {

// there is a SyntaxError

eval('alert("Hello world)');

} catch(error) {

console.error(error);

// break the function completion

return;

} finally {

console.log('finally')

}

// This line will never get executed

console.log('after try catch')

}

letsTry();

Tests:

Unit testing
Integration testing
End-to end testing

Operators:

//Arithmetic operator **. The exponentiation operator returns the left number //raised to the power of the right number.
3 ** 3;
  => 27

//The remainder operator returns the remainder when the left number is divided //by the right number

5 % 2;
  => 1

//Order of the operations
()
**
* / %
+-

//Incrementing and Decrementing
//JS has a pair of operators that we can use to increment and decrement a //numerical value stored in a variable ++ --. 
//If the ++ operator comes after the variable, the variable's value is returned first and then incremented.

let count = 0;
count++;
  => 0
count;
  => 1

Otherwise:

let count = 5;

--count;
  => 4
count;
  => 4

//Assignment operators
let count = 0;

count += 10;
  => 10

count -= 2;
  => 8

//Equality operators:
== // Loose equality operator
=== /// Strict equality operator
!= // Loose inequality operator
!== // Strict inequality operator

//Relational operators
> //Greater than
>= //Greater than or equals
< //Less than
<= //Less than or equals

//Logical operators
//Use ! to negate an expression
//Convert an expression to a boolean using !!

//Link conditions with && and ||

//Return value of && is the falsy expression. The return value of the && //operator is always one of the two expressions. If the first expression is //falsy, && returns the value of the first expression. If the first expression //is truthy, && returns the value of the second expression.

//Return value of || is the truthy expression.
// The return value of the || operator is always one of the two expressions. //If the first expression is truthy, || returns the value of the first //expression. If the first expression is falsy, || returns the value of the //second expression.

//Arithmetic operator **. The exponentiation operator returns the left number //raised to the power of the right number.

3 ** 3;

=> 27

//The remainder operator returns the remainder when the left number is divided //by the right number

5 % 2;

=> 1

//Order of the operations

()

* / %

//Incrementing and Decrementing

//JS has a pair of operators that we can use to increment and decrement a //numerical value stored in a variable ++ --.

//If the ++ operator comes after the variable, the variable's value is returned first and then incremented.

let count = 0;

count++;

=> 0

count;

=> 1

Otherwise:

let count = 5;

--count;

=> 4

count;

=> 4

//Assignment operators

let count = 0;

count += 10;

=> 10

count -= 2;

=> 8

//Equality operators:

== // Loose equality operator

=== /// Strict equality operator

!= // Loose inequality operator

!== // Strict inequality operator

//Relational operators

> //Greater than

>= //Greater than or equals

< //Less than

<= //Less than or equals

//Logical operators

//Use ! to negate an expression

//Convert an expression to a boolean using !!

//Link conditions with && and ||

//Return value of && is the falsy expression. The return value of the && //operator is always one of the two expressions. If the first expression is //falsy, && returns the value of the first expression. If the first expression //is truthy, && returns the value of the second expression.

//Return value of || is the truthy expression.

// The return value of the || operator is always one of the two expressions. //If the first expression is truthy, || returns the value of the first //expression. If the first expression is falsy, || returns the value of the //second expression.

Data types:

Everything in JavaScript is data except:

operators:+, -, <=, etc.
reserved words:function, for, debugger, etc.

A basic type checking with the typeof operator: typeof(42);

The JS’s seven data types:

1.Numbers (primitive data type).

2. strings (primitive data type).

We use ‘single quotes’, “double quotes”, or `backticks.

String concatenation:

//Using the + operator:

"This" + "is" + "a" + "string";
//Interpolation of variables and other JS expressions

const number = 5;

"This" + "is" + "my string number " + number + "."

//Using template literals, using backticks.
This is a string using a template literal, introduced with ES2015 I can interpolate my varirable ${number} here too!

//Using the + operator:

"This" + "is" + "a" + "string";

//Interpolation of variables and other JS expressions

const number = 5;

"This" + "is" + "my string number " + number + "."

//Using template literals, using backticks.

This is a string using a template literal, introduced with ES2015 I can interpolate my varirable ${number} here too!

3. Booleans (primitive data type).

The following values are falsy:

false

null

undefined

0

NaN

'', ""

Every other value is truthy.

4.Symbols(primitive data type) are primarily used as an alternate way to add properties to objects.

5. Objects:

JS defines 5 types of primitive data types: string, number, boolean, null, undefined. All JS values, except primitives, are objects. In JS almost everything is an object: booleans, numbers and strings, if defined with the new keyword can be objects. Primitive data types represent single values, such as a number, a string or false, instead of a collection of values.

var x = new Boolean(false);

//typeof x returns object

JS objects: dates, maths, regular expressions, arrays, functions and objects.

Objects are similar to a hash in Ruby or a dictionary in Python. Arrays in JS are objects too.

All keys in an object are strings.

const diana = {
  name: "Diana",
  surname: "Badas",
  city: "London",
  favouriteColour: "blue"
};

const diana = {

name: "Diana",

surname: "Badas",

city: "London",

favouriteColour: "blue"

};

Access a value stored in an Object:

//.notation
diana.name;

//bracket notation
diana["name"];

//.notation

diana.name;

//bracket notation

diana["name"];

Add a property to an Object:

//.notation
diana.university = "USC";

//bracket notation
diana["age"] = "enough";

//.notation

diana.university = "USC";

//bracket notation

diana["age"] = "enough";

Delete an property

//.notation
delete diana.age;

//bracket notation
delete diana["university"];

//.notation

delete diana.age;

//bracket notation

delete diana["university"];

Arrays:

let dogs = ["Byron", "Cubby", "Boo Radley", "Luca"];

1	let dogs = ["Byron", "Cubby", "Boo Radley", "Luca"];

Add an element:

//Destructively
dogs.push("Snoopy");
  =>  ["Byron", "Cubby", "Boo Radley", "Luca", "Snoopy"]
dogs.unshift("Lassie");
  => ["Lassie", "Byron", "Cubby", "Boo Radley", "Luca", "Snoopy"]
//Using arr[arr.length] = b 
let dogs = ["Byron", "Cubby", "Boo Radley", "Luca"];
const moreDogs = ["Toby", "Luna"]; 
dogs[dogs.length] = moreDogs;
  => (2) ["Toby", "Luna"] 
dogs;
  => (5) ["Byron", "Cubby", "Boo Radley", "Luca", Array(2)]

//Non-destructively
//Using ... operator
const allDogs = ["Rex", ...dogs];
allDogs;
  => ["Rex", "Lassie", "Byron", "Cubby", "Boo Radley", "Luca", "Snoopy"]
dogs;
  => ["Lassie", "Byron", "Cubby", "Boo Radley", "Luca", "Snoopy"]

//Using.concat 
const moreDogs = ["Toby", "Luna"]; 
const allConcatDogs = dogs.concat(moreDogs);

//Destructively

dogs.push("Snoopy");

=> ["Byron", "Cubby", "Boo Radley", "Luca", "Snoopy"]

dogs.unshift("Lassie");

=> ["Lassie", "Byron", "Cubby", "Boo Radley", "Luca", "Snoopy"]

//Using arr[arr.length] = b

let dogs = ["Byron", "Cubby", "Boo Radley", "Luca"];

const moreDogs = ["Toby", "Luna"];

dogs[dogs.length] = moreDogs;

=> (2) ["Toby", "Luna"]

dogs;

=> (5) ["Byron", "Cubby", "Boo Radley", "Luca", Array(2)]

//Non-destructively

//Using ... operator

const allDogs = ["Rex", ...dogs];

allDogs;

=> ["Rex", "Lassie", "Byron", "Cubby", "Boo Radley", "Luca", "Snoopy"]

dogs;

=> ["Lassie", "Byron", "Cubby", "Boo Radley", "Luca", "Snoopy"]

//Using.concat

const moreDogs = ["Toby", "Luna"];

const allConcatDogs = dogs.concat(moreDogs);

Delete an element:

let dogs = ["Byron", "Cubby", "Boo Radley", "Luca"]

//Destructively
dogs.pop(); //deletes the last element
  => "Luca"
dogs;
  => ["Byron", "Cubby", "Boo Radley"]

dogs.shift(); //deletes the first element
  => "Byron"
dogs;
  => ["Cubby", "Boo Radley"]

Array.splice() //Add and delete elements
var arrDeletedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

const numbers = [1, 3, 4, 6];

numbers.splice(1, 0, 2); // at index 1, remove 0 elements, add number 2
  => [] //elements deleted
numbers;
  => [1, 2, 3, 4, 6]

numbers.splice(4, 1, 5);
  => [6] //elements deleted
numbers;
  => [1, 2, 3, 4, 5]


//Non-destructively
Array.slice
arr.slice([begin[, end]])
//begin index is included and end index is not included in the new array.

const colours = ["red", "blue", "yellow", "green"];

colours.slice(2);
  => ["yellow", "green"]
colours;
  => ["red", "blue", "yellow", "green"]
colours.slice(1, 3)
  => ["blue", "yellow"]
colours;
  => ["red", "blue", "yellow", "green"]

let dogs = ["Byron", "Cubby", "Boo Radley", "Luca"]

//Destructively

dogs.pop(); //deletes the last element

=> "Luca"

dogs;

=> ["Byron", "Cubby", "Boo Radley"]

dogs.shift(); //deletes the first element

=> "Byron"

dogs;

=> ["Cubby", "Boo Radley"]

Array.splice() //Add and delete elements

var arrDeletedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

const numbers = [1, 3, 4, 6];

numbers.splice(1, 0, 2); // at index 1, remove 0 elements, add number 2

=> [] //elements deleted

numbers;

=> [1, 2, 3, 4, 6]

numbers.splice(4, 1, 5);

=> [6] //elements deleted

numbers;

=> [1, 2, 3, 4, 5]

//Non-destructively

Array.slice

arr.slice([begin[, end]])

//begin index is included and end index is not included in the new array.

const colours = ["red", "blue", "yellow", "green"];

colours.slice(2);

=> ["yellow", "green"]

colours;

=> ["red", "blue", "yellow", "green"]

colours.slice(1, 3)

=> ["blue", "yellow"]

colours;

=> ["red", "blue", "yellow", "green"]

6. Null (primitive data type). Null is an absent object, but when called with typeof returns object.

7. Undefined (primitive data type). It is like a “not yet assigned a value”.

Spread operator (…)

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

returnedTarget
  return value => {a: 1, b: 4, c: 5}

//Object.assign changes the original array, it is destructive.
target
  return value => {a: 1, b: 4, c: 5}

const mergedObj = { ...target, ...source };

mergedObj
  return value => {a: 1, b: 4, c: 5}

//... operator is not destructive.
target
  return value => {a: 1, b: 2}

const target = { a: 1, b: 2 };

const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

returnedTarget

return value => {a: 1, b: 4, c: 5}

//Object.assign changes the original array, it is destructive.

target

return value => {a: 1, b: 4, c: 5}

const mergedObj = { ...target, ...source };

mergedObj

return value => {a: 1, b: 4, c: 5}

//... operator is not destructive.

target

return value => {a: 1, b: 2}

Variables:

Start with a lower case and don’t use spaces, use camelCase.

Mind reserved words or future reserved words.

We can package both of the initialisation steps, declaration and assignment in a single line of code:

const name = "Diana";
  => undefined

1 2	const name = "Diana"; => undefined

Differences between var, const and let.

*Variables declared without a const, let, or var keywords are always globally scoped. You can avoid this using strict mode.

var:

var is function scoped. The scope is limited to the function within which it is defined. If it is defined outside any function, the scope of the variable is global. They are not block-scoped.

Can be reassigned.

var comes with a ton of baggage in the form of scope issues, for example, with var no error is thrown if you declare a variable twice.

let:

let is block scoped. The scope is limited to the block defined by curly braces {}.

Can be reassigned.

const:

const is block scoped. The scope is limited to the block defined by curly braces {}.

Can not be reassigned to anew value, but can be mutated.

const colours = ["blue", "red"];

colours.push("yellow");
  => 3
colours;
  => ["blue", "red", "yellow"]

colours = ["blue", "red", "yellow", "green"];
  => VM2182:1 Uncaught TypeError: Assignment to constant variable.

const colours = ["blue", "red"];

colours.push("yellow");

=> 3

colours;

=> ["blue", "red", "yellow"]

colours = ["blue", "red", "yellow", "green"];

=> VM2182:1 Uncaught TypeError: Assignment to constant variable.

Conditional statements:

if (condition) {
  doThis;
} else {
  doThat;
}

if (condition) {
  doThis;
} else if (condition2) {
  doThat;
} else {
  doOtherThing;
}

//Switch
switch(expression) {
  case x:
    //code block
    break;
  case y:
    //code block
    break;
  default:
    //code block
}

//Ternary operator
condition ? expresion1 : expresion2;
//I the condition returns a truthy value, run the code in expression1. I the condition returns a falsy value, run the code in expression2.

if (condition) {

doThis;

} else {

doThat;

}

if (condition) {

doThis;

} else if (condition2) {

doThat;

} else {

doOtherThing;

}

//Switch

switch(expression) {

case x:

//code block

break;

case y:

//code block

break;

default:

//code block

}

//Ternary operator

condition ? expresion1 : expresion2;

//I the condition returns a truthy value, run the code in expression1. I the condition returns a falsy value, run the code in expression2.

Functions:

A function is an object that contains a sequence of JavaScript statements. Declaration:

const sayMyName = () => {

  console.log("Diana");

}

const sayMyName = () => {

console.log("Diana");

}

Function calling or execution:

sayMyName();

1	sayMyName();

Parameters. They are locally scoped variables that are usable, scoped, to inside the function. Here name is our parameter.

const sayAname = (name) => {
  console.log(name);
}

const sayAname = (name) => {

console.log(name);

}

JS will assign the argument of “Diana” to the parameter name when this function is called.

sayAname("Diana");

1	sayAname("Diana");

Function declaration vs function expression

The difference lies in how the browser loads them into the execution context.

Function declarations load before any code is executed.

Function expressions load only when the interpreter reaches that line of code.

If you try to call a function expression before it is loaded you get an error.

//Function declaration
function myFunc () {
  return 5;
}
  => undefined

//Anonymous function expression
const myFunc = function () {
  return 5;
}
  => undefined
myFunc;
  => f(){
       return 5;
      }
myFunc();
  => 5 

//Named function expression
const myFunc = function myFunc () {
  return 5;
}

//Function declaration

function myFunc () {

return 5;

}

=> undefined

//Anonymous function expression

const myFunc = function () {

return 5;

}

=> undefined

myFunc;

=> f(){

return 5;

}

myFunc();

=> 5

//Named function expression

const myFunc = function myFunc () {

return 5;

}

myFunc();

function myFunc () {
  return 5;
}
  => 5
/////////////

myFunc();
const myFunc = function () {
  return 5;
}
  => Uncaught ReferenceError: Cannot access 'myFunc' before initialization

myFunc();

function myFunc () {

return 5;

}

=> 5

/////////////

myFunc();

const myFunc = function () {

return 5;

}

=> Uncaught ReferenceError: Cannot access 'myFunc' before initialization

Arrow functions:

Arrow functions do not have their own this, it uses whatever this is defined within the scope it is in.

Looping and iteration:

Iteration is the number of times a loop can be executed, while loop is the code which generate or causes expressions to be iterated.

Looping is the process of executing a set of statements repeatedly until a condition is met. It’s great for when we want to do something a specific number of times (for loop) or unlimited times until the condition is met (while loop).

Iteration is the process of executing a set of statements once for each element in a collection.

//for loop
const colours = ["blue", "red", "yellow"];

for (let i = 0; i < colours.length; i++) {
  console.log(`Colour ${colours[i]}`);
}

//while loop
function printColours (colours) {
  let i = 0;
  while (i < colours.length) {
    console.log(`Colour ${colours[i]}`);
    i++;
  }
  return colours;
}

printColours(colours);

//for...of. Good for arrays. Allow us to use const
const colours = ["blue", "red", "yellow"];
for (const element of colours) {
  console.log(element);
}

//for...in. Good for objects. It iterates over the properties of //an object in an arbitrary order.
let result = '';
const myObject = {
  a: 1,
  b: 2,
  c: 3
}

for (const property in myObject) {
  result += myObject[property];
};
  => '123'

//for loop

const colours = ["blue", "red", "yellow"];

for (let i = 0; i < colours.length; i++) {

console.log(`Colour ${colours[i]}`);

}

//while loop

function printColours (colours) {

let i = 0;

while (i < colours.length) {

console.log(`Colour ${colours[i]}`);

i++;

}

return colours;

}

printColours(colours);

//for...of. Good for arrays. Allow us to use const

const colours = ["blue", "red", "yellow"];

for (const element of colours) {

console.log(element);

}

//for...in. Good for objects. It iterates over the properties of //an object in an arbitrary order.

let result = '';

const myObject = {

a: 1,

b: 2,

c: 3

}

for (const property in myObject) {

result += myObject[property];

};

=> '123'

Creating object with JS

//Constructor function<code>
function Person(first, last, email) {
  this.first = first;
  this.last = last;
  this.email = email;
  this.name = function() {return this.first + " " + this.last;};
}

Person.prototype.sayHello = function() {
  console.log(`Hi! My name is ${this.first}`);
};

let Nao = new Person("Nao", "Gonzalez", n"nao@gmail.com");

//Constructor function<code>

function Person(first, last, email) {

this.first = first;

this.last = last;

this.email = email;

this.name = function() {return this.first + " " + this.last;};

}

Person.prototype.sayHello = function() {

console.log(`Hi! My name is ${this.first}`);

};

let Nao = new Person("Nao", "Gonzalez", n"nao@gmail.com");

//Class syntax
class Person {
  constructor(data) {
    this.first = first;
     this.last = last;
     this.email = email;
     this.name = function() {return this.first + " " + this.last;};</code> } } Person.prototype.sayHello = function() { console.log(`<code>Hi, my name is ${this.first}</code>`); }

//Class syntax

class Person {

constructor(data) {

this.first = first;

this.last = last;

this.email = email;

this.name = function() {return this.first + " " + this.last;};</code> } } Person.prototype.sayHello = function() { console.log(`<code>Hi, my name is ${this.first}</code>`); }

Definitions:

S.O.L.I.D.: 5 principles of Object Oriented Design with JS.
- S: Single responsibility principle.
- O: Open closed principle. Open for extensions and closed for modifications, we shouldn’t introduce breaking changes to existing functionality.
- L: Liskov substitution principle. Every subclass should be substitutable for their parent class.
- I: Interface segregation principle. A client should never be forced to implement an interface that it doesn’t use or clients shouldn’t be forced to depend on methods they do not use.
- D: Dependency Inversion principle. Entities must depend on abstractions not on concretions. Importance of higher-order functions.
ES6: “ES” ECMAScript, the official name of the JavaScript specification (Harmony – ES5)
Higher Order function: Function that may receive a first-class function as an argument and can even return a function.
First-class functions: Functions that are treated as objects or assignable to a variable.
AJAX: Process of making requests for additional data became known as Asynchronous JavaScript and XML, or AJAX.
Closure: When a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope. A closure is a feature in JavaScript such that a function holds onto the variables that it had access to when it was declared. Closures can be used to declare functions that have specific variables always defined. JavaScript developers also take advantage of closures to encapsulate data, as we can declare our functions in such a way that the data is only accessible from the returned function, with no way to overwrite the variables captured by the closure.

function sayHi() {  // 'scope of sayHi' is the lexical scope for printHi
   var myVar = 'hi!!';
   return function printHi() {
      console.log(myVar);
   }
}
var myVar = null,
greetings = sayHi();
greetings(); // 'hi!!'

function sayHi() { // 'scope of sayHi' is the lexical scope for printHi

var myVar = 'hi!!';

return function printHi() {

console.log(myVar);

}

var myVar = null,

greetings = sayHi();

greetings(); // 'hi!!'

Lexical scope: Where functions and variables are declared.
Hoisting: It is JS’s default behaviour of moving declarations to the top of the current scope. Let and const are not hoisted. During a compilation, every declaration ( of variables or functions) are added to the relative scope. Function declaration hoisting differs from variables as the content of the function get hoisted too.

foo(); // ‘hola!’

function foo() {
  console.log(‘hola!’);
}

foo(); // ‘hola!’

function foo() {

console.log(‘hola!’);

}

Scope: Where something is available. In JS, where declared variables and methods are available within our code. Global scope, function scope, block scope, scope chain, lexical scope ( where functions and variables are declared).

function myFunction () {
  console.log(hello);
  var hello = "World!";
  return hello;

}

myFunction();

  => log: undefined
  => "World"

function myFunction () {

console.log(hello);

var hello = "World!";

return hello;

}

myFunction();

=> log: undefined

=> "World"

Recursion: A recursive function is a function that calls itself.

function countDown(n) {
  console.log(n);
  if(n >= 1) countDown(n-1);
}
countDown(5);

function countDown(n) {

console.log(n);

if(n >= 1) countDown(n-1);

}

countDown(5);

Call back: When we pass a function into another function where in it might be invoked, we refer to the passed function as a callback.

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}
function alertFinished(){
  alert('Finished my homework');
}
doHomework('math', alertFinished);

function doHomework(subject, callback) {

alert(`Starting my ${subject} homework.`);

callback();

}

function alertFinished(){

alert('Finished my homework');

}

doHomework('math', alertFinished);

forEach: Differences between map and forEach:
- forEach(): It simply calls a provided function on each element in your array. This callback is allowed to mutate the calling array. It returns undefined. forEach() affects and changes our original Array. forEach() may be preferable when you’re not trying to change the data in your array, but instead want to just do something with it — like saving it to a database or logging it out.
- map(): creates a new array with the results of calling a provided function on every element in the calling array. The difference is that map() utilises return values and actually returns a new Array of the same size. map() returns an entirely new Array — thus leaving the original array unchanged. And map() might be preferable when changing or altering data. Not only is it faster but it returns a new Array.

let arr = [1, 2, 3, 4, 5];
arr.forEach((num, index) => {
    arr[index] = num * 2;
});

arr;
  => [2,4,6,8,10]

let doubled = arr.map(num => {
    return num * 2;
});

doubled;
 => [2,4,6,8,10]
arr;
  => [1, 2, 3, 4, 5]

let arr = [1, 2, 3, 4, 5];

arr.forEach((num, index) => {

arr[index] = num * 2;

});

arr;

=> [2,4,6,8,10]

let doubled = arr.map(num => {

return num * 2;

});

doubled;

=> [2,4,6,8,10]

arr;

=> [1, 2, 3, 4, 5]

Statement vs expression: A statement is a unit of code that accomplish something but does not produce a value. An expression is a unit of code that produces a value.
- statements: variable declarations, iteration, control flow, debugging.
this: keyword that refers to the object it belongs to. Safer if using arrow functions, because arrow function uses whatever this is defined within the scope it is in.
- This, inside a standalone function will refer to the global object.
- Outside any function, this refers t the global object, in web browsers this is window.
- Inside an object method, this refers to the object that received the method call.
- Inside an standalone function, even one inside a method, this will default to the global object.
- When using strict mode in a standalone function, as we do inside classes, this will be undefined.
- We can use .bind, .call and .apply to control the value of this.

Recipe Manager Walkthrough

Rails with JavaScript – Recipe Manager

So… Starting with my project!

In first place, I want to build the JSON API using the Active Model Serializers gem. I add to my Gemfile:

gem ‘active_model_serializers’, that allows you to generate your JSON in an object-oriented and convention-driven manner.

How the JSON API works?

The user makes a request, clicking a link, filling a form… where we had added an event listener. That info is serialized, translated to JSON, and submitted via an AJAX POST or GET request. With that response or data we create a new JS object and then we append the info of that object that we want to show to the DOM using a jQuery selector.

Building a JSON API consists basically in creating the response with the right data to a request and the Active Model Serializers gem is the perfect tool for this. It allows us to format our JSON, select only the information we want, as well as get access to our relationships with a single request.

Setting up the Serializer files

One of the requirements for this project is render at least one index page and one show page via JS and an Active Model Serialization JSON Backend. I was thinking in rendering my recipes index and my recipes show pages.

At the moment I am displaying a list with all the recipes and links to their show page. I am not displaying more info than the title of the recipe in this page, so that’s what I want.

First I add to my Gemfile and bundle install:

gem ‘active_model_serializers’

Then I create my serializer file for my recipes. I tipe in my terminal:

rails g serializer recipe

And after creating it I specify which info, attributes and info of its relations I would like to have, in this case, the id and the name of the recipe.

If we specify in our contoller to “render :json” and because I have installed Serializer, Rails will now look to this folder before rendering a resource. Every object we pass to “render :json” in our controllers needs a corresponding serializer file.

* If you want deep nesting by default, you can set a configuration property in an active_model_serializer initializer. (stack overflow)

Create the file: app/config/initializers/active_model_serializer.rb with the following content:

<span class="typ">ActiveModelSerializers</span><span class="pun">.</span><span class="pln">config</span><span class="pun">.</span><span class="pln">default_includes </span><span class="pun">=</span> <span class="str">'**'</span>

1	<span class="typ">ActiveModelSerializers</span><span class="pun">.</span><span class="pln">config</span><span class="pun">.</span><span class="pln">default_includes </span><span class="pun">=</span> <span class="str">'**'</span>

I am going to create my serializers and specify which info I want.

Configuring the Controller to respond to JSON requests.

This is my new index action in the recipes controller:

Uhhm…I just realize that I have a problem. I want different info depending on where the object is rendered. For the index page I only want the title and the id of the recipe but for the show page I want all the info.

Lets make some changes and create two different serializers for recipes.

At the end I created these serializers:

category_serializer.rb
comment_serializer.rb
full_recipe_serializer.rb
ingredient_serializer.rb
rating_serializer.rb
recipe_ingredient_serializer.rb
simple_recipe_serializer.rb
user_recipe_serializer.rb

A lot of serializers…. I started playing with my app and encounter this error when I was trying to get one of the recipes of my index:

I think that this error is due to the info that the function fetch() is getting is not JSON.

Nice post about Unexpected token < in JSON at position 0.

My solution was in the serializers, I wasn’t displaying correctly the info and the relations between the objects. When I was trying to create my JS recipe object my function didn’t have the necessary info. It didn’t have the info for the has_many relations, so when I was trying to create these objects like the comments or the ingredients for the recipe I got this error.

I realize too that I didn’t need a serializer for my user class doing some methods inside the serializers where I wanted that info, for example in the comment serializer I added a method to display the name of the user who create that comment. This is better too in terms of security. I am not displaying my users data. Better not to have the associations because it will give access to the whole user object, including the authenticity token.

This is how my serializers look now:

Two different serializers for a recipe and I have created some methods to get the info I needed and delete the belongs_to relations. I kept the has_many relations trying to avoid defining methods for relations as much as possible, because it’s not clean, neither maintainable but didn’t do it in the case of the user info.

I have my serializers and the following images are my changes in my controllers to respond to JSON requests:

Comments controller:

Recipes controller:

Next steps are creating my event listener and JavaScript Object Models.

Creating my files for the JS code

I first add to my Gemfile: gem ‘sprockets-rails’, :require => ‘sprockets/railtie’, a Ruby library for compiling and serving web assets.

I continue adding a new file for all my JS: app/assets/javascripts/main.js. I don’t have to require this directive(main.js) in my manifest (application.js) because this manifest has //= require_tree, which will include all JS files in the same folder that application.js is located.

I’ll have to load the manifest file in my layout, so in the file: app/views/layouts/application.html.erb, inside the head tag, I write:

<%= javascript_include_tag “application” %>

javascript_include_tag is a Rails helper that generates a script tag instructing the browser to load that JS file.

Using arrow syntax of ES6

It differs with the normal JS function by the treatment of this. A normal JS function gets a thisaccording to the calling context (traditional semantics), but the arrow functions keep the this of the context of definition.

Creating a comment with Ajax.

In my comments/new.html.erb I have a form to create a comment. What I want to do is set it up so that I use this form, but use jQuery and AJAX to submit it, so I can handle a JSON response and display the newly created comment without redirecting to the comment show page.

Web users like fast websites and AJAX (Asynchronous JavaScript and XML) is a good technique to keep users engaged. In AJAX we first deliver a page using HTML and CSS and then use JS to add more to the DOM.

Ajax relies on several technologies: promises, XMLHttpRequestObjects, a serialization format called JSON, asynchronous Input / Output and the event loop.

Browsers and servers are only able to pass strings of text to each other. By using JSON, we can structure this text in a way that a browser or server can read as a regular JS object.

I will use the JavaScript fetch() function to apply the AJAX technique.

First step is to set up a document ready in order to detect when our HTML page has loaded, and the document is ready to be manipulated.

Then we hook up an event handler to the form’s submit event, and then block the form from doing an HTML submit. We add an event listener for $(‘div#new_comment’).on(‘submit’, function(event) {} to our document ready().

I am using the jQuery on() method. The on() method attaches one or more event handlers for the selected elements and child elements.

To display error message I read this tutorial.

To create the comment via Ajax I need a JavaScript Object Model too. I added two prototype functions.

This JMO allows me to get all of the attributes of a comment into javascript by passing the comment resource sent by the controller in response to the AJAX request for json and assigning its properties to a new javascript model object. We can then use the properties of this new javascript model object within my methods on the prototype to help me display the content to the page.

After creating this event listener I follow similar procedure to create another one to handle the comments when they are created in a nested resource, and after that one to get, not post, an index of recipes and show a recipe plus a JS Object model for Recipe, RecipeIngredient, Category and Rating.

Link to my repository.

Local web server and Visual Studio Code

I am using Visual Studio Code to follow the HTML fundamentals lessons of Flatiron Bootcamp.

In order to get a running local web server to see my code in action I chose to use the following procedure which is valid for MAC or PC and I saw in this website: Visual Studio Code and local web server.

Create folder for your project and add an index.html file and a package.json file to it. Inside package.json file copy/paste the following text:

{ 
   "name": "Demo", 
   "version": "1.0.0", 
   "description": "demo project.", 
   "scripts": { 
     "lite": "lite-server --port 10001", 
     "start": "npm run lite" 
   }, 
   "author": "", 
   "license": "ISC", 
   "devDependencies": { 
     "lite-server": "^1.3.1" 
   } 
}

{

"name": "Demo",

"version": "1.0.0",

"description": "demo project.",

"scripts": {

"lite": "lite-server --port 10001",

"start": "npm run lite"

"author": "",

"license": "ISC",

"devDependencies": {

"lite-server": "^1.3.1"

}

I tried that but it didn’t work, I was getting an error (to see more about it check this link) :
String does not match the pattern of "^(?:@[a-z0-9-~][a-z0-9-._~]*/)?[a-z0-9-~][a-z0-9-._~]*$".
So I changed the string ‘Demo’ to ‘demo’ and all good.

Install Node.js and npm. I follow this website: Installing Node.js and NPM on Mac.
- First, install Homebrew running on your terminal:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

- Get the latest version of Node running:

brew update

- Install node running:

brew install node

- Test that you got Node running:

node -v

- Test that you got NPM running:

npm -v

Install the web server running:

npm install

This will install lite-server (defined in package.json), a static server that loads index.html in your default browser and auto refreshes it when application files change.

Start the local web server running:

npm start

Done!!

Sharing code

Here are some of the code sharing websites that I found doing my research. My focus is on HTML, CSS and JS.

Codepen
JS Bin
CSSDeck
GitHub Gist
JSFiddle. This is the one I am using. I have an account with them to test and keep my HTML, CSS and JavaScript snippets. It is very easy to generate embed code. This is how it looks:

Home page for a website

Solitaire Game

So, this is my first JS project, in which I am still working to implement most of the conditions with the drag and drop and make some sense according to the game rules.

I have used HTML, CSS and JS.

Here it is my HTML, where I have created a navigation bar and a structure made of divs to display the stack, the waste, the spades, hearts, diamonds and clubs piles and a second row with seven piles. In my first attempt I made a table with rows but it was much easier using divs when I started to modify everything with CSS.

<!DOCTYPE html>

<html>

  <head>
    <link rel="stylesheet" href="styles.css">
      <title>
      Solitaire
      </title>
  </head>

  <body>
    <h1>My first project</h1>
    <p>A solitaire game</p>

    <div class="topnav">
      <a href="#newgame">New game</a>
        <a href="#undo">Undo</a>
        <div class="dropdown">
          <button class="dropbtn">Options
          </button>
          <div class="dropdown-content">
            <a href="#">Instructions</a>
            <a href="#">Sounds</a>
            <a href="#">Change image</a>
          </div>
        </div>
    </div>

    <div class="row">

      <div id="stack" class="column">
      <img src="/Users/Carolina/Desktop/WD/Solitario/Images/JPEG/blue_back.jpg" id="backCard" class="shadoweffect" alt="back" style="width:100%" onclick="createImages()" >
      </div>

      <div id="waste" class="column">  
      </div>

      <div id="empty" class="column">  
      </div>

      <div id="spades pile" class="column" ondrop="drop(event)" ondragover="allowDrop(event)">
      </div>

      <div id="hearts pile" class="column" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="/Users/Carolina/Desktop/WD/Solitario/Images/JPEG/AH.jpg" draggable="false" ondragstart="drag(event)" id="dos" alt="AH" style="width:100%">
      </div>

      <div id="diamonds pile" class="column" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="/Users/Carolina/Desktop/WD/Solitario/Images/JPEG/AD.jpg" draggable="false" ondragstart="drag(event)" id="tres" alt="AD" style="width:100%"> 
      </div>

      <div id="clubs pile" class="column" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="/Users/Carolina/Desktop/WD/Solitario/Images/JPEG/AC.jpg" draggable="false" ondragstart="drag(event)" id="quatro" alt="AC" style="width:100%">
      </div>

    </div>
      
    <div class="row">
      <div id="pile1" class="column" ondrop="drop(event)" ondragover="allowDrop(event)">
     
      </div>

      <div id="pile2" class="column" ondrop="drop(event)" ondragover="allowDrop(event)">
       
      </div>

      <div id="pile3" class="column" ondrop="drop(event)" ondragover="allowDrop(event)">
      
      </div>

      <div id="pile4" class="column" ondrop="drop(event)" ondragover="allowDrop(event)">
      
      </div>

      <div id="pile5" class="column" ondrop="drop(event)" ondragover="allowDrop(event)">
      
      </div>

      <div id="pile6" class="column" ondrop="drop(event)" ondragover="allowDrop(event)">
      
      </div>

      <div id="pile7" class="column" ondrop="drop(event)" ondragover="allowDrop(event)">
      
      </div>
    </div>

    <script type="text/javascript" src="script.js"></script>
    
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>

Solitaire

</title>

</head>

<body>

<h1>My first project</h1>

<p>A solitaire game</p>

<button class="dropbtn">Options

</button>

<a href="#">Instructions</a>

<a href="#">Sounds</a>

<a href="#">Change image</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Here it is my CSS code. I have had many problems trying to put the image I was dragging on top of another one. Everything has to say with their position, absolute and relative positions. The position property.

html {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  background-color: green;
}

h1, p {
  color: lightblue;
}

.topnav, .dropdown {
  background-color: lightgreen;
  overflow: hidden;
}

.topnav a, .dropbtn {
  float: left;
  color: blue;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.dropdown .dropbtn {
  font-size: 17px;
  text-align: left;
  border: none;
  outline: none;
  color: blue;
  padding: 14 px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: lightgreen;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: lightgreen;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: blue;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: lightblue;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.column {
  position: relative;
  float: left;  
  width: 12.5%;
  height: 250px;
  border: 1px solid green;
}

.row:after {
  content: "";
  clear: both;
  display: table;
}

.imgAbsolute {
  position: absolute;
  top: 0;
  right: 0;
}

.shadoweffect:hover {
  box-shadow: 0 0 10px #000;
}

#uno, #dos, #tres, #quatro  {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

html {

width: 100%;

height: 100%;

}

body {

position: relative;

background-color: green;

}

h1, p {

color: lightblue;

}

.topnav, .dropdown {

background-color: lightgreen;

overflow: hidden;

}

.topnav a, .dropbtn {

float: left;

color: blue;

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

}

.dropdown .dropbtn {

font-size: 17px;

text-align: left;

border: none;

outline: none;

color: blue;

padding: 14 px 16px;

background-color: inherit;

font-family: inherit;

margin: 0;

}

.topnav a:hover, .dropdown:hover .dropbtn {

background-color: lightgreen;

}

.dropdown-content {

display: none;

position: absolute;

background-color: lightgreen;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

}

.dropdown-content a {

float: none;

color: blue;

padding: 14px 16px;

text-decoration: none;

display: block;

text-align: left;

}

.dropdown-content a:hover {

background-color: lightblue;

}

.dropdown:hover .dropdown-content {

display: block;

}

.column {

position: relative;

float: left;

width: 12.5%;

height: 250px;

border: 1px solid green;

}

.row:after {

content: "";

clear: both;

display: table;

}

.imgAbsolute {

position: absolute;

top: 0;

right: 0;

}

.shadoweffect:hover {

box-shadow: 0 0 10px #000;

}

#uno, #dos, #tres, #quatro {

opacity: 0.5;

filter: alpha(opacity=50); /* For IE8 and earlier */

}

And finally, the fun part! All my little “monstruos”, aka my functions. There are some pertinent comments along the code.

//Drag and drop functions
function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function allowDrop(ev) {
  ev.preventDefault();
}

function getNextRank( rank ) {
  if( rank == "A" ) {
    return "2";
  }
  if( rank == "J" ) {
    return "Q";
  }
  if( rank == "K" ) {
    return "A";
  }
  if( rank == "1" ) { // we're only looking at the first character, this represents 10
    return "J";
  }
  return parseInt( rank ) + 1;
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");

  console.log( ev.target );
  console.log( document.getElementById(data) );
  var findmydiv = ev.target;
  while(findmydiv.nodeName == "IMG") {
    findmydiv = findmydiv.parentElement;
  }
  if (findmydiv.id == "waste") {
     return false;
  }

  console.log( findmydiv.id );
  if ( findmydiv.id.endsWith( "pile" ) ) {
    console.log(data); // the one we just dropped
    console.log(ev.target.id); // the one we just dropped it on
    droppedSplit = data.split("");
    targetSplit = ev.target.id.split("");
    targetRank = targetSplit[ 0 ];
    droppedRank = droppedSplit[ 0 ];
    console.log( "targetRank " + droppedRank );
    nextRank = getNextRank( droppedRank );
    if(ev.target.nodeName == "DIV" && droppedRank != "A"){
      console.log( droppedRank + " is not A");
      return false;
    }
    else if( droppedRank != nextRank) {
      console.log( "droppedrank is not " + nextRank );
      return false;
    }
 }


  card = document.getElementById(data);
  console.log( ev.target.offsetTop );
  card.style.top = 50 + ev.target.offsetTop + "px";
  card.style.left = "0px";
  findmydiv.appendChild(card);
}


//Card as an object with arrays
var card = {
  suit: "",
  rank: ""
};

var ranks = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
var suits = ["C", "D", "H", "S"];
var deck = [];
    
console.log( ranks );
for( var i = 0; i < ranks.length; i++ ) {
  var rank = ranks[ i ];
  console.log( rank );
  
  for( var j = 0; j< suits.length; j++ ) {
    var suit = suits[ j ];
    console.log( suit );
    console.log( rank + suit );
    deck.push( rank + suit );
    }
}
console.log( deck );


//Fisher-Yates shuffle

function shuffle (cardArray) {
  var i = 0
    , j = 0
    , temp = null

  for (i = cardArray.length - 1; i > 0; i -= 1) {
    j = Math.floor(Math.random() * (i + 1))
    temp = cardArray[i]
    cardArray[i] = cardArray[j]
    cardArray[j] = temp
  }
}
shuffle(deck);

//Declaring different arrays from my deck using slice method

var stackPile = deck.slice(29, 53);

var wastePile = [];

//Dynamically add images to a card

/*

var findPreviousImage = ev.target;
  while(findPreviousImage.nodeName == "IMG") {
    findPreviousImage = findPreviousImage.parentElement;
  }

  elem.style.top = 50 + ev.target.offsetTop + "px";
  elem.style.left = "0px";
  findPreviousImage.appendChild(elem);
 */

function createImages ( nameInFile, where, cssImage) {
  var elem = document.createElement("img");
  var fileName = "/Users/Carolina/Desktop/WD/Solitario/Images/JPEG/" + nameInFile + ".jpg";
    elem.setAttribute("src", fileName);
     elem.setAttribute("class", cssImage);
      elem.setAttribute("id", nameInFile);
       elem.setAttribute("width", "100%");
        elem.setAttribute("draggable", "true");
         elem.setAttribute("ondragstart", "drag(event)")
          elem.setAttribute("ondrop", "drop(event)");
           elem.setAttribute("ondragover", "allowDrop(event)");
    document.getElementById(where).appendChild(elem);
    return elem;
  }   


lastIndex = 0;
for( var pileCount = 1; pileCount <= 7; pileCount++ ) {
  var pile = deck.slice(lastIndex, lastIndex+pileCount);
  lastIndex = lastIndex+pileCount;
  for ( var i = 0; i < pile.length; i++ ) {
    elem = createImages( pile [ i ], "pile"+pileCount, "imgAbsolute");
    elem.style.top = i * 50 + "px";
  }
}

//Before I made my for loop to dynamically add images to a card
/*
var pile1 = deck.slice(1, 2);
createImages( pile1, "pile1");

var pile2 = deck.slice(2, 4);
for ( var i = 0; i < pile2.length; i++ ) {
  createImages( pile2 [ i ], "pile2", "imgAbsolute");
}

var pile3 = deck.slice(4, 7);
for ( var i = 0; i < pile3.length; i++ ) {
  createImages( pile3 [ i ], "pile3", "imgPiles");
}
  
var pile4 = deck.slice(7, 11);
for ( var i = 0; i < pile4.length; i++ ) {
  createImages( pile4 [ i ], "pile4", "imgPiles");
}

var pile5 = deck.slice(11, 16);
for ( var i = 0; i < pile5.length; i++ ) {
  createImages( pile5 [ i ], "pile5", "imgPiles");
}

var pile6 = deck.slice(16, 22);
for ( var i = 0; i < pile6.length; i++ ) {
  createImages( pile6 [ i ], "pile6", "imgPiles");
}

var pile7 = deck.slice(22, 29);
for ( var i = 0; i < pile7.length; i++ ) {
  createImages( pile7 [ i ], "pile7", "imgPiles");
}
*/

//Onclick event on back card image 

document.getElementById("backCard").onclick = function() {

  for ( var i = 0; i<3; i++ ) {

    if( stackPile.length == 0 ) {
      stackPile = wastePile;
      stackPile.reverse();
      wastePile = [];
    }

    card = stackPile.pop();
    elem = createImages( card,  "waste", "imgAbsolute" );
    elem.style.left = i * 50 + "px";
    wastePile.push( card );
}
}

//Spades pile array

var spadesPile = [];

//console.log( suits[0] );

var spades = suits[0];

//console.log(spades);

for ( i = 0; i < ranks.length; i++ ) {
  var rank = ranks[i];
  //console.log( rank + spades );
  spadesPile.push( rank + spades );
};

console.log( spadesPile );

var previous = [];
for (var i=0; i<spadesPile.length; i++) {
  var previousCard = spadesPile[i-1];
  previous.push(previousCard);
  }

console.log(previous);

  /*for( var i = 0; i < spadesPile.length; i++) {
    createImages( spadesPile[ i ], "spades pile", "imgAbsolute");
  };*/

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

//Drag and drop functions

function drag(ev) {

ev.dataTransfer.setData("text", ev.target.id);

}

function allowDrop(ev) {

ev.preventDefault();

}

function getNextRank( rank ) {

if( rank == "A" ) {

return "2";

}

if( rank == "J" ) {

return "Q";

}

if( rank == "K" ) {

return "A";

}

if( rank == "1" ) { // we're only looking at the first character, this represents 10

return "J";

}

return parseInt( rank ) + 1;

}

function drop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("text");

console.log( ev.target );

console.log( document.getElementById(data) );

var findmydiv = ev.target;

while(findmydiv.nodeName == "IMG") {

findmydiv = findmydiv.parentElement;

}

if (findmydiv.id == "waste") {

return false;

}

console.log( findmydiv.id );

if ( findmydiv.id.endsWith( "pile" ) ) {

console.log(data); // the one we just dropped

console.log(ev.target.id); // the one we just dropped it on

droppedSplit = data.split("");

targetSplit = ev.target.id.split("");

targetRank = targetSplit[ 0 ];

droppedRank = droppedSplit[ 0 ];

console.log( "targetRank " + droppedRank );

nextRank = getNextRank( droppedRank );

if(ev.target.nodeName == "DIV" && droppedRank != "A"){

console.log( droppedRank + " is not A");

return false;

}

else if( droppedRank != nextRank) {

console.log( "droppedrank is not " + nextRank );

return false;

}

card = document.getElementById(data);

console.log( ev.target.offsetTop );

card.style.top = 50 + ev.target.offsetTop + "px";

card.style.left = "0px";

findmydiv.appendChild(card);

}

//Card as an object with arrays

var card = {

suit: "",

rank: ""

};

var ranks = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];

var suits = ["C", "D", "H", "S"];

var deck = [];

console.log( ranks );

for( var i = 0; i < ranks.length; i++ ) {

var rank = ranks[ i ];

console.log( rank );

for( var j = 0; j< suits.length; j++ ) {

var suit = suits[ j ];

console.log( suit );

console.log( rank + suit );

deck.push( rank + suit );

}

console.log( deck );

//Fisher-Yates shuffle

function shuffle (cardArray) {

var i = 0

, j = 0

, temp = null

for (i = cardArray.length - 1; i > 0; i -= 1) {

j = Math.floor(Math.random() * (i + 1))

temp = cardArray[i]

cardArray[i] = cardArray[j]

cardArray[j] = temp

}

shuffle(deck);

//Declaring different arrays from my deck using slice method

var stackPile = deck.slice(29, 53);

var wastePile = [];

//Dynamically add images to a card

var findPreviousImage = ev.target;

while(findPreviousImage.nodeName == "IMG") {

findPreviousImage = findPreviousImage.parentElement;

}

elem.style.top = 50 + ev.target.offsetTop + "px";

elem.style.left = "0px";

findPreviousImage.appendChild(elem);

function createImages ( nameInFile, where, cssImage) {

var elem = document.createElement("img");

var fileName = "/Users/Carolina/Desktop/WD/Solitario/Images/JPEG/" + nameInFile + ".jpg";

elem.setAttribute("src", fileName);

elem.setAttribute("class", cssImage);

elem.setAttribute("id", nameInFile);

elem.setAttribute("width", "100%");

elem.setAttribute("draggable", "true");

elem.setAttribute("ondragstart", "drag(event)")

elem.setAttribute("ondrop", "drop(event)");

elem.setAttribute("ondragover", "allowDrop(event)");

document.getElementById(where).appendChild(elem);

return elem;

}

lastIndex = 0;

for( var pileCount = 1; pileCount <= 7; pileCount++ ) {

var pile = deck.slice(lastIndex, lastIndex+pileCount);

lastIndex = lastIndex+pileCount;

for ( var i = 0; i < pile.length; i++ ) {

elem = createImages( pile [ i ], "pile"+pileCount, "imgAbsolute");

elem.style.top = i * 50 + "px";

}

//Before I made my for loop to dynamically add images to a card

var pile1 = deck.slice(1, 2);

createImages( pile1, "pile1");

var pile2 = deck.slice(2, 4);

for ( var i = 0; i < pile2.length; i++ ) {

createImages( pile2 [ i ], "pile2", "imgAbsolute");

}

var pile3 = deck.slice(4, 7);

for ( var i = 0; i < pile3.length; i++ ) {

createImages( pile3 [ i ], "pile3", "imgPiles");

}

var pile4 = deck.slice(7, 11);

for ( var i = 0; i < pile4.length; i++ ) {

createImages( pile4 [ i ], "pile4", "imgPiles");

}

var pile5 = deck.slice(11, 16);

for ( var i = 0; i < pile5.length; i++ ) {

createImages( pile5 [ i ], "pile5", "imgPiles");

}

var pile6 = deck.slice(16, 22);

for ( var i = 0; i < pile6.length; i++ ) {

createImages( pile6 [ i ], "pile6", "imgPiles");

}

var pile7 = deck.slice(22, 29);

for ( var i = 0; i < pile7.length; i++ ) {

createImages( pile7 [ i ], "pile7", "imgPiles");

}

//Onclick event on back card image

document.getElementById("backCard").onclick = function() {

for ( var i = 0; i<3; i++ ) {

if( stackPile.length == 0 ) {

stackPile = wastePile;

stackPile.reverse();

wastePile = [];

}

card = stackPile.pop();

elem = createImages( card, "waste", "imgAbsolute" );

elem.style.left = i * 50 + "px";

wastePile.push( card );

}

//Spades pile array

var spadesPile = [];

//console.log( suits[0] );

var spades = suits[0];

//console.log(spades);

for ( i = 0; i < ranks.length; i++ ) {

var rank = ranks[i];

//console.log( rank + spades );

spadesPile.push( rank + spades );

};

console.log( spadesPile );

var previous = [];

for (var i=0; i<spadesPile.length; i++) {

var previousCard = spadesPile[i-1];

previous.push(previousCard);

}

console.log(previous);

/*for( var i = 0; i < spadesPile.length; i++) {

createImages( spadesPile[ i ], "spades pile", "imgAbsolute");

};*/

WORK TO DO: I am still working in all the necessary conditions to delimit the drop function according to the rules of the game. Now, you can drag and drop everywhere, you can even pick a card that it isn’t on the top of the pile!

Getting the Basics on Web Development

Online Education courses I have completed:

OpenClassrooms:

OpenClassrooms courses are concise. They are great if you want to have a general idea about the subject that is covered.

Code Academy:
- Introduction to HTML
- Learn CSS

Good courses to get the fundamental info but you have to pay if you want to do a project to practise your new skills.

Flatiron School:
- Coding Bootcamp Prep (JS, Ruby)

The Javascript part is a lot harder than the Ruby one. They explain the fundamentals and you do some exercises and some projects as a Rock Dodger using JS and a Tic Tac Toe with Ruby. I had really enjoyed this course.

Books: