New branch

app.js

@@ -0,0 +1,47 @@
+
+
+const btns = document.querySelectorAll(".options button");
+btns.forEach((btn) => {
+  btn.addEventListener("click", () => {
+    document.querySelector(".hands .player-hand").src = "rock.png";
+    document.querySelector(".hands .computer-hand").src = "rock.png";
+    playerHand.classList.add('shakePlayer')
+    computerHand.classList.add('shakeComputer')
+    const playerA = btn.querySelector("label").innerText;
+    const playerB = options[getRandomInt()];
+    setTimeout(()=>compare(playerA, playerB),1000)
+
+  });
+});
+
+
+
+const options = ["rock", "paper", "scissor"];
+let score = {
+  you: 0,
+  computer: 0
+};
+const WIN_GREEN = "#6ac475";
+const LOSE_RED = "#c4736a";
+const DRAW_BLUE = "#5865f2";
+
+const playerHand = document.querySelector(".hands .player-hand");
+const computerHand = document.querySelector(".hands .computer-hand");
+
+function getRandomInt() {
+  return Math.floor(Math.random() * 3);
+}
+
+const btns = document.querySelectorAll(".options button");
+btns.forEach((btn) => {
+  btn.addEventListener("click", () => {
+    document.querySelector(".hands .player-hand").src = "rock.png";
+    document.querySelector(".hands .computer-hand").src = "rock.png";
+    playerHand.classList.add('shakePlayer')
+    computerHand.classList.add('shakeComputer')
+    const playerA = btn.querySelector("label").innerText;
+    const playerB = options[getRandomInt()];
+    setTimeout(()=>compare(playerA, playerB),1000)
+
+  });
+});

index.html

@@ -44,7 +44,7 @@
   <meta name="twitter:site" content="@udacity">
   <meta name="twitter:creator" content="@udacity">
 
-<!-- <script type="text/javascript">
+<script type="text/javascript">
   !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="3.1.0";
       analytics.load('oP3ZXzj7KM9lvyAXexoorjH0YbvawAKg');
       analytics.page(
@@ -54,9 +54,9 @@
         {}
       );
   }}();
-</script> -->
-<!--Second Google analytic account setup-->
-<!-- <script>
+</script> 
+Second Google analytic account setup
+ <script>
   analytics.ready(function(){
     ga('create', 'UA-28524234-29', 'auto', {'name': 'optimizeTracker'});
     ga('optimizeTracker.require', 'GTM-MDRX326');
@@ -72,13 +72,13 @@
         nonInteraction: true
     })
   });
-</script> -->
+</script>
 
     <link rel="stylesheet" media="screen" href="./site-files/application-caf474fc673fa8d860f542b966ca1080b0066549a3a0899954bbdab5f9f8ad81.css">
       <script src="./site-files/jquery.min.js"></script>
-        <!-- <script type="application/ld+json">
+         <script type="application/ld+json">
     {}
-  </script> -->
+  </script> 
 
 
 <!-- <style type="text/css">iframe#_hjRemoteVarsFrame {display: none !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important;}</style><style type="text/css">chat-view .cls-1,[data-is="chat-view"] .cls-1{opacity:0.6;} chat-view .cls-2,[data-is="chat-view"] .cls-2{fill:#424242;}</style><style type="text/css" id="qual_style-dri"></style><style type="text/css" id="qual_style-dee"></style> -->
@@ -101,7 +101,7 @@
     <path id="mark" fill="#02B3E4" d="M29 .5l1 .5v13c0 5.551887-2.8897 8.695692-5.995216 10.099885L24.0094 24.1l-7.620963 4.388562c-.05877.03456-.11776.068527-.176957.101902l-.08642.049764.001806-.00254C14.48289 29.545895 12.684682 30 11 30 6 30 0 26 0 18V6l2 1v11c0 8 6 10 9 10 1.858706 0 4.86901-.76773 6.89043-3.254517C14.181726 23.872636 10 20.678703 10 14V2.2L2 7 0 6l10-6 1 .5 1 .5v13c0 6.939958 4.515283 8.612086 7.017542 8.933368C19.625786 21.62159 20 19.997902 20 18V5l2 1v12c0 1.852645-.321777 3.49077-.878395 4.91438C23.648223 22.549217 28 20.813144 28 14V2.25L22 6l-2-1 8-5 1 .5z"></path>
   </g>
 </svg>
-
+//
         </div>
 </a>      <a id="ga-b898b9" title="Udacity" href="https://www.udacity.com/">
         <div class="logo-mark">
@@ -110,6 +110,7 @@
 </svg>
         </div>
 </a>    </div>
+      //Header 
     <div class="header__navbar--navigation">
       <nav role="navigation">
         <a id="ga-83ccc8" title="Explore" data-analytics-name="Navbar Link Clicked" data-analytics-category="Navbar Link" data-analytics-label="Navbar Link - Pathfinder - Explore" data-analytics-payload="{&quot;cta_message&quot;:&quot;Explore&quot;,&quot;cta_type&quot;:&quot;link&quot;,&quot;cta_destination&quot;:&quot;self&quot;,&quot;cta_location&quot;:&quot;HomePage&quot;}" class="button button--navigation" href="https://www.udacity.com/pathfinder">Explore</a>