Vehicle Maintenance-Add vehicle

This is part of the Vehicle Maintenance mobile app to track maintenance for vehicles. Upon selecting "Add" user will be directed to "Add" page.

by Neil Daley

HTML

<html>
<head>

</head>
<body onload="showList();">
<div class="boxleft">
  
  <p class="center large">VEHICLE CHECK</p>
  
 
 <nav>
  <ul class="vc">
    <li>
      <a class="dropdown" href="#">Vehicle</a>
      <ul>
    <li><a href="http://cssdeck.com/labs/full/da9azzqv">Add</a></li>
    <li><a href="#">Edit</a>
    <li><a href="#">Remove</a></li>
    </ul>
    </li>
    <li>
      <a class="dropdown" href="#">Status</a>
    <ul>
    <li><a href="#">Schedules</a></li>
    <li><a href="#">Appointment</a></li>
    <li><a href="#">Vendors</a></li>
    </ul>
    </li>
    <li>
      <a class="dropdown" href="#">Logs</a>
      <ul>
    <li><a href="#">Tune-Ups</a></li>
    <li><a href="#">Battery</a></li>
    <li><a href="#">Tires</a></li>
    <li><a href="#">Brakes</a></li>
    </ul>
    </li>
    <li>
      <a href="http://cssdeck.com/labs/full/bpzlkvlc">Home</a>
    </li>   
  </ul>
</nav> 
</br>

<p class="center large">ADD VEHICLE</p>

** To add a new vehicle, enter the information required and click the </br>
'Add New Vehicle' button.</br>

 <div class="boxinner1">
 <!--<p class="center large">ADD VEHICLE</p>-->
 
<div class="boxinner1">
 <br/> 'Year' and 'Make' of vehicle being added:
<input type="textbox" id="LinkName" Value="New Vehicle" />
<input type="button" id="AddLink" value="Add New Vehicle" onClick="addNode();" style="color:white; background-color:blue" />
</div><br/> 

<!--
** To review existing vehicles, click the </br>
'Vehicle List' button..</br>
   
 <input type="button" id="ShowList" value="Vehicle List" onClick="showList();" style="color:white; background-color:blue" />
<br/>-->

<p class="center">CURRENT VEHICLE LIST</p>

<p id="demo"></p>

<!--
<br/> 'Year' and 'Make' of vehicle being added:
<input type="textbox" id="LinkName" Value="New Vehicle" />
<input type="button" id="AddLink" value="Add New Vehicle" onClick="addNode();" style="color:white; background-color:blue" />
</div>

<p id="demo"></p>-->


</body>
</html>

CSS

.boxleft {
  float: left;
  width: 300px;
  height: 500px;
  border-radius: 10px;
  /*background-color: blue;*/
  background: linear-gradient(#0066ff, #0099ff, #00ccff);
}
/*
.boxinner1 {
  float: left;
  width: 300px;
  height: 20px;
  border-radius: 10px;
}

.boxinner2 {
  float: left;
  width: 300px;
  height: 20px;
  border-radius: 10px;
}*/

p.center {
    text-align: center;
    color: white;
}

p.large {
    font-size: 100%;
}

nav ul {
	-webkit-font-smoothing:antialiased;
	text-shadow:0 1px 0 #FFF;
    background: #ddd;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

nav li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    min-width: 25%;
}

nav a {
    background: #ddd;
    color: #444;
    display: block;
    font: bold 11px/15px sans-serif;
    padding: 0px 5px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}

nav .dropdown:after {
    content: ' â–¶';
}
nav .dropdown:hover:after{
	content:'\25bc'
}
nav li:hover a {
    background: #ccc;
}

nav li ul {
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}

nav li:hover ul {
    opacity: 1;
    top: 15px;
    visibility: visible;
}

nav li ul li {
    float: none;
    width: 100%;
}
nav li ul a:hover {
    background: #bbb;
}

JavaScript

var list = null;

document.getElementById("LinkName").select();
/* This function displays the original list  as requestedper assignment detail. User clicks 'Show List' button to display the original contents.*/
function showList() {
  list = new originaList("2010 Ford F-150");
  //list.addNode("A");
  list.addNode("2010 Honda Accord"); 
  document.getElementById("demo").innerHTML = list.print();
}

// This function adds a new node to the list.
function addNode() {
  var value = document.getElementById("LinkName").value;
  list.addNode(value);
  document.getElementById("demo").innerHTML = list.print();
}


// Define the link object
function Node(_value, _last) {
  // This is a possible implementation of a Doubly Linked List
  this.value = _value; // The value stored 
  this.last = _last; // A pointer to the previous link
  this.next = null; // a pointer to the next link
  return this; // returns the created node
}

Node.prototype.asString = function() {
  return "Vehicle: " + this.value + "<br/>";
}


// Define the List object
function originaList(_value) { // We will define the list with the first link defined
  this.length = 0;
  this.head = new Node(_value, null); // Pointer TO the head is null
  this.last = this.head; // When created - head and last are the same.
}

 /* A function to add a link to the list - you will have to write this
  alert("This function must be written");
	*/
originaList.prototype.addNode = function(_value) {
	/* With the new value to add, the list is checked begining at the top (head). If pointer to the Head is empty then Head assumes new value */
  if (this.head == null) {
    this.head = new Node(_value);
    return this.head;
  }
  /* If pointer to Head is not empty, then Last node is checked. If Last node is empty, then Last node assumes new value */
  if (this.last == null) {
    this.last = new Node(_value);
    this.head.next = this.last;  /* Head and Next pointer holds same value as Last node */
    return this.last;
  }
  /* The...