JSFiddle - React, Tailwind, and code Playground

by hakarune

HTML

<div id="wrapper">
    <div id="box">picture</div>
    <p>title</p>
    <button>Click Me!</button>
</div>

CSS

body  {
		background-color: #ffffff; 
		font-family: futura, helvetica, arial, sans-serif 
		}
	
	#wrapper {
		position: relative; 
		background-color: #ffffff; 
		width: 800px; 
		height: 600px; 
		margin: 20px auto; 
		border: 1px dotted #000000; 
		padding: 20px;
		} 
	
	p  {
		position: absolute;
		right: 217px;
		bottom: 200px;
		background-color: #ffffff; 
		width: 400px; 
		border: 1px solid #000000; 
		padding: 10px; 
		margin: 0px
		}
	
	#box  {
		position: absolute;
		left: 200px;
		top: 100px;
		padding: 10px;
		background-color: #ffffff; 
		background-repeat: no-repeat; 
		width: 400px; 
		height: 270px; 
		border: 2px solid #000000;
		}
		
	#box img {
		width: 100%;
		}
		
		
	button  {
		position: fixed;
		right: 10px;
		top: 10px;
		}

JavaScript

$(document).ready(function(){   //this opens the document ready function
	var imgArray = [
              ['http://thebowditchgroup.com/wp-content/uploads/2010/12/clouds.jpg', 'image 1'],
			  ['http://www.xbox360achievements.org/images/news/cloud.jpg', 'image 2'],
			  ['http://www.cmswire.com/images/Dell_cloud.jpg', 'image 3']			
			];
		
    var i = 0
    $('button').click(function() {
        var imageInfo = imgArray[i];
        var imgUrl = imageInfo[0];
        var imgDescrip = imageInfo[1];	
        i++;
        if(i>=imgArray.length){
            i=0;
		}
        $('#box').fadeOut('1000', function(){
      		$(this).html('<img src="'+imgUrl+'" />');
        }).fadeIn('1000');
     	
        $('p').html(imgDescrip);
    });
});  //this closes the document ready function