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.

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

copy-to-clipboard-branch #4

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
11 changes: 11 additions & 0 deletions .hintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"extends": [
"development"
],
"browserslist": [
"defaults",
"not ie 11",
"not and_ff <= 113",
"not firefox <= 113"
]
}
186 changes: 105 additions & 81 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,49 +1,60 @@
<!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"
/>
</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><span class="btn-one">📋</span><code class="code-one">using System;
namespace Hello
{
class MyProgram
Expand All @@ -60,66 +71,79 @@
}
}
}</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><span class="btn-two">📋</span><code class="code-two">data-type variable-name = value(data) ;</code></pre>
<p>For example :-</p>
<pre><span class="btn-three">📋</span><code class="code-three">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><span class="btn-four">📋</span><code class="code-four">(data-type) data</code></pre>
<p>For example :-</p>
<pre><span class="btn-five">📋</span><code class="code-five">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><span class="btn-sex">📋</span><code class="code-sex">Console.ReadLine();</code></pre>
<p>For example :-</p>
<pre><span class="btn-seven">📋</span><code class="code-seven">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><span class="btn-eight">📋</span><code class="code-eight">bool male = true ;
bool student = true ;
bool permission_accepted = false ;</code></pre>
</section>
</section>
</main>
</body>
</html>

<script src="main.js"></script>
</body>
</html>
47 changes: 47 additions & 0 deletions main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
const btnCopyOne = document.querySelector('.btn-one');
btnCopyOne.addEventListener('click', async ()=>{
const text = document.querySelector('.code-one').textContent;
await navigator.clipboard.writeText(text);
})

const btnCopyTwo = document.querySelector('.btn-two');
btnCopyTwo.addEventListener('click', async ()=>{
const text = document.querySelector('.code-two').textContent;
await navigator.clipboard.writeText(text);
})

const btnCopyThree = document.querySelector('.btn-three');
btnCopyThree.addEventListener('click', async ()=>{
const text = document.querySelector('.code-three').textContent;
await navigator.clipboard.writeText(text);
})

const btnCopyFour = document.querySelector('.btn-four');
btnCopyFour.addEventListener('click', async ()=>{
const text = document.querySelector('.code-four').textContent;
await navigator.clipboard.writeText(text);
})

const btnCopyFive = document.querySelector('.btn-five');
btnCopyFive.addEventListener('click', async ()=>{
const text = document.querySelector('.code-five').textContent;
await navigator.clipboard.writeText(text);
})

const btnCopySex = document.querySelector('.btn-sex');
btnCopySex.addEventListener('click', async ()=>{
const text = document.querySelector('.code-sex').textContent;
await navigator.clipboard.writeText(text);
})

const btnCopySeven = document.querySelector('.btn-seven');
btnCopySeven.addEventListener('click', async ()=>{
const text = document.querySelector('.code-seven').textContent;
await navigator.clipboard.writeText(text);
})

const btnCopyEight = document.querySelector('.btn-eight');
btnCopyEight.addEventListener('click', async ()=>{
const text = document.querySelector('.code-eight').textContent;
await navigator.clipboard.writeText(text);
})
Loading