Skip to content

Instantly share code, notes, and snippets.

@neisdev

neisdev/index.html

Created April 26, 2023 08:34
Show Gist options
  • Save neisdev/9e7c1dd791e4639bb55b5f0c87131314 to your computer and use it in GitHub Desktop.
Save neisdev/9e7c1dd791e4639bb55b5f0c87131314 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript CheatSheet Using (HTML, CSS & JS) Responsive SIte
Raw
index.html
<body>
<nav class="navbar">
<span class="logo"><img src="Logo/copy.png" alt=""></span>
<span class="nav content">JavaScript CheatSheet</span>
</nav>
<div class="container">
<ol>
<li>JavaScript Basics <br><br>
Set of JavaScript basic syntax to add, execute and write basic programming paradigms in JavaScript. <br><br>
On Page Script <br><br>
Adding internal JavaScript to HTML
<pre class="language-html"><code>
&lt;script type="text/javascript"&gt; //JS code goes here &lt;/script&gt;
</code></pre>
</li>
<br>
<li>External JS File <br><br>
Adding External JavaScript to HTML
<pre class="language-html"><code>
&lt;script src="filename.js"&gt;&lt;/script&gt;
</code></pre>
</li>
<br>
<li>Functions <br><br>
JavaScript Function syntax
<pre class="language-js"><code>
function nameOfFunction () {
// function body
}
</code></pre>
</li>
<br>
<li>DOM Element <br><br>
Changing content of a DOM Element
<pre class="language-js"><code>
document.getElementById("elementID").innerHTML = "Hello World!";
</code></pre>
</li>
<br>
<li>Output <br><br>
This will print value of a in JavaScript console
<pre class="language-js"><code>
console.log(a);
</code></pre>
</li>
<br>
<li>Conditionals Statements <br><br>
Conditionals statements are used to perform operations based on some conditions. <br><br>
If Statement <br><br>
The block of code to be executed, when the condition specified is true.
<pre class="language-js"><code>
if (condition) {
// block of code to be executed if the condition is true
}
</code></pre>
</li>
<br>
<li>If-else Statement <br><br>
If the condition for the if block is false, then else block will be executed.
<pre class="language-js"><code>
if (condition) {
// block of code to be if the condition is true
} else {
// block of code to be executed if the condition is false
}
</code></pre>
</li>
<br>
<li>Else-if Statement <br><br>
A Basic if-else ladder
<pre class="language-js"><code>
if (condition) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is
} else {
// block of code to be executed if the condition1 is false and condition2 is
}
</code></pre>
</li>
<br>
<li>Switch Statement <br><br>
Switch case statement in JavaScript
<pre class="language-js"><code>
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
</code></pre>
</li>
<br>
<li>Iterative Statements (Loops) <br><br>
Iterative statement facilitates programmer to execute any block of code lines repeatedly and can be controlled as per conditions added by the programmer. <br><br>
For Loop <br><br>
For loop syntax in javascript
<pre class="language-js"><code>
for (statement 1; statement 2; statement 3) {
// code block to be executed
}
</code></pre>
</li>
<br>
<li>While Loop <br><br>
Runs the code till the specified condition is true
<pre class="language-js"><code>
while (condition) {
// code block to be executed
}
</code></pre>
</li>
<br>
<li>Do While Loop <br><br>
A do while loop is executed at least once despite the condition being true or false
<pre class="language-js"><code>
do {
// run this code in block
i++;
} while (condition);
</code></pre>
</li>
<br>
<li>Strings <br><br>
The string is a sequence of characters that is used for storing and managing text data. <br><br>
charAt method <br><br>
Returns the character from the specified index.
<pre class="language-js"><code>
str.charAt(3)
</code></pre>
</li>
<br>
<li>concat method <br><br>
Joins two or more strings together.
<pre class="language-js"><code>
str1.concat(str2)
</code></pre>
</li>
<br>
<li>index of method <br><br>
Returns the index of the first occurrence of the specified character from the string else -1 if not found
<pre class="language-js"><code>
str.indexOf('substr')
</code></pre>
</li>
<br>
<li>match method <br><br>
Searchers a string for a match against a regular expression.
<pre class="language-js"><code>
str.match(/(chapter \d+(\. \d)*)/i;)
</code></pre>
</li>
<br>
<li>replace method <br><br>
Searchers a string for a match against a specified string or char and returns a new string by replacing the specified values.
<pre class="language-js"><code>
str1.replace(str2)
</code></pre>
</li>
<br>
<li>search method <br><br>
Searchers a string against a specified value.
<pre class="language-js"><code>
str.search('term')
</code></pre>
</li>
<br>
<li>split method <br><br>
Splits a string into an array consisting of substrings.
<pre class="language-js"><code>
str.split('\n')
</code></pre>
</li>
<br>
<li>substring method <br><br>
Returns a substring of a string containing characters from specified indices.
<pre class="language-js"><code>
str.substring(0,5)
</code></pre>
</li>
<br>
<li>Arrays <br><br>
The array is a collection of data items of the same type. In simple terms, it is a variable that contains multiple values. <br><br>
variable <br><br>
Containers for storing data.
<pre class="language-js"><code>
var fruit = ["element1", "element2", "element3"];
</code></pre>
</li>
<br>
<li>concat method <br><br>
Joins two or more arrays together.
<pre class="language-js"><code>
concat()
</code></pre>
</li>
<br>
<li>indexOf method <br><br>
Returns the index of the specified item from the array.
<pre class="language-js"><code>
indexOf()
</code></pre>
</li>
<br>
<li>join method <br><br>
Converts the array elements to a string.
<pre class="language-js"><code>
join()
</code></pre>
</li>
<br>
<li>pop method <br><br>
Delete the last element of the array.
<pre class="language-js"><code>
pop()
</code></pre>
</li>
<br>
<li>reverse method <br><br>
This method reverses the order of the array elements.
<pre class="language-js"><code>
reverse()
</code></pre>
</li>
<br>
<li>sort method <br><br>
Sorts the array elements in a specified manner.
<pre class="language-js"><code>
sort()
</code></pre>
</li>
<br>
<li>toString method <br><br>
Converts the array elements to a string.
<pre class="language-js"><code>
toString()
</code></pre>
</li>
<br>
<li>valueOf method <br><br>
returns the relevant Number Object holding the value of the argument passed
<pre class="language-js"><code>
valuOf()
</code></pre>
</li>
<br>
<li>Number Methods <br><br>
JS math and number objects provide several constant and methods to perform mathematical operations. <br><br>
toExponential method <br><br>
Converts a number to its exponential form.
<pre class="language-js"><code>
toExponential()
</code></pre>
</li>
<br>
<li>toPrecision method <br><br>
Formats a number into a specified length
<pre class="language-js"><code>
toPrecision()
</code></pre>
</li>
<br>
<li>toString method <br><br>
Converts an object to a string
<pre class="language-js"><code>
toString()
</code></pre>
</li>
<br>
<li>valueOf method <br><br>
Returns the primitive value of a number
<pre class="language-js"><code>
valueOf()
</code></pre>
</li>
<br>
<li>Maths Methods <br><br>
ceil method <br><br>
Rounds a number upwards to the nearest integer, and returns the result
<pre class="language-js"><code>
ceil(x)
</code></pre>
</li>
<br>
<li>exp method <br><br>
Returns the value of E^x.
<pre class="language-js"><code>
exp(x)
</code></pre>
</li>
<br>
<li>log method <br><br>
Returns the logarithmic value of x.
<pre class="language-js"><code>
log(x)
</code></pre>
</li>
<br>
<li>pow method <br><br>
Returns the value of x to the power y.
<pre class="language-js"><code>
pow(x,y)
</code></pre>
</li>
<br>
<li>random method <br><br>
Returns a random number between 0 and 1.
<pre class="language-js"><code>
random()
</code></pre>
</li>
<br>
<li>sqrt method <br><br>
Returns the square root of a number x
<pre class="language-js"><code>
sqrt(x)
</code></pre>
</li>
<br>
<li>Dates <br><br>
Date object is used to get the year, month and day. It has methods to get and set day, month, year, hour, minute, and seconds. <br><br>
Pulling Date from the Date object <br><br>
Returns the date from the date object
<pre class="language-js"><code>
getdate()
</code></pre>
</li>
<br>
<li>Pulling Day from the Date oject <br><br>
Returns the hours from the date object
<pre class="language-js"><code>
getDay()
</code></pre>
</li>
<br>
<li>Pulling Hours from the Date object <br><br>
Returns the hours from the date object
<pre class="language-js"><code>
getHours()
</code></pre>
</li>
<br>
<li>Pulling Minutes from the Date object <br><br>
Returns the minute from the date oject
<pre class="language-js"><code>
getMinutes()
</code></pre>
</li>
<br>
<li>Pulling Seconds from the Date object <br><br>
Returns the seconds from the date object
<pre class="language-js"><code>
getSeconds()
</code></pre>
</li>
<br>
<li>Pulling Time from the Date object <br> <br>
Returns the time from the date object
<pre class="language-js"><code>
getTime()
</code></pre>
</li>
<br>
<li>Mouse Events <br><br>
Any change in the state of an object is referred to as an Event. With the help of JS, you can handle events, i.e., how any specific HTML tag will work when the user does something. <br><br>
click <br><br>
Fired when an element is clicked
<pre class="language-js"><code>
element.addEventListener('click', ()=>{
// Code to be executed when the event is fired
});
</code></pre>
</li>
<br>
<li>oncontextmenu <br><br>
Fired when an element is right-clicked
<pre class="language-js"><code>
element.addEventListener('contextmenu', ()=>{
// Code to be executed when the event is fired
});
</code></pre>
</li>
<br>
<li>dblclick <br><br>
Fired when an element is double-clicked
<pre class="language-js"><code>
element.addEventListener('dblclick', ()=>{
// Code to be executed when the event is fired
});
</code></pre>
</li>
<br>
<li>mouseenter <br><br>
Fired when an element is entered by the mouse arrow
<pre class="language-js"><code>
element.addEventListener('mouseenter', ()=>{
// Code to be executed when the event is fired
});
</code></pre>
</li>
<br>
<li>mouseleave <br><br>
Fired when an element is exited by the mouse arrow
<pre class="language-js"><code>
element.addEventListener('mouseleave', ()=>{
// Code to be executed when the event is fired
});
</code></pre>
</li>
<br>
<li>mousemove <br><br>
Fired when the mouse is moved inside the element
<pre class="language-js"><code>
element.addEventListener('mousemove', ()=>{
// Code to be executed when the event is fired
});
</code></pre>
</li>
<br>
<li>Keyboard Events <br><br>
Keydown <br><br>
Fired when the user is pressing a key on the Keyboard
<pre class="language-js"><code>
element.addEventListener('Keydown', ()=>{
// Code to be executed when the event is fired
});
</code></pre>
</li>
<br>
<li>keypress <br><br>
Fired when the user presses the key om the Keyboard
<pre class="language-js"><code>
element.addEventListener('Keypress', ()=>{
// Code to be executed when the event is fired
});
</code></pre>
</li>
<br>
<li>keyup <br><br>
Fired when the user releases a key on the keyboard
<pre class="language-js"><code>
element.addEventListener('keyup', ()=>{
// Code to be executed when the event is fired
});
</code></pre>
</li>
<br>
<li>Errors <br><br>
Errors are thrown by the compiler or interpreter whenever they find any fault in the code, and it can be of any type like syntax error, run-time error, logical error, etc. JS provides some functions to handle the errors. <br><br>
try and catch <br><br>
Try the code block and execute catch when err is thrown
<pre class="language-js"><code>
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
</code></pre>
</li>
<br>
<li>Window Methods <br><br>
Methods that are available from the window object <br><br>
alert method <br><br>
Used to alert something on the screen
<pre class="language-js"><code>
alert()
</code></pre>
</li>
<br>
<li>blur method <br><br>
The blur() method removes focus from the current window.
<pre class="language-js"><code>
blur()
</code></pre>
</li>
<br>
<li>setInterval <br><br>
Keeps executing code at a certain setInterval
<pre class="language-js"><code>
setInterval(() =>{
// Code to be executed
}, 1000);
</code></pre>
</li>
<br>
<li>setTimeout <br><br>
Executes the code after a certain interval of Time
<pre class="language-js"><code>
setTimeout(() =>{
// code to be executed
}, 1000);
</code></pre>
</li>
<br>
<li>close <br><br>
The Window.close() method closes the current window
<pre class="language-js"><code>
window.close()
</code></pre>
</li>
<br>
<li>confirm <br><br>
The window.confirm() instructs the browser to display a dialog with an optional message, and to wait until the user either confirms or cancels
<pre class="language-js"><code>
window.confirm('Are you sure?')
</code></pre>
</li>
<br>
<li>open <br><br>
Open a new window
<pre class="language-js"><code>
window.open("https: //www.futuristicvision.com");
</code></pre>
</li>
<br>
<li>prompt <br><br>
Prompts the user with a text and takes a value. Second parameter is the default value.
<pre class="language-js"><code>
var name = prompt("what is your name?", "Dev");
</code></pre>
</li>
<br>
<li>scrollBy
<pre class="language-js"><code>
window.scrollBy(100, 0); // Scroll 100px to the right
</code></pre>
</li>
<br>
<li>scrollTo <br><br>
Scrolls the document to the specified coordinates.
<pre class="language-js"><code>
window.scrollTo(500, 0); // Scroll to horizantal position 500
</code></pre>
</li>
<br>
<li>clearInterval <br><br>
Clears the setInterval. var is the value returned by setInterval call
<pre class="languagejs"><code>
clearInterval(var)
</code></pre>
</li>
<br>
<li>clearTimeout <br><br>
Clears the setTimeout. var is the value returned by setTimeout call
<pre class="language-js"><code>
clearTimeout(var)
</code></pre>
</li>
<br>
<li>stop <br><br>
Stops the further resource loading
<pre class="language-js"><code>
stop()
</code></pre>
</li>
<br>
<li>Query/Get Elements <br><br>\
The browser creates a DOM (Document Object Model) whenever a web page is loaded, and with the help of HTML DOM, one can access and modify all the elements of the HTML document. <br><br>
querySelector <br><br>
Selector to slect first matching element
<pre class="language-js"><code>
document.querySelector('css-sslectors')
</code></pre>
</li>
<br>
<li>querySelectorAll <br><br>
A selector to select all matching elements
<pre class="language-js"><code>
document.querySelectorAll('css-sslectors', ...)
</code></pre>
</li>
<br>
<li>getElementByTagName <br><br>
Select elements by tag name?
<pre class="language-js"><code>
document.getElementByTagName('element-name')
</code></pre>
</li>
<br>
<li>getElementByClassName <br><br>
Select element by class name?
<pre class="language-js"><code>
document.getElementByClassName('class-name')
</code></pre>
</li>
<br>
<li>Get Element by Id <br><br>
Select an element by its id
<pre class="language-js"><code>
document.getElementById('id')
</code></pre>
</li>
<br>
<li>Creating Elements <br><br>
create new elements in the DOM <br><br>
createElement <br><br>
Create a new element
<pre class="language-js"><code>
document.createElement('div')
</code></pre>
</li>
<br>
<li>createTextNode <br><br>
Create a new text node
<pre class="language-js"><code>
document.createTextNode('some text here')
</code></pre>
</li>
</ol>
</div>
<footer>
<span>Copyright &copy; 2021-2022 futuristicvision.com</span>
</footer>
</body>
Raw
javascript-cheatsheet-using-html-css-js-responsive-site.markdown
Raw
script.js
var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(u){var c=/\blang(?:uage)?-([\w-]+)\b/i,n=0,e={},M={manual:u.Prism&&u.Prism.manual,disableWorkerMessageHandler:u.Prism&&u.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof W?new W(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++n}),e.__id},clone:function t(e,r){var a,n;switch(r=r||{},M.util.type(e)){case"Object":if(n=M.util.objId(e),r[n])return r[n];for(var i in a={},r[n]=a,e)e.hasOwnProperty(i)&&(a[i]=t(e[i],r));return a;case"Array":return n=M.util.objId(e),r[n]?r[n]:(a=[],r[n]=a,e.forEach(function(e,n){a[n]=t(e,r)}),a);default:return e}},getLanguage:function(e){for(;e&&!c.test(e.className);)e=e.parentElement;return e?(e.className.match(c)||[,"none"])[1].toLowerCase():"none"},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(e){var n=(/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(e.stack)||[])[1];if(n){var t=document.getElementsByTagName("script");for(var r in t)if(t[r].src==n)return t[r]}return null}},isActive:function(e,n,t){for(var r="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(r))return!1;e=e.parentElement}return!!t}},languages:{plain:e,plaintext:e,text:e,txt:e,extend:function(e,n){var t=M.util.clone(M.languages[e]);for(var r in n)t[r]=n[r];return t},insertBefore:function(t,e,n,r){var a=(r=r||M.languages)[t],i={};for(var l in a)if(a.hasOwnProperty(l)){if(l==e)for(var o in n)n.hasOwnProperty(o)&&(i[o]=n[o]);n.hasOwnProperty(l)||(i[l]=a[l])}var s=r[t];return r[t]=i,M.languages.DFS(M.languages,function(e,n){n===s&&e!=t&&(this[e]=i)}),i},DFS:function e(n,t,r,a){a=a||{};var i=M.util.objId;for(var l in n)if(n.hasOwnProperty(l)){t.call(n,l,n[l],r||l);var o=n[l],s=M.util.type(o);"Object"!==s||a[i(o)]?"Array"!==s||a[i(o)]||(a[i(o)]=!0,e(o,t,l,a)):(a[i(o)]=!0,e(o,t,null,a))}}},plugins:{},highlightAll:function(e,n){M.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,t){var r={callback:t,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};M.hooks.run("before-highlightall",r),r.elements=Array.prototype.slice.apply(r.container.querySelectorAll(r.selector)),M.hooks.run("before-all-elements-highlight",r);for(var a,i=0;a=r.elements[i++];)M.highlightElement(a,!0===n,r.callback)},highlightElement:function(e,n,t){var r=M.util.getLanguage(e),a=M.languages[r];e.className=e.className.replace(c,"").replace(/\s+/g," ")+" language-"+r;var i=e.parentElement;i&&"pre"===i.nodeName.toLowerCase()&&(i.className=i.className.replace(c,"").replace(/\s+/g," ")+" language-"+r);var l={element:e,language:r,grammar:a,code:e.textContent};function o(e){l.highlightedCode=e,M.hooks.run("before-insert",l),l.element.innerHTML=l.highlightedCode,M.hooks.run("after-highlight",l),M.hooks.run("complete",l),t&&t.call(l.element)}if(M.hooks.run("before-sanity-check",l),(i=l.element.parentElement)&&"pre"===i.nodeName.toLowerCase()&&!i.hasAttribute("tabindex")&&i.setAttribute("tabindex","0"),!l.code)return M.hooks.run("complete",l),void(t&&t.call(l.element));if(M.hooks.run("before-highlight",l),l.grammar)if(n&&u.Worker){var s=new Worker(M.filename);s.onmessage=function(e){o(e.data)},s.postMessage(JSON.stringify({language:l.language,code:l.code,immediateClose:!0}))}else o(M.highlight(l.code,l.grammar,l.language));else o(M.util.encode(l.code))},highlight:function(e,n,t){var r={code:e,grammar:n,language:t};return M.hooks.run("before-tokenize",r),r.tokens=M.tokenize(r.code,r.grammar),M.hooks.run("after-tokenize",r),W.stringify(M.util.encode(r.tokens),r.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var a=new i;return I(a,a.head,e),function e(n,t,r,a,i,l){for(var o in r)if(r.hasOwnProperty(o)&&r[o]){var s=r[o];s=Array.isArray(s)?s:[s];for(var u=0;u<s.length;++u){if(l&&l.cause==o+","+u)return;var c=s[u],g=c.inside,f=!!c.lookbehind,h=!!c.greedy,d=c.alias;if(h&&!c.pattern.global){var p=c.pattern.toString().match(/[imsuy]*$/)[0];c.pattern=RegExp(c.pattern.source,p+"g")}for(var v=c.pattern||c,m=a.next,y=i;m!==t.tail&&!(l&&y>=l.reach);y+=m.value.length,m=m.next){var b=m.value;if(t.length>n.length)return;if(!(b instanceof W)){var k,x=1;if(h){if(!(k=z(v,y,n,f))||k.index>=n.length)break;var w=k.index,A=k.index+k[0].length,P=y;for(P+=m.value.length;P<=w;)m=m.next,P+=m.value.length;if(P-=m.value.length,y=P,m.value instanceof W)continue;for(var E=m;E!==t.tail&&(P<A||"string"==typeof E.value);E=E.next)x++,P+=E.value.length;x--,b=n.slice(y,P),k.index-=y}else if(!(k=z(v,0,b,f)))continue;var w=k.index,S=k[0],O=b.slice(0,w),L=b.slice(w+S.length),N=y+b.length;l&&N>l.reach&&(l.reach=N);var j=m.prev;O&&(j=I(t,j,O),y+=O.length),q(t,j,x);var C=new W(o,g?M.tokenize(S,g):S,d,S);if(m=I(t,j,C),L&&I(t,m,L),1<x){var _={cause:o+","+u,reach:N};e(n,t,r,m.prev,y,_),l&&_.reach>l.reach&&(l.reach=_.reach)}}}}}}(e,a,n,a.head,0),function(e){var n=[],t=e.head.next;for(;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=M.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=M.hooks.all[e];if(t&&t.length)for(var r,a=0;r=t[a++];)r(n)}},Token:W};function W(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function z(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function i(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function I(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function q(e,n,t){for(var r=n.next,a=0;a<t&&r!==e.tail;a++)r=r.next;(n.next=r).prev=n,e.length-=a}if(u.Prism=M,W.stringify=function n(e,t){if("string"==typeof e)return e;if(Array.isArray(e)){var r="";return e.forEach(function(e){r+=n(e,t)}),r}var a={type:e.type,content:n(e.content,t),tag:"span",classes:["token",e.type],attributes:{},language:t},i=e.alias;i&&(Array.isArray(i)?Array.prototype.push.apply(a.classes,i):a.classes.push(i)),M.hooks.run("wrap",a);var l="";for(var o in a.attributes)l+=" "+o+'="'+(a.attributes[o]||"").replace(/"/g,"&quot;")+'"';return"<"+a.tag+' class="'+a.classes.join(" ")+'"'+l+">"+a.content+"</"+a.tag+">"},!u.document)return u.addEventListener&&(M.disableWorkerMessageHandler||u.addEventListener("message",function(e){var n=JSON.parse(e.data),t=n.language,r=n.code,a=n.immediateClose;u.postMessage(M.highlight(r,M.languages[t],t)),a&&u.close()},!1)),M;var t=M.util.currentScript();function r(){M.manual||M.highlightAll()}if(t&&(M.filename=t.src,t.hasAttribute("data-manual")&&(M.manual=!0)),!M.manual){var a=document.readyState;"loading"===a||"interactive"===a&&t&&t.defer?document.addEventListener("DOMContentLoaded",r):window.requestAnimationFrame?window.requestAnimationFrame(r):window.setTimeout(r,16)}return M}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
Prism.languages.markup={comment:{pattern:/<!--(?:(?!<!--)[\s\S])*?-->/,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))}),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^<!\[CDATA\[|\]\]>$/i;var t={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:<!\\[CDATA\\[(?:[^\\]]|\\](?!\\]>))*\\]\\]>|(?!<!\\[CDATA\\[)[^])*?(?=</__>)".replace(/__/g,function(){return a}),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml;
!function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism);
Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};
Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp("(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])"),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript;
!function(){if("undefined"!=typeof Prism&&"undefined"!=typeof document){var i=[],l={},d=function(){};Prism.plugins.toolbar={};var e=Prism.plugins.toolbar.registerButton=function(e,n){var t;t="function"==typeof n?n:function(e){var t;return"function"==typeof n.onClick?((t=document.createElement("button")).type="button",t.addEventListener("click",function(){n.onClick.call(this,e)})):"string"==typeof n.url?(t=document.createElement("a")).href=n.url:t=document.createElement("span"),n.className&&t.classList.add(n.className),t.textContent=n.text,t},e in l?console.warn('There is a button with the key "'+e+'" registered already.'):i.push(l[e]=t)},t=Prism.plugins.toolbar.hook=function(a){var e=a.element.parentNode;if(e&&/pre/i.test(e.nodeName)&&!e.parentNode.classList.contains("code-toolbar")){var t=document.createElement("div");t.classList.add("code-toolbar"),e.parentNode.insertBefore(t,e),t.appendChild(e);var r=document.createElement("div");r.classList.add("toolbar");var n=i,o=function(e){for(;e;){var t=e.getAttribute("data-toolbar-order");if(null!=t)return(t=t.trim()).length?t.split(/\s*,\s*/g):[];e=e.parentElement}}(a.element);o&&(n=o.map(function(e){return l[e]||d})),n.forEach(function(e){var t=e(a);if(t){var n=document.createElement("div");n.classList.add("toolbar-item"),n.appendChild(t),r.appendChild(n)}}),t.appendChild(r)}};e("label",function(e){var t=e.element.parentNode;if(t&&/pre/i.test(t.nodeName)&&t.hasAttribute("data-label")){var n,a,r=t.getAttribute("data-label");try{a=document.querySelector("template#"+r)}catch(e){}return a?n=a.content:(t.hasAttribute("data-url")?(n=document.createElement("a")).href=t.getAttribute("data-url"):n=document.createElement("span"),n.textContent=r),n}}),Prism.hooks.add("complete",t)}}();
!function(){function u(t,e){t.addEventListener("click",function(){!function(t){navigator.clipboard?navigator.clipboard.writeText(t.getText()).then(t.success,function(){o(t)}):o(t)}(e)})}function o(e){var t=document.createElement("textarea");t.value=e.getText(),t.style.top="0",t.style.left="0",t.style.position="fixed",document.body.appendChild(t),t.focus(),t.select();try{var o=document.execCommand("copy");setTimeout(function(){o?e.success():e.error()},1)}catch(t){setTimeout(function(){e.error(t)},1)}document.body.removeChild(t)}"undefined"!=typeof Prism&&"undefined"!=typeof document&&(Prism.plugins.toolbar?Prism.plugins.toolbar.registerButton("copy-to-clipboard",function(t){var e=t.element,o=function(t){var e={copy:"Copy","copy-error":"Press Ctrl+C to copy","copy-success":"Copied!","copy-timeout":5e3};for(var o in e){for(var n="data-prismjs-"+o,c=t;c&&!c.hasAttribute(n);)c=c.parentElement;c&&(e[o]=c.getAttribute(n))}return e}(e),n=document.createElement("button");n.className="copy-to-clipboard-button",n.setAttribute("type","button");var c=document.createElement("span");return n.appendChild(c),i("copy"),u(n,{getText:function(){return e.textContent},success:function(){i("copy-success"),r()},error:function(){i("copy-error"),setTimeout(function(){!function(t){window.getSelection().selectAllChildren(t)}(e)},1),r()}}),n;function r(){setTimeout(function(){i("copy")},o["copy-timeout"])}function i(t){c.textContent=o[t],n.setAttribute("data-copy-state",t)}}):console.warn("Copy to Clipboard plugin loaded before Toolbar plugin."))}();
Raw
style.css
*{
margin: 0;
padding: 0;
}
body{
background-color:cornsilk;
}
.navbar{
display: flex;
justify-content: center;
align-items: center;
height: 70px;
color: white;
background-color: black;
font-size: 1.7rem;
font-weight: bold;
}
.container{
width: 80vw;
margin: auto;
padding: 35px 35px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
font-size: 1.2rem;
}
.logo{
padding: 0 13px;
}
.logo img{
width: 34px;
}
.toolbar-item{
cursor: pointer !important;
color: white !important;
border: 1px solid white !important;
border-radius: 15px !important;
padding: 5px 14px !important;
}
ol{
list-style: none;
}
footer{
text-align: center;
color: white;
background-color: black;
font-weight: 600;
font-size: 1.1rem;
height: 50px;
padding-top: 25px;
}
code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment