Permalink
Browse files

Visual Frameworks.

  • Loading branch information...
1 parent 70032a0 commit 0747a303710c05d2a8ab02513d84d276c5fc1e92 @mmpessoa committed May 1, 2012
View
BIN .DS_Store
Binary file not shown.
View
10 VFW/ReadMe.txt
@@ -0,0 +1,10 @@
+Instructions
+
+For the final week of the course, we'll be applying the finishing styles and functions into our app. You will need to have roughly completed projects 1-3 in order to complete this project.
+
+For Project 4 you will do the following:
+
+Create Image Thumbnails
+Apply JavaScript: Add Image Thumbnails
+Apply JavaScript: Add JSON Object
+Apply CSS
View
151 VFW/additem.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html>
+<!-- HTML DOCUMENT HEADER -->
+<head>
+<meta charset="utf-8"/>
+<meta name="description" content="Project 3 for VFW1202" />
+<meta name="keywords" content="HTML 5, mobile development, Full Sail University", "Visual Frameworks" />
+<meta name="robots" content="index, follow" />
+<meta name="viewport" content="user-scalable=no, width=device-width" />
+<meta name="HandheldFriendly" content="true" />
+<meta name="MobileOptimized" content="320" />
+
+<!-- Michelle M. Pessoa. VFW-1202. Project 4. 23 February 2012. -->
+
+<!-- DOCUMENT TITLE -->
+<title>Report a Sighting</title>
+<link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
+</head>
+
+<body>
+<div id="wrapper">
+
+ <!-- HEADING GROUP -->
+ <div id="header">
+ <header>
+ <hgroup>
+ <h1 class="header">Report a Sighting</h1>
+ </hgroup>
+ </header>
+ </div>
+ <!-- END HEADING GROUP -->
+
+ <!-- Navigation -->
+ <nav class="center"> <a href="#" id="clear">Clear Stored Data</a> <a href="#" id="displayLink">Display Stored Data</a> <a href="additem.html" id="addNew" style="display:none;">Add new sighting</a> </nav>
+ <!-- End Navigation -->
+
+ <!-- Form requirement. Removed the link to thankyou.html page so that JavaScript would work. -->
+
+ <form action="#" method="post" id="contactForm" >
+
+ <!-- Fieldset requirement. -->
+
+ <fieldset id="contactFieldset">
+ <!-- Legend requirement. -->
+ <!-- Label requirement. -->
+ <!-- Text field requirement. -->
+
+ <legend>Contact Information</legend>
+ <ul id="errors">
+ </ul>
+ <ul id="questions">
+ <li>
+ <label for="fname"><strong>First Name:</strong></label>
+ <input type="text" id="fname" placeholder="Enter first name." />
+ </li>
+ <li>
+ <label for="lname"><strong>Last Name:</strong></label>
+ <input type="text" id="lname" placeholder="Enter last name." />
+ </li>
+ <li>
+ <label for="email"><strong>Email: </strong></label>
+ <input type="email" id="email" placeholder="you@example.com" />
+ </li>
+ </ul>
+ </fieldset>
+
+ <!-- Date field requirement. -->
+
+ <fieldset>
+ <legend>Observations</legend>
+ <ul>
+ <li>
+ <label for="date"><strong>Date of sighting (YYYY-MM-DD): </strong></label>
+ <input name="date" id="date" type="date" placeholder="YYYY-MM-DD">
+ </li>
+ <p>
+ <li>
+ <label for="location"><strong>Location:</strong></label>
+ <input id="location" type="text" placeholder="Location of sighting.">
+ </li>
+ </ul>
+ <br/>
+ <!-- Drop down menu requirement. -->
+ <ul id="dropdown">
+ <li id="select">
+ <label for="groups"><strong>What did you see?</strong></label>
+ <br/>
+ </li>
+ </ul>
+ <p>
+ <!-- Radio button requirement. -->
+ <ul>
+ <strong>Gender of creature?</strong><br/>
+ <li>
+ <input id="male" type="radio" value="Male" name="gender"/>
+ <label for= "male">Male</label>
+ </li>
+ <li>
+ <input id="female" type="radio" value="Female" name="gender"/>
+ <label for="female">Female</label>
+ </li>
+ <li>
+ <input name="gender" type="radio" id="unknown" value="Unknown" checked/>
+ <label for="unknown">Unknown</label>
+ </li>
+ </ul>
+ <br/>
+ <!-- Range slider requirement. -->
+ <ul>
+ <li> <strong>If multiple beings were seen, how many?</strong><br/>
+ </li>
+ <li> Number sighted (1-10):
+ <input type="range" name="number" id="number" min="1" max="10" />
+ </li>
+ </ul>
+ <br/>
+ <ul>
+ <li>
+ <label for="notes"><strong>Describe the encounter:</strong></label>
+ </li>
+ </ul>
+ <textarea id="notes" cols="35" rows="5" placeholder="Please describe the encounter."></textarea>
+ <p>
+
+ <!-- Checkbox requirement. -->
+ <ul>
+ <li> <strong>Would you like to subscribe to our free email newsletter, Tales from the Cryptids?</strong> </li>
+ <li>
+ <input type="checkbox" name="NewsletterCheckboxGroup" value="Yes" id="newsletter" />
+ <label for="newsletter">Yes!</label>
+ </li>
+ </ul>
+ </fieldset>
+
+ <!-- Submit button requirement. -->
+
+ <input type="reset" value="Reset" id="reset"/>
+ <input type="submit" value="Save Sighting" id="submit"/>
+ <br/>
+ </form>
+
+ <!-- Start Footer -->
+ <div id="footer"> &copy; 2012 <a href="http://www.michellepessoa.com" target="_blank">MichellePessoa.com</a>. |
+ All Rights Reserved. </div>
+ <!-- End Footer -->
+
+ <script type="text/javascript" src="js/json.js"></script>
+ <script type="text/javascript" src="js/main.js"></script>
+</div>
+</body>
+</html>
View
143 VFW/css/main.css
@@ -0,0 +1,143 @@
+@charset "UTF-8";
+/*
+Michelle M. Pessoa
+VFW-1202
+Project 4 - CSS Document
+23 February 2012 */
+
+
+/* ~~ this container surrounds all other divs ~~ */
+
+#wrapper {
+ text-align: left;
+ width: 320px;
+ margin: 0 auto; /* Adding auto value on the sides centers the layout */
+ /* [disabled]background-color: white; */
+ overflow: visible; /* expands box */
+}
+
+body {
+ background-color: #ddd;
+ color: #222;
+ margin: 0;
+ padding: 0;
+ font-family: Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ /* [disabled]line-height: 1.4; */
+}
+
+.header {
+ background-color: #ccc;
+ border-bottom: 1px solid #666;
+ color: #222;
+ display: block;
+ font-size: 20px;
+ font-weight: bold;
+ padding: 10px 0;
+ text-align: center;
+ text-decoration: none;
+ text-shadow: 0px 1px 0px #fff;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
+}
+
+textarea {
+ background:#eee;
+ color:#778fbd;
+}
+
+blockquote {
+ font-style:normal;
+ text-align: justify;
+}
+
+h1 {
+ color: #222;
+ font-size: 24px;
+ text-align: center;
+}
+
+h2 {
+ color: #222;
+ font-size:16px;
+ text-align: center;
+}
+
+
+
+
+/* ~~ Element/tag selectors ~~ */
+ul, ol, dl { /* I read somewhere that it's best practices to zero padding and margin on lists. */
+ padding: 0;
+ margin: 0;
+}
+
+li { /* Removing bullets. */
+ list-style-type: none;
+}
+
+
+h1, h2, p {
+ margin-top: 0; /* removing the top margin keeps elements from "escaping" their containing div. */
+ /* [disabled]padding-right: 15px; */
+ /* [disabled]padding-left: 15px; */
+}
+
+
+
+/* ~~ Styling for links ~~ */
+a:link {
+ color: #333;
+ text-decoration: underline; /* Provides link underlines for quick visual identification */
+}
+
+a:visited {
+ color: #999;
+ text-decoration: underline;
+}
+
+a:hover, a:active, a:focus { /* Hover may not mean anything on a touch-based platform, but I've added here anyway. */
+ text-decoration: none;
+ color:black;
+}
+
+
+
+#footer {
+ margin-bottom: 12px;
+ clear: both;
+ font-size: 0.8em;
+ height: 20px;
+ vertical-align: middle;
+ padding-top: 4px;
+ padding-bottom: 4px;
+ margin-top: 0;
+ text-align: center;
+
+}
+
+#content {
+ margin-top: 0px;
+ padding-top: 0px;
+ background-color: #FFF;
+}
+
+
+
+.center {
+ text-align: center;
+}
+
+
+
+.button {
+ padding: 6px;
+ border: 1px solid black;
+ -moz-border-radius: 8px;
+ -webkit-border-radius: 8px;
+ margin-top: 3px;
+ margin-bottom: 3px;
+ background-color: #efefef;
+ margin-right: 15px;
+ margin-left: 15px;
+ text-align: center;
+}
View
BIN VFW/images/Alien.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN VFW/images/Bigfoot.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN VFW/images/Chupacabra.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN VFW/images/Dinosaur.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN VFW/images/Fairy.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN VFW/images/Ghost.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN VFW/images/Mothman.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN VFW/images/Other.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN VFW/images/SeaMonster.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN VFW/images/Vampire.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN VFW/images/Werewolf.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
47 VFW/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<!-- HTML DOCUMENT HEADER -->
+<head>
+<meta charset="utf-8"/>
+<meta name="description" content="Project 3 for VFW1202" />
+<meta name="keywords" content="HTML 5, mobile development, Full Sail University", "Visual Frameworks" />
+<meta name="robots" content="index, follow" />
+<meta name="viewport" content="user-scalable=no, width=device-width" />
+<meta name="HandheldFriendly" content="true" />
+<meta name="MobileOptimized" content="320" />
+
+<!-- Michelle M. Pessoa. VFW-1202. Project 4. 23 February 2012. -->
+
+<!-- DOCUMENT TITLE -->
+<title>The Cryptid Keeper</title>
+<link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
+</head>
+
+<body>
+<div id="wrapper">
+
+ <!-- HEADING GROUP -->
+ <div id="header">
+ <header>
+ <hgroup>
+ <h1 class="header">The Cryptid Keeper</h1>
+ </hgroup>
+ </header>
+ </div>
+ <!-- END HEADING GROUP -->
+
+ <!-- CONTENT DIVISION -->
+ <blockquote> The Crypid Keeper is an app that allows you to quickly report the sighting of a cryptid such as a bigfoot, sea monster or chupacabra. </blockquote>
+ <h2>The truth is out there!</h2>
+ <p class="button"><a href="additem.html">Add a cryptid sighting:</a></p>
+
+ <!-- Start Footer -->
+ <div id="footer"> &copy; 2012 <a href="http://www.michellepessoa.com" target="_blank">MichellePessoa.com</a>. |
+ All Rights Reserved. </div>
+ <!-- End Footer -->
+
+ <script type="text/javascript" src="js/json.js"></script>
+ <script type="text/javascript" src="js/main.js"></script>
+</div>
+</body>
+</html>
View
BIN VFW/js/.DS_Store
Binary file not shown.
View
61 VFW/js/json.js
@@ -0,0 +1,61 @@
+/*
+Michelle M. Pessoa
+VFW-1202
+Project 4 - JSON Document
+23 February 2012 */
+
+// Based on code from Week 4 VFW videos.
+
+var json = {
+ "cryptid1": {
+ "fname": ["First Name:", "Michelle"],
+ "lname": ["Last Name:", "Pessoa"],
+ "email": ["Email:", "mpessoa@mac.com"],
+ "date": ["Date:", "2012-02-17"],
+ "location": ["Location:", "Brooklyn"],
+ "groups": ["Cryptid:", "Bigfoot"],
+ "gender": ["Gender:", "Male"],
+ "number": ["Number:", "1"],
+ "notes": ["Notes:", "Scary."],
+ "newsletter": ["Newsletter:", "Yes"]
+ },
+
+ "cryptid2": {
+ "fname": ["First Name:", "Orlando"],
+ "lname": ["Last Name:", "Pessoa"],
+ "email": ["Email:", "mmpessoa@gmail.com"],
+ "date": ["Date:", "2012-02-15"],
+ "location": ["Location:", "Georgia"],
+ "groups": ["Cryptid:", "Fairy"],
+ "gender": ["Gender:", "Female"],
+ "number": ["Number:", "2"],
+ "notes": ["Notes:", "Pretty."],
+ "newsletter": ["Newsletter:", "No"]
+ },
+
+ "cryptid3": {
+ "fname": ["First Name:", "Mark"],
+ "lname": ["Last Name:", "Hyacinth"],
+ "email": ["Email:", "mark@hyacinth.com"],
+ "date": ["Date:", "2010-03-18"],
+ "location": ["Location:", "Virginia"],
+ "groups": ["Cryptid:", "Other"],
+ "gender": ["Gender:", "Unknown"],
+ "number": ["Number:", "6"],
+ "notes": ["Notes:", "It was very tall."],
+ "newsletter": ["Newsletter:", "Yes"]
+ },
+
+ "cryptid4": {
+ "fname": ["First Name:", "Shawn"],
+ "lname": ["Last Name:", "Carter"],
+ "email": ["Email:", "shawnc@gmail.com"],
+ "date": ["Date:", "1999-11-03"],
+ "location": ["Location:", "Nova Scotia"],
+ "groups": ["Cryptid:", "SeaMonster"],
+ "gender": ["Gender:", "Male"],
+ "number": ["Number:", "8"],
+ "notes": ["Notes:", "Slimy."],
+ "newsletter": ["Newsletter:", "No"]
+ }
+}
View
406 VFW/js/main.js
@@ -0,0 +1,406 @@
+/*
+Michelle M. Pessoa
+VFW-1202
+Project 4 - JavaScript Document
+23 February 2012 */
+
+// Based on code from Week 2-4 VFW videos.
+//Thumbnail images used in code were purchased from Shutterstock.com.
+
+
+//This function prevents any JavaScript from executing until the DOM is ready -- i.e. all HTML is loaded.
+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() {
+ //formTag is an array of all the form tags.
+ var formTag = document.getElementsByTagName("form"),
+ 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.setAttribute("value", contactGroups[i]);
+ makeOption.innerHTML = optText;
+ makeSelect.appendChild(makeOption);
+ }
+ selectLi.appendChild(makeSelect);
+ }
+
+ //Find value of selected radio button.
+ function getSelectedRadio(){
+ //Creates an array of radio buttons.
+ var radios = document.forms[0].gender;
+ for (var i=0; i<radios.length; i++){
+ if (radios[i].checked){
+ genderValue = radios[i].value;
+ }
+ }
+ }
+
+
+ //Set the value of the checkbox when clicked.
+ function setCheckboxValue(){
+ if($('newsletter').checked){
+ newsletterValue = $('newsletter').value;
+ }else{
+ newsletterValue = "No";
+ }
+ }
+
+
+ //Turn links on or off.
+ function toggleControls(n){
+ switch(n){
+ case "on":
+ $('contactForm').style.display = "none";
+ $('clear').style.display = "inline";
+ $('displayLink').style.display = "none";
+ $('addNew').style.display = "inline";
+ break;
+ case "off":
+ $('contactForm').style.display = "block";
+ $('clear').style.display = "inline";
+ $('displayLink').style.display = "inline";
+ $('addNew').style.display = "none";
+ $('items').style.display = "none";
+ break;
+ default:
+ return false;
+ }
+ }
+
+
+
+ // This function saves the submitted data to local storage.
+ function storeData(key) {
+ //If there is no key, this means this is a brand new item and we need a new key.
+ if (!key){
+ var id = Math.floor(Math.random()*100000001);
+ }else{
+ //Set the id to the existing key we're editing so that it will save over the data.
+ //The key is the same key that's been passed along from the editSubmit event handler
+ //to the validate function, and then passed here, into the storeData function.
+ id = key;
+ }
+
+ //Gather up all of our form field values and store in an object.
+ //Object properties contain array with the form label and input values.
+ getSelectedRadio();
+ setCheckboxValue();
+ var item = {};
+ item.fname = ["First Name:", $('fname').value];
+ item.lname = ["Last Name:", $('lname').value];
+ item.email = ["Email:", $('email').value];
+ item.date = ["Date:", $('date').value];
+ item.location = ["Location:", $('location').value];
+ item.groups = ["Cryptid:", $('groups').value];
+ item.gender = ["Gender:", genderValue];
+ item.number = ["Number:", $('number').value];
+ item.notes = ["Notes:", $('notes').value];
+ item.newsletter = ["Newsletter:", newsletterValue];
+ //Save data into Local Storage. Use Stringify to convert our object to a string.
+ localStorage.setItem(id, JSON.stringify(item));
+ alert("Sighting Logged!");
+ }
+
+
+
+ // This function retrieves data from local storage and displays it on a web page.
+ function getData() {
+ toggleControls("on");
+ if (localStorage.length === 0){
+ alert("No sightings were saved, so default data was added.");
+ autoFillData();
+ }
+ //Write data from local storage to the browser.
+ 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"; // Just in case it got turned off by the toggle function above.
+ 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);
+ //Convert the string from local storage value back to an object using JSON.parse().
+ var obj = JSON.parse(value);
+ var makeSubList = document.createElement("ul");
+ makeLi.appendChild(makeSubList);
+ //Add image for each category.
+ getImage(obj.groups[1], 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;
+ makeSubList.appendChild(linksLi);
+ }
+ makeItemLinks(localStorage.key(i), linksLi); //Create edit and delete buttons for each item in local storage.
+ }
+ }
+
+
+ //Get the image for each category.
+ function getImage(catName, makeSubList){
+ var imageLi = document.createElement("li");
+ makeSubList.appendChild(imageLi);
+ var newImg = document.createElement("img");
+ var setSrc = newImg.setAttribute("src", "images/"+ catName + ".png");
+ imageLi.appendChild(newImg);
+ }
+
+
+ //Auto populate local storage.
+ function autoFillData(){
+ //The JSON Object data is being loaded from json.js.
+ //Store the JSON OBJECT into Local Storage.
+ for (var n in json){
+ var id = Math.floor(Math.random()*100000001);
+ localStorage.setItem(id, JSON.stringify(json[n]));
+ }
+
+ }
+
+
+ //Make Item Links
+ //Create the edit and delete links for each stored item when displayed.
+ function makeItemLinks(key, linksLi){
+ //add edit single item link
+ var editLink = document.createElement("a");
+ editLink.href = "#";
+ editLink.key = key;
+ var editText = "Edit Info";
+ 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 Entry";
+ deleteLink.addEventListener("click", deleteItem);
+ deleteLink.innerHTML = deleteText;
+ linksLi.appendChild(deleteLink);
+
+ //add horizontal line
+ var hrTag = document.createElement("hr");
+ linksLi.appendChild(hrTag);
+
+ }
+
+
+
+ // Edit single item function goes here.
+ //Something in this function breaks the code and causes a syntax error on the final line of this document.
+ function editItem() {
+ //Grab the data from our item from Local Storage.
+ var value = localStorage.getItem(this.key);
+ var item = JSON.parse(value);
+
+ //Show the form
+ toggleControls("off");
+
+ //populates form fields with current localStorage values
+ $('fname').value = item.fname[1];
+ $('lname').value = item.lname[1];
+ $('email').value = item.email[1];
+ $('date').value = item.date[1];
+ $('location').value = item.location[1];
+ $('groups').value = item.groups[1];
+ var radios = document.forms[0].gender;
+ for (var i=0; i<radios.length; i++){
+ if(radios[i].value == "Male" && item.gender[1] == "Male"){
+ radios[i].setAttribute("checked", "checked");
+ }else if(radios[i].value == "Female" && item.gender[1] == "Female"){
+ radios[i].setAttribute("checked", "checked");
+ }else if(radios[i].value == "Unknown" && item.gender[1] == "Unknown"){
+ radios[i].setAttribute("checked", "checked");
+ }
+ }
+
+ $('number').value = item.number[1];
+ $('notes').value = item.notes[1];
+
+ if (item.newsletter[1] == "Yes"){
+ $('newsletter').setAttribute("checked", "checked");
+ }
+
+ //Remove the initial listener from the input 'save' button.
+ save.removeEventListener("click", storeData);
+ $('submit').value = "Edit Info";
+ var editSubmit = $('submit');
+ //Save the key value established in this function as a property of the editSubmit event
+ //so we can use that value when we save the data we edited.
+ editSubmit.addEventListener("click", validate);
+ editSubmit.key = this.key;
+ }
+
+
+
+ //Delete item function
+ function deleteItem(){
+ var ask = confirm("Are you sure you want to delete this entry?");
+ if(ask){
+ localStorage.removeItem(this.key);
+ alert("Entry was deleted!");
+ window.location.reload();
+ }else{
+ alert("Entry was NOT deleted.");
+ }
+ }
+
+
+
+ // This function clears all data and reloads the page.
+ function clearLocal() {
+ if(localStorage.length === 0){
+ alert("There is no data to clear.");
+ }else{
+ localStorage.clear();
+ alert("All data deleted.");
+ window.location.reload();
+ return false;
+ }
+ }
+
+
+
+
+ //Validation functions.
+ function validate(e){
+ //Define the elements we want to check.
+ var getFname = $('fname');
+ var getLname = $('lname');
+ var getEmail = $('email');
+ var getLocation = $('location');
+ var getGroups = $('groups');
+ var getNotes = $('notes');
+
+ //Reset Error Messages
+ errMsg.innerHTML = "";//There may be something wrong on this line.
+ getFname.style.border = "1px solid black";
+ getLname.style.border = "1px solid black";
+ getEmail.style.border = "1px solid black";
+ getLocation.style.border = "1px solid black";
+ getGroups.style.border = "1px solid black";
+ getNotes.style.border = "1px solid black";
+
+
+ //Get Error Messages
+ var messageArray = [];
+
+
+ //First Name Validation
+ if(getFname.value === ""){
+ var fNameError = "Please enter a first name.";
+ getFname.style.border = "1px solid red";
+ messageArray.push(fNameError);
+ }
+
+
+ //Last Name Validation
+ if(getLname.value === ""){
+ var lNameError = "Please enter a last name.";
+ getLname.style.border = "1px solid red";
+ messageArray.push(lNameError);
+ }
+
+ //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";
+ messageArray.push(emailError);
+ }
+
+ //Location Validation
+ if(getLocation.value === ""){
+ var locationError = "Please enter a location.";
+ getLocation.style.border = "1px solid red";
+ messageArray.push(locationError);
+ }
+
+
+ //Groups Validation
+ if(getGroups.value === "--Select type of cryptid--"){
+ var groupsError = "Please choose a cryptid.";
+ getGroups.style.border = "1px solid red";
+ messageArray.push(groupsError);
+ }
+
+
+ //Notes Validation
+ if(getNotes.value === ""){
+ var notesError = "Please describe the encounter.";
+ getLocation.style.border = "1px solid red";
+ messageArray.push(notesError);
+ }
+
+
+ //If there are any errors, display them on the screen.
+ if (messageArray.length >= 1){
+ for(var i=0, j=messageArray.length; i<j; i++){
+ var txt = document.createElement("li");
+ txt.innerHTML = messageArray[i];
+ errMsg.appendChild(txt);
+ }
+ e.preventDefault();
+ return false;
+ }else{
+ //If all is okay, save our data! Send the key value (which came from the editData function).
+ //Remember, this key value was passed through the editSubmit event Listener as a property.
+ storeData(this.key);
+ }
+ }
+
+
+
+ //Establish variable defaults and run initial functions
+ var contactGroups = ["--Select type of cryptid--", "Alien", "Bigfoot", "Chupacabra", "Dinosaur", "Fairy", "Ghost", "Mothman", "SeaMonster", "Vampire", "Werewolf", "Other"],
+ genderValue,
+ newsletterValue = "No",
+ errMsg = $('errors');
+
+
+
+ // Set link and submit click events.
+ var displayLink = $('displayLink');
+ displayLink.addEventListener("click", getData);
+ var clearLink = $('clear');
+ clearLink.addEventListener("click", clearLocal);
+ var save = $('submit');
+ save.addEventListener("click", validate);
+
+
+ //Set Checkbox and Radio Click Events: Attach event listener to each radio button and checkbox.
+ var checkbox = $('newsletter');
+ checkbox.addEventListener("click", setCheckboxValue);
+ var radios = document.forms[0].gender;
+ for (var i=0; i<radios.length; i++){
+ radios[i].addEventListener("click", getSelectedRadio);
+ }
+
+
+ //Run makeCats();
+ makeCats();
+
+
+});
View
4 VFW/vfw-project4.txt
@@ -0,0 +1,4 @@
+Michelle Pessoa's Git link:
+
+
+https://github.com/mmpessoa/Visual-Frameworks

0 comments on commit 0747a30

Please sign in to comment.