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

add an icon on each code sample, so user can copy the code to clipboa… #9

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

add an icon on each code sample, so user can copy the code to clipboa… #9

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
182 changes: 97 additions & 85 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,55 @@
<!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">
<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>
<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>
</nav>
<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'>

<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>
</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>
</nav>

<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;
<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="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 @@ -60,66 +66,72 @@
}
}
}</code></pre>
</section>
</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></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>
</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></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>
</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></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>
</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>
</main>
</body>
</section>
</main>
</body>
<script src="./script.js"></script>
</html>
81 changes: 81 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();