React - Use State to Toggle an Element

Mastering React State: Toggling Elements with Confidence React's state management system is a powerful tool for building dynamic and interactive user interfaces. One common use case involves to..

Bind 'this' to a Class Method

Binding 'this' to Class Methods in React React class components allow you to define custom methods alongside managing state and props. These methods often need to access component properties li..

make clickable element with clickable class open link in new window

makes an element with a link into a clickable element. This finds the 1st a tag in the target element and then opens the link in a _blank tab. Then if you have an element that you want to be clickabl..

chart js line chart dont show below 0 and add axis labels

Now we take the chart js chart and add some axis labels on x and y using the same options values. This will also add axis labels to the chart on the x and y axis Javascript options: { scales: {..

chart js line chart dont show below 0

had an issue where the chart was displaying values in the negative, and wanted to start the chart at 0 and no go below. the additional option fixed this issue.  Javascript options: { scales..

Slick slider code testing with slower slides and auto play on videos

additional testing with changes for slick slider videos and auto play

Chat GPT slick slider code testing

slick slider testing using code from chat gpt 1. write for me the code to embed a video into slick slider in html and css 2. can you also add the javascript required to get this working 3. can..

get current year in javascript

get and display the current year using javascript. a usage example would be adding the current year as a copyright to the footer of a page

find a text string and replace it in javascript

There is a function in javascript called replace. You can just give it some text and it should replace it with your target text.  For example #1 this just runs and replaces the first instance o..

check if an item id exists in javascript

checks if 2 ids exist in one function and console logs the status here is the result in console log

wrap an iframe with another div inside another div

so lets say you had an iframe within another div and that div had the class called content. you cant actually edit the page content but you can add some jquery to the page can you add a wrapper to t..

Twitter Post Fetcher v18.0.4 - javascript twitter feed fetcher

A few queries showing how to get latest tweets and post likes using the Twitter Post Fetcher v18.0.4 script.

codemirror with auto preview window

this should auto preview html code into the preview area using code mirror

Are you sure you want to navigate away from this page? #JavaScript warning

You only need to include one of these scripts as the top one seems to work fine by its self not requiring any jquery. Javascript window.onbeforeunload = function (e) { return "You..

Load fancybox modal on hash check

I was just testing this code, not working on the hash check as yet. 

floating message box on bottom right of screen with close button

A floating fixed message box on the bottom right hand side of the screen with a close button. 

share to twitter javascript button function open a new window

gets and encodes the current page url and opens a new window to share the link to twitter

share to linked in current url button with javascript

Share the current page url to linked in with a button and javascript

Get current URL and add a share to facebook share button with it

Combines this Facebook HTML for Sharing a Link and encode url with javascript this to make captan planet! Or... makes a share this post to facebook button. 

encode url with javascript

get the current url, encode it and log the encoded result to console

Twitter Post Fetcher Script

Uses javascript to fetch a twitter feed from a user screen name. Totally stylable alternative to using the twitter embed code. Your Welcome... 

Javascript Objects Notes

As javascript objects are used so often in javascript i thought i would write an overview and some notes on how they work, well how they work for me anyway. I guess how they work for me should be simi..

javascript add class to element

how to add a class to an element in raw javascript I wrote a quick demo here showing how you can add a class to an element with an id on a button click

update value of element using javascript

using innerHTML to update the value of an element

javascript attach a click event to an id not using jquery

I just wanted to bind a click to a button, not using JQuery, turns out its not that hard at all. Why am i using jquery for this stuff???...

console dir usage

the console.dir function shows a list of the properties or the target object. Usage console.dir(variable); Result Example

test love like dislike script from api

just testing writing to page from javascript and api

how to write a javascript string over multiple lines

i remember learning this on freecodecamp while doing the ES6 training, and i could not remember exactly how to do it.  I was using the \ at the end of each line but thats really a bit annoying.&..

best way to write html into an existing page javascript

this probably isnt the "best way" but it is a way that works. say you want to add some elements to a page with javascript this is a method to do it.  Add an element, before including the script..

Uncaught TypeError: Cannot set properties of null (setting 'onclick')

I was just testing some code and noticed i had this error on my site.  Locate the error in the site code I removed this script, so the whole thing is now not required, as i opted for the au..

check url hash using javascript

What is a url hash? This is a URL Hash. You can add the # symbol on the end of a url and content after it, and this will not effect the content usually, unless the browser is intructed to do somet..

submit form with javascript

if you have a form with an id, you can submit it with the following javascript. usually this will be attached to an event or something similar like a button click.  If i run this on the demo, it..

Converting PHP to Javascript for State Extraction by numeric value Australian State Names

I cant even remember when i originally wrote this php function, but now i need to have it in javascript, should not be much change to it to get it working.  The original function takes an austra..

get the value from a textarea element

gets the value from the textarea and prints it to the console of the browser rather than using innerHTML you have to use value.

javascript get content from element

gets the content from a target element with javascript using its id sets the target with the content from element 1 using its innerHTML attribute

convert characters to entities using javascript replace

takes a html string and replaces the html elements into their equivalent characters. e.g: replaces < with &lt;

Auto Create HTML Code Snippets

make anything within a <code> tag into a nice looking code snippit with highlighting via prism. To get this code to make a snippit, you need to: Give an element a .make-snippet class and it's ..

loop to arr.length or array length

showing a simple loop that uses the length of the array to find the end of the loop. This just console logs each item in the array and stops the loop when it gets to the end of the array. 

get tomorrows date with javascript

Same as the get yesterdays date except with a +1 rather than a -1 let tomorrow = new Date(new Date().setDate(new Date().getDate()+1));  

get yesterdays date with javascript

This gets todays date and minuses one day from it to be ... yesterday.  let yesterday = new Date(new Date().setDate(new Date().getDate()-1));console.log(yesterday); This format is the full da..

add new random image with button

this appends a new random image from picsum.photos to the div with the id app

Create Strings using Template Literals

if you use the backtick to enclose your strings you no longer have to use \n for a new line.  For example: `this is a multiline ...string!!` Console Example

Darkmode JS - Add darkmode to your site with one script

This library looks really nice! It drops in ok, but maybe with more complex layouts or coloring, it seems to break a little bit.  Darkmode JS Example Source Links https://darkmodejs.learn.un..

Use destructuring assignment within the argument to the function half to send only max and min inside the function.

this seems like a tricky one, can be resolved with removing the stats array reference. Im not sure how it still knows to access the stats array. I dont know how that is correct as the console just lo..

simple javascript no library accordion

a simple button and div based accordion with a toggled indicator

Using Destructuring and the Rest Parameter to Reassign Array Elements

Use destructuring assignment with the rest parameter to perform an effective Array.prototype.slice() so that arr is a sub-array of the original array source with the firs..

Use destructuring assignment to swap the values of a and b

Use destructuring assignment to swap the values of a and b so that a receives the value stored in b, and b receives the value stored in a. I was havi..

Sweet Alert 2 Methods and Examples

I love this alert replacement so i thought i would just add some of the examples here to show how awesome it is! You can check out the official sweet alert documents here if you want to browse throug..

How to Assign the Value of One Variable to Another in Javascript

Showing a very basic script that assigns the value of the variable a to b and then console log's the object.

Slick Slider Carousel with Custom Next and Prev Buttons

I had a slider the other day where i needed to attach some detached buttons, so added the following click events to control the next and previous events on the slider.  Note the class names: sli..

Console Tips and Tricks

Here are some quick commands for the console. Getting to the console in your browser Press F12 and Find the console tab. That little blue > there is the console. this is in brave or chrome, bu..

javascript random string to put on url for cache

I was having a bit of a cache issue with a external css file, so i thought i might fix this by appending a random query string to the file name. This should force the browser to recheck the file each ..

javascript try catch example function

try catch is a good way to stop errors breaking your javascript. here is the example from the firefox mozilla with a basic try catch logging the error to your console, rather than just breaking all t..

load json data url or api with javascript

this loads a target json url or api using raw javascript so no jquery required with this one then logs the data returned to the console. 

How to Use PropTypes to Define Props in React

React allows you to define the types of props given to your components to make sure that invalid data is not sent as the prop to the element.  To do this you can define propTypes. You can defin..

log the console log output to a div

I do a lot of console logging so i thought it would be nice to be able to see this on my test pages. Apparently you can grab this quite easily with the following code.  I had to modify this a b..

javascript basic test array and loop

Here is just a basic test array and a loop to show a basic loop through the test array.  With the loop i use the length of the array as the max variable, so the loop stops when it hits the array..

how to join an array in javascript using the join method

This example shows how we can join an array into a string using the join method. Its a nice quick way to convert your array into a string with a delimiter such as , or ; Here we can see the test arr..

show the current date in javascript

Returns the current date and time and sets the value in a div.  Also added a demo with setinterval to update the time and date in the div every second. 

How to Pass Props to a Stateless Functional Component in React

Props are like properties that you can pass into a component in react. A prop would be something like this in your component.  JSX <div>  <MyProp id="1234" /></div> The..

get element by id and hide it

This example gets an element by its id and hides it by setting the css style value to display none 

get element by id with javascript

gets an element using its id using javascript

set a cookie on click and then check if the cookie is set and dont show that message again

this script shows a message, and if the message is closed it will set a cookie to not show that message again for 1 day.  The cookie in this example is set to expire in a day, so then if you com..

foundation base html template - foundation template

just a basic html template with foundation and the required javascripts, good for a starter html page using foundation framework.

What is a Stateless Functional Component in React

What is a Stateless Functional Component? A stateless component is one that can recive data and render it, but it does not manage the provided data or track changes to it.  This method creates ..

How to Define a HTML Class in JSX in React

When writing JSX you cant add classes like you would in HTML so this code would not work: JSX <div class="my-class"></div> Instead we have to use className. JSX uses camel case for a l..

How to Render HTML Elements to the DOM with React

Once you have a JSX element defined you can write it to the page with ReactDOM.render(componentToRender, targetNode),  In this example we are targeting the div with the id challenge-node. JSX ..

adding react with JSX using babel

just wanted to see how JSX would work with react and babel, so this way you can write JSX and babel compiles it for use with react.  This is apparently not a good way to do things and can be qui..

react hello world with variable name

i was just testing some of the hello world examples on the react site, and as they use JSX they cant be directly entered into your code, so you need to run a pre compiler (not sure of the exact term f..

console table rather than console log for javascript objects and arrays

so i just saw on a tweet, that you can use console.table and i cant wait to try it out! good thing i already have a test object and array ready to go!  

video not auto playing issue in chrome and brave

i had this error the other day when i was adding an auto play video to a page. the error was: Javascript Uncaught (in promise) DOMException: play() failed because the user didn't interact with the ..

change the box-shadow of an element with javascript boxShadow

changes the box shadow of test_div using the javascript object(?) boxShadow

change the background color of an element with javascript

gets the element by its id and changes the background color style css value the following example: gets the element by its id "my_bg" changes the style.backgroundColor to #123456

adding a new line in javascript

i was writing a function where i needed to for ease of readability add a new line to the code, you can do this with the \n for the new line and then if you need the string to go to the next line then ..

javascript update item in object

find something in a javascript array by its array id and then update the value of that item i changed this from an array to an object as i wanted to use something other than numbers for the index Ob..

change the border radius of an element with javascript only

change padding of element with javascript

change the padding of an element with javascript only

get the value from a range input field with javascript

this script will retrieve the current value from a range slider html input if you want the value to only update when the slider interaction has been stopped change the oninput to onchange then it w..

twitter json feed testing

just testing using the Twitter Post Fetcher script, seems to be working well.

fancybox load iframe inline

All you need to load content in an iframe using fancybox modal javascript plugin. not quite an inline load, but not much script to get this going. 

creating embedded php code from a database field

i actually dont know why i didnt think of doing this earlier, i already have the php code field in these code articles. I thought why not embed this code into an actual file and then run it as a test..

center mode slick zoom testing

update : this is a tricky one to get working! I have done a lot of testing on this one, and got a demo working from a combination of the following links. the demo is still not 100% styled, but its..

gallery carousel center mode

i found this one here, looks cool. see if i can get it working like the demo.  currently getting this error on running the script i wonder if this is caused by a document ready issue? what is..

old browser check with javascript

modified from this script i console logged all the items available so you can do what you need with them these are the avilable variables Javascript console.log(browser.agent);console.log(browser...

check browser version and show a message

a button that displays your browser version in a modal Demo (gif)

simple backup to google drive fron linux

i added these scripts a while ago to backup mysql databases and web files to google drive a while ago, i just run them on a daily cron to copy the backups every day. the files so the bain backup_a..

verify the google recapture server php

i was still getting quite a bit of spam even after using google recapture v2 and i think this is just as i was using the javascript only version, which disables the submit button if the capture is not..

using clamp js to clamp lines of text

there is a css version of this as well but this version works in a greater range of browsers (i think) this one is not working for me... i think the overflow elipsis is still a better option than thi..

Scroll down indicator css javascript and html

I have seen these a couple of times, indictating to the user that there is further content down the page, and they should scroll to view it. Then as you scroll down the indicator dissapears. So we w..

add a gtag.js pdf click event

how to add a pdf click event using the gtag.js analytics

ajax callback to delete with sweet alert confirmation to make it cool! 😎

I recently wanted to to an ajax call back on a list of items just to make it easier to move around the place, rather than it reloading the page every time. So i thought why not also use sweet alert on..

prevent default click event on link

This will prevent the default event on a link url, so for example if you have a <a href="">link</a> link this code will prevent it from loading the href link when clicked and you can do so..

show the browsers name in javascript

This function will show you an alert box with the name of your browser, however im using brave at the moment and it shows as Netscape, so i guess you cant trust the result.  Also i just discover..

json test objects (or arrays)

here is a couple of test objects in external js files just in case you need to test some ajax loading functions or need external objects, i mostly use them in my testing. Basic JSON Object with 3 ite..

loop through a complex object json javascript

just a note to say that a complex object is an object with more than one nested object in it for example just kinda playing around with this one to get the handle on objects and how to access them C..

load json with vanilla javascript no jquery

this basically does the same thing that a jquery .getJSON does but without the need for jquery.

json load from jquery and loop through the results

this is the same as this post but i have added the object to an external test file. so rather than already having the object data on the page we have to load it somehow Note: you can test that the o..

set active class based on url value

this will check the full url and then loop through all the a elements in #test-div when it finds a matching url it will add the class active to that button this is good for persisting active links o..

check if a variable is undefined or NULL

this will check if the check1 variable is set if it undefined or NULL it will return

fancybox image popout easy

just in case you want to easily apply a modal or pop out effect to your images when they cant be displayed full size on the page.  related: https://kruxor.com/view/code/3gNUD/inline-fancybox-m..

check box highlight text area css

i just wanted to be able to highlight a text field if a certain check box was checked on a form in this demo below, if you click on the check1 checkbox it will give you an alert saying if the box is ..

validate an email address from a form field - version 2

This javascript function will check if the email address in the text box has an @ and a . in it and return a message saying if its valid or not.  This is pretty basic as it only includes checkin..

check if a checkbox is checked with javascript

checks if the box is checked and returns true or false reusable function that can check if a checkbox is checked or not just pass it the id of the checkbox Javascript Usage check_my_box('check1');

form submit override with javascript

if you need to run some additional checks on a form before submitting it

submit a form with javascript onclick

submit a form with javascript, good if you want to submit a form with a button that is not within that form. the form will require an id

dropdown change input box on select

changes the value of an hidden input depending on the selection of the dropdown

Slick Slider Carousel with Fade Transition

here is a working example of slick carousel with a fade transition between elements rather than a slide transition

clear a input field when it looses focus using onblur

this will cause the input field to clear when it is not in focus

python import and print url

here is an example script that imports html from a url and prints it add it to a .py file and then run it with python3 filename.py Python from urllib.request import urlopenurl = "http://olympus.rea..

javascript page redirect

this one i cant add a working demo for, due to its nature, but it is working if you remove the comment. combine this with this: https://kruxor.com/view/code/wQUDM/do-something-later-with-settimeout-..

page scroll indicator research

I was wondering the other day how they do those page scroll indicators, i saw one when viewing this site: https://blog.wolfram.com/2021/03/24/the-solution-of-the-zodiac-killers-340-character-cipher..

replacement slider for ken wheeler's slick carousel tiny slider 2 [testing]

I have been looking for a little while for a replacement for the now classic and a bit depreciated, ken wheeler's slick carousel. After a bit of looking around i think the best replacement, is a non ..

change a select box back to its initial select value

this will reset the select box selected value back to the 1st item in its options list

select onchange

select onchange run a function this will run the check_years function when the select value is changed

add years as options to select dropdown

add the years as dropdown items between a range of years with javascript document ready js only version

using moment.js to make your time format nicer

moment.js is a very nice way to handle multiple date strings and output them in a nicer format.  grab the latest copy of momen from cdnjs lets say our date is in this format, i think this is un..

loop through object json javascript

this shows how you can loop through a javascript object using for if you check the console you can see the loop results

add click event to multiple link items

this allows you to get every a element in a-div class and stop the link from loading, so you can do other things with it like run a function or something else Functions used: Javascript Wait for th..

set the html of an element javascript

this will set the innerhtml value of an element

get the value of an input form element (input value)

add how to get the value of an input form element with javascript for some reason i can get this working with: Javascript console.log(document.getElementById("my_input").value); but when trying to..

minutes to decimal calculator javascript version

trying to do a more simple version of this post. https://kruxor.com/view/code/NIjAQ/quick-tool-to-convert-time-into-decimal/  the php version requires post back to the server, so i think this c..

check if a certain query string is set then apply it to all url's on the page

this script will check if a query string is already set, and if it matches it will append the same query string to all url's on the page Here is the test link with the field, and all url's on this pa..

check if a query string item is set in the current url

this will check and console log if a query string on this page is set to test=anything example url is:  Test is not set: https://kruxor.com/view/code/XzLaT/  Test is set using & : htt..

append a query string to all url's on a page

this should append the query string test=1 to all url's on this page. if it works... make sure its added to document ready.

Uncaught TypeError: $(...).slideToggle is not a function

Uncaught TypeError: $(...).slideToggle is not a function at toggle ((index):226) at HTMLAnchorElement.onclick ((index):239) I noticed this one today when looking up this post:https://kruxor.com/view/..

slick carousel jump to a slide on element hover

jumps to a specific slider on hover over on an element this is working now, here is the example, mouse over the buttons to see the slide change. trying to add this: Javascript $( selector ).mous..

Adding HTML Templates into TinyMCE Editor

This can be very useful if you are using the tinymce editor on your site and want to be able to add simple or complex html templates. Here is how to do it: Add this to your tinymce init Javascrip..

Testing

test <p>test</p> x .my-selector{ value:1px;} HTML <table></table> CSS .css{} Javascript function test() { console.log('test'); } PHP a = 1; x x

How to set a cookie and expire it in 30 days

Here is some basic usage for the js cookie library. Include the following script. Or you can grab the latest version at the cdnjs website. HTML <script src="https://cdnjs.cloudflare.com/ajax/lib..

enable dark mode in tinymce

Here we have a darkmode verion of tinymce, ahh my eyes feel much better. The change to version 5 seems quite easy as well, as it uses the same init script as 4 still.  You need to also includ..

codemirror htmlmixed textarea

a working (hopefully) version of codemirror using the htmlmixed mode, not sure why its not doing code highlighting. Update: 5 Jul 2022, this is working now. 

install codemirror for textareas [added]

i think rather than editing all the code using just a plain textarea element it might be nice to have codemirror format them nicer https://stackoverflow.com/questions/21085170/codemirror-how-to-insta..

darkmode toggle switch with local storage to remember the last selection

Here is a darkmode toggle switch, that swaps out the body class so you can target dark-mode or light-mode on all your elements! It saves to local storage the last selection so if you come back to the..

add a youtube video preloader function, lazy load youtube [fixed]

I noticed that this list page: https://kruxor.com/list/rs3_efficient_skill/ Loads about 29 (well exactly 29) youtube video embeds and was wondering if there was an easy way to replace these iframes w..

checking the current url and then marking a link active based on that url

i want a script that can check the current page uri and then match it to a list of links to be able to add an active class that survives page reloading So here we go... 1. Get the current page url. ..

change the cursor to a pointer for an element

i find this class quite useful if you are adding a javascript click event to an element, and need the mouse to look like its a click item rather than just a normal item. If you mouse over the test ..

set maxHeight of element by id with javascript

sets the max height value of an element with javascript demo pending

top bar overflow issues [fixed]

So i was just browsing throught the site checking for random errors, which there are quite a lot. And noticed this one. Quite a large bug caused by overflow issues in the main header, i think this ..

make labels or badges look better

How to make these look better. The labels are used in the list items to show a small version of the category or sometimes the view count for a list item. How they look currently Dark Mode Ligh..

test page for the custom css 12 grid used on this site

This is my testing page for the grid used on this site, it shows elements and other things for use on the grid and other general formatting.

How to add jquery to squarespace site

I dont use square space, but if i did and i wanted to use jquery in it. This is where i would add it... ;) Settings > Code Injection > Header Then add your script, like this one:

Modern HTML5 Techniques for changing classes

vimeo thumbnail generator

play a sound every # of seconds

This plays a beep sound every # of seconds, to stop it just reload the page 4 Minutes is 240 4.5 Minutes is 270 5 Minutes is 300

Monitoring Visible Objects on Screen

i found this one when researching how to detect visible objects on screen, and then doing something with them. This one does not use any external scripts to change the box colour as it becomes visible..

check that a number is in the correct range based on a form selection

This script will check if the number is correct based on a form selection this can be used for checking that a postcode matches a state value or something similar Lets grab the html select form from ..

how to install js socials for social media share buttons and make them rounded

This should be a nice quick one on how to install js socials which add social media sharing buttons on your pages.  Yeah i always just ignore these as well, but hey some people may use them?? H..

using javascript to open a link in the same window and in a new window or tab (open link)

a nice easy way to target _self or _blank when opening a link using javascript

Leaflet Quick Start Example

just a quick start map embed for leaflet js an alternative to google maps

country select javascript check which option is selected and show a hidden element

this shows a country dropdown and then if a selected country name is matched it will show the second part of the form for this test australia is the confirmed country

country select javascript check which option is selected

this is an example of how you can get the selected country value with javascript from a html countries dropdown

extracting the useful bits of bootstrap

Back in the early instances of bootstrap they used to provide a build system for the individual components. It seems that these days its all or nothing, or use some kind of build tool to include the b..

stop tinymce replacing urls with relative url's

If you have been using tiny mce for your content editing, you will sometimes find that it replaces your full url strings with its relative ones. This can be annoying so this is how you can disable it..

javascript window.onload

wait for the window to load and then run a function

get element by class name with javascript and change it function

You may have seen the get element by id in javascript, which is great when there is only one element but what if you need to get the element using its class name The issue with classes is that they c..

loading content into fancybox modal using ajax

This loads content into a fancybox modal using an ajax request so you can specify a url to load into the modal when the button is clicked

inline fancybox modal testing

just testing to see if i can get a fancybox popup loading using an inline script rather than a document ready one, might be easier to implement. similar to this one, but without the need for documen..

fancybox modal popup example

an example showing fancybox text modal window attached to a button to open it

matches the url and does something if it matches a certain string

javascript isset equivalent

i was just looking for an equivalent to the isset in php for javascript, i was initially using .length but this can still cause errors so i found this solution. if (typeof my_var !== 'undefined') {}

Use Sweet Alert rather than alert!

i love this script, it make the default alert look so much nicer, and its very easy to install. Just add the one script to your site, and then use Swal.fire rather than alert. simple usage Swal.fire..

use javascript to open a link in a new tab or window

im not sure why you would use this rather than using the html target="_blank" but it could be useful if you needed to open a new tab in a javascript function.

force existing link to open in a new window with javascript

here is some javascript that grabs an existing link and then forces it to open in a new tab when clicked.

Load and Unload TinyMCE editor from a button

Enable TinyMCE Disable TinyMCE Some Content function load_tinymce(idclass) { tinymce.init({ selector: idclass, plugins: [ "spellchecker code aut..

ES6 Nested Object Example

extracting variables from a nested object with new variable names

ES5 vs ES6 Object Example

here you can see the syntax changes between ES5 vs ES6 Object declaration, you can still access the values in the same way.

Use Recursion to Return a Range Array

using recursion to return a range array between the two numbers added

Use Recursion to Count Down

just a slight change to the count up version of this, using unshift rather than push to the array.

Use Recursion to Count Up

Get the documentURI with JS

This function gets the current document URI assigns it to the variable documentURI so it can be reused and shows it in the result area once you click on run function.

js using recursion to create a range of numbers

in this we will create a function that calls its self to add to an array a range of numbers

Using the Spread Operator to Evaluate Arrays In-Place Tests

My tests using the Spread Operator rather than the apply function. In the 1st function show_max_array i use the apply operator to convert the array into comma seperated values. In the show_max_array..

Using the rest operator to pass in a variable amount of arguments

If you don't know how many parameters you will need in your function you can use the rest operator to pass them in. ...

Default Parameters for Functions

You can pass in default parameters for functions so that if the function is used with no parameter it will use the default one.

Complex Arrow Function Example

Here is an example using a Complex or Higher Order arrow function, which slightly reduces the amount of code lines used. This should return the square root of all positive integers passed into it.

Writing Arrow Functions with Parameters

you can pass parameters to arrow functions as well as shown in the following demo, these functions are only meant to be used once where normal functions can be re-used.

using arrow functions to convert small functions into one line statement functions

in this exercise i will take a function variable and write it in one line using the arrow function

Prevent Object Mutation

This shows how you can lock an object so its content cannot be modified. if you comment out the line Object.freeze(my_object); it will allow it to be modified again.

Changing an array declared with const

a const means that you cannot re-declare the variable name, but you can still mutate an array content that is declared as a const. so you can see in the following example that even though the array is..

using let and const example

This example uses let and const rather than just vars, let can only be declaired once rather than overwritten like vars and const is a read only variable so it cant be changed. 

using let rather than var

Using let rather than var and use strict can avoid some overwriting of variables i will write a function here that shows how let throws an error. This function now gives an error in the console. Uncau..

Use Multiple Conditional (Ternary) Operators

I actually find if then statements much easier to read than these ones, but these seem more efficient. 

js - Use the Conditional (Ternary) Operator

this statement can be used instead of if this else that statements. to me it makes it look a bit more complex when reading it. this is the basic syntax. condition ? statement-if-true : statement-if-fa..

Use the parseInt Function with a Radix

This is the same as the parseint function, but you can also specify a base for the number which can be between 2 - 36. 2 is binary. Zeros and Ones. I think base 10 is the normal numbering system, but ..

Using parseInt in a function to return an integer or not

this function uses the parseInt function to return a proper integer or an error code if it can't. So this demo should return NaN for the Not an Int (x1235) and The int for the 00001235. I think that N..

Generate Random Whole Numbers within a Range

My testing for generating a random whole number within a range... 🤞 While the solution here works, it just loops until it gets a random number that is lower than the max, so not sure if this is th..

split a string into an array using split javascript

this will split the string into an array based on the spaces inbetween words. you can split it based on any character, for example if you had words in csv comma format you could use the second example..

get the current url in javascript

this will get the current address add it to a variable and show it on the result element

Radial Click Effect

shows the radial click effect like in the material design, so when you click a button it will show a click at that area with a nice animation. Uses CSS and javascript to generate this effect.

Generate Random Whole Numbers with JavaScript Function

generate a random whole number function with test buttons

Generate Random Fractions with JavaScript

generate a random fraction and add it to result when clicking a button

FCC - Basic: Profile Lookup

my solution to the FCC Basic js Profile Lookup, with added results area and button to run the function. json, array

Do While Loop

showing how to use a do while loop, i don't use these ones very often usually just a for loop.

for loop through an array with javascript

looping through an array with javascript using a basic for loop

tinymce remove auto p tags setting

this is the setting to remove the automatic p tag's when pressing enter and forces the use of br tags instead which can also be toggled, if you dont want it to add anything.

get the dimensions of an image with javascript

this will show the height and width of an image using javascript

basic for loop odd numbers

a basic for loop with odd numbers adding to an array

check if something is an array

this function will check if something is an array

getType function for js

this function returns the type of item, array object string number etc

Objects in javascript

creating and using an object in javascript, the full version of this testing is on codepen

card counting example from fcc

here is a solved version of the card counting function from free code camp you can test it using console log.

using switch with multiple identical cases

this can be used if you have several outcomes where the return value will be the same by omitting the break from the cases before the final

using switch in a function

This shows an example using the switch to select multiple options in a function, you can return from the switch with break, or you can end the whole function with return.

js function to calculate golf scores

this function will return the score name depending on the par and strokes for golf

compare non equality function

this will check if two values are not equal

compare equality function

this will check if two values are exactly equal

JS Using typeof to check on string types

you can use the typeof operator to check what kind of variables you have.

testing equality

showing the difference between == and === operators

defining a variable inside a function without using var will create a global variable

here is an example showing a variable defined within a function showing how it becomes a global variable if not defined with var

add something to the start of an array with unshift

unshift is the opposite of push where push adds to the end of an array unshift will add to the start of the array.

remove the first element in an array with shift

like pop but shift does the 1st element in an array

document ready javascript standalone version no jquery

this is a version of a dom ready or document ready that does not require jquery

add a class to a div with an id javascript

a one liner to add a class name to an element with a specific id, for this to run it seems to need a document ready.

using local storage rather than cookies to store data (localStorage)

you can see what is stored in local storage by typing this into your browser console. localStorage Adding something You can add something to local storage by using the setItem function.

remove something from the end of an array with pop

pop is the opposite of push and will remove the last item in an array, it also returns the value so you can assign it to a variable

add something to the end of an array with push

you can easily add to the end of a javascript array with the .push function.

Multidimensional Array

sounds complex, but it's not really here is an example of a Multidimensional Array in javascript. It's just one array nested in another.

get the last letter of a string

you can use the .length and the index of a string to get its last value

accessing part of a variable using its index

you can access part of a string variable using its index[1]

js check the length of a string

using the javascript .length property

Dropdown Box with Searchable Text

Here we have a dropdown select box, that you can type into to search the available options. No Javascript Required for this the browser does all the work. Press into the text box, and you will see a..

hide and show elements with js using getElementById and style.display

using parse_url to extract parts of a url

Category: PHP the parse_url php function will split a url into an array of url fragments $url = "http://kruxor.com/path/?argument=value#anchor"; var_dump(parse_url($url)); parse_url example ..

wordpress register enqueue javascript require jquery

This usually goes in the theme functions file. This will load it after jquery if it requires it. wp_register_script('scriptname', get_template_directory_uri() . '/js/scripts.js', array('jquery'), ..

google map with overlay data

Ever wanted to add a really slightly complex google map to your site? Working Example /* Always set the map height explicitly to define the size of the div * element that con..

validate form data using javascript to check required html elements

for use in a javascript function to submit a form var form = document.getElementById('myForm'); for(var i=0; i < form.elements.length; i++){ if(form.elements[i].value === '' && form.elements[i..

json loop load elements

Loading json content from a url can be tricky, there are a few different things you need to watch out for. Here is some examples using an example json feed. Load the feed this will load the feed and..

testing chartjs

Update: 30 June 2020 I checked this code, and it was broken all fixed now. The issue with the demo included on the main site is that it was trying to run the chart js before the chart library was load..

set and check a cookie using js cookie

this library makes setting and checking cookies so easy its amazing! include this script <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.m..

stacktable jQuery plugin for stacking tables on small screens

stacktable.js The purpose of stacktable.js is to give you an easy way of converting wide tables to a format that will work better on small screens. It creates a copy of the table that is converted in..

jquery clone and append elements

This jquery function clones an element and appends it to another one.  Here is the basic code: $( ".clone-me" ).clone().appendTo( ".append-me" );I also updated this to work with just raw js, so..

show the year with js

just a simple one liner that will show the current year, so no more need for static years in html footers! var d = new Date(); document.getElementById("year").innerHTML = d.getFullYear(); Usage E..

simple dropdown multi level navigation ul li css

updated to work standalone and not effect other list elements on the page