JSFiddle - React, Tailwind, and code Playground

by Tori Hoelscher

HTML

<h1>
One Ring to Rule Them All
</h1>

<img id='mountain' src="http://static.boredpanda.com/blog/wp-content/uploads/2014/11/Mordor-Part-I-Alps5__880.jpg  " width= '1000' height= '1000'/>
<div class='ring'>
    <img id='ring' src="https://upload.wikimedia.org/wikipedia/commons/e/ef/One_ring.png" width='100' height='100'/>
</div>
  <!--========================= Mobile Devices =========================-->
  <link rel="stylesheet" media="screen and (max-width: 650px)" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" media="screen and (max-width: 650px)"  href="css/mobileDevice.css" />

  <!--==================== jQuery v3.3.1 ====================-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/menu.js"></script>

CSS

body {background-color: white;
    padding: 10px;
}


.form label {
    display: inline-block;
    text-align: right;
    clear: left;
    width: 150px;
    text-align: right;
}

.form input {
    display: inline-block;
    text-align: left;
    width:50;

}

input:focus {
    background-color: #8FFFFC;
    border-color:#FB3C3C;
}

textarea:focus {
    background-color: #8FFFFC;
    border-color:#FB3C3C;
}
.info {
    font-weight:bold;
    text-align:center;
    font-size:20px;
}



.float {
    display:block;
    margin:auto;
    margin-top:150px;

}

.responsive {
    width: 50%;
    height: auto;
    margin-left:25%;
    /*margin-right:auto;*/
}



label textarea{
    vertical-align: middle;
}



.dealt {
    color: black;
    width:400px;
    background-color: #8EE5E9;
}

.drop {
    color: white;
    height: 200px;
    width:400px;
    background-color: #288123;
}
.field {
    position: absolute;
    top:200px;
    left:20px;
    
}
.ring {
    position: absolute;
    top: 200px;
    left:200px;
    
    }

JavaScript

var timerInterval = 100;
var dx = Math.random() * 90 -50;          
var dy = Math.random() * 90 - 50;  
var timer = window.setInterval(function() { ringTimer() }, 
                              timerInterval);  

$( "#go" ).click(function() {
   window.clearInterval(timer);
});

function ringTimer()
{
  movering($('.ring'));   
}

function movering(obj)
{
    var left = obj.offset().left;
    var top = obj.offset().top;
    var moveDuration = 50;
    
    if (left >= 700)
	{
       left = 750;
	   dx=dx*-1;
	}

    if (left <= 50)
    {
       left = 55;
	   dx=dx*-1;
	}
    if (top>=680)
    {
       top=680;
	   dy =dy * -1;
	}
    if (top<=220)
    {
       top=230;
	   dy =dy * -1;
	}
	obj.animate({ "left": "+="+dx+"px", "top": "+="+dy+"px" }, moveDuration );
    
}