From 9aad35ad7a07ca7d3d380b0883e77aeacc66e994 Mon Sep 17 00:00:00 2001 From: Taher Barakat Date: Sat, 23 Mar 2024 13:57:09 +0300 Subject: [PATCH] apply copy functionality for all code sections --- README.md | 3 +- copy-icon.svg | 30 +++++++ index.html | 215 ++++++++++++++++++++++++++++++-------------------- index.js | 13 +++ style.css | 161 +++++++++++++++++++++++++++---------- 5 files changed, 295 insertions(+), 127 deletions(-) create mode 100644 copy-icon.svg create mode 100644 index.js diff --git a/README.md b/README.md index eab09e3..b2c5331 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ # 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. +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. fork the repository and start working on it. diff --git a/copy-icon.svg b/copy-icon.svg new file mode 100644 index 0000000..6f51b80 --- /dev/null +++ b/copy-icon.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 2c906a5..abdc202 100644 --- a/index.html +++ b/index.html @@ -1,49 +1,74 @@ - - - - - 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
    • -
-
+
+
+
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
@@ -60,66 +85,84 @@
         }
     }
 }

-        

+
-
-
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/index.js b/index.js new file mode 100644 index 0000000..3fe1dd8 --- /dev/null +++ b/index.js @@ -0,0 +1,13 @@ +document.querySelectorAll("pre").forEach((pre) => { + // console.log(icon); + let icond = document.createElement("div"); + let iconi = document.createElement("img"); + icond.append(iconi); + iconi.classList.add(["copy-icon"]); + icond.classList.add(["copy-icond"]); + iconi.src = "copy-icon.svg"; + pre.prepend(icond); + icond.addEventListener("click", () => + navigator.clipboard.writeText(pre.querySelector("code").innerText) + ); +}); diff --git a/style.css b/style.css index 2350e45..a1b7179 100644 --- a/style.css +++ b/style.css @@ -1,46 +1,127 @@ -::-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; +} +::-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; } @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;} + #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; + } } +.copy-icon { + display: inline-block; + width: 20px; + height: auto; +} +/* .copy-icon { */ + +.copy-icond { + cursor: pointer; + display: flex; + align-items: center; + margin-bottom: 0.5rem; +} +.copy-icond::after { + content: "copy"; + font-size: small; + font-weight: 1; + color: #c7c7c7; + margin-left: 0.3rem; +}