OneMonth Javascript - Project 1

index.html

<div id="tracks">
  <div id="train" class="move">
    <div class="car">A</div>
    <div class="car">B</div>
  </div>
</div>

OneMonth Javascript - Project 1.markdown

OneMonth Javascript - Project 1

A Pen by Justin Michaliga on CodePen.

License.

script.js

//Preface: Variable Types: Strings + Numbers + Booleans
var number = 10;
var another = 3.141559;
var boolean = true;
var string = "This is a string";

//Part 1: Arrays (A type of Object)

//Define an Array
var train = new Array("Engine","Coal", 20, "Gas", "", false, "Caboose");

//Another way to define an Array (preferred)
var subway = ["Crowded", "Smelly", "Just Right", null, "ShowTime!"];

//Define a reusable function that will loop through our array
function displayArray(arr) {
	  str = '';
	  for (var a in arr) {
	    str = str + '<div class="car">' + arr[a] + '</div>';
	  }
	  return str;
}

//Selector
var track = document.getElementById('tracks');

//Display via writting to the DOM
track.innerHTML = '<div id="train">' + displayArray(train) + '</div>';

//Example using AppendChild + Loop (Non-String)

//Another way to define a function
var moveTrain = function(){
  var train = document.getElementById('train');
  train.className = 'move';
}

//Pass into another function/method
//setTimeout(moveTrain, 2000);


/*
//Part 2: Objects

//Lets add Objects into our Arrays
var car = {
  name: "",
  weight: null,
  cargo: 'unknown'
};

//Assemble another train...
var train2 = [];

train2.push(car);

//Add an Engine
var engine = car;
engine.name = "Engine!";
engine.weight = 500;
engine.cargo = null;
train2.push(engine);

//Why did this repeat?

//Enter Object Orientation
function Car(name, weight, cargo){
  this.name = name;
  this.weight = weight;
  this.cargo = cargo;
}

var caboose = new Car();
caboose.name = "Caboose";
train2.push(caboose);

//Clear the track
track.innerHTML = '';

//Display via writting to the DOM
track.innerHTML = '<div id="train">' + displayArray(train2) + '</div>';

*/

style.css

body{
  background-color:#1D293B;
  overflow:hidden;
}
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

#tracks{
  position:absolute;
  top: 100px;
  width:100%;
  height: 50px;
  border-bottom: 5px dotted white;
}

#train{
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
}

.move{
  -webkit-transform: translate(1000px, 0px);
  -webkit-transition-duration: 5s;
  transform: translate(1000px, 0px);
  transition-duration: 5s;
}

.car{
  width: 150px;
  height: 50px;
  border-radius: 5px;
  background-color: grey;
  margin: 10px;
  float: left;
  color: white;
  font-family: Helvetica;
  text-align: center;
  line-height: 50px;
}