From dc648b0a1d877afbcc30f1b0572dd806b9d778a9 Mon Sep 17 00:00:00 2001 From: Benzazoua Date: Mon, 3 Jun 2024 14:53:29 +0100 Subject: [PATCH] Copy To Clipboard --- index.html | 264 ++++++++++++++++++++++++++++++++++------------------- script.js | 37 ++++++++ style.css | 187 ++++++++++++++++++++++++++++--------- 3 files changed, 350 insertions(+), 138 deletions(-) create mode 100644 script.js diff --git a/index.html b/index.html index 2c906a5..bec75c0 100644 --- a/index.html +++ b/index.html @@ -1,49 +1,61 @@ - - - - + + + + Technical Documentation - - - - + + + +
-
-
Introduction
-

C# is a programming language developed by Microsoft.

-

C# is used in many fields , Some of them are:-

-
    -
  1. Desktop App Development
    2. -
  2. Mobile App Development
    3. -
  3. Game Development
    4. -
  4. Backend Web Development
    5. -
-

C# is one of the most popular programming languages , Because:-

-
    -
  • It is a programming language developed by Microsoft
    • -
  • It is a high-level programming language which is easy to learn
    • -
  • It is more secure than many programming languages
    • -
  • It is close to C , C++ and Java ... It is easy for programmers to switch to C# or vice versa
    • -
-
+
+
Introduction
+

C# is a programming language developed by Microsoft.

+

C# is used in many fields , Some of them are:-

+
    +
  1. Desktop App Development
    2. +
  2. Mobile App Development
    3. +
  3. Game Development
    4. +
  4. Backend Web Development
    5. +
+

C# is one of the most popular programming languages , Because:-

+
    +
  • It is a programming language developed by Microsoft
    • +
  • + It is a high-level programming language which is easy to learn +
    • +
  • It is more secure than many programming languages
    • +
  • + It is close to C , C++ and Java ... It is easy for programmers to + switch to C# or vice versa +
    • +
+
-
-
Syntax
-

Syntax is the structure of statements , Here is a simple program typed in C# to discuss the meaning of syntax

- 
using System;
+      

+        
Syntax

+        

+          Syntax is the structure of statements , Here is a simple program typed
+          in C# to discuss the meaning of syntax
+        

+        
+          using System;
 namespace Hello
 {
     class MyProgram
@@ -59,67 +71,127 @@
             Console.WriteLine("AAA");
         }
     }
-}

-        

+}
+          
+
+
-
-
Data Types
-

Some data types that are supported by C# :-

-
    -
  1. integer (int) ... 1 , 500 , -200
    2. -
  2. double (double) ... 0.5 , 3.14 , -2.5
    3. -
  3. string (string) ... "AAA" , "What is your name ?"
    4. -
  4. character (char) ... 'A' , '+' , '5'
    5. -
  5. boolean (bool) ... true , false
    6. -
-
+
+
Data Types
+

Some data types that are supported by C# :-

+
    +
  1. integer (int) ... 1 , 500 , -200
    2. +
  2. double (double) ... 0.5 , 3.14 , -2.5
    3. +
  3. string (string) ... "AAA" , "What is your name ?"
    4. +
  4. character (char) ... 'A' , '+' , '5'
    5. +
  5. boolean (bool) ... true , false
    6. +
+
-
-
Variables
-

Variables are containers for storing data values.

-

The syntax for declaring a variable and assigning a value to it is as following :

- 
data-type variable-name = value(data) ;
-

For example :-

- 
int age = 20 ;
-string FirstName = "AAA" ;
-string full_name = "AAA BBB" ;
-double _degree = 80.5 ;
-char grade = 'A' ;
-bool student = true ;
-bool male = true ;
-
+
+
Variables
+

Variables are containers for storing data values.

+

+ The syntax for declaring a variable and assigning a value to it is as + following : +

+ 
+          data-type variable-name = value(data);
+            
+
+

For example :-

