Commit 25d2152b authored by tobiasmeyrick's avatar tobiasmeyrick
Browse files

Validator script added for form on cart page

parent d681ecfa
Pipeline #4044 passed with stage
in 2 seconds
......@@ -10,83 +10,13 @@
<select />
</component>
<component name="ChangeListManager">
<list default="true" id="07311041-3edc-4bfb-ad40-3329adf7b717" name="Default Changelist" comment="Update to classic cinema db">
<change afterPath="$PROJECT_DIR$/._Screenshots" afterDir="false" />
<change afterPath="$PROJECT_DIR$/._contact.html" afterDir="false" />
<change afterPath="$PROJECT_DIR$/._fonts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/._images" afterDir="false" />
<change afterPath="$PROJECT_DIR$/._style.css" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.gitlab-ci.yml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/ClassicCinema.iml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/misc.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/modules.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/vcs.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/ClassicCinemaIDB.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/IDBTest.html" afterDir="false" />
<change afterPath="$PROJECT_DIR$/Screenshots/._Screenshot-Classic.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/Screenshots/._Screenshot-Contact.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/Screenshots/._Screenshot-Hitchcock.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/Screenshots/._Screenshot-Index.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/Screenshots/._Screenshot-SciFi.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/Screenshots/Screenshot-Classic.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/Screenshots/Screenshot-Contact.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/Screenshots/Screenshot-Hitchcock.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/Screenshots/Screenshot-Index.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/Screenshots/Screenshot-SciFi.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/carousel.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/cart.html" afterDir="false" />
<change afterPath="$PROJECT_DIR$/cart.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/classic.html" afterDir="false" />
<change afterPath="$PROJECT_DIR$/contact.html" afterDir="false" />
<change afterPath="$PROJECT_DIR$/fonts/._DymaxionScript-webfont.woff" afterDir="false" />
<change afterPath="$PROJECT_DIR$/fonts/._Nick's Fonts License.txt" afterDir="false" />
<change afterPath="$PROJECT_DIR$/fonts/DymaxionScript-webfont.woff" afterDir="false" />
<change afterPath="$PROJECT_DIR$/fonts/Nick's Fonts License.txt" afterDir="false" />
<change afterPath="$PROJECT_DIR$/hitchcock.html" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/._Attack_of_the_50ft_Woman.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/._Dial_M_for_Murder.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/._Forbidden_Planet.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/._Gone_With_the_Wind.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/._King_Kong.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/._Metropolis.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/._North_by_Northwest.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/._Plan_9_from_Outer_Space.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/._Tarantula.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/._The_Birds.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/._The_Day_of_the_Triffids.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/._The_Jazz_Singer.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/._The_Man_Who_Knew_Too_Much.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/._The_Mummy.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/._Vertigo.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/._headerBackground.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/._map.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/._mapThumb.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/._popup.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/Attack_of_the_50ft_Woman.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/Dial_M_for_Murder.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/Forbidden_Planet.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/Gone_With_the_Wind.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/King_Kong.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/Metropolis.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/North_by_Northwest.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/Plan_9_from_Outer_Space.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/Tarantula.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/The_Birds.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/The_Day_of_the_Triffids.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/The_Jazz_Singer.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/The_Man_Who_Knew_Too_Much.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/The_Mummy.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/Vertigo.jpg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/headerBackground.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/map.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/mapThumb.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/images/popup.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
<change afterPath="$PROJECT_DIR$/printCart.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/scifi.html" afterDir="false" />
<change afterPath="$PROJECT_DIR$/showHide.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/style.css" afterDir="false" />
<list default="true" id="07311041-3edc-4bfb-ad40-3329adf7b717" name="Default Changelist" comment="First commit">
<change afterPath="$PROJECT_DIR$/Validator.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/ClassicCinemaIDB.js" beforeDir="false" afterPath="$PROJECT_DIR$/ClassicCinemaIDB.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/cart.html" beforeDir="false" afterPath="$PROJECT_DIR$/cart.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/printCart.js" beforeDir="false" afterPath="$PROJECT_DIR$/printCart.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/style.css" beforeDir="false" afterPath="$PROJECT_DIR$/style.css" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
......@@ -121,6 +51,11 @@
<property name="nodejs_npm_path_reset_for_default_project" value="true" />
<property name="settings.editor.selected.configurable" value="Settings.JavaScript.Linters.JSHint" />
</component>
<component name="RecentsManager">
<key name="MoveFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$" />
</key>
</component>
<component name="SvnConfiguration">
<configuration />
</component>
......@@ -138,7 +73,8 @@
<workItem from="1597208142368" duration="2348000" />
<workItem from="1597290826993" duration="2674000" />
<workItem from="1597371395364" duration="1558000" />
<workItem from="1597374945985" duration="276000" />
<workItem from="1597374945985" duration="2896000" />
<workItem from="1597466095291" duration="4420000" />
</task>
<task id="LOCAL-00001" summary="Initial commit">
<created>1594767569835</created>
......@@ -175,7 +111,14 @@
<option name="project" value="LOCAL" />
<updated>1597371434138</updated>
</task>
<option name="localTasksCounter" value="6" />
<task id="LOCAL-00006" summary="First commit">
<created>1597375300664</created>
<option name="number" value="00006" />
<option name="presentableId" value="LOCAL-00006" />
<option name="project" value="LOCAL" />
<updated>1597375300664</updated>
</task>
<option name="localTasksCounter" value="7" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
......@@ -213,7 +156,8 @@
<MESSAGE value="Added a script for show/hide on click of movie titles" />
<MESSAGE value="Used modules" />
<MESSAGE value="Update to classic cinema db" />
<option name="LAST_COMMIT_MESSAGE" value="Update to classic cinema db" />
<MESSAGE value="First commit" />
<option name="LAST_COMMIT_MESSAGE" value="First commit" />
</component>
<component name="WindowStateProjectService">
<state x="304" y="73" key="#JSHint" timestamp="1597375104383">
......@@ -232,13 +176,22 @@
<screen x="0" y="23" width="1440" height="832" />
</state>
<state x="410" y="148" key="RollbackChangesDialog/0.23.1440.832@0.23.1440.832" timestamp="1597132700210" />
<state x="567" y="179" key="Vcs.Push.Dialog.v2" timestamp="1597371445338">
<state x="567" y="179" key="Vcs.Push.Dialog.v2" timestamp="1597375416545">
<screen x="0" y="23" width="1440" height="832" />
</state>
<state x="567" y="179" key="Vcs.Push.Dialog.v2/0.23.1440.832@0.23.1440.832" timestamp="1597375416545" />
<state x="0" y="0" width="601" height="900" key="dock-window-1" timestamp="1597546829350">
<screen x="0" y="0" width="1440" height="900" />
</state>
<state x="0" y="0" width="601" height="900" key="dock-window-1/0.0.1440.900@0.0.1440.900" timestamp="1597546829350" />
<state x="0" y="0" width="646" height="900" key="dock-window-1/0.23.1440.832@0.23.1440.832" timestamp="1597484295541" />
<state x="383" y="234" key="git4idea.merge.GitPullDialog" timestamp="1597375528680">
<screen x="0" y="23" width="1440" height="832" />
</state>
<state x="567" y="179" key="Vcs.Push.Dialog.v2/0.23.1440.832@0.23.1440.832" timestamp="1597371445338" />
<state x="383" y="234" key="git4idea.merge.GitPullDialog" timestamp="1597132708925">
<state x="383" y="234" key="git4idea.merge.GitPullDialog/0.23.1440.832@0.23.1440.832" timestamp="1597375528680" />
<state x="385" y="179" width="670" height="676" key="search.everywhere.popup" timestamp="1597375237309">
<screen x="0" y="23" width="1440" height="832" />
</state>
<state x="383" y="234" key="git4idea.merge.GitPullDialog/0.23.1440.832@0.23.1440.832" timestamp="1597132708925" />
<state x="385" y="179" width="670" height="676" key="search.everywhere.popup/0.23.1440.832@0.23.1440.832" timestamp="1597375237309" />
</component>
</project>
\ No newline at end of file
......@@ -81,6 +81,10 @@ var ClassicCinemaIDB = (function () {
});
};
// Create an objectStore to hold reviews
var reviewObjectStore = db.createObjectStore("reviews", {autoIncrement: true});
reviewObjectStore.createIndex("user", "user", { unique: false });
// Create an index to search movies by title. We want to ensure that
// no two movies have the same title, so use a unique index.
movieObjectStore.createIndex("title", "title", {unique: true});
......@@ -131,8 +135,7 @@ var ClassicCinemaIDB = (function () {
}
};
// Create an objectStore to hold reviews
var reviewObjectStore = db.createObjectStore("reviews", {autoIncrement: true});
/**
* Adds a review to the objectStore
......
/**
* Validation functions for the Classic Cinema site.
*
* Created by: Steven Mills, 09/04/2014
* Last Modified by: Steven Mills 23/07/2015
*/
/**
* Module pattern for Validation functions
*/
var Validator = (function () {
var pub;
// Public interface
pub = {};
/**
* Check to see if a string is empty.
*
* Leading and trailing whitespace are ignored.
* @param textValue The string to check.
* @return True if textValue is not just whitespace, false otherwise.
*/
function checkNotEmpty(textValue) {
return textValue.trim().length > 0;
}
/**
* Check to see if a string contains just digits.
*
* Note that an empty string is not considered to be 'digits'.
* @param textValue The string to check.
* @return True if textValue contains only the characters 0-9, false otherwise.
*/
function checkDigits(textValue) {
var pattern = /^[0-9]+$/;
return pattern.test(textValue);
}
/**
* Check to see if a string's length is in a given range.
*
*
* This checks to see if the length of a string lies within [minLength, maxLength].
* If no maxLength is given, it checks to see if the string's length is exactly minLength.
* @param textValue The string to check.
* @param minLength The minimum acceptable length
* @param maxLength [optional] The maximum acceptable length
* @return True if textValue is an acceptable length, false otherwise.
*/
function checkLength(textValue, minLength, maxLength) {
var length = textValue.length;
if (maxLength === undefined) {
maxLength = minLength;
}
return (length >= minLength && length <= maxLength);
}
/**
* Check if a key-press is a digit or not
*
* @param event The event representing the key-press
* @return True (accept) if key is a digit, False (reject) otherwise
*/
function checkKeyIsDigit(event) {
// Cross-browser key recognition - see http://stackoverflow.com/questions/1444477/keycode-and-charcode
var characterPressed, zero, nine;
zero = "0";
nine = "9";
characterPressed = event.keyCode || event.which || event.charCode;
if (characterPressed < zero.charCodeAt(0)) {
return false;
}
if (characterPressed > nine.charCodeAt(0)) {
return false;
}
return true;
}
/**
* Check to see if a string starts with a given substring
*
* @param textValue The string to check.
* @param startValue The expected starting substring
* @return True if textValue starts with startValue, False otherwise
*/
function startsWith(textValue, startValue) {
return textValue.substring(0, startValue.length) === startValue;
}
/**
* Check that a credit card number looks valid
*
* Basic checks depend on card type
* American Express - 15 digits starting with 3
* Master Card - 16 digits starting with 5
* Visa - 16 digits starting with 4
*
* @param cardType The type of credit card (amex | visa | mcard)
* @param cardNumber The card number to check
* @param messages Array of error messages (may be modified)
* @return True if cardNumber passes basic checks, false otherwise
*/
function checkCreditCardNumber(cardType, cardNumber, messages) {
if (!checkNotEmpty(cardNumber)) {
messages.push("You must enter a credit card number");
} else if (!checkDigits(cardNumber)) {
// Just numbers
messages.push("The credit card number should only contain the digits 0-9");
} else if (cardType === "amex" && (!checkLength(cardNumber, 15) || !startsWith(cardNumber, "3"))) {
// American Express: 15 digits, starts with a 3
messages.push("American Express card numbers must be 15 digits long and start with a '3'");
} else if (cardType === "mcard" && (!checkLength(cardNumber, 16) || !startsWith(cardNumber, "5"))) {
// MasterCard: 16 digits, starting with a 5
messages.push("MasterCard numbers must be 16 digits long and start with a '5'");
} else if (cardType === "visa" && (!checkLength(cardNumber, 16) || !startsWith(cardNumber, "4"))) {
// Visa: 16 digits, starts with a 4
messages.push("Visa card numbers must be 16 digits long and start with a '4'");
}
}
/**
* Check that a credit card expiry date is in the future
*
*
* @param cardMonth The expiry month of the card (1-12)
* @param cardYear The expiry year of the card (eg: 2017)
* @param messages Array of error messages (may be modified)
* @return True if cardValidation passes basic checks, false otherwise
*/
function checkCreditCardDate(cardMonth, cardYear, messages) {
var today;
today = new Date();
cardMonth = parseInt(cardMonth, 10);
cardYear = parseInt(cardYear, 10);
if (!cardYear) {
messages.push("Invalid year in card expiry date");
} else if (!cardMonth || cardMonth < 1 || cardMonth > 12) {
messages.push("Invalid month in card expiry date");
} else if (cardYear < today.getFullYear()) {
// Year is in the past, not valid regardless of month
messages.push("The card expiry date must be in the future");
} else if (cardYear === today.getFullYear()) {
// Year is this year, so need to check the month
// Note - JS counts months from 0 (= January)
// So the +1 and <= is correct, (even though it looks odd)
if (cardMonth <= today.getMonth() + 1) {
messages.push("The card expiry date must be in the future");
}
} // else year is in the future, so valid regardless of month
}
/**
* Check that a credit card verification code looks valid
*
* Basic checks depend on card type
* American Express - 4 digits
* Master Card/Visa - 3 digits
*
* @param cardType The type of credit card (amex | visa | mcard)
* @param cardValidation The validation number to check
* @param messages Array of error messages (may be modified)
* @return True if cardValidation passes basic checks, false otherwise
*/
function checkCreditCardValidation(cardType, cardValidation, messages) {
// General: Just numbers
if (!checkNotEmpty(cardValidation)) {
// A required field
messages.push("You must enter a CVC value");
} else if (!checkDigits(cardValidation)) {
// Just numbers
messages.push("The CVC should only contain the digits 0-9");
} else if (cardType === "amex" && !checkLength(cardValidation, 4)) {
// Amex, 4 digits
messages.push("American Express CVC values must be 4 digits long");
} else if (cardType === "mcard" && !checkLength(cardValidation, 3)) {
// MasterCard, 3 digits
messages.push("MasterCard CVC values must be 3 digits long");
} else if (cardType === "visa" && !checkLength(cardValidation, 3)) {
// Visa, 3 digits
messages.push("Visa CVC values must be 3 digits long");
}
}
function checkAddress(address, messages){
if(!checkNotEmpty(address)){
messages.push("You must supply a delivey address.");
}
}
function checkName(address, messages){
if(!checkNotEmpty(address)){
messages.push("You must supply a Name.");
}
}
function checkEmail(email, messages){
var pattern = /^[0-9a-zA-Z_\.]+@[0-9a-zA-Z_\.]+(\.[0-9a-zA-Z_\.]+)*$/;
if(!pattern.test(email)){
messages.push("Invalid email.");
}
}
/**
* Validate the checkout form
*
* Check the form entries before submission
*
* @return False, because server-side form handling is not implemented. Eventually will return true on success and false otherwise.
*/
function validateCheckout() {
var messages, cardType, cardNumber, cardMonth, cardYear, cardValidation, errorHTML, i;
// Default assumption is that everything is good, and no messages
messages = [];
errorHTML = "";
// Validate Address Details
checkAddress(document.getElementById("deliveryAddress1").value, messages);
checkName(document.getElementById("deliveryName").value, messages);
checkEmail(document.getElementById("deliveryEmail").value, messages);
// TO BE ADDED
// Validate Credit Card Details
// This depends a bit on the type of card, so get that first
cardType = document.getElementById("cardType").value;
// Credit card number validation
cardNumber = document.getElementById("cardNumber").value;
checkCreditCardNumber(cardType, cardNumber, messages);
// Expiry date validation
cardMonth = document.getElementById("cardMonth").value;
cardYear = document.getElementById("cardYear").value;
checkCreditCardDate(cardMonth, cardYear, messages);
// CVC validation
cardValidation = document.getElementById("cardValidation").value;
checkCreditCardValidation(cardType, cardValidation, messages);
if (messages.length === 0) {
// Checkout successful, clear the cart
window.sessionStorage.clear();
document.getElementById("errorMsgs").innerHTML = "<p>Your order has been submitted</p>";
} else {
errorHTML = "<ul>";
for (i = 0; i < messages.length; i++) {
errorHTML += "<li>" + messages[i] + "</li>";
}
errorHTML += "</ul>";
document.getElementById("errorMsgs").innerHTML = errorHTML;
}
// Stop the form from submitting, which would trigger a page load
// In future this will return true if the form is OK and can be submitted to the server
return false;
}
/**
* Setup function for sample validation.
*
* Adds validation to the form on submission.
* Note that if the validation fails (returns false) then the form is not submitted.
*/
pub.setup = function () {
var form = document.getElementById("checkoutForm");
form.onsubmit = validateCheckout;
document.getElementById("cardNumber").onkeypress = checkKeyIsDigit;
document.getElementById("cardValidation").onkeypress = checkKeyIsDigit;
document.getElementById("deliveryPostcode").onkeypress = checkKeyIsDigit;
};
// Expose public interface
return pub;
}());
// The usual onload event handling to call SampleValidator.setup
if (window.addEventListener) {
window.addEventListener('load', Validator.setup);
} else if (window.attachEvent) {
window.attachEvent('onload', Validator.setup);
} else {
alert("Could not attach 'Validator.setup' to the 'window.onload' event");
}
\ No newline at end of file
......@@ -51,6 +51,83 @@
<div id="cart">
</div>
<div id="errorMsgs"></div>
<form id="checkoutForm" novalidate>
<fieldset>
<!-- First section of form is delivery address etc. -->
<legend>Delivery Details:</legend>
<p>
<label for="deliveryName">Deliver to:</label>
<input type="text" name="deliveryName" id="deliveryName" required>
</p>
<p>
<label for="deliveryEmail">Email:</label>
<input type="email" name="deliveryEmail" id="deliveryEmail">
</p>
<p>
<label for="deliveryAddress1">Address:</label>
<input type="text" name="deliveryAddress1" id="deliveryAddress1" required>
</p>
<p>
<label for="deliveryAddress2"></label>
<input type="text" name="deliveryAddress2" id="deliveryAddress2">
</p>
<p>
<label for="deliveryCity">City:</label>
<input type="text" name="deliveryCity" id="deliveryCity" required>
</p>
<p>
<label for="deliveryPostcode">Postcode:</label>
<input type="text" name="deliveryPostcode" id="deliveryPostcode" maxlength="4" required class="short">
</p>
</fieldset>
<!-- Next section has credit card details -->
<fieldset>
<legend>Payment Details:</legend>
<p>
<label for="cardType">Card type:</label>
<select name="cardType" id="cardType">
<option value="amex">American Express</option>
<option value="mcard">Master Card</option>
<option value="visa">Visa</option>
</select>
</p>
<p>
<label for="cardNumber">Card number:</label>
<input type="text" name="cardNumber" id="cardNumber" maxlength="16" required>
</p>
<p>
<label for="cardMonth">Expiry date:</label>
<select name="cardMonth" id="cardMonth">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select> / <select name="cardYear" id="cardYear">
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2021">2022</option>
<option value="2021">2023</option>
<option value="2021">2024</option>
</select>
</p>
<p>
<label for="cardValidation">CVC:</label>
<input type="text" class="short" maxlength="4" name="cardValidation" id="cardValidation" required>
</p>
</fieldset>
<input type="submit">
</form>
</main>
<footer>
......@@ -63,5 +140,6 @@
<script src="cart.js"></script>
<script src="printCart.js"></script>
<script src="Validator.js"></script>
</body>
</html>
\ No newline at end of file
......@@ -4,13 +4,14 @@ var PrintCart = (function() {
pub.setup = function() {
var div = document.getElementById("cart");
var form = document.getElementById("checkoutForm");
/*
If the cart list cookie is empty, print an empty message
Otherwise print out a list of cart items
*/
if (window.sessionStorage.getItem("cartlist") == null) {
div.innerHTML = "<p>There are currrently no items in your cart.</p>";
div.innerHTML = "<p>There are currently no items in your cart.</p>";
form.style.display = "none";
} else {
/* Make a heading */
var heading = document.createElement("h2");
......
......@@ -153,6 +153,30 @@ main{
width:32%;
}
/** Display Cart **/
#cart{
font-size: larger;
margin: auto;
}
#cartContents td{
border: 1px solid black;
}
#cartContents th{
text-align: center;
}
#cartContents td{
padding:2px 10px 2px 2px;
}