JSFiddle - React, Tailwind, and code Playground

by staeff

HTML

<html>
<head>
<title>Exercise 4.2</title>
</head>
<body>
<div class="rotationField">
<div class="rotatee"></div>
</div>
<div class="rotationControl">
<button class="doRotate">Rotate!</button>
</div>
</body>
</html>

CSS

div.rotationField {
    border-style:solid;
    border-color:black;
    border-width:1px;
    width:300px;
    height:300px;
    position:relative;
}

div.rotationControl {
    border-style:solid;
    border-color:black;
    border-width:1px;
    text-align:center;
    border-top-style:none;
    width:300px;
}

div.rotatee {
    border-color:black;
    border-style:solid;
    border-width:4px;
    background-color:#a56;
    width:180px;
    height:60px;
    -webkit-border-radius:5px;
       -moz-border-radius:5px;
            border-radius:5px;
    -webkit-box-shadow: 0px 0px 3px black;
       -moz-box-shadow: 0px 0px 3px black;
            box-shadow: 0px 0px 3px black;
    position:absolute;
    top:116px;
    left:56px;
}
    
div.rotatee.rotated {
    top:56px;
    left:116px;    
}

button {
    cursor:pointer;
}

JavaScript

function rotate($that) {
    //swap the height and width attributes
    //of $that using .height and .width;
    $thatheight = $that.height();
    $thatwidth = $that.width();
    $that.height($thatwidth);
    $that.width($thatheight);
}

//connecting rotate to the button,
$('document').ready(function() {
    //attach a click-callback to the button
    $('button.doRotate').click(function() {
        //selecting the element that we want to rotate
        var $rotatee = $('div.rotatee');
        //calling your function!
        rotate($rotatee);
        //css so that it stays centered
        //(in fact, this could do the height and width stuff
        //too, but it was good exercise to do it in jQuery)
        $rotatee.toggleClass('rotated');
    });


});