Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

'task done' #1

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+164 −89
Open

'task done' #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
200 changes: 114 additions & 86 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Technical Documentation</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Bree Serif' rel='stylesheet'>
</head>
<body>
<link rel="stylesheet" type="text/css" href="style.css" />
<link
href="https://fonts.googleapis.com/css?family=Bree Serif"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
</head>
<body>
<nav id="navbar">
<header>C# Tutorial</header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#Syntax">Syntax</a>
<a class="nav-link" href="#Data_Types">Data Types</a>
<a class="nav-link" href="#Variables">Variables</a>
<a class="nav-link" href="#Type_Casting">Type Casting</a>
<a class="nav-link" href="#User_Input">User Input</a>
<a class="nav-link" href="#User_Input">Booleans</a>
<header>C# Tutorial</header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#Syntax">Syntax</a>
<a class="nav-link" href="#Data_Types">Data Types</a>
<a class="nav-link" href="#Variables">Variables</a>
<a class="nav-link" href="#Type_Casting">Type Casting</a>
<a class="nav-link" href="#User_Input">User Input</a>
<a class="nav-link" href="#User_Input">Booleans</a>
</nav>

<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<p>C# is a programming language developed by Microsoft.</p>
<p>C# is used in many fields , Some of them are:-</p>
<ol>
<li>Desktop App Development</li>
<li>Mobile App Development</li>
<li>Game Development</li>
<li>Backend Web Development</li>
</ol>
<p>C# is one of the most popular programming languages , Because:-</p>
<ul>
<li>It is a programming language developed by Microsoft</li>
<li>It is a high-level programming language which is easy to learn</li>
<li>It is more secure than many programming languages</li>
<li>It is close to C , C++ and Java ... It is easy for programmers to switch to C# or vice versa</li>
</ul>
</section>
<section class="main-section" id="Introduction">
<header>Introduction</header>
<p>C# is a programming language developed by Microsoft.</p>
<p>C# is used in many fields , Some of them are:-</p>
<ol>
<li>Desktop App Development</li>
<li>Mobile App Development</li>
<li>Game Development</li>
<li>Backend Web Development</li>
</ol>
<p>C# is one of the most popular programming languages , Because:-</p>
<ul>
<li>It is a programming language developed by Microsoft</li>
<li>
It is a high-level programming language which is easy to learn
</li>
<li>It is more secure than many programming languages</li>
<li>
It is close to C , C++ and Java ... It is easy for programmers to
switch to C# or vice versa
</li>
</ul>
</section>

<section class="main-section" id="Syntax">
<header>Syntax</header>
<p>Syntax is the structure of statements , Here is a simple program typed in C# to discuss the meaning of syntax</p>
<pre><code>using System;
<section class="main-section" id="Syntax">
<header>Syntax</header>
<p>
Syntax is the structure of statements , Here is a simple program typed
in C# to discuss the meaning of syntax
</p>
<pre><code>using System;
namespace Hello
{
class MyProgram
Expand All @@ -59,67 +74,80 @@
Console.WriteLine("AAA");
}
}
}</code></pre>
</section>
}</code><button class="copy-icon"><i class="fas fa-code"></i></button>
</pre>
</section>

<section class="main-section" id="Data_Types">
<header>Data Types</header>
<p>Some data types that are supported by C# :-</p>
<ol>
<li>integer (int) ... 1 , 500 , -200</li>
<li>double (double) ... 0.5 , 3.14 , -2.5</li>
<li>string (string) ... "AAA" , "What is your name ?"</li>
<li>character (char) ... 'A' , '+' , '5'</li>
<li>boolean (bool) ... true , false</li>
</ol>
</section>
<section class="main-section" id="Data_Types">
<header>Data Types</header>
<p>Some data types that are supported by C# :-</p>
<ol>
<li>integer (int) ... 1 , 500 , -200</li>
<li>double (double) ... 0.5 , 3.14 , -2.5</li>
<li>string (string) ... "AAA" , "What is your name ?"</li>
<li>character (char) ... 'A' , '+' , '5'</li>
<li>boolean (bool) ... true , false</li>
</ol>
</section>

