JSFiddle - React, Tailwind, and code Playground

by MatyasSvejdik

HTML

<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>ShapeDiver API - Dynamic Parameter Creation</title>
    <!-- ShapeDiver Viewer -->
    <script src="https://viewer.shapediver.com/v2/2.14.0/sdv.concat.min.js"></script>
  </head>

  <body>
    <!-- ShapeDiver Viewer Main Container -->
    <div id='sdv-container' style="width:100%;height:300px;">
    </div>


    <div style="margin:5px">
      1NP je <span class="vysledek1NP">0</span>, celkem: <span class="soucet1NP">0</span><br>
      2NP je <span class="vysledek2NP">0</span>, celkem: <span class="soucet2NP">0</span><br>
      <span class="rovnase">ANO</span>
    </div>

    <div>

      <div class="source">
        <div class="item" value="4.5" code="o45">O4.5<span class="closer">O4.5</span></div>
        <div class="item" value="5.0" code="o50">O5.0<span class="closer">O5.0</span></div>
        <div class="item" value="5.5" code="o55">O5.5<span class="closer">O5.5</span></div>
        <div class="item" value="6.0" code="o60">O6.0<span class="closer">O6.0</span></div>
        
        <div class="item" value="2" code="s20">S2.0<span class="closer">S2.0</span></div>
        
        <div class="item" value="1" code="b10">B1.0<span class="closer">B1.0</span></div>
        
        
        <div class="item" value="1.5" code="b15">B1.5<span class="closer">B1.5</span></div>
        
        <div class="item" value="2.0" code="r20">R2.0<span class="closer">R2.0</span></div>
        <div class="item" value="2.5" code="r25">R2.5<span class="closer">R2.5</span></div>
        <div class="item" value="3.0" code="r30">R3.0<span class="closer">R3.0</span></div>

        <div class="item" value="2.5" code="m25">M2.5<span class="closer">M2.5</span></div>
        <div class="item" value="3.0" code="m30">M3.0<span class="closer">M3.0</span></div>
        <div class="item" value="3.5" code="m35">M3.5<span...

CSS

body { background: #aaafd7; }

.row:after {
  content: "";
  display: table;
  clear: both;
}

.source, .target1, .target2, .buttonX {float: left;  width: 75px}



.item { height:30px; margin: 5px; color: #ffffff; background-color: #0a0f37; position: relative;text-align: center; border-radius:15px;cursor: pointer; line-height:29px}

.item .closer { height:30px; color: #ffffff; background-color: #0a0f37; position: relative;text-align: center; border-radius:15px;cursor: pointer;  display: none;}

.item .closer:hover { background-color: #ff0000; }

.empty { height: 30px; margin: 5px; background: #ebebf5; border-radius:15px;}
.empty .item { margin: 0; }
.empty .item .closer { display: block; bottom: 29px;}

.highlight { background: #fff; }
.highlight .item { opacity: 0.3; }
.ui-draggable-dragging { z-index: 99; opacity: 1 !important; }

.button { height:20px; margin:5px; padding:5px; color: #ffffff; background-color: #46cd8c; position: relative;text-align: center; border-radius:15px;cursor: pointer;}

JavaScript

var _container = document.getElementById('sdv-container');
// viewer settings 
var _viewerSettings = {
  // container to use 
  container: _container,
  // when creating the viewer, we want to get back an API v2 object 
  api: {
    version: 2
  },
  // ticket for a ShapeDiver model 
  ticket: 'ad7f8b415e8e520f99133becbc185a08c8929a7540d1405acbb398b41e3fc53315f1bd62cc929101407f71ceb5017c6ffbf54b3762416c1410c11d2d82cc0f2f9b8d44ac947ea2043e501fcd66abc1fc38fb9de036318cd301d42ac943a4e310e57060ec6f0b4c229844f89b87096ea2978c18808293-c1858d6c06b7a0b6532a92750cb740ba',
  modelViewUrl: 'eu-central-1'
};

// create the viewer, get back an API v2 object 
var api = new SDVApp.ParametricViewer(_viewerSettings);

var viewerInit = false;
var parameters;
api.scene.addEventListener(api.scene.EVENTTYPE.VISIBILITY_ON, function() {
  if (!viewerInit) {
    var globalDiv = document.getElementById("parameters");
    parameters = api.parameters.get();
    parameters.data.sort(function(a, b) {
      return a.order - b.order;
    });
    console.log(parameters.data);
    for (let i = 0; i < parameters.data.length; i++) {
      let paramInput = null;
      let paramDiv = document.createElement("div");
      let param = parameters.data[i];
      let label = document.createElement("label");
      label.setAttribute("for", param.id);
      label.innerHTML = param.name;
      if (param.type == "Int" || param.type == "Float" || param.type == "Even" || param.type == "Odd") {
        paramInput = document.createElement("input");
        paramInput.setAttribute("id", param.id);
        paramInput.setAttribute("type", "range");
        paramInput.setAttribute("min", param.min);
        paramInput.setAttribute("max", param.max);
        paramInput.setAttribute("value", param.value);
        if (param.type == "Int") paramInput.setAttribute("step", 1);
        else if (param.type == "Even" || param.type == "Odd") paramInput.setAttribute("step", 2);
        else paramInput.setAttribute("step", 1 /...