JSFiddle - React, Tailwind, and code Playground

by nathanlogan

HTML

<h1>
Drag this to your toolbar to use this as a bookmarklet:

<p id="theLink"><a href="javascript:!(function (doc) { doc.getElementById('HwPxTokenOneField').value = 'Doe'; doc.getElementById('HwPxDOBMonthField2').value = '01'; doc.getElementById('HwPxDOBDayField2').value = '17'; doc.getElementById('HwPxDOBYearField2').value = '1971'; doc.getElementById('HwPxLoginButton').click()})(window.document);">eSDP Login</a></p>

</h1>

<h2>
Example:
</h2>

<form action="https://google.com/" method="post" id="HwPxAuthForm" class="HwPxAuthForm" name="HwPxAuthForm">
                <div class="hw-px-form">
                    <div class="hw-px-form-row">
                        <label id="HwPxTokenOneLabel" class="hw-px-form-element hw-px-form-element-1 hw-px-form-auth-label" aria-hidden="true" for="HwPxTokenOneField">Last Name: </label>
                    </div>
                </div>
                <div class="hw-px-form">
                    <div class="hw-px-form-row">
                             
                                <div class="hw-px-form-element hw-px-form-element-1 hw-px-form-auth-label">
                                    <input id="HwPxTokenOneField" type="text" name="tokenOneTemp" autocomplete="off" required="required" aria-required="true" aria-labelledby="HwPxTokenOneLabel" data-com.agilebits.onepassword.user-edited="yes">
                                </div>
                            
                        </div>
                    </div>
                    <div class="hw-px-form">
                        <div class="hw-px-form-row">
                            <label id="HwPxTokenTwoLabel" class="hw-px-form-element hw-px-form-element-1 hw-px-form-auth-label" for="HwPxDOBMonthField2">Date of Birth:</label>
                        </div>
                    </div>
                    <div class="hw-px-form">
                     <div class="hw-px-form-row">
                    
                            <div class="hw-px-form-element...

CSS

* {
    font-family:sans-serif;
}
#theLink a {
    display:inline-block;
    padding:10px;
    border:2px solid #666;
    background:#789;
    color:#fff;
    border-radius:10px;
    font-size:15px;
    line-height:15px;
    text-decoration:none;
}

JavaScript

// just demo code (so we don't get an actual click-through)
(function(){
  window.document.getElementById('HwPxLoginButton')
  	.addEventListener("click", function(e){
    	e.preventDefault()
      console.log('clicked');
    });
})();
// end demo code


// this is what we're doing in the bookmarklet above
// (changes here will reflect in the "run" screen of the demo, but not in the bookmarklet)
(function (doc) {
  doc.getElementById('HwPxTokenOneField').value = 'Doe';
  doc.getElementById('HwPxDOBMonthField2').value = '01';
  doc.getElementById('HwPxDOBDayField2').value = '17';
  doc.getElementById('HwPxDOBYearField2').value = '1971';
  doc.getElementById('HwPxLoginButton').click()
})(window.document);