Variables

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Warning: this page contains external links, please beware of where you click. We will NOT be responsible for your safety.
Additionally, we encourage you to exercise internet safety in all wikis.

Quick Code

Copy to clipboard {{{Variable}}} TEXT.

# Wikitext Variables

## Introduction

**Wikitext Variables** are WikiText items that define part of a Template (also called/known as a badge). They look a bit like {{Badges}}, but with more {'s: {{{Variable}}}. A user can modify this badge by using variables when they type it in. Variables (that actually do anything, sometimes you might just see {{Badgename|nickname=something}}, and that doesn't change anything in the badge--but it can!) aren't used often, but they can be really handy, especially if you're going to be using a template a LOT!

## Understanding Wikitext Variables

First, what even IS a variable? Let's look at an example from a badge: {{WelcomebyCleverduck09}}. This template has variables in it, so we can make it say many different things! Let's look at an example of it, and then the code we used:

Hello Random User!
I'm Astrid, and welcome to Coding Help Wikia! Thanks for your edit to [[]].

My pronouns are she/her, and I'm excited to get to know you! Could you tell me a little about yourself, Random User?

Let me know if you have any questions/concerns, I'd be happy to help!
Nice to meet you!

-Cleverduck09

The code for this:

```
```

As you can see, we have a bunch of ~stuff~ after the actual name of the template. These are variables, and they're all predefined in the badge! We'll get to more of that later.

### Creating a Wikitext Variable

First, let's just have you try out an example. Create a Badge/template. Name this whatever you want, but the title of it will be reffered to as BADGENAME in the next part. Then, click "edit source" and insert the following code:

```
{{{variable}}} says Hello!
```

Now, hit the "Save" button.

### Using a Wikitext Variable

To use the variable you have just created, go to your Sandbox, and put in the following code:

```
{{BADGENAME|variable=INSERT}}
```

Now, replace "BADGENAME" with the name of your badge. Replace 'INSERT' with a name, or animal, or item, or Whatever!

Hit save, and see how that variable affected the sentence!

Now that you know how to use and create a basic variable, experiment! Add more variables, be creative! Just make sure the variable matches what you type in after the "BADGENAME|"!

### Pre-defined Wikitext Variables

You can even combine variables with Badge Variables (Badges that are solely variables and come default with the wiki), such as:

* {{CURRENTYEAR}} = 2024
* {{CURRENTMONTH}} = 01
* {{CURRENTDAY}} = 30
* {{CURRENTDAYNAME}} = Tuesday
* {{CURRENTTIME}} = 20:56
* {{CURRENTHOUR}} = 20
* {{PAGENAME}} = Variables
* {{SITENAME}} = Coding Help Wikia
* And a lot more! A helpful resource is Magic words (external) page.

## Examples

* ProfileTabsSub and ProfileTabs, by Cleverduck09
* WelcomebyCleverduck09 by Cleverduck09
* Oh noes! by Regina and Katze

# CSS Variables

**The CSS codes in this article will not work in Wikitext editors!!**
## Introduction

**CSS Variables** are variables that are used in CSS. You can declare a variable, then use it in different places in the CSS file.

## Understanding CSS Variables

So let's look at an example to understand what it is.

For this example, we're declaring a variable, meaning that we are setting the value of our variables.

Note that you'll need to put the CSS codes in your CSS file or in your Common.css.

```
:root {
    --color1: green;
    --color2: red;
    --fonts: 'Impact';
}

```

So this *:root* selector makes the variables applicable everywhere in the CSS file.

You can use the variables by simply putting this in your codes.

```
<div style="color: var(--color1); background-color: var(--color2); font-family: var(--fonts);">Text</div>

```

This would result in a *green* text, *red* background, and *Impact* as the font family.

These CSS variables can be really helpful if you have a particular theme for your code so it needs the same colors and you don't have to write it again. But it's not the best practice to use CSS variables in simple codes like the one in this example.

## Examples

* CSS Variables Example by Regina

# JavaScript Variables

**The JavaScript codes in this article will not work in Wikitext editors!!**
## Introduction

JavaScript Variables are variables that are used in JavaScript. They're really useful if you know how to use them in JavaScript, almost every website use JS variables.

## Understanding JS Variables

To declare a variable in JavaScript, you can use *var*, *let*, or *const* keywords, it's best practice not to use *var* because it breaks some of the principles of JavaScript(like the *scope* that it can be used in).

So to understand JavaScript variables, let's look at an example.

You can put this code in your JavaScript file or in your Common.js:

```
let NAME = NUMBER;

```

Or

```
let NAME = 'TEXT';

```

You can also use constants(*const* keyword):

```
const NAME = NUMBER;

```

Make sure to replace the CAPITALIZED text with your own!

the key difference between *const* and *let* is that constants cannot be changed while let can be changed.

Beware that JavaScript is *Case Sensitive*, when naming a variable, make sure you type the first word lowercase and the second word's first letter capital, there can't be any space between words!!

## Examples

* JavaScript Variables Example by Regina