Welcome to my code tutorials page!

On this page you'll find some code snippets that I've written or cobbled together, along with instructions on how to use them. Most of them are annotated to hopefully make it easy to understand what each part does (so you can edit them to your liking), but if anything's unclear or if you need any help with using the codes, feel free to hit me up on Discord (nachtkern) and I'll see if I can help you!

FAQ:

Q: Do I need to credit you if I use any of these codes?
A: No.

Q: Can I copy code you've used on other parts of your website?
A: Sure, but it might not be my code, either. Other than copying the direct layout of my website, I don't really care.

Q: Do I need to understand any html/css/javascript to use these codes?
A: Some basic understanding of html is necessary - like being able to find and open your .html file, and some familiarity with what you're looking at in there to be able to edit it. You don't need to know css or javascript, but it does help if you want to edit anything. The codes as is are completely unstyled, so you can apply your own css if you want.

Q: How did you do ___ on your website?
A: You can take a look if you right-click on the page and select "view page source".

TAROT PAGE

This code will allow you to make a page on your website that generates a random tarot card with a button! It can draw an upright or inverted card, and displays a picture of the card, its name, and a description. I referenced @coffinthusiast's tarot page when writing this code!

CODE:

Put the snippet above somewhere into the <body> of your page. The three <div>s named "tarot_image", "tarot_title" and "tarot_meaning" will have their content replaced with a picture, the card's name, and a different description depending on the orientation of the card, respectively. The <button> runs the function that generates the card.

You can put these elements anywhere into the <body> and style them however you like (for example by adding a class), just so long as you don't change the ID name. If you put any content in the <div>s, it will be replaced on running the function, so you can put placeholder content in there if you want.

// this is the path + filename where your tarot cards are.
// rename it to match your own folder and filenames, replacing the number in the filename with "xxx".
// make sure your actual files are numbered 0 and up, matching the order of the array above.
let image_pathA = "/imgs/tarot/tarot_xxx.jpg"

function goTarot() {
  //picks a random index number from the list of tarot cards
  var i = Math.floor(Math.random() * tarot_cards.length);
  //replaces "xxx" with the chosen index number
  let image_pathB = image_pathA.split("xxx").join(i)
  //picks a nr between 0 and 1 to determine upright or inverted orientation
  var orientation = Math.floor(Math.random() * 2);

//puts the card title in the tarot_title id div 
  document.getElementById("tarot_title").innerHTML = tarot_cards[i].Name;
  
  //upright orientation
  if(orientation == 0){
    var image_path = "<img src='" + image_pathB + "'>"
    document.getElementById("tarot_image").innerHTML = image_path;
    document.getElementById("tarot_meaning").innerHTML = tarot_cards[i].UpDescr;
    }
  //inverted otientation
  else if(orientation == 1){
    var image_path = "<img style ='transform: rotate(180deg)' src='" + image_pathB + "'>"
    document.getElementById("tarot_image").innerHTML = image_path;
    document.getElementById("tarot_meaning").innerHTML = tarot_cards[i].InDescr;
    }
  }
</script>

The snippet above is the script that generates the card. Put it at the end of your <body>, right above the </body> tag. This sample code only has four cards in it and placeholder text; you'll have to add the remaining cards and their descriptions yourself.

After inserting the code, make a folder somewhere on your website containing the images for your tarot cards. Make sure your tarot cards all have the same name and are numbered 0 and up, in the same order as you listed the tarot cards in the script, for example "tarot_0.jpg", "tarot_1.jpg", "tarot_2.jpg"... etc. Then make sure the path and filename used in the script matches the path and filenames you used for your images.

That's about all there is to it! Good luck!

CODE PREVIEW | PREVIEW PAGE SOURCE | ~~EXAMPLE~~

RANDOM ITEM GENERATOR

TBA

some more text

~~CODE PREVIEW~~ | ~~PREVIEW PAGE SOURCE~~ | EXAMPLE A (on refresh), ~~EXAMPLE B (on button)~~

SHUFFLED BLINKIES

TBA

some more text

RANDOM BACKGROUND

This piece of code will pick a random background from a set list of backgrounds each time you refresh the page.

CODE:

The snippet above is the code that generates the random background. Put it in your html file's <head>, right above the </head> tag.

You'll also need to host your background images somewhere, and make sure they have the same filename and path, other than being numbered starting at 0. So for example, put them in the same folder on your Neocities, and name them something like "background0.jpg", "background1.jpg", "background2.jpg"... etc.

Once you've done that, edit the above code to match the number of backgrounds you have, and to match the path and filenames of your background images.

Background images repeat by default, so as is the code works best with a tiled background, but you can set the images to behave differently (ex. stretch out) through editing your page's css.

Now that your script itself is done, you just have to call it! Find your <body> and add onload="randomBG()" into the tag itself. This will run the function in your script when your body loads. It'll run any time the page is refreshed and the body is reloaded!

OPTIONAL CODE:

Hate surprises? Instead of (or besides) calling the function when loading the body, you can also call it with a button.

CODE PREVIEW | PREVIEW PAGE SOURCE | EXAMPLE (this very page!)

Thanks for looking at my codes!
Check out these other websites for more fun web codes:

- sadgrl.online
- more TBA