-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
86 lines (85 loc) · 8.91 KB
/
index.html
File metadata and controls
86 lines (85 loc) · 8.91 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="/icon.svg">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>λ.js - Documentation</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./pages.css"> <!-- don't touch the 3 year old file!! -->
<link rel="stylesheet" href="./pagefonts.css">
<script src="./1.0/lambda.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Beau+Rivage&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lavishly+Yours&display=swap" rel="stylesheet">
<style>code.hljs{border-radius: 20px;font-size: 20px;display:block;overflow-x:auto;padding:1em;font-family:"Consolas",monospace!important;}code.hljs{font-family:"Consolas",monospace!important;padding:10px}.hljs{font-family:"Consolas",monospace!important;background:#1f1731;color:#dcdcdc}.hljs-keyword{color: #8b8dff;}.hljs-literal,.hljs-name,.hljs-symbol{color:#faa56c}.hljs-link{color:#569cd6;text-decoration:underline}.hljs-built_in,.hljs-type{color:#4ec9b0}.hljs-class,.hljs-number{color:#b8d7a3;font-family:"Consolas",monospace!important;}.hljs-meta{font-family:"Consolas",monospace!important;color: #8b8dff;} .hljs-string,.hljs-string{font-family:"Consolas",monospace!important;color:#96c839;font-style: italic;}.hljs-regexp,.hljs-template-tag{font-family:"Consolas",monospace!important;color:#9a5334}.hljs-formula,.hljs-function,.hljs-params,.hljs-subst,.hljs-title{font-family:"Consolas",monospace!important;color:#dcdcdc}.hljs-comment,.hljs-quote{font-family:"Consolas",monospace!important;color:#57a64a;font-style:italic}.hljs-doctag{font-family:"Consolas",monospace!important;color:#608b4e;}.hljs-tag{font-family:"Consolas",monospace!important;color:#3ecdbf}.hljs-template-variable,.hljs-variable{font-family:"Consolas",monospace!important;color:#bd63c5}.hljs-attr,.hljs-attribute{font-family:"Consolas",monospace!important;color:#d5a6f8}.hljs-section{font-family:"Consolas",monospace!important;color:gold}.hljs-emphasis{font-family:"Consolas",monospace!important;font-style:italic}.hljs-strong{font-family:"Consolas",monospace!important;font-weight:700}.hljs-bullet,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo,.hljs-selector-tag{font-family:"Consolas",monospace!important;color:#d7ba7d}.hljs-addition{font-family:"Consolas",monospace!important;background-color:#144212;display:inline-block;width:100%}.hljs-deletion{font-family:"Consolas",monospace!important;background-color:#600;display:inline-block;width:100%}.language-css{font-family:"Consolas",monospace!important;color:rgb(221, 255, 167) ;}
.hljs-property{
font-family:"Consolas",monospace!important;
}
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin:0;padding: 5%;width:90%
}
span.segoescript{
font-family: "Segoe Script",cursive!important;
}
nav{
margin:auto;position:fixed;top:0;left:0;
}
hello-friend{
color:rgb(4, 112, 0);
margin-right: 5px;
}
</style>
</head>
<body><nav>
<span class="segoescript">icon-λjs Documentation</span>
<script>/*demo*/n=(x)=>{return x};function runcodeblock(a,b=n){let ev=eval(a.innerText);if(λ(".alertable").checked)alert(ev);};λDEVMODE=true</script>
<a href="https://github.com/Vivaan-d/lambda.js">GitHub</a> <a href="https://vivaan-d-webdesign.netlify.app">Vivaan-d's web design</a></nav>
<p><br><br> A small javascript library, that helps you shrink your code, and lets you relax.</p>
<section><h3 id="1">See it in action (interactable) alert:<input type="checkbox"class="alertable"></h3>
Simple JavaScript Selectors
<pre><code class="lang-javascript" onclick="runcodeblock(this)">λ("p") // Returns first p element, like querySelector</code></pre>
Built-in alerts obsolete? We got alerts
<pre><code class="lang-javascript" onclick="runcodeblock(this)">λ.alert("x","y",4000) // displays alert element for 4000ms</code></pre>
Want a easy global variable? λ.v / v's got your trick! . You can use them to create global variables effortlessly and modify inside functions and such.
<pre><code class="lang-javascript" onclick="runcodeblock(this)">λ.v.text/*or v.text*/ = "Hello World"</code></pre>
Want some cool chaining? λ() has got chaining! <span class="hello-friend">hello friend</span> <- watch this change as you click on the below code... oh and duplicate... oh and change...
<pre><code class="lang-javascript" onclick="runcodeblock(this)">λ(".hello-friend",1).replace("hello","Greetings,").add("!").dupe().ex[0].c.set(" Wow, I got duplicated and my html was set by λ.js!!")</code></pre>
<br>Set and add HTML to an element: <span class="sethtml-test">I'm bored</span> <span class="addhtml-test">Hello! </span>
<pre><code class="lang-javascript" onclick="runcodeblock(this)">λ.sethtml(".sethtml-test", "I'm happy!")</code></pre>
<pre><code class="lang-javascript" onclick="runcodeblock(this)">λ.addhtml(".addhtml-test", "How are you")</code></pre>
<br>Have inputs with both querySelector prompts and elements? λ.elm() has got you covered! It always returns an element!
<pre><code class="lang-javascript" onclick="runcodeblock(this)">λ.elm("p")</code></pre>
<pre><code class="lang-javascript" onclick="runcodeblock(this)">λ.elm(λ("p"))</code></pre>
<br>You can also duplicate any element you wish! Like this <p class="dupetest">duplicate this! </p>
<pre><code class="lang-javascript" onclick="runcodeblock(this)">λ.dupe(".dupetest") // Clones the first p element</code></pre>
<br>Grab some files with XMLHttpRequests, swiftly!
<pre><code class="lang-javascript" onclick="runcodeblock(this)">λ.getxhr("https://jsonplaceholder.typicode.com/todos/1", (e,r) => λ.alert("XHR Result", r))</code></pre>
<br>Hate for loops and setTimeouts? Got your back! <span class="repeat-test">Hello! </span>
<pre><code class="lang-javascript" onclick="runcodeblock(this)">λ.repeat(() => λ(".repeat-test",1).add("||-----I will be copied 3 times 1s/ea----||"), 3, 1000)</code></pre>
<br>Want swift JavaScript CSS Selectors, and even better CHAIN them? λ.css() has got you covered!.. And wait, I almost forgot that you can also connect it with λ()! <span class="css-test">Hello!</span>
<pre><code class="lang-javascript" onclick="runcodeblock(this)">λ.css(".css-test").bg("black","col").col("white").other("font-family","'Beau Rivage'").λ().add(" World")</code></pre>
</section>
<br><p>Isn't that so cool? You can do so much, so much faster with λ.js! You can even use it on YOUR webpage (I did, and I'm using it to create this documentation page!)</p>
<br>
Anyways. Here's a evaluate input for you to play around with, before you get to using it -> <input id="eval"><button onclick="λ.alert('eval',eval(λ('#eval').value))">Evaluate</button>
(Developer console may still be better, especially for logs.)
<footer class=".lato-regular-italic" style="color:white;background-color: black;position:relative;bottom:0;margin-top: 30px;padding:30px;width:100%;left:0;right:0;font-style: oblique;font-size: 24px;">Thank you for checking out my javascript library! More is to come in the foreseeable future!<br>
<br>Feel free to check out my other projects on <a href="https://vivaan-d-webdesign.netlify.app">my web design website!</a><br>
You can contact me at <a href="mailto:VivaanMC@protonmail.com">VivaanMC@protonmail.com</a> via Email or @VivaanMC on Discord!<br>
And make sure, to have a wonderful day!<br>
<br><br><bold style="font-family: 'Lavishly Yours';">© Vivaan D - 2025. All rights reserved.</bold></footer>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((el) => {
hljs.highlightElement(el);
});
});
λ.replacehtml("body","icon-λjs", '<span style="border-radius: 20%;padding: 10px;color: rgb(213, 166, 248); font-family: monospace; font-size: 20px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(31, 23, 49); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">λ.js</span>')</script>
</body>
</html>