Permalink
Browse files

Changed CSS Style, JavaScript and HTML.

  • Loading branch information...
1 parent 0187141 commit 186e1a861e3e191f8b261da0dfc770d4f69b9379 Jonell Colon committed Apr 19, 2012
Showing with 243 additions and 94 deletions.
  1. +26 −23 additem.html
  2. +8 −8 index.html
  3. +158 −12 main.js
  4. +51 −51 styles.css
View
@@ -12,31 +12,34 @@
<meta name="robots" content="INDEX"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="HandheldFriendly" content="True"/>
- <title>MeCPART HELP</title>
+ <title>MECPART HELP</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
- <h1><span>MeCPART HELP</span></h1>
+ <h1>MECPART HELP</h1>
</header>
<!-- Form Begins Here -->
-<form action="#" method="post" id="partList" />
+<form action="#" method="post" id="partList">
<ul>
- <li id="select"><label for="group">Part Description:</label></li>
+ <li id="select"><label for="group"><span>Part Description: </span></label></li>
</ul>
<!-- Customer Information -->
<fieldset>
<legend>Customer Information:</legend>
+ <span>* fields are required.</span>
+ <ul id="errors"></ul>
+ <ul id="questions">
<ul>
<li><label for="fullname">Customer Name: </label>
- <input type="text" id="fullname" autocomplete="on" placeholder="John Smith" /></li>
+ <input type="text" id="fullname" autocomplete="on" placeholder="John Smith" /><br /></li>
<li><label for="phone">Phone Number: </label>
- <input type="tel" id="phone" autocomplete="on" placeholder="555-555-5555" /></li>
+ <input type="tel" id="phone" autocomplete="on" placeholder="555-555-5555" /><br /></li>
- <li><label for="email">E-Mail: </label>
- <input type="email" id="email" autocomplete="on" placeholder="johnsmith@me.com" /></li>
+ <li><label for="email">E-Mail: </label><br />
+ <input type="email" id="email" autocomplete="on" placeholder="johnsmith@me.com" /><br /></li>
</ul>
</fieldset>
@@ -45,28 +48,28 @@
<fieldset>
<legend>Part Form:</legend>
<ul>
- <li><label for="cpart">Part Needed:</label>
- <input type="text" id="cpart"></li>
-
- <li><label for="hmany">How Many?</label>
- <input type="range" min="1" max="5" id="hmany"></li>
+ <li><label for="cpart">Part Needed:</label><br />
+ <input type="text" id="cpart"><br /></li>
+
+ <li><label for="hmany">How Many?</label><br />
+ <input type="range" min="1" max="5" id="hmany"><br /></li>
- <li><label for="ctype">Car Type:</label>
- <input type="text" id="ctype"></li>
+ <li><label for="ctype">Car Type:</label><br />
+ <input type="text" id="ctype"><br /></li>
- <li><label for="cmodel">Car Model:</label>
- <input type="text" id="cmodel"></li>
+ <li><label for="cmodel">Car Model:</label><br />
+ <input type="text" id="cmodel"><br /></li>
- <li><label for="ycar">Year:</label>
- <input type="text" id="ycar"></li>
+ <li><label for="ycar">Year:</label><br />
+ <input type="text" id="ycar"><br /></li>
<li><label for="used">Used:</label>
- <input type="radio" name="style" id="used">
+ <input type="radio" name="mode" id="used">
<label for="new">New:</label>
- <input type="radio" name="style" id="new" checked="checked"></li>
+ <input type="radio" name="mode" id="new" checked="checked"><br /></li>
- <li><label for="special">Special Request:</label>
- <textarea id="special"></textarea></li><br>
+ <li><label for="special">Special Request:</label><br />
+ <textarea id="special"></textarea></li><br />
</ul>
</fieldset>
View
@@ -14,24 +14,24 @@
<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>
+ <title>MECPART HELP</title>
</head>
<body>
<header>
-
- <h1><span>MeCPART HELP</span></h1>
- <p>Get your parts list ready while examining the car.</p>
-
+ <h1>MECPART HELP</h1>
</header>
+
+ <p><strong>Get your parts list ready while examining the car.</strong></p>
<article>
- <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>
+ <p>With <strong>MECPART HELP</strong> 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>
-
- <a href="additem.html"><strong>Add Car Part</strong></a>
+ <p>
+ <a href="additem.html"><strong>Add Car Part</strong></a>
+ </p>
View
170 main.js
@@ -30,10 +30,10 @@ window.addEventListener("DOMContentLoaded", function(){
// Find value of selected radio button.
function getSelectedRadio(){
- var radios = document.forms[0].style;
+ var radios = document.forms[0].mode;
for(var i=0; i<radios.length; i++){
if(radios[i].checked){
- partStyle = radios[i].style;
+ partStyle = radios[i].value;
}
}
@@ -59,21 +59,25 @@ window.addEventListener("DOMContentLoaded", function(){
}
}
- function storeData(){
-
+ function storeData(key){
+ //if the is no key, this is means this is a brand new item and need new key.
+ if(!key){
var id = Math.floor(Math.random()*100000001);
-
+ }else{
+ id = key;
+ }
getSelectedRadio();
-
var item = {};
item.group = ["Group: ", $("groups").value];
item.fullname = ["Full Name: ", $("fullname").value];
item.phone = ["Phone Number: ", $("phone").value];
+ item.email = ["E-Mail: ", $("email").value];
item.cpart = ["Car Part: ", $("cpart").value];
item.hmany = ["How Many: ", $("hmany").value];
item.ctype = ["Car Type: ", $("ctype").value];
+ item.cmodel = ["Car Model: ", $("cmodel").value];
item.ycar = ["Car Year: ", $("ycar").value];
- item.style = ["Value: ", partStyle];
+ item.mode = ["Value: ", partStyle];
item.special = ["Special Request: ", $("special").value];
//Save data to Local Storage: Stringify.
@@ -96,6 +100,7 @@ window.addEventListener("DOMContentLoaded", function(){
$("items").style.display = "block";
for(var i=0, len=localStorage.length; i<len;i++){
var makeli = document.createElement("li");
+ var linksLi = document.createElement("li");
makeList.appendChild(makeli);
var key = localStorage.key(i);
var value = localStorage.getItem(key);
@@ -107,26 +112,167 @@ window.addEventListener("DOMContentLoaded", function(){
makeSubList.appendChild(makeSubli);
var optSubText = obj[n][0]+" "+obj[n][1];
makeSubli.innerHTML = optSubText;
+ makeSubList.appendChild(linksLi);
}
+ makeItemLinks(localStorage.key(i), linksLi); // Create our edit and delete buttons/links.
}
}
+ //Make items links
+ function makeItemLinks(key, linksLi){
+ // add edit single item link
+ var editLink = document.createElement("a");
+ editLink.href = "#";
+ editLink.key = key;
+ var editText = "Edit Item";
+ editLink.addEventListener("click", editItem);
+ editLink.innerHTML = editText;
+ linksLi.appendChild(editLink);
+
+ //add line break
+ var breakTag = document.createElement("br");
+ linksLi.appendChild(breakTag);
+
+ // add delete single item link
+ var deleteLink = document.createElement("a");
+ deleteLink.href = "#";
+ deleteLink.key = key;
+ var deleteText = "Delete Item";
+ deleteLink.addEventListener("click", deleteItem);
+ deleteLink.innerHTML = deleteText;
+ linksLi.appendChild(deleteLink);
+ }
+
+ function editItem(){
+ //Grab the data from our item.
+ var value = localStorage.getItem(this.key);
+ var item = JSON.parse(value);
+
+ //Show the form.
+ toggleControls("off");
+
+ //populate the form field.
+ $("groups").value = item.group[1];
+ $("fullname").value = item.fullname[1];
+ $("phone").value = item.phone[1];
+ $("email").value = item.email[1];
+ $("cpart").value = item.cpart[1];
+ $("hmany").value = item.hmany[1];
+ $("ctype").value = item.ctype[1];
+ $("cmodel").value = item.cmodel[1];
+ $("ycar").value = item.ycar[1];
+ var radios = document.forms[0].style;
+ for(var i=0; i<radios.length; i++){
+ if(radios[i].value == "Used" && item.style[1] == "Used"){
+ radios[i].setAttribute("checked", "checked");
+ }else if (radios[i].value == "New" && item.style[1] == "New"){
+ radios[i].setAttribute("checked", "checked");
+ }
+ }
+ $("special").value = item.special[1];
+
+ //Remove the initial listener from input
+ save.removeEventListener("click", storeData);
+ //Change Submit button value to edit button
+ $("submit").value = "Edit Content";
+ var editSubmit = $("submit");
+ //Save the key value established in this function as a property
+ editSubmit.addEventListener("click", validate);
+ editSubmit.key = this.key;
+ }
+
+ function deleteItem(){
+ var ask = confirm("Are you sure you want to delete item?");
+ if (ask){
+ localStorage.removeItem(this.key);
+ alert("Item was deleted!");
+ window.location.reload();
+ }else{
+ alert("Item was NOT deleted.");
+ }
+
+ }
+
function clearLocal(){
if(localStorage.length === 0){
- alert("There is no data to clear.")
+ alert("There is no data to clear.");
}else{
localStorage.clear();
- alert("All Data is deleted!");
+ alert("All data is deleted!");
window.location.reload();
return false;
}
}
+ function validate(e){
+ //Define elements we want to check
+ var getGroup = $("groups");
+ var getFullName = $("fullname");
+ var getPhone = $("phone");
+ var getEmail = $("email");
+
+ //Rest error messages
+ errMsg.innerHTML = "";
+ getGroup.style.border = "1px solid black";
+ getFullName.style.border = "1px solid black";
+ getEmail.style.border = "1px solid black";
+
+
+ //Get error Messages
+ var messageAry = [];
+ //Group Validation
+ if(getGroup.value === "--Choose One--"){
+ var groupError = "Please choose a group.";
+ getGroup.style.border = "1px solid red";
+ messageAry.push(groupError);
+ }
+
+ //Name Validation
+ if(getFullName.value === ""){
+ var fullNameError = "Please enter a name.";
+ getFullName.style.border = "1px solid red";
+ messageAry.push(fullNameError);
+ }
+
+ //Phone Validation
+ var phonere = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
+ if (!(phonere.exec(getPhone.value))){
+ var phoneError = "Please enter a valid phone number.";
+ getPhone.style.border = "1px solid red";
+ messageAry.push(phoneError);
+ }
+
+ //Email Validation
+ var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
+ if (!(re.exec(getEmail.value))){
+ var emailError = "Please enter a valid email address.";
+ getEmail.style.border = "1px solid red";
+ messageAry.push(emailError);
+ }
+
+ //if there were errors display them on the screen
+ if (messageAry.length >= 1){
+ for (var i=0, j=messageAry.length; i < j; i++){
+ var txt = document.createElement("li");
+ txt.innerHTML = messageAry[i];
+ errMsg.appendChild(txt);
+ }
+ e.preventDefault();
+ return false;
+ }else{
+ //if all is ok save our data. Send the key value that came from editData function.
+ storeData(this.key);
+
+ }
+
+
+ }
// Variable defaults
- var contactGroups = ["--Choose One--", "Motor", "Cabin", "Wheels", "Body", "Trunk", "Exhaust"],
- partValue
+ var contactGroups = ["--Choose One--", "Engine", "Cabin", "Wheels", "Body", "Trunk", "Exhaust"],
+ partValue,
+ errMsg = $("errors");
;
makeCats();
@@ -136,7 +282,7 @@ window.addEventListener("DOMContentLoaded", function(){
var clearLink = $("clear");
clearLink.addEventListener("click", clearLocal);
var save = $("submit");
- save.addEventListener("click", storeData);
+ save.addEventListener("click", validate);
Oops, something went wrong.

0 comments on commit 186e1a8

Please sign in to comment.