+ 
+          int age = 20;
+string FirstName = "AAA";
+string full_name = "AAA BBB";
+double _degree = 80.5;
+char grade = 'A';
+bool student = true;
+bool male = true;
+          
+
+
-
-
Type Casting
-

Type casting means turning a certain data from a type to another one.

-

Syntax for type casting is :-

- 
(data-type) data
-

For example :-

- 
double pi = 3.14 ;
-int myInt = (int) pi ;
-Console.WriteLine(pi) ; // 3.14
-Console.WriteLine(myInt) ; // 3
-
+
+
Type Casting
+

+ Type casting means turning a certain data from a type to another one. +

+

Syntax for type casting is :-

+ 
+          (data-type) data
+          
+
+

For example :-

+ 
+          double pi = 3.14;
+int myInt = (int) pi;
+Console.WriteLine(pi); // 3.14
+Console.WriteLine(myInt); // 3
+          
+
+
-
-
User Input
-

You already know that Console.WriteLine() is used to output text.

-

Now you are going to learn how to use Console.ReadLine() to get user input.

- 
Console.ReadLine();
-

For example :-

- 
int age ;
-Console.Write("Enter your age:") ;
-age = Console.ReadLine() ;
-Console.WriteLine("You are " + age + " years old") ;
-
+
+
User Input
+

You already know that Console.WriteLine() is used to output text.

+

+ Now you are going to learn how to use Console.ReadLine() to get user + input. +

+ 
+          Console.ReadLine();
+          
+
+

For example:-

+ 
+          int age;
+Console.Write("Enter your age:");
+age = Console.ReadLine();
+Console.WriteLine("You are " + age + " years old");
+          
+
+
-
-
Booleans
-

Booleans are data types that can be used to control whether something is true or false(yes or no / on or off).

- 
bool male = true ;
-bool student = true ;
-bool permission_accepted = false ;
-
+
+
Booleans
+

+ Booleans are data types that can be used to control whether something + is true or false(yes or no / on or off). +

