Commit bf5cbab8 authored by tobiasmeyrick's avatar tobiasmeyrick
Browse files

Added jQuery

parent 99fcd9b5
Pipeline #4048 passed with stage
in 2 seconds
...@@ -11,7 +11,12 @@ ...@@ -11,7 +11,12 @@
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="07311041-3edc-4bfb-ad40-3329adf7b717" name="Default Changelist" comment="Validator script added for form on cart page"> <list default="true" id="07311041-3edc-4bfb-ad40-3329adf7b717" name="Default Changelist" comment="Validator script added for form on cart page">
<change afterPath="$PROJECT_DIR$/jquery.min.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/cart.js" beforeDir="false" afterPath="$PROJECT_DIR$/cart.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/classic.html" beforeDir="false" afterPath="$PROJECT_DIR$/classic.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/hitchcock.html" beforeDir="false" afterPath="$PROJECT_DIR$/hitchcock.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/scifi.html" beforeDir="false" afterPath="$PROJECT_DIR$/scifi.html" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
...@@ -69,7 +74,9 @@ ...@@ -69,7 +74,9 @@
<workItem from="1597290826993" duration="2674000" /> <workItem from="1597290826993" duration="2674000" />
<workItem from="1597371395364" duration="1558000" /> <workItem from="1597371395364" duration="1558000" />
<workItem from="1597374945985" duration="2896000" /> <workItem from="1597374945985" duration="2896000" />
<workItem from="1597466095291" duration="5738000" /> <workItem from="1597466095291" duration="6101000" />
<workItem from="1597566522735" duration="718000" />
<workItem from="1597567837076" duration="604000" />
</task> </task>
<task id="LOCAL-00001" summary="Initial commit"> <task id="LOCAL-00001" summary="Initial commit">
<created>1594767569835</created> <created>1594767569835</created>
...@@ -120,7 +127,14 @@ ...@@ -120,7 +127,14 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1597547012131</updated> <updated>1597547012131</updated>
</task> </task>
<option name="localTasksCounter" value="8" /> <task id="LOCAL-00008" summary="Validator script added for form on cart page">
<created>1597552215954</created>
<option name="number" value="00008" />
<option name="presentableId" value="LOCAL-00008" />
<option name="project" value="LOCAL" />
<updated>1597552215954</updated>
</task>
<option name="localTasksCounter" value="9" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
...@@ -167,13 +181,15 @@ ...@@ -167,13 +181,15 @@
<screen x="0" y="23" width="1440" height="832" /> <screen x="0" y="23" width="1440" height="832" />
</state> </state>
<state x="304" y="73" key="#JSHint/0.23.1440.832@0.23.1440.832" timestamp="1597375104383" /> <state x="304" y="73" key="#JSHint/0.23.1440.832@0.23.1440.832" timestamp="1597375104383" />
<state x="144" y="95" key="MergeDialog" timestamp="1597132717837"> <state x="144" y="78" key="MergeDialog" timestamp="1597552230231">
<screen x="0" y="23" width="1440" height="832" /> <screen x="0" y="0" width="1440" height="900" />
</state> </state>
<state x="144" y="78" key="MergeDialog/0.0.1440.900@0.0.1440.900" timestamp="1597552230231" />
<state x="144" y="95" key="MergeDialog/0.23.1440.832@0.23.1440.832" timestamp="1597132717837" /> <state x="144" y="95" key="MergeDialog/0.23.1440.832@0.23.1440.832" timestamp="1597132717837" />
<state x="360" y="207" key="MultipleFileMergeDialog" timestamp="1597132717857"> <state x="360" y="199" key="MultipleFileMergeDialog" timestamp="1597552231620">
<screen x="0" y="23" width="1440" height="832" /> <screen x="0" y="0" width="1440" height="900" />
</state> </state>
<state x="360" y="199" key="MultipleFileMergeDialog/0.0.1440.900@0.0.1440.900" timestamp="1597552231620" />
<state x="360" y="207" key="MultipleFileMergeDialog/0.23.1440.832@0.23.1440.832" timestamp="1597132717857" /> <state x="360" y="207" key="MultipleFileMergeDialog/0.23.1440.832@0.23.1440.832" timestamp="1597132717857" />
<state x="410" y="148" key="RollbackChangesDialog" timestamp="1597132700210"> <state x="410" y="148" key="RollbackChangesDialog" timestamp="1597132700210">
<screen x="0" y="23" width="1440" height="832" /> <screen x="0" y="23" width="1440" height="832" />
...@@ -189,9 +205,10 @@ ...@@ -189,9 +205,10 @@
</state> </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="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="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"> <state x="383" y="228" key="git4idea.merge.GitPullDialog" timestamp="1597552348163">
<screen x="0" y="23" width="1440" height="832" /> <screen x="0" y="0" width="1440" height="900" />
</state> </state>
<state x="383" y="228" key="git4idea.merge.GitPullDialog/0.0.1440.900@0.0.1440.900" timestamp="1597552348163" />
<state x="383" y="234" key="git4idea.merge.GitPullDialog/0.23.1440.832@0.23.1440.832" timestamp="1597375528680" /> <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"> <state x="385" y="179" width="670" height="676" key="search.everywhere.popup" timestamp="1597375237309">
<screen x="0" y="23" width="1440" height="832" /> <screen x="0" y="23" width="1440" height="832" />
......
...@@ -4,8 +4,8 @@ var Cart = (function() { ...@@ -4,8 +4,8 @@ var Cart = (function() {
function addToCart() { function addToCart() {
var cartlist = []; var cartlist = [];
var movie = $(this).parent().parent();
var movie = this.parentNode.parentNode; // var movie = this.parentNode.parentNode;
var titleOfMovie = movie.getElementsByTagName("h3")[0].innerHTML; var titleOfMovie = movie.getElementsByTagName("h3")[0].innerHTML;
var priceOfMovie = movie.getElementsByClassName("price")[0].innerHTML; var priceOfMovie = movie.getElementsByClassName("price")[0].innerHTML;
var myObject = {title: titleOfMovie, price: priceOfMovie}; var myObject = {title: titleOfMovie, price: priceOfMovie};
...@@ -21,15 +21,16 @@ var Cart = (function() { ...@@ -21,15 +21,16 @@ var Cart = (function() {
} }
pub.setup = function() { pub.setup = function() {
var buttons = document.getElementsByClassName("buy"); var buttons = $("#buy");
// var buttons = document.getElementsByClassName("buy");
for (let button of buttons) { for (let button of buttons) {
button.onclick = addToCart; $(button).click(addToCart);
} }
}; };
/*let /*
When the 'add to cart' button is pushed, create an object with When the 'add to cart' button is pushed, create an object with
two data fields - a title and a price. two data fields - a title and a price.
...@@ -40,11 +41,7 @@ var Cart = (function() { ...@@ -40,11 +41,7 @@ var Cart = (function() {
}()); }());
if (window.addEventListener) { $(document).ready(Cart.setup);
window.addEventListener('load', Cart.setup);
} else if (window.attachEvent) {
window.attachEvent('onload', Cart.setup);
}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Classic Cinema</title> <title>Classic Cinema</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> <script src="jquery.min.js"></script>
</head>
<body>
<body>
<header>
<h1>Classic Cinema</h1> <header>
<h1>Classic Cinema</h1>
<div id="user">
<div id="login"> <div id="user">
<form id="loginForm"> <div id="login">
<label for="loginUser">Username: </label> <form id="loginForm">
<input type="text" name="loginUser" id="loginUser"><br> <label for="loginUser">Username: </label>
<label for="loginPassword">Password: </label> <input type="text" name="loginUser" id="loginUser"><br>
<input type="password" name="loginPassword" id="loginPassword"><br> <label for="loginPassword">Password: </label>
<input type="submit" id="loginSubmit" value="Login"> <input type="password" name="loginPassword" id="loginPassword"><br>
</form> <input type="submit" id="loginSubmit" value="Login">
</div> </form>
</div>
<div id="logout">
<p>Welcome, <span id="logoutUser"></span></p> <div id="logout">
<form id="logoutForm"> <p>Welcome, <span id="logoutUser"></span></p>
<input type="submit" id="logoutSubmit" value="Logout"> <form id="logoutForm">
</form> <input type="submit" id="logoutSubmit" value="Logout">
</div> </form>
</div> </div>
<nav> </div>
<ul> <nav>
<li> <a href="index.html">Home</a> <ul>
<li> Classics <li> <a href="index.html">Home</a>
<li> <a href="scifi.html">Sci&nbsp;Fi</a> <li> Classics
<li> <a href="hitchcock.html">Hitchcock</a> <li> <a href="scifi.html">Sci&nbsp;Fi</a>
<li><a href="contact.html">Contact</a></li> <li> <a href="hitchcock.html">Hitchcock</a>
</ul> <li><a href="contact.html">Contact</a></li>
</nav> </ul>
</header> </nav>
</header>
<main>
<h2>Classic Films</h2> <main>
<h2>Classic Films</h2>
<section class="film">
<img src="images/Gone_With_the_Wind.jpg" alt="Gone With the Wind"> <section class="film">
<h3>Gone With the Wind (1939)</h3> <img src="images/Gone_With_the_Wind.jpg" alt="Gone With the Wind">
<p>Directed by: Victor Fleming, George Cukor, Sam Wood</p> <h3>Gone With the Wind (1939)</h3>
<p>Starring: Clark Gable, Vivien Leigh, Leslie Howard, Olivia de Havilland, Hattie McDaniel</p> <p>Directed by: Victor Fleming, George Cukor, Sam Wood</p>
<p>An epic historical romance and winner of 8 Academy Awards (from 13 nominations).</p> <p>Starring: Clark Gable, Vivien Leigh, Leslie Howard, Olivia de Havilland, Hattie McDaniel</p>
<p> <p>An epic historical romance and winner of 8 Academy Awards (from 13 nominations).</p>
$<span class="price">13.99</span> <p>
<input type="button" value="Add to Cart" class="buy"> $<span class="price">13.99</span>
</p> <input type="button" value="Add to Cart" class="buy">
</section> </p>
</section>
<section class="film">
<img src="images/The_Jazz_Singer.jpg" alt="The Jazz Singer"> <section class="film">
<h3>The Jazz Singer (1927)</h3> <img src="images/The_Jazz_Singer.jpg" alt="The Jazz Singer">
<p>Directed by: Alan Crosland</p> <h3>The Jazz Singer (1927)</h3>
<p>Starring: Al Jolson, May McAvoy, Warner Oland, Cantor Rosenblatt</p> <p>Directed by: Alan Crosland</p>
<p>The first feature length 'talkie', The Jazz Singer is a piece of cinematic history</p> <p>Starring: Al Jolson, May McAvoy, Warner Oland, Cantor Rosenblatt</p>
<p> <p>The first feature length 'talkie', The Jazz Singer is a piece of cinematic history</p>
$<span class="price">13.99</span> <p>
<input type="button" value="Add to Cart" class="buy"> $<span class="price">13.99</span>
</p> <input type="button" value="Add to Cart" class="buy">
</section> </p>
</section>
<section class="film">
<img src="images/Metropolis.jpg" alt="Metropolis"> <section class="film">
<h3>Metropolis (1927)</h3> <img src="images/Metropolis.jpg" alt="Metropolis">
<p>Directed by: Fritz Lang</p> <h3>Metropolis (1927)</h3>
<p>Starring: Alfred Abel, Brigitte Helm, Gustav Fr&ouml;hlich, Rudolf Klein-Rogge</p> <p>Directed by: Fritz Lang</p>
<p>A lovingly restored version of Fritz Lang's dystopian masterpiece, one of the great achievements of the silent era.</p> <p>Starring: Alfred Abel, Brigitte Helm, Gustav Fr&ouml;hlich, Rudolf Klein-Rogge</p>
<p> <p>A lovingly restored version of Fritz Lang's dystopian masterpiece, one of the great achievements of the silent era.</p>
$<span class="price">19.99</span> <p>
<input type="button" value="Add to Cart" class="buy"> $<span class="price">19.99</span>
</p> <input type="button" value="Add to Cart" class="buy">
</section> </p>
</section>
</main>
</main>
<footer>
<p> <footer>
Classic Cinema is not a real store. No products are available, and no money will be accepted. <p>
<p> Classic Cinema is not a real store. No products are available, and no money will be accepted.
All images from <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a> and are believed to be in the public domain. <p>
</p> All images from <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a> and are believed to be in the public domain.
</footer> </p>
</footer>
<script src="showHide.js"></script>
<script src="cart.js"></script> <script src="showHide.js"></script>
</body> <script src="cart.js"></script>
</body>
</html> </html>
\ No newline at end of file
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Classic Cinema</title> <title>Classic Cinema</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> <script src="jquery.min.js"></script>
</head>
<body>
<body>
<header>
<h1>Classic Cinema</h1> <header>
<h1>Classic Cinema</h1>
<div id="user">
<div id="login"> <div id="user">
<form id="loginForm"> <div id="login">
<label for="loginUser">Username: </label> <form id="loginForm">
<input type="text" name="loginUser" id="loginUser"><br> <label for="loginUser">Username: </label>
<label for="loginPassword">Password: </label> <input type="text" name="loginUser" id="loginUser"><br>
<input type="password" name="loginPassword" id="loginPassword"><br> <label for="loginPassword">Password: </label>
<input type="submit" id="loginSubmit" value="Login"> <input type="password" name="loginPassword" id="loginPassword"><br>
</form> <input type="submit" id="loginSubmit" value="Login">
</div> </form>
</div>
<div id="logout">
<p>Welcome, <span id="logoutUser"></span></p> <div id="logout">
<form id="logoutForm"> <p>Welcome, <span id="logoutUser"></span></p>
<input type="submit" id="logoutSubmit" value="Logout"> <form id="logoutForm">
</form> <input type="submit" id="logoutSubmit" value="Logout">
</div> </form>
</div> </div>
</div>
<nav>
<ul> <nav>
<li> <a href="index.html">Home</a> <ul>
<li> <a href="classic.html">Classics</a> <li> <a href="index.html">Home</a>
<li> <a href="scifi.html">Sci&nbsp;Fi</a> <li> <a href="classic.html">Classics</a>
<li> Hitchcock <li> <a href="scifi.html">Sci&nbsp;Fi</a>
<li><a href="contact.html">Contact</a></li> <li> Hitchcock
</ul> <li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header> </nav>
</header>
<main>
<h2>Alfred Hitchcock</h2> <main>
<h2>Alfred Hitchcock</h2>
<section class="film">
<img src="images/The_Birds.jpg" alt="The Birds"> <section class="film">
<h3>The Birds (1963)</h3> <img src="images/The_Birds.jpg" alt="The Birds">
<p>Directed by: Alfred Hitchcock</p> <h3>The Birds (1963)</h3>
<p>Starring: Rod Taylor, Jessica Tandy, Suzanne Pleshette, Tippi Hedren</p> <p>Directed by: Alfred Hitchcock</p>
<p>The follow up to his box office sensation, <em>Psycho</em>, the Birds mixes suspense and horror from an everyday source.</p> <p>Starring: Rod Taylor, Jessica Tandy, Suzanne Pleshette, Tippi Hedren</p>
<p> <p>The follow up to his box office sensation, <em>Psycho</em>, the Birds mixes suspense and horror from an everyday source.</p>
$<span class="price">14.99</span> <p>
<input type="button" value="Add to Cart" class="buy"> $<span class="price">14.99</span>
</p> <input type="button" value="Add to Cart" class="buy">
</section> </p>
</section>
<section class="film">
<img src="images/Dial_M_for_Murder.jpg" alt="Dial M for Murder"> <section class="film">
<h3>Dial M for Murder (1954)</h3> <img src="images/Dial_M_for_Murder.jpg" alt="Dial M for Murder">
<p>Directed by: Alfred Hitchcock</p> <h3>Dial M for Murder (1954)</h3>
<p>Starring: Ray Milland, Grace Kelly, Robert Cimmings, John Williams</p> <p>Directed by: Alfred Hitchcock</p>
<p>Shot in 3D, but only released in 2D because of lack of interest in the process, it was shown in 3D in the 1980s, and has recently been released in 3D Blu-ray format.</p> <p>Starring: Ray Milland, Grace Kelly, Robert Cimmings, John Williams</p>
<p> <p>Shot in 3D, but only released in 2D because of lack of interest in the process, it was shown in 3D in the 1980s, and has recently been released in 3D Blu-ray format.</p>
$<span class="price">12.99</span> <p>
<input type="button" value="Add to Cart" class="buy"> $<span class="price">12.99</span>
</p> <input type="button" value="Add to Cart" class="buy">
</section> </p>
</section>
<section class="film">
<img src="images/The_Man_Who_Knew_Too_Much.jpg" alt="The Man Who Knew Too Much"> <section class="film">
<h3>The Man Who Knew Too Much (1956)</h3> <img src="images/The_Man_Who_Knew_Too_Much.jpg" alt="The Man Who Knew Too Much">
<p>Directed by: Alfred Hitchcock</p> <h3>The Man Who Knew Too Much (1956)</h3>
<p>Starring: James Stewart, Doris Day, Brenda De Banzie, Bernard Miles, Alan Mowbray, Hillary Brooke, Christopher Olsen</p> <p>Directed by: Alfred Hitchcock</p>
<p>Hitchcock's remake of his own earlier (1934) version.</p> <p>Starring: James Stewart, Doris Day, Brenda De Banzie, Bernard Miles, Alan Mowbray, Hillary Brooke, Christopher Olsen</p>
<p> <p>Hitchcock's remake of his own earlier (1934) version.</p>
$<span class="price">11.99</span> <p>
<input type="button" value="Add to Cart" class="buy"> $<span class="price">11.99</span>
</p> <input type="button" value="Add to Cart" class="buy">
</section> </p>
</section>
<section class="film">
<img src="images/North_by_Northwest.jpg" alt="North by Northwest"> <section class="film">
<h3>North by Northwest (1959)</h3> <img src="images/North_by_Northwest.jpg" alt="North by Northwest">
<p>Directed by: Alfred Hitchcock</p> <h3>North by Northwest (1959)</h3>
<p>Starring: Cary Grant, Eva Marie Saint, James Mason, Jessie Royce Landis</p> <p>Directed by: Alfred Hitchcock</p>
<p>A classic thriller in which an innocent man is pursued by mysterious agents over government secrets.</p> <p>Starring: Cary Grant, Eva Marie Saint, James Mason, Jessie Royce Landis</p>
<p> <p>A classic thriller in which an innocent man is pursued by mysterious agents over government secrets.</p>
$<span class="price">14.99</span> <p>
<input type="button" value="Add to Cart" class="buy"> $<span class="price">14.99</span>
</p> <input type="button" value="Add to Cart" class="buy">
</section> </p>
</section>
<section class="film">
<img src="images/Vertigo.jpg" alt="Vertigo"> <section class="film">
<h3>Vertigo (1958)</h3> <img src="images/Vertigo.jpg" alt="Vertigo">
<p>Directed by: Alfred Hitchcock</p> <h3>Vertigo (1958)</h3>
<p>Starring: James Stuart, Kim Novak, Barbara Bel Geddes</p> <p>Directed by: Alfred Hitchcock</p>
<p>A classic piece of Hitchcock, often included in lists of the best films of all time.</p> <p>Starring: James Stuart, Kim Novak, Barbara Bel Geddes</p>
<p> <p>A classic piece of Hitchcock, often included in lists of the best films of all time.</p>
$<span class="price">16.99</span> <p>
<input type="button" value="Add to Cart" class="buy"> $<span class="price">16.99</span>
</p> <input type="button" value="Add to Cart" class="buy">
</section> </p>
</section>
</main>
</main>
<footer>
<p> <footer>
Classic Cinema is not a real store. No products are available, and no money will be accepted. <p>
<p> Classic Cinema is not a real store. No products are available, and no money will be accepted.
All images from <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a> and are believed to be in the public domain. <p>
</p> All images from <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a> and are believed to be in the public domain.
</footer> </p>
</footer>
<script src="showHide.js"></script>
<script src="cart.js"></script> <script src="showHide.js"></script>
</body> <script src="cart.js"></script>
</body>
</html> </html>
\ No newline at end of file
This diff is collapsed.
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Classic Cinema</title> <title>Classic Cinema</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> <script src="jquery.min.js"></script>
</head>
<body>
<body>
<header>
<h1>Classic Cinema</h1> <header>
<h1>Classic Cinema</h1>
<div id="user">
<div id="login"> <div id="user">
<form id="loginForm"> <div id="login">
<label for="loginUser">Username: </label> <form id="loginForm">
<input type="text" name="loginUser" id="loginUser"><br> <label for="loginUser">Username: </label>
<label for="loginPassword">Password: </label> <input type="text" name="loginUser" id="loginUser"><br>
<input type="password" name="loginPassword" id="loginPassword"><br> <label for="loginPassword">Password: </label>
<input type="submit" id="loginSubmit" value="Login"> <input type="password" name="loginPassword" id="loginPassword"><br>
</form> <input type="submit" id="loginSubmit" value="Login">
</div> </form>
</div>
<div id="logout">
<p>Welcome, <span id="logoutUser"></span></p> <div id="logout">