C B – Page 5

What I have learned so far about OO Ruby

From what I’ve understood Object-Oriented programming is very popular and it has lots of advantages. The programmer may have a closer feeling of working with real-life entities due to the multitask nature of the objects in OOP. From my point of view OOP is a good way to keep all your code organise. Each object contains its data and functionality within its scope and if its methods are written in an abstract way they can be reused for other objects or for a different project.

I am still working in the OO Ruby section and it is taking me some time to understand all the concepts and why or when to use them. Here it is what I have learned so far:

Creating a class

Class names begin with capital letters because they are stored in Ruby constants. If our class name contains two words, the name should be CamelCased.

class Dog

end

class Dog

end

Instantiation

Every time we want to represent a new individual in our program we should instantiate an object of that type (Dog.new). We call these individuals instances.

class Dog

end

flecha = Dog.new
flecha #=> #<Dog:0x007fc52c2d7d20> #This is the object identifier, Ruby Object Notation.

class Dog

end

flecha = Dog.new

flecha #=> #<Dog:0x007fc52c2d7d20> #This is the object identifier, Ruby Object Notation.

Instances variables

An instance variable represents a singular property of an individual, of an instance. This variable is accessible in any instance method in a particular instance of a class. The name of the instance variable is written with a @ at the beginning of the word: @instance_variable_name.

class Dog
  def name=(name)
    #This is the instance variable
    @name = name
  end
  
  def name
    @name
  end
end
  
flecha = Dog.new #We create an instance of Dog
flecha.name = "flecha" #We set the name of this new instance to "flecha"

class Dog

def name=(name)

#This is the instance variable

@name = name

end

def name

@name

end

flecha = Dog.new #We create an instance of Dog

flecha.name = "flecha" #We set the name of this new instance to "flecha"

Instance methods

We call the methods defined within the object’s class instance methods because they are methods that belong to any instance of the class.

They provide a mechanism for an object to expose to the outside world its data. They can manipulate the internal state of an object and provide some functionality for an individual object too.

class Dog
  # Class body

  # Instance Method Definition
  def bark
    puts "Woof!"
  end
end
  
flecha = Dog.new
flecha.bark #> "Woof!" #Now flecha can bark

class Dog

# Class body

# Instance Method Definition

def bark

puts "Woof!"

end

flecha = Dog.new

flecha.bark #> "Woof!" #Now flecha can bark

Attribute readers, writers and accesors

Our object’s instances can have attributes, like a name or hair colour in the case of our Dog class. In order to set these attributes we have to use a writer and in order to have these data available in the outside world we have to have a reader. It is very important to use an instance variable (@name), otherwise the getter method couldn’t read the data that we set in the writer method because it is out of scope.

class Dog
  
  def name=(name)#This is the setter or writer method 
    @name = name
  end
 
  def name #This is the getter or reader method
    @name
  end
end

class Dog

def name=(name)#This is the setter or writer method

@name = name

end

def name #This is the getter or reader method

@name

end

This is the explicit method for the attribute @name. There is another faster way to do it using a macro: the attr_writer, the attr_reader and the attr_accessor that does the work of the two previous macros. In Ruby a macro is like a method that instead of returning a Ruby datatype returns more Ruby code. The implementation of macros is considered metaprogramming.

class Dog

  attr_writer :name #This is the setter method
  attr_reader :name #This is the getter method
  
end

#This snippet is equal to the following one:

class Dog

  attr_accessor :name
  
end

class Dog

attr_writer :name #This is the setter method

attr_reader :name #This is the getter method

end

#This snippet is equal to the following one:

class Dog

attr_accessor :name

end

When to use attr_accessor vs a custom reader/writer.

The attr_accessor macro will provide a naive interface for reading and writing to an instance variable. Anytime we need something conceptually different or more complex, we should build our own reader or writer.

Self

Whenever an object needs to refer to itself, the keyword “self” is used.

In an instance method, self will always refer to the instance itself and in a class method, self will always refer to the class itself.

Class variable

Class variables are for properties that belong to the entire class. A class level variable can be used for example for instance memoization, for keeping track of all instances of a class or for collaborating data. The name of the class variable is written with a double @ at the beginning of the word: @@class_variable_name.

class Dog
  attr_accessor :name
  @@all = [] #This is a class variable
 
  def self.all
    @@all
  end
end

