JSFiddle

Luke's public fiddles

  • W3Schools Hover ToolTip to change

    Want to change this to automatically add tooltips into the document with JS

  • HTML Form to JSON

    This code example demonstrates how you can use a form to collect input and output in a json format. The way this example works is excellent because it works dynamically, the inputs of your form are the names of the attributes stored in JSON, if a field is blank then this is setup to not insert that field in the JSON. This currently only supports the text form input, but I am planning to add other inputs to this script as well such as checkboxes, radio buttons, and more.

  • Paypal Donate Widget

    This is a PayPal donation widget I have used on previous blogs which enable you to describe briefly what donating enables you to do and link to your paypal page.

  • Add Was This Helpful buttons to your blog!

    In this setup I have created a for with yes and no buttons, once the user clicks one a textbox appears allowing them to enter additional feedback about what they liked or didn't like, this data is then submitted and recorded to a Google Spreadsheet via a Google Apps Script. Looking to create a tutorial on this soon!

  • Basic Social Media Icons for Blog

    This is a basic HTML structure with CSS to create social media icons for your blog or website that allows users to click through to your other online profiles such as Twitter.

  • Embed latest tweet from specific user and hashtag

    No-Library (pure JS), HTML, CSS, JavaScript

  • VSCO Save

    No-Library (pure JS), HTML, CSS, JavaScript

  • Remove all videos from a playlist on YouTube

    This script will remove all videos from a playlist on YouTube, just navigate to the playlist, make sure all the videos are on screen by pressing the "Load more" button at the bottom, then just paste this code into Chrome developer tools console or the equivalent for your browser and all the videos will be removed.

  • Add all YouTube videos on screen to a playlist

    This is probably not the most efficient way to do this but it works, this is good for adding all the videos from a channel to your watch later playlist and as thier in a playlist you can download the entire playlist or do whatever you like, you can also use the "Add all videos to" option to move them somewhere else, you can also remove all the videos a playlist using the other script I have uploaded. To use this simply open up YouTube on the page you want and paste this code into chrome developer tools console or equivalent for your browser.

  • xfu5w079

    No-Library (pure JS), HTML, CSS, JavaScript

  • y5pzjbhx

    No-Library (pure JS), HTML, CSS, JavaScript

  • First Image CSS Selector

    The purpose of this test is to figure out how to select the first and only the first image element inside of a wordpress post which has many p elements. This worked for the first image but it hid the image in the folowing p element also, this may not be possible in CSS, may have to resort to JavaScript or serverside code.

  • paper-input test

    The purpose of this test is to find out how to change the colour of Polymer's paper-input element. The results were to use the CSS ::shadow selector to access the Shadow DOM.

  • Testing addEventListener

    The purpose of this test is to figure out how I can show a search bar when you click the search button but hide it if you click anywhere else.

  • CSS Dropdown Menu

    Experimenting with a CSS Dropdown Menu

  • Loading Icon

    This was an attempt to make a animated multicoloured loading icon, obviously I lost track with the colours and it didn't turn out as expected.