From f57f63cd8b26f376f78d90a8b3e78f65f7311b16 Mon Sep 17 00:00:00 2001 From: Assem Mohamed <129564950+Assem29@users.noreply.github.com> Date: Fri, 21 Apr 2023 00:57:37 +0200 Subject: [PATCH] 'task done' --- README.md | 8 ++- index.html | 200 ++++++++++++++++++++++++++++++----------------------- script.js | 29 ++++++++ style.css | 16 +++++ 4 files changed, 164 insertions(+), 89 deletions(-) create mode 100644 script.js diff --git a/README.md b/README.md index eab09e3..5a5b03b 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,9 @@ # technical-documentation -hello there, your task is to add an icon on each code sample, so user can copy the code to clipboard by clicking on this icon. +Problem: -fork the repository and start working on it. +Adding copy to clipboard icon to code samples -best of luck. +Solution: + +To add a copy to clipboard icon to each code sample, I will need to use a combination of HTML, CSS, and JavaScript. \ No newline at end of file diff --git a/index.html b/index.html index 2c906a5..75343af 100644 --- a/index.html +++ b/index.html @@ -1,49 +1,64 @@ - - - - + + + + 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:-

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

+ +
-
-
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 +74,80 @@
             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 ;
+      

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

-        

+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

-        

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

-        

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

-        

+bool permission_accepted = false ;
+
- - \ No newline at end of file + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..e30439e --- /dev/null +++ b/script.js @@ -0,0 +1,29 @@ +// Get all the copy icons on the page +const copyIcons = document.querySelectorAll('.copy-icon'); + +// Loop through each icon and add an event listener +copyIcons.forEach(icon => { + icon.addEventListener('click', () => { + // Get the code block associated with this icon + const codeBlock = icon.previousElementSibling; + + // Create a new range object and select the code block's text + const range = document.createRange(); + range.selectNode(codeBlock); + window.getSelection().addRange(range); + + // Copy the selected text to the clipboard + document.execCommand('copy'); + + // Remove the selection + window.getSelection().removeAllRanges(); + + // Change the icon text to indicate that the code was copied + icon.textContent = 'Copied!'; + + // Reset the icon text after a few seconds + setTimeout(() => { + icon.textContent = 'Copy'; + }, 2000); + }); +}); diff --git a/style.css b/style.css index 2350e45..a2a1d10 100644 --- a/style.css +++ b/style.css @@ -44,3 +44,19 @@ pre{ } +pre { + position: relative; + } + + .copy-icon { + position: absolute; + top: 5px; + right: 5px; + font-size: 14px; + padding: 5px; + background-color: #ddd; + border: none; + border-radius: 4px; + cursor: pointer; + } + \ No newline at end of file