boredbutton3

commit 055ad45c62946a687cc8dd790d471a9b575b0770
parent 87cb112e3e2549e22b709e4caa128a4dfee210e5
Author: William Lindholm <william_lindholm@outlook.com>
Date:   Fri, 17 Dec 2021 22:35:29 +0100

transitions not working

Diffstat:
M
index.html
 | 
2
+-
M
script.js
 | 
4
+++-
M
style.css
 | 
20
++++++++++++++++++++

3 files changed, 24 insertions(+), 2 deletions(-)
diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
     </div>
 
     <div class="main" id="main" onclick="showFact()"></div>
-    
+    <p id="fact_text">test test test</p>
 
 
   </body>
diff --git a/script.js b/script.js
@@ -3,7 +3,7 @@ function showFact() {
     console.log("running function")
     const xhttp = new XMLHttpRequest();
     xhttp.onload = function() {
-        document.getElementById("main").innerHTML = this.responseText;
+        document.getElementById("fact_text").innerHTML = this.responseText;
     }
     xhttp.open("GET", "getFact.php");
     xhttp.send();
@@ -11,6 +11,8 @@ function showFact() {
 
 function moveButton() {
     document.getElementById("main").style.bottom = "35%";
+    document.getElementById("fact_text").style.display = "inline";
+    document.getElementById("fact_text").style.opacity = "100%";
 }
 
 
diff --git a/style.css b/style.css
@@ -107,3 +107,23 @@ footer{
     50% { background-position: 400% 0; }
     100% { background-position: 0 0; }
 }
+
+#fact_text {
+    margin: auto;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    text-align: center;
+    margin-top: 25%;
+    display: none;
+    opacity: 0;
+    transition: opacity 1s linear 1s;
+}
+
+#fact_text:hover {
+    top: 0;
+    opacity: 1;
+}