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

apply copy functionality for all code sections #7

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

apply copy functionality for all code sections #7

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
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.

Expand Down
30 changes: 30 additions & 0 deletions copy-icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
215 changes: 129 additions & 86 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,74 @@
<!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"
/>
<script defer src="index.js"></script>
</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>

<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>
<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;
<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 +85,84 @@
}
}
}</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>
</html>
</section>
</main>
</body>
</html>
13 changes: 13 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
);
});
Loading