wow

css/layout.css

@@ -41,7 +41,6 @@ body{
 }
 #rechnungen{
     padding: 0px;
-    justify-content: space-between;
     position: relative;
     top: 1px;
 }
@@ -52,9 +51,21 @@ body{
     text-align: center;
     font-size: 1.5em;
     z-index: 10;
-    position: relative;
+    position: fixed;
     display: inline-block;
 }
+#rechnung1{
+    background-color: rgb(0, 225, 255);
+    border-radius: 15px;
+    outline: 8px solid black;
+    left: 15%;
+}
+#rechnung2{
+    background-color: red;
+    border-radius: 15px;
+    outline: 8px solid black;
+    right: 15%;
+}
 #rechnung1 img, #rechnung2 img {
     position: absolute;
     top: 50%;

index.html

@@ -12,12 +12,10 @@
         <div id="rechnungen" class="flexbox">
 
             <div id="rechnung1">
-                <img src="pics/RechenBlockRot.png" alt="">
                 <div id="rechnung1Text">*5</div>
             </div>
             
             <div id="rechnung2">
-                <img src="pics/RechenBlockBlau.png" alt="">
                 <div id="rechnung2Text">+5</div>
             </div>
 

js/rechnungen.js

@@ -14,17 +14,17 @@ function rechnungMoven(speed){
     if(nextTop > 800){
         rechnungen.style.top = "1px";
         rechnungenTop = 1;
-        rechnungenSpawn();
+        rechnungenSpawn(100);
     }else{
         rechnungenTop = nextTop;
     }
 }
-function rechnungenSpawn(){
+function rechnungenSpawn(maxzahl){
     let index = Math.floor(Math.random()*rechenzeichen.length);
-    let randomZahl = Math.floor(Math.random()*20);
+    let randomZahl = Math.floor(Math.random()*maxzahl);
     rechnung1Text.innerText = rechenzeichen[index] + randomZahl.toString();
     index = Math.floor(Math.random()*rechenzeichen.length);
-    randomZahl = Math.floor(Math.random()*20);
+    randomZahl = Math.floor(Math.random()*maxzahl);
     rechnung2Text.innerText = rechenzeichen[index] + randomZahl.toString();
 }
 setInterval(()=>{