Tap to flip card - hopefully

flip.js

@@ -0,0 +1,4 @@
+function flipCard() {
+    document.getElementById('card-front').style.transform = 'rotateX(-180deg)';
+    document.getElementById('card-back').style.transform = 'rotateX(0deg)';
+}

index.html

@@ -5,8 +5,10 @@
     <title>Luke Else</title>
     <link rel="stylesheet" href="./style.css" />
 </head>
-<div class="card">
-    <div class="card-back">
+
+
+<div class="card" id="card" onclick="flipCard()">
+  <div class="card-back" id="card-back">
     <div class="line-numbers">
       <div>1</div>
       <div>2</div>
@@ -25,7 +27,7 @@
         <div class="indent"><span class="property">website</span><span class="operator">:<a href="https://git.luke-else.co.uk/luke-else/"></span><span class="string">'https://git.luke-else.co.uk'</span></a></div><span>}</span>
       </div><span>}</span></code>
     </div>
-    <div class="card-front">
+    <div class="card-front" id="card-front">
       <div class="line-numbers">
         <div>1</div>
         <div>2</div>
@@ -40,4 +42,7 @@
         <div class="indent"><span class="variable">this</span><span>.</span><span class="property">flipCard </span><span>= </span><span class="boolean">true</span><span>;</span></div><span>});</span></code>
       </div>
     </div>
+    
+    <script src="./flip.js"></script>
+
   </html>

style.css

@@ -84,14 +84,13 @@
     color: #11181f;
   }
   
-  @media(hover: hover) and (pointer: fine) {
   .card:hover .card-front{
     transform: rotateX(-180deg);
   }
   .card:hover .card-back{
     transform: rotateX(0deg);
   }
-  }
+
   .card .line-numbers {
     position: absolute;
     top: 0;