JSFiddle - React, Tailwind, and code Playground

by forssux

HTML

<body>


  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>




  <div class="page-loader">
    <p>
      Dit is tekst
    </p>
    <p>Dit is een header</p>
  </div>
  <form name="aspnetForm" method="post" action="/nl-BE/basket/" id="aspnetForm">
    <nav>



      <div class="twelve content">

        <table class="checkout-basket" cellspacing="0" rules="all" border="1" id="ctl00_ctl00_cphContent_cphContent_gvBasketitem" style="border-collapse:collapse;">
          <tr>
            <th scope="col">&nbsp;</th>
            <th scope="col">&nbsp;</th>
            <th scope="col">Asset</th>
            <th scope="col">&nbsp;</th>
          </tr>
          <tr>
            <td style="width:30px;">
              <input id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_CbFlag" type="checkbox" name="ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$CbFlag" />
            </td>
            <td style="width:80px;">
              <a onclick="return confirm(&#39;Bent u zeker dat u deze asset wil verwijderen?&#39;);" id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_lbDelete" class="button" href="javascript:__doPostBack(&#39;ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$lbDelete&#39;,&#39;&#39;)">verwijder</a>
            </td>
            <td style="width:100px;">
              <img id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_Image1" src="../../cache/video/thumb/2027_22333B9FEE10F3E33FB5E0BE7861E64368F39A58.jpg" style="width:80px;border-width:0px;" />
            </td>
            <td>


              <h4>
                                                            <a href='/nl-BE/asset/2027/'>
                                                                2027
                                                            </a>
                                                        </h4>
              <h4>
                                                            <a href='/nl-BE/asset/2027/'>
                            ...

CSS

p {
    color: red;
    margin: 5px;
    cursor: pointer;
  }
  
  p:hover {
    background: yellow;
  }

JavaScript

//var dollar = "Room2";
var url = $(location).attr('href');
//var page1 = "jsfiddle";
//alert(url);
console.log(url);
if (window.location.href.indexOf("fiddle") > -1) {
  alert("your url contains the name franky"); //}
  $(function() {
    console.log("Dit is het winkelmandje pagina");

    $(".button.button-dl").click(function() {
      var knopje = $(this).attr("class") //.split(" ");
      console.log(knopje + " knopje was clicked .button.button-dl");
      var addressValue = $(this).attr('href');
      console.log("addresValue Basket .button.button-dl", addressValue);
      var re = /'(.*?)'/;
      var m = addressValue.match(re);
      console.log(" m basket is ", m);
      if (m != null)
        idVal = (m[0].replace(re, '$1'));
      console.log("idVal Basket .button.button-dl", idVal);
    });

    $(".checkout-basket,.button.button-dl").click(function() {
      basket = [];
      item = "";
      str = $(this).text();
      str = str.replace(/\s\s+/g, ' ');
      var str = str.match(/("[^"]+"|[^"\s]+)/g);
      console.log("Array .checkout-basket ", str);
      for (var i = 0; i < str.length; i++) {
        if (str[i] === "verwijder") {
          console.log("Item= .checkout-basket", str[i + 1]);
          item = str[i + 1];
          basket.push(item);
        }
      }
      console.log("Basket contains.checkout-basket ", basket);
      //console.log("idValBasket ",idVal);
      var test = idVal.replace(/\$/gi, "_").slice(0, -6);
      console.log("test ", test);
      var element = test.substr(test.length - 2) - 1;
      console.log("element .checkout-basket", element);
      element = element - 1;
      item = basket[element];
      console.log("Item finaal is .checkout-basket", item);
    });
  }); //end from page ready
} //first if end
else if (window.location.href.indexOf("friddle") > -1) {
  console.log("button button-dl is clicked in de if then");
  $(".button").click(function() {
    var item = document.getElementsByTagName("h1")[0].innerHTML
 ...