JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div id="controls">
 <p>Billedvalg:</p>   
<br>    
<form name="picchoice">
<input type="radio" name="picselect" id="first" checked="checked"/>
<label for="first">Billede 1</label>
<input type="radio" name="picselect" id="second"/>
<label for="second">Billede 2</label>
    <br>
    <br>
</form>
    <p>Billedjustering:</p>   
<br>    
<form name="alignment">
<input type="radio" name="align" id="std" checked="checked"/>
<label for="std">Standard</label>
<input type="radio" name="align" id="left"/>
<label for="left">Venstre</label>
<input type="radio" name="align" id="center"/>
<label for="center">Center</label>
<input type="radio" name="align" id="right"/>
<label for="right">Højre</label>
</form>
    <br>
    <br>
<label>Afstand til tekst:</label>
<input type="range" id="slider" min="0" max="60" value="0"/>
</div>

<div id="content">
    <p>Nulla tincidunt, orci quis dictum iaculis, tortor risus accumsan arcu, in bibendum ligula arcu tempus magna. Sed sit amet tellus massa, et tincidunt lectus.         Proin scelerisque magna est. Nulla porta metus nec odio fermentum lobortis. Integer iaculis nisl elit, sed scelerisque arcu. Vivamus enim elit, bibendum sit amet tincidunt in, accumsan vel sapien. Suspendisse ultricies luctus euismod.

</p>
    <p>Cras iaculis, mi id varius scelerisque, nisi felis eleifend erat, at tristique erat lacus quis quam. Maecenas sodales tortor sed eros euismod id sollicitudin tellus condimentum. Mauris commodo diam vel libero egestas suscipit congue leo posuere. Donec ac ullamcorper tortor. Integer lorem felis, dictum eget ultricies a, volutpat id mi. Donec bibendum aliquam varius. In hac habitasse platea dictumst. Aenean et tellus sit amet ligula congue adipiscing. Nullam quam purus, cursus sit amet tempus sed, vulputate in mauris. Nullam quam libero, laoreet a interdum eu, auctor sed ligula.</p>
    
    <img id="img1"...

CSS

body { font-family: arial;  }
label { margin-right: 20px; }
img { border: 2px solid #666; padding:10px; }
input#slider { width: 200px; }
#controls { margin: 20px; border: 1px #CCC solid; padding: 20px; font-size:14px; background-color: #FAFAFA; }
#controls p { font-weight:bold; text-transform:uppercase; }
#content { margin: 0 20px; font-size:12px; text-align:justify; }
#content p { margin-bottom: 10px; }

JavaScript

var currentAlignment = "std";
var selectedImg = "#img1";

$(document).ready(function() {
    $("#slider").change(function() {

        AdjustContextualMargin();    
    });
    $("input[name='align']").click(  
        function()
        {
            currentAlignment = $(this).attr("id");
            AlignImage();
            AdjustContextualMargin(); 
        }
    
    );
      $("input[name='picselect']").click(  
        function()
        {
            var image = $(this).attr("id");
            selectedImg = image == "first" ? "#img1" : "#img2";
            
        }
    
    );
});


function AdjustContextualMargin() {  
  var marginValue = document.getElementById('slider').value;
    
  if(currentAlignment == "std" || currentAlignment == "center") 
    { 
        $(selectedImg).css("margin-top", marginValue  + "px");
        $(selectedImg).css("margin-bottom", marginValue  + "px");

    }
    else if(currentAlignment == "left")
    {
        $(selectedImg).css("margin-top", marginValue  + "px");
        $(selectedImg).css("margin-bottom", marginValue + "px");
        $(selectedImg).css("margin-right", parseInt(marginValue) + 4 + "px");
    }
    else if(currentAlignment == "right")
    {
        $(selectedImg).css("margin-top", marginValue  + "px");
        $(selectedImg).css("margin-bottom", marginValue  + "px");
        $(selectedImg).css("margin-left", parseInt(marginValue) + 4 + "px");
    }
   
} 

function AlignImage(imgalign) {
   var alignmentSettings;

   if(currentAlignment == "left") 
    { 
        alignmentSettings = "float:left;";           
    }
    else if(currentAlignment == "center")
    {
        alignmentSettings = "margin-left:auto; margin-right:auto; display:block;";        
    }
    else if(currentAlignment == "right")
    {
        alignmentSettings = "float:right;";           
    }
    else
    {
        alignmentSettings = "";
    }
    $(selectedImg).attr("style", alignmentSettings);
}