+ 
+          bool male = true;
+bool student = true;
+bool permission_accepted = false;
+          
+
+
- - \ No newline at end of file + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..efbda34 --- /dev/null +++ b/script.js @@ -0,0 +1,37 @@ +"use strict"; + +const COPY_TIMEOUT = 1500; // Timeout duration in milliseconds + +const copyCodeButtons = document.querySelectorAll(".btn.copy-code"); +let timeoutId; + +copyCodeButtons.forEach((btn) => { + btn.addEventListener("click", () => { + if (btn.classList.contains("copied")) { + // If already copied, clear the timeout and remove the copied class immediately + clearTimeout(timeoutId); + btn.classList.remove("copied"); + return; + } + + const text = btn.previousElementSibling.textContent; + + btn.classList.add("copied"); + + copyTextToClipboard(text, btn); + }); +}); + +function copyTextToClipboard(text, btn) { + navigator.clipboard + .writeText(text) + .then(() => { + // Set a timeout to remove the copied class after COPY_TIMEOUT milliseconds + timeoutId = setTimeout(() => { + btn.classList.remove("copied"); + }, COPY_TIMEOUT); + }) + .catch((err) => { + console.error("Failed to copy: ", err); + }); +} diff --git a/style.css b/style.css index 2350e45..fb3e048 100644 --- a/style.css +++ b/style.css @@ -1,46 +1,149 @@ -::-webkit-scrollbar {width: 10px;} -::-webkit-scrollbar-track {background: #f1f1ff;} -::-webkit-scrollbar-track:hover {background: #D1D1DD;} -::-webkit-scrollbar-thumb {background: #666;} -::-webkit-scrollbar-thumb:hover {background: #444;} -*{padding: 0;margin: 0;font-family: Bree Serif, sans-serif;} -#navbar{ - position: fixed;top: 0px;left: 0px;z-index: 2; - width: 150px;height: 100%;background-color: #c7c7c7; -} -header{margin: 25px 0px 5px 0px;font-size: 24px;font-weight: bold;} -header:not(#navbar header){border-bottom: 2px solid #121212;width: fit-content;padding: 2px;} -#navbar header{text-align: center;} -#navbar a{ - display: block;width: calc(100% - 8px); - text-decoration: none;text-align: center; - padding: 5px 0px;margin: 4px; - background-color: #e2e2e2;color: #121212; - font-size: 18px;transition-duration: 0.3s; -} -#navbar a:hover{background-color: #121212;color: #e2e2e2;} -#main-doc{ - position: relative;left: 175px; - width: calc(100% - 175px);padding: 10px 0px 50px 0px; -} -p{font-size: 16px;padding: 6px 0px 2px 0px;} -ul, ol{padding: 10px 30px;background-color: #e2e2e2;width: fit-content;} -pre{ - padding: 6px 10px;width: fit-content; - background-color: #121212;color: #e2e2e2; +::-webkit-scrollbar { + width: 10px; } - -@media screen and (max-width: 800px) { - #navbar { - position: relative;top: 0px;left: 0px; - width: 100%;height: auto;padding-bottom: 2px; - } - #navbar header{margin: 0px;padding: 20px 0px 10px 0px;} - #main-doc{ - position: relative;left: 15px; - padding: 10px 0px 50px 0px;width: calc(100% - 50px); - } - pre{max-width: 100%;overflow-x: auto;} +::-webkit-scrollbar-track { + background: #f1f1ff; +} +::-webkit-scrollbar-track:hover { + background: #d1d1dd; +} +::-webkit-scrollbar-thumb { + background: #666; +} +::-webkit-scrollbar-thumb:hover { + background: #444; +} +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} +html { + font-family: Bree Serif, sans-serif; + scroll-behavior: smooth; +} +button { + border: none; + background-color: transparent; + cursor: pointer; +} +.btn.copy-code { + position: relative; + width: 20px; + height: 20px; + padding: 0.5rem; +} +.btn.copy-code.big { + width: 34px; + height: 34px; + padding: 1rem; +} +.btn.copy-code svg { + position: absolute; + inset: 0; + width: 100%; + height: 100%; +} +.btn.copy-code svg.clipboard, +.btn.copy-code.copied svg.copy-file { + display: block; +} +.btn.copy-code.copied svg.clipboard, +.btn.copy-code svg.copy-file { + display: none; +} +.btn.copy-code svg path { + transition: fill 250ms; } +.btn.copy-code:is(:hover, .copied) svg path { + fill: rgb(117, 205, 117); +} +#navbar { + position: fixed; + top: 0px; + left: 0px; + z-index: 2; + width: 150px; + height: 100%; + background-color: #c7c7c7; +} +header { + margin: 25px 0px 5px 0px; + font-size: 24px; + font-weight: bold; +} +header:not(#navbar header) { + border-bottom: 2px solid #121212; + width: fit-content; + padding: 2px; +} +#navbar header { + text-align: center; +} +#navbar a { + display: block; + width: calc(100% - 8px); + text-decoration: none; + text-align: center; + padding: 5px 0px; + margin: 4px; + background-color: #e2e2e2; + color: #121212; + font-size: 18px; + transition-duration: 0.3s; +} +#navbar a:hover { + background-color: #121212; + color: #e2e2e2; +} +#main-doc { + position: relative; + left: 175px; + width: calc(100% - 175px); + padding: 10px 0px 50px 0px; +} +p { + font-size: 16px; + padding: 6px 0px 2px 0px; +} +ul, +ol { + padding: 10px 30px; + background-color: #e2e2e2; + width: fit-content; +} +pre { + padding: 6px 10px; + width: fit-content; + background-color: #121212; + color: #e2e2e2; + position: relative; + display: flex; + gap: 12px; +} +@media screen and (max-width: 800px) { + #navbar { + position: relative; + top: 0px; + left: 0px; + width: 100%; + height: auto; + padding-bottom: 2px; + } + #navbar header { + margin: 0px; + padding: 20px 0px 10px 0px; + } + #main-doc { + position: relative; + left: 15px; + padding: 10px 0px 50px 0px; + width: calc(100% - 50px); + } + pre { + max-width: 100%; + overflow-x: auto; + } +}