From b2d7052147f939b7ac46e1f0fdb0a59dbcd19a3a Mon Sep 17 00:00:00 2001 From: Mohamed Abdellhay Date: Sat, 7 Dec 2024 14:39:44 +0200 Subject: [PATCH] add an icon on each code sample, so user can copy the code to clipboard by clicking on this icon. --- index.html | 182 ++++++++++++++++++++++++++++------------------------- script.js | 81 ++++++++++++++++++++++++ 2 files changed, 178 insertions(+), 85 deletions(-) create mode 100644 script.js diff --git a/index.html b/index.html index 2c906a5..8085b36 100644 --- a/index.html +++ b/index.html @@ -1,49 +1,55 @@ - - - - - Technical Documentation - - - - - + + + + + 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
    • -
-
+ + + -
-
Syntax
-

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

- 
using System;
+        

+            

+                
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;
 namespace Hello
 {
     class MyProgram
@@ -60,66 +66,72 @@
         }
     }
 }

-        

+
-
-
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 ;
+            

+                
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 ;
+            

+                
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 ;
+            

+                
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 ;
+            

+                
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..17161ff --- /dev/null +++ b/script.js @@ -0,0 +1,81 @@ +// let code = document.querySelectorAll("pre"); + +// console.log(code); + +// let copyElement = document.createElement("div"); +// // copyElement.style.position = "absolute"; +// copyElement.style.top = "0px"; +// copyElement.style.left = "0px"; +// copyElement.style.zIndex = "1000"; +// copyElement.style.color = "#fff"; +// copyElement.textContent = "copy"; +// console.log(copyElement); + +// async function test() { +// // for (let i = 0; i < code.length; i++) { +// // } +// for (ele of code) { +// ele.style.position = "relative"; +// console.log(ele); +// await ele.insertAdjacentElement("beforeend", copyElement); +// } +// } + +// test(); + +let code = document.querySelectorAll("pre"); + +function createCopyButton() { + let copyButton = document.createElement("button"); + copyButton.textContent = "Copy"; + copyButton.style.position = "absolute"; + copyButton.style.top = "5px"; + copyButton.style.right = "5px"; + copyButton.style.zIndex = "1000"; + copyButton.style.backgroundColor = "#808080c7"; + copyButton.style.color = "white"; + copyButton.style.border = "none"; + copyButton.style.padding = "5px 10px"; + copyButton.style.cursor = "pointer"; + copyButton.style.borderRadius = "3px"; + + return copyButton; +} + +async function addCopyButtons() { + for (let codeBlock of code) { + // Ensure relative positioning for absolute button placement + codeBlock.style.position = "relative"; + codeBlock.style.minWidth = "calc(100%/2)"; + + // Create copy button + let copyButton = createCopyButton(); + + // Add click event to copy content + copyButton.addEventListener("click", async () => { + try { + // Get the text content of the pre element + await navigator.clipboard.writeText(codeBlock.textContent); + + // Temporary visual feedback + copyButton.textContent = "Copied!"; + // copyButton.style.backgroundColor = "#45a049"; + + // Reset button after 2 seconds + setTimeout(() => { + copyButton.textContent = "Copy"; + // copyButton.style.backgroundColor = "#4CAF50"; + }, 2000); + } catch (err) { + console.error("Failed to copy: ", err); + copyButton.textContent = "Copy failed"; + } + }); + + // Add button to the code block + codeBlock.appendChild(copyButton); + } +} + +// Call the function to add copy buttons +addCopyButtons();