<section class="main-section" id="Variables">
<header>Variables</header>
<p>Variables are containers for storing data values.</p>
<p>The syntax for declaring a variable and assigning a value to it is as following :</p>
<pre><code>data-type variable-name = value(data) ;</code></pre>
<p>For example :-</p>
<pre><code>int age = 20 ;
<section class="main-section" id="Variables">
<header>Variables</header>
<p>Variables are containers for storing data values.</p>
<p>
The syntax for declaring a variable and assigning a value to it is as
following :
</p>
<pre><code>data-type variable-name = value(data) ;</code><button class="copy-icon"><i class="fas fa-code"></i></button></pre>
<p>For example :-</p>
<pre><code>int age = 20 ;
string FirstName = "AAA" ;
string full_name = "AAA BBB" ;
double _degree = 80.5 ;
char grade = 'A' ;
bool student = true ;
bool male = true ;</code></pre>
</section>
bool male = true ;</code><button class="copy-icon"><i class="fas fa-code"></i></button></pre>
</section>

<section class="main-section" id="Type_Casting">
<header>Type Casting</header>
<p>Type casting means turning a certain data from a type to another one.</p>
<p>Syntax for type casting is :-</p>
<pre><code>(data-type) data</code></pre>
<p>For example :-</p>
<pre><code>double pi = 3.14 ;
<section class="main-section" id="Type_Casting">
<header>Type Casting</header>
<p>
Type casting means turning a certain data from a type to another one.
</p>
<p>Syntax for type casting is :-</p>
<pre><code>(data-type) data</code><button class="copy-icon"><i class="fas fa-code"></i></button></pre>
<p>For example :-</p>
<pre><code>double pi = 3.14 ;
int myInt = (int) pi ;
Console.WriteLine(pi) ; // 3.14
Console.WriteLine(myInt) ; // 3</code></pre>
</section>
Console.WriteLine(myInt) ; // 3</code><button class="copy-icon"><i class="fas fa-code"></i></button></pre>
</section>

<section class="main-section" id="User_Input">
<header>User Input</header>
<p>You already know that Console.WriteLine() is used to output text.</p>
<p>Now you are going to learn how to use Console.ReadLine() to get user input.</p>
<pre><code>Console.ReadLine();</code></pre>
<p>For example :-</p>
<pre><code>int age ;
<section class="main-section" id="User_Input">
<header>User Input</header>
<p>You already know that Console.WriteLine() is used to output text.</p>
<p>
Now you are going to learn how to use Console.ReadLine() to get user
input.
</p>
<pre><code>Console.ReadLine();</code><button class="copy-icon"><i class="fas fa-code"></i></button></pre>
<p>For example :-</p>
<pre><code>int age ;
Console.Write("Enter your age:") ;
age = Console.ReadLine() ;
Console.WriteLine("You are " + age + " years old") ;</code></pre>
</section>
Console.WriteLine("You are " + age + " years old") ;</code><button class="copy-icon"><i class="fas fa-code"></i></button></pre>
</section>

<section class="main-section" id="Booleans">
<header>Booleans</header>
<p>Booleans are data types that can be used to control whether something is true or false(yes or no / on or off).</p>
<pre><code>bool male = true ;
<section class="main-section" id="Booleans">
<header>Booleans</header>
<p>
Booleans are data types that can be used to control whether something
is true or false(yes or no / on or off).
</p>
<pre><code>bool male = true ;
bool student = true ;
bool permission_accepted = false ;</code></pre>
</section>
bool permission_accepted = false ;</code><button class="copy-icon"><i class="fas fa-code"></i></button></pre>
</section>
</main>
</body>
</html>
<script src="script.js"></script>
</body>
</html>
29 changes: 29 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
});
});
16 changes: 16 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}