There are various awesome functions in our Spectrum.js file. Here they are:
For the JS files, type: <script src="https://nispar2009.github.io/spectrum_stylr/Spectrum.js"></script>
To redirect to a new page, type this:
<button class="btn" onclick="redirect('http://www.example.com')">...</button>
Setting value of elements:
<button class="btn" onclick="setValue('
demo', '
You clicked me!')">
Click me</button>
<p id="
demo"></p>
Note: The format is "setValue('idOfElementToBeSet', 'value')".
Getting input:
<input type="text" class="form" placeholder="Your name..." name="nm" id="nm">
<button class="btn" onclick="console.log('Hi, ' + getinput('nm' + '!'))">Click me</button>
Note: This might not work for radio buttons and checkboxes.
Note: The format is "getInput('idOfField')".
Note: It can also be used alongside "setValue". This is demonstrated in the following snippet.
<input type="text" class="form" placeholder="Your name..." name="nm" id="nm">
<button class="btn" onclick="setValue('
hi', 'Hi, ' + getInput('nm') + '!')">
Enter</button>
<p id="
hi"></p>
Output:
Here is another example using custom JS.
<h1 class="text-blue">Todo</h1>
<input type="text" name="
task" id="
task" placeholder="Your task..." class="form form-line">
<button type="submit" class="btn btn-blue-outline" onclick="add(getInput('
task'));
update()">Add</button>
<ul id="myUl"></ul>
<script>
let tasks = []
add = task => {
tasks.push(task)
getInput("task") = ""
}
update = () => {
const myUl = document.getElementById("myUl")
myUl.innerHTML = ""
for (const item of tasks) {
myUl.innerHTML += "<li>" + item + "</li>"
}
}
</script>
Note: We are using arrow functions in all our examples.
Output:
An easy method to filter arrays has also been developed.
<h1 class="text-blue">Coding</h1>
<input type="text" name="
lang" id="
lang"
onkeyup="update(
filterList(
['HTML', 'JavaScript', 'CSS', 'Python', 'Java', 'C++', 'C', 'C#', 'SQl'],
getInput('
lang')))"
placeholder="Enter language..." class="form form-line">
<ul id="myUl">
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
<li>Python</li>
<li>Java</li>
<li>C++</li>
<li>C</li>
<li>C#/C-sharp/CS</li>
<li>SQl</li>
</ul>
<script>
update = arr => {
document.getElementById("myUl").innerHTML = ""
for (const item of arr) {
document.getElementById("myUl").innerHTML += "<li>" + item + "</li>"
}
}
</script>
Note: The format of the "filterList()" function is "filterList(array, thingToSearchFor)".
Note: You can also use "filterListObject()" to filter a list of ojects. the format is quite similar to that of "filterList". It is "filterListObject(array, 'thingToSearchFor', 'propToSearch')". The property to search should also be a string.
Output:
