Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added style and JavaScript to my Application.
- Loading branch information
Jonell Colon
authored and
Jonell Colon
committed
Apr 6, 2012
1 parent
a399acd
commit 0187141
Showing
5 changed files
with
280 additions
and
80 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,40 +1,40 @@ | ||
| <!DOCTYPE HTML> | ||
|
|
||
| <!-- Jonell Colon --> | ||
| <!-- Project 1 VFW --> | ||
| <!-- Project 2 VFW --> | ||
| <!-- Term 1204 --> | ||
|
|
||
| <html> | ||
| <head> | ||
| <head> | ||
|
|
||
| <meta charset="UTF-8"> | ||
| <meta name="keywords" content="Auto, Parts, Car, Autoparts"/> | ||
| <meta name="description" content="Order your car part on your mobile"/> | ||
| <meta name="robots" content="INDEX"/> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | ||
| <meta name="HandheldFriendly" content="True"/> | ||
| <meta charset="UTF-8"> | ||
| <meta name="keywords" content="Auto, Parts, Car, Autoparts"/> | ||
| <meta name="description" content="Order your car part on your mobile"/> | ||
| <meta name="robots" content="INDEX"/> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | ||
| <meta name="HandheldFriendly" content="True"/> | ||
| <link rel="stylesheet" href="styles.css" /> | ||
| <title>MeCPART HELP</title> | ||
| </head> | ||
|
|
||
| <title>AutoPart Prepare</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header> | ||
| <body> | ||
| <header> | ||
|
|
||
| <h1><span>AutoPart Request</span></h1> | ||
| <h3>Get your parts list ready while examining the car.</h3> | ||
| <h1><span>MeCPART HELP</span></h1> | ||
| <p>Get your parts list ready while examining the car.</p> | ||
|
|
||
| </header> | ||
| </header> | ||
|
|
||
| <article> | ||
|
|
||
| <p>With AutoParts Request app you can prepare for your car needs. This app is intended for all, from the professional mechanic to the hard working customer.</p> | ||
| <p>With MeCPART you can prepare for your car repair needs. This app is intended for all, from the professional mechanic to the hard working customer.</p> | ||
|
|
||
| </article> | ||
|
|
||
| <h3><a href="additem.html">Add Car Part</a></h3> | ||
| <a href="additem.html"><strong>Add Car Part</strong></a> | ||
|
|
||
|
|
||
|
|
||
| </body> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| // Jonell Colon | ||
| // Term 1204 | ||
| // Project 2 VFW | ||
| // Local Storage | ||
|
|
||
| // Wait until the DOM is ready | ||
| window.addEventListener("DOMContentLoaded", function(){ | ||
|
|
||
| // getElementById Function | ||
| function $(x){ | ||
| var theElement = document.getElementById(x); | ||
| return theElement; | ||
| } | ||
|
|
||
| // Create select field element and populate with options. | ||
| function makeCats(){ | ||
| var formTag = document.getElementsByTagName("form"), //formTag is an array. | ||
| selectLi = $("select"), | ||
| makeSelect = document.createElement("select"); | ||
| makeSelect.setAttribute("id", "groups"); | ||
| for(var i=0, j=contactGroups.length; i<j; i++){ | ||
| var makeOption = document.createElement("option"); | ||
| var optText = contactGroups[i]; | ||
| makeOption.setAttribute("value", optText); | ||
| makeOption.innerHTML = optText; | ||
| makeSelect.appendChild(makeOption); | ||
| } | ||
| selectLi.appendChild(makeSelect); | ||
| } | ||
|
|
||
| // Find value of selected radio button. | ||
| function getSelectedRadio(){ | ||
| var radios = document.forms[0].style; | ||
| for(var i=0; i<radios.length; i++){ | ||
| if(radios[i].checked){ | ||
| partStyle = radios[i].style; | ||
| } | ||
| } | ||
|
|
||
| } | ||
|
|
||
| function toggleControls(n){ | ||
| switch(n){ | ||
| case "on": | ||
| $("partList").style.display = "none"; | ||
| $("clear").style.display = "inline"; | ||
| $("displayLink").style.display = "none"; | ||
| $("addNew").style.display = "inline"; | ||
| break; | ||
| case "off": | ||
| $("partList").style.display = "block"; | ||
| $("clear").style.display = "inline"; | ||
| $("displayLink").style.display = "inline"; | ||
| $("addNew").style.display = "none"; | ||
| $("items").style.display = "none"; | ||
| break; | ||
| default: | ||
| return false; | ||
| } | ||
| } | ||
|
|
||
| function storeData(){ | ||
|
|
||
| var id = Math.floor(Math.random()*100000001); | ||
|
|
||
| getSelectedRadio(); | ||
|
|
||
| var item = {}; | ||
| item.group = ["Group: ", $("groups").value]; | ||
| item.fullname = ["Full Name: ", $("fullname").value]; | ||
| item.phone = ["Phone Number: ", $("phone").value]; | ||
| item.cpart = ["Car Part: ", $("cpart").value]; | ||
| item.hmany = ["How Many: ", $("hmany").value]; | ||
| item.ctype = ["Car Type: ", $("ctype").value]; | ||
| item.ycar = ["Car Year: ", $("ycar").value]; | ||
| item.style = ["Value: ", partStyle]; | ||
| item.special = ["Special Request: ", $("special").value]; | ||
|
|
||
| //Save data to Local Storage: Stringify. | ||
| localStorage.setItem(id, JSON.stringify(item)); | ||
| alert("Part Information Saved!"); | ||
|
|
||
| } | ||
|
|
||
| function getData(){ | ||
| toggleControls("on"); | ||
| if(localStorage.length === 0){ | ||
| alert("There is no data in Local Storage."); | ||
| } | ||
| // Write Data into Local Storage | ||
| var makeDiv = document.createElement("div"); | ||
| makeDiv.setAttribute("id", "items"); | ||
| var makeList = document.createElement("ul"); | ||
| makeDiv.appendChild(makeList); | ||
| document.body.appendChild(makeDiv); | ||
| $("items").style.display = "block"; | ||
| for(var i=0, len=localStorage.length; i<len;i++){ | ||
| var makeli = document.createElement("li"); | ||
| makeList.appendChild(makeli); | ||
| var key = localStorage.key(i); | ||
| var value = localStorage.getItem(key); | ||
| var obj = JSON.parse(value); | ||
| var makeSubList = document.createElement("ul"); | ||
| makeli.appendChild(makeSubList); | ||
| for(var n in obj){ | ||
| var makeSubli = document.createElement("li"); | ||
| makeSubList.appendChild(makeSubli); | ||
| var optSubText = obj[n][0]+" "+obj[n][1]; | ||
| makeSubli.innerHTML = optSubText; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| } | ||
|
|
||
| function clearLocal(){ | ||
| if(localStorage.length === 0){ | ||
| alert("There is no data to clear.") | ||
| }else{ | ||
| localStorage.clear(); | ||
| alert("All Data is deleted!"); | ||
| window.location.reload(); | ||
| return false; | ||
| } | ||
| } | ||
|
|
||
| // Variable defaults | ||
| var contactGroups = ["--Choose One--", "Motor", "Cabin", "Wheels", "Body", "Trunk", "Exhaust"], | ||
| partValue | ||
| ; | ||
| makeCats(); | ||
|
|
||
| // Set Link & Submit Click Events | ||
| var displayLink = $("displayLink"); | ||
| displayLink.addEventListener("click", getData); | ||
| var clearLink = $("clear"); | ||
| clearLink.addEventListener("click", clearLocal); | ||
| var save = $("submit"); | ||
| save.addEventListener("click", storeData); | ||
|
|
||
|
|
||
|
|
||
| }); |
Oops, something went wrong.