From cb72e93a2a254141252fa09dc573ef8d5481839d Mon Sep 17 00:00:00 2001 From: adrianogtl Date: Tue, 11 Jun 2024 21:14:54 -0300 Subject: [PATCH] code clipboard feature --- css/style.css | 21 +++++- index.html | 194 ++++++++++++++++++++++++++++---------------------- script.js | 75 ++++++++++++------- 3 files changed, 179 insertions(+), 111 deletions(-) diff --git a/css/style.css b/css/style.css index e67be23..e4b9a0b 100644 --- a/css/style.css +++ b/css/style.css @@ -145,7 +145,8 @@ pre { font-family: var(--font-mono); color: var(--dark-gray-color); background-color: var(--light-gray-color); - overflow-x: scroll; + white-space: pre-wrap; + overflow-x: hidden; } code { @@ -158,6 +159,24 @@ pre { white-space: pre-line; } +.container-code { + position: relative; +} + +.clipboard-btn { + position: absolute; + right: 0.5rem; + bottom: 0.5rem; + padding: 0.3rem; + font-family: var(--font-sans); + font-size: 1rem; + border: none; +} + +.clipboard-btn:hover { + cursor: pointer; +} + .external-link:after { font-family: "Material Symbols Rounded"; content: "open_in_new"; diff --git a/index.html b/index.html index 61575e9..091651a 100644 --- a/index.html +++ b/index.html @@ -178,12 +178,14 @@

Hello world

To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:

- 
-              function greetMe(yourName) {
-               alert("Hello " + yourName);
-              }
-              greetMe("World");
-
+
+ 
+                function greetMe(yourName) {
+                 alert("Hello " + yourName);
+                }
+                greetMe("World");
+
+

Select the code in the pad and hit Ctrl+R to watch it unfold in your browser! @@ -255,23 +257,26 @@

Variable scope

the function (or global context) within which x is declared, not the block, which in this case is an if statement.

- 
-              if (true) {
-               var x = 5; 
-              } 
-              console.log(x); // 5
-
+
+ 
+                if (true) {
+                 var x = 5; 
+                } 
+                console.log(x); // 5
+
+

This behavior changes, when using the let declaration introduced in ECMAScript 2015.

- 
-              if (true) {
-                 let y = 5;
-              }
-              console.log(y); // ReferenceError: y is not defined
-
+
+ 
+                if (true) {
+                   let y = 5;
+                }
+                console.log(y); // ReferenceError: y is not defined
+
+
@@ -316,26 +321,30 @@

Constants

You cannot declare a constant with the same name as a function or variable in the same scope. For example:

- 
-              // THIS WILL CAUSE AN ERROR 
-              function f() {}; 
-               const f = 5; // THIS WILL CAUSE AN ERROR ALSO 
-              function f() { 
-               const g = 5; 
-               var g; 
-               //statements 
-              }
-
+
+ 
+                // THIS WILL CAUSE AN ERROR 
+                function f() {}; 
+                 const f = 5; // THIS WILL CAUSE AN ERROR ALSO 
+                function f() { 
+                 const g = 5; 
+                 var g; 
+                 //statements 
+                }
+
+

However, object attributes are not protected, so the following statement is executed without problems.

- 
-              const MY_OBJECT = {
-               "key": "value"
-              }; 
-              MY_OBJECT.key = "otherValue";
-
+
+ 
+                const MY_OBJECT = {
+                 "key": "value"
+                }; 
+                MY_OBJECT.key = "otherValue";
+
+
@@ -380,13 +389,15 @@

if else statement

is true. Use the optional else clause to execute a statement if the condition is false. An if statement looks as follows:

- 
-              if (condition) {
-               statement_1; 
-              } else { 
-               statement_2; 
-              }
-
+
+ 
+                if (condition) {
+                 statement_1; 
+                } else { 
+                 statement_2; 
+                }
+
+

condition can be any expression that evaluates to true or false. See Boolean for an explanation of what evaluates to true and @@ -398,17 +409,19 @@

if else statement

You may also compound the statements using else if to have multiple conditions tested in sequence, as follows:

- 
-              if (condition_1) {
-               statement_1; 
-              } else if (condition_2) {
-               statement_2; 
-              } else if (condition_n) { 
-               statement_n; 
-              } else {
-               statement_last; 
-              }
-
+
+ 
+                if (condition_1) {
+                 statement_1; 
+                } else if (condition_2) {
+                 statement_2; 
+                } else if (condition_n) { 
+                 statement_n; 
+                } else {
+                 statement_last; 
+                }
+
+

In the case of multiple conditions only the first logical condition which evaluates to true will be executed. To execute @@ -416,37 +429,42 @@

if else statement

{ ... } . In general, it's good practice to always use block statements, especially when nesting if statements:

- 
-              if (condition) {
-               statement_1_runs_if_condition_is_true;
-               statement_2_runs_if_condition_is_true;
-              } else {
-               statement_3_runs_if_condition_is_false;
-               statement_4_runs_if_condition_is_false; 
-              }
-
+
+ 
+                if (condition) {
+                 statement_1_runs_if_condition_is_true;
+                 statement_2_runs_if_condition_is_true;
+                } else {
+                 statement_3_runs_if_condition_is_false;
+                 statement_4_runs_if_condition_is_false; 
+                }
+
+

It is advisable to not use simple assignments in a conditional expression, because the assignment can be confused with equality when glancing over the code. For example, do not use the following code:

- 
-              if (x = y) { 
-               /* statements here */
-              }
-
+
+ 
+                if (x = y) { 
+                 /* statements here */
+                }
+
+

If you need to use an assignment in a conditional expression, a common practice is to put additional parentheses around the assignment. For example:

- 
-              if ((x = y)) {
-               /* statements here */ 
-              }
-
+
+ 
+                if ((x = y)) {
+                 /* statements here */ 
+                }
+
+
@@ -475,14 +493,16 @@

while statement

The following while loop iterates as long as n is less than three:

- 
-              var n = 0;
-              var x = 0;
-              while (n < 3) {
-               n++;
-               x += n;
-            }
-
+
+ 
+                var n = 0;
+                var x = 0;
+                while (n < 3) {
+                 n++;
+                 x += n;
+              }
+
+

With each iteration, the loop increments n and adds that value to x. Therefore, x and n take @@ -527,11 +547,13 @@

Function declarations

For example, the following code defines a simple function named square:

- 
-              function square(number) { 
-               return number * number;
-              }
-
+
+ 
+                function square(number) { 
+                 return number * number;
+                }
+
+

The function square takes one argument, called number. The function consists of one statement that says to return the diff --git a/script.js b/script.js index 2c9b971..fa6ad94 100644 --- a/script.js +++ b/script.js @@ -1,12 +1,6 @@ -const nav = document.querySelector("nav"); -const docTitle = document.querySelector("#doc-title"); -const scrollToTopBtn = document.querySelector("#scroll-to-top-btn"); -const scrollToTopContainer = document.querySelector(".scroll-to-top-container"); - -const isPhoneOrTouch = - /Android|iPhone/i.test(navigator.userAgent) || navigator.maxTouchPoints > 0; - function animateLogo() { + const nav = document.querySelector("nav"); + const docTitle = document.querySelector("#doc-title"); nav.onmouseenter = (e) => docTitle.classList.add("nav-hover"); nav.onmouseout = (e) => { const mouseOutNav = !nav.contains(e.relatedTarget); @@ -16,30 +10,63 @@ function animateLogo() { }; } -function fixBackToTopBtn() { +function fixBackToTopBtn(scrollToTopBtn, scrollToTopContainer) { scrollToTopContainer.style.position = "absolute"; scrollToTopBtn.style.display = "none"; scrollToTopBtn.style.position = "fixed"; scrollToTopBtn.style.right = "unset"; } -scrollToTopBtn.addEventListener("click", () => { - window.scrollTo({ - top: 0, - behavior: "smooth", +function addClipboardBtns() { + const containerCodeArr = Array.from( + document.querySelectorAll(".container-code") + ); + + containerCodeArr.forEach((containerCode) => { + containerCode.innerHTML += ``; + + const clipboardBtn = containerCode.children[1]; + const preTagContent = containerCode.children[0].textContent; + addClipboardEvent(clipboardBtn, preTagContent); + }); +} + +function addClipboardEvent(clipboardBtn, preTagContent) { + clipboardBtn.onclick = () => { + navigator.clipboard.writeText(preTagContent); + }; +} + +function addScrollEvents(scrollToTopBtn) { + scrollToTopBtn.addEventListener("click", () => { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + }); + + window.addEventListener("scroll", () => { + if (window.scrollY > 800) { + scrollToTopBtn.style.display = "block"; + } else { + scrollToTopBtn.style.display = "none"; + } }); -}); +} -window.addEventListener("scroll", () => { - if (window.scrollY > 800) { - scrollToTopBtn.style.display = "block"; +function main() { + const deviceHasTouchScreen = navigator.maxTouchPoints > 0; + const scrollToTopBtn = document.querySelector("#scroll-to-top-btn"); + const scrollToTopContainer = document.querySelector( + ".scroll-to-top-container" + ); + + addScrollEvents(scrollToTopBtn); + if (deviceHasTouchScreen) { + fixBackToTopBtn(scrollToTopBtn, scrollToTopContainer); } else { - scrollToTopBtn.style.display = "none"; + animateLogo(); + addClipboardBtns(); } -}); - -if (isPhoneOrTouch) { - fixBackToTopBtn(); -} else { - animateLogo(); } +main();