class Dog

attr_accessor :name

@@all = [] #This is a class variable

def self.all

@@all

end

#self.all is a class method for reading data stored in the class variable @@all. This is a class reader, very similar to an instance reader method that reads an instance property.

Class methods

With these methods we can access any class variable. A class method operate on the entire class and expose the class’ scope to the rest of our program. They don’t have access to the instance scope.

def self.class_method_name
  # some code
end

def self.class_method_name

# some code

end

The most common class methods are:

Class finders

A class finder method returns existing instances.

class Dog
  attr_accessor :name
  @@all = []
  
  def initialize(name)
    @name = name
    self.class.all << self
    # self in the initialize method is our new instance
    # self.class is Dog
    # self.class.all == Dog.all

  end
 
  def self.all
    @@all
  end
  
  def self.find_by_name(name) #This is the class finder
    self.all.find{|dog| dog.name == name}
  end

end

class Dog

attr_accessor :name

@@all = []

def initialize(name)

@name = name

self.class.all << self

# self in the initialize method is our new instance

# self.class is Dog

# self.class.all == Dog.all

end

def self.all

@@all

end

def self.find_by_name(name) #This is the class finder

self.all.find{|dog| dog.name == name}

end

Custom class constructors

A class constructor is any class method that instantiates an instance of the class.

class Dog
  @@all = []

  def self.create
    @@all << self.new
  end
end

class Dog

@@all = []

def self.create

@@all << self.new

end

Class operators

A class operator is perfect to manipulate any class level data.

class Dog
  attr_accessor :name
  @@all = []
 
  def self.all
    @@all
  end
  
  def initialize(name)
    @name = name
    @@all << self
  end
  
  def self.destroy_all
    self.all.clear
  end
end

class Dog

attr_accessor :name

@@all = []

def self.all

@@all

end

def initialize(name)

@name = name

@@all << self

end

def self.destroy_all

self.all.clear

end

Programming paradigms

A programmer can follow different approaches, also known as programming paradigms, when writing code. Two of the most important programming paradigms are the procedural and the Object-Oriented ones.

Usually a programming language falls under one paradigm like Ruby , that is mainly an OOP language. But some other languages as JavaScript can be multi-paradigm and support procedural, object-oriented (prototype-based) and functional programming styles.

The main difference between them is how you organise your code:

-In a procedural approach your code is a list of instructions or steps to be carried out.

board = Array.new(9, " ")

puts "Welcome to Tic Tac Toe!"
display_board(board)

play(board)

WIN_COMBINATIONS = [
  [0,1,2], # Top row
  [3,4,5], # Middle row
  [6,7,8], # Lower row
  [0,3,6], # Left column
  [1,4,7], # Middle column
  [2,5,8], # Rigth column
  [0,4,8], # Left to Rigth diagonal
  [2,4,6] # Rigth to Left diagonal
]

# Display_board accepts a board and prints
# out the current state.
def display_board (board)
  puts " #{board[0]} | #{board[1]} | #{board[2]} "
  puts "-----------"
  puts " #{board[3]} | #{board[4]} | #{board[5]} "
  puts "-----------"
  puts " #{board[6]} | #{board[7]} | #{board[8]} "
end

def input_to_index(user_input)
  user_input.to_i - 1
end

board = Array.new(9, " ")

puts "Welcome to Tic Tac Toe!"

display_board(board)

play(board)

WIN_COMBINATIONS = [

[0,1,2], # Top row

[3,4,5], # Middle row

[6,7,8], # Lower row

[0,3,6], # Left column

[1,4,7], # Middle column

[2,5,8], # Rigth column

[0,4,8], # Left to Rigth diagonal

[2,4,6] # Rigth to Left diagonal

]

# Display_board accepts a board and prints

# out the current state.

def display_board (board)

puts " #{board[0]} | #{board[1]} | #{board[2]} "

puts "-----------"

puts " #{board[3]} | #{board[4]} | #{board[5]} "

puts "-----------"

puts " #{board[6]} | #{board[7]} | #{board[8]} "

end

def input_to_index(user_input)

user_input.to_i - 1

end

-In an Object-Oriented approach your code is organised using objects and classes.

class TicTacToe
  def initialize(board = nil)
    @board = board || Array.new(9, " ")
  end
  
  WIN_COMBINATIONS = [
  [0,1,2], # Top row
  [3,4,5], # Middle row
  [6,7,8], # Lower row
  [0,3,6], # Left column
  [1,4,7], # Middle column
  [2,5,8], # Rigth column
  [0,4,8], # Left to Rigth diagonal
  [2,4,6] # Rigth to Left diagonal
  ]

  def display_board
  puts " #{@board[0]} | #{@board[1]} | #{@board[2]} "
  puts "-----------"
  puts " #{@board[3]} | #{@board[4]} | #{@board[5]} "
  puts "-----------"
  puts " #{@board[6]} | #{@board[7]} | #{@board[8]} "
  end
  
  def input_to_index(user_input)
  user_input.to_i - 1
  end

class TicTacToe

def initialize(board = nil)

@board = board || Array.new(9, " ")

end

WIN_COMBINATIONS = [

[0,1,2], # Top row

[3,4,5], # Middle row

[6,7,8], # Lower row

[0,3,6], # Left column

[1,4,7], # Middle column

[2,5,8], # Rigth column

[0,4,8], # Left to Rigth diagonal

[2,4,6] # Rigth to Left diagonal

]

def display_board

puts " #{@board[0]} | #{@board[1]} | #{@board[2]} "

puts "-----------"

puts " #{@board[3]} | #{@board[4]} | #{@board[5]} "

puts "-----------"

puts " #{@board[6]} | #{@board[7]} | #{@board[8]} "

end

def input_to_index(user_input)

user_input.to_i - 1

end

Reading about the different paradigms I found lots of new and very complicated concepts as: modularisation as a main trait of the procedural paradigm, and data abstraction, encapsulation, polymorphism, inheritance and serialisation-marshalling as traits for the Object-Oriented paradigm.

Apart from the desire to look the other way, I decided create some short and easy to understand definitions. Maybe the next time I find these concepts I don’t feel so uncomfortable!

Modularisation: It is used for reducing the complexity of a system subdividing a computer program into modules or separate software components.
Data abstraction: It is the reduction of data to a simplified representation of the whole. In OOP the programmer would just keep the relevant data inside the object hiding everything else. Data hiding is a software development technique.
Encapsulation : It is the inclusion within an object of all the data and methods need for the object to function.
Polymorphism: It is the ability to present the same interface (Shape) for differing data types (square, circle, etc).
Inheritance: It enables new objects (subclasses or derived classes) to take on the properties of existing objects (superclasses or base classes).
Serialisation and marshalling: Both are for transforming objects into series of bits. In particular, marshalling is about getting parameters from here to there, while serialisation is about copying structured data to or from a primitive form such as a byte stream. What is byte stream? A sequence of bits. What is a bit? It is the smallest unit of data in a computer. And what am I doing right now? Yak shaving!

Css Yak GIF from Css GIFs

GitHub Pages

You can have a website with GitHub Pages hosted directly from your GitHub repository. First thing you have to create this repository, and it will be named using your GitHub username + github.io. For example, my username in GitHub is DianaBaRo, so my GitHub Page is: https://dianabaro.github.io/.

They just allow one web page for user. What I did is create a table with links to all my different projects, a page that works as a kind of an index.

Your repository has to have an index.html. After adding folders with my projects to this repository I changed index.html to home.html and it didn’t work well, they ask you for the first one. Don’t change its name!

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!

Environment Setup for Javascript

In order to create a project I have had to setup my development environment. I used the following tools:

Browser
Editor

I could use any browser but I choose working with Google Chrome due to Chrome DevTools. To access them:

open a Chrome page
open the View menu at the top of your browser window
select Developer
and then select Developer Tools

As my editor I have chosen Visual Studio Code and jsfiddle.net to keep some snippets I was interested on.

Visual Studio Code is a cross-platform editor, that means you can use it with Windows, Linux and macOS. It helps you with debugging, with Git control and you can install plugins.

Visual Studio vs Visual Studio Code

The main difference is that VS Code is an Editor while VS is an IDE. Check these two posts for more information:

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:

WordPress.org

Here are the reasons why I have chosen this publishing platform:

[ First: WordPress.org is not WordPress.com. Nice post about this matter. ]

It is a free open-source.
You own your website and can customise as wanted using PHP, CSS and MySQL.
Self-hosted version. I already had my web domain and hosting with Go Daddy. It is very easy install WordPress on your Hosting Account.