Kattene Affiliate

by rough cheap

HTML

<p>アフィリエイトURL<br />
    <textarea id="aftext" name="aftext" rows="4" cols="80"></textarea></p>
    <p>買ってねHTML<br />
    <textarea id="result" name="result" rows="8" cols="80"></textarea></p>
    <p>実行<br />
    <input type="button" id="proctext" name="proctext" value="実行">
    <input type="button" id="clear" name="clear" value="クリア"></p>

CSS

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

$('#proctext').on('click', function(e) {
    var text = $('#aftext').val();
    var $t = $(text);
    console.log($t);
    var $a = $t[0];
    var $img = $a.children[0];
    var $ii = $t[1];
    var linkUrl = $a.href;
    var linkText = $a.text;
    var imgSrc = $img.src;
    var impSrc = $ii.src; // インプレッション収集用URL
    var title = "AMD";
    var resultText = '<div class="kattene">\n'
        + '<div class="kattene__imgpart"><a target="_blank" href="' + linkUrl + '" rel="nofollow noopener noreferrer"><img src="' + imgSrc + '" alt="" style="border: medium none;" /><br /></a></div>\n'
        + '<div class="kattene__infopart">\n'
        + '    <div class="kattene__title"><a target="_blank" href="' + linkUrl + '" rel="nofollow noopener noreferrer">' + linkText + '</a><img src="' + impSrc + '" alt="" style="border: 0px none;" width="1" height="1" ></div>\n'
        + '    <div class="kattene__description">' + title + '</div>\n'
        + '    <div class="kattene__btns __one">\n'
        + '      <div><a class="kattene__btn __orange" target="_blank" href="' + linkUrl + '" rel="noopener noreferrer">Amazon</a></div>\n'
        + '    </div>\n'
        + '  </div>\n'
        + '</div>\n';
      console.log(resultText);
      $('#result').val(resultText);
});