Skip to content

added a codesnippet in an article #118

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

Merged
merged 7 commits into from
Jun 19, 2024
Merged

added a codesnippet in an article #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0ae4c0a
added a codesnippet in an article
Soumya-RanjanSwain May 12, 2024
dfbe8e1
added a JAVA code snippet
Soumya-RanjanSwain May 13, 2024
f674f39
Merge branch 'CSEdgeOfficial:main' into main
Soumya-RanjanSwain May 13, 2024
3000e95
copy script updated
Soumya-RanjanSwain May 13, 2024
21661fd
Merge branch 'main' of https://github.com/DEV-Soumya-Ranjan-Swain/lea…
Soumya-RanjanSwain May 13, 2024
22fea24
made mobile responsive
Soumya-RanjanSwain Jun 18, 2024
aed6fbe
Merge branch 'CSEdgeOfficial:main' into main
Soumya-RanjanSwain Jun 18, 2024
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
21 changes: 21 additions & 0 deletions posts/java/hello-world-in-java.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
.copy-button {
position: absolute;
top: 5px;
right: 5px;
background-color: #708090;
color: white;
border: none;
border-radius: 0.25rem;
padding: 0.25rem 0.5rem;
cursor: pointer;
z-index: 1;
}

.copy-button.copied {
background-color: #28a745;
}

.code-container {
position: relative;
overflow: hidden;
}
237 changes: 237 additions & 0 deletions posts/java/hello-world-in-java.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,237 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="How to create and run first Java program HelloWorld - CSEdge." />
<meta name="keywords" content="java, HelloWorld, firstprogram, javac" />
<title>First Java Program - CSEdge</title>
<meta name="Dev-Soumya-Ranjan-Swain" content="CSEdge" />
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="https://csedge.courses/Images/CSEDGE-LOGO32X32.png" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="../styles.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css">
<link rel="stylesheet" href="hello-world-in-java.css">
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<img height="32px" width="32px" src="https://csedge.courses/Images/CSEDGE-LOGO32X32.png" alt="logo" />
<a class="navbar-brand" href="../.././index.html">CSEdge Learn</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="https://learn.csedge.courses">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://csedge.courses/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://csedge.courses#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="https://learn.csedge.courses">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-5">
<div class="row">
<div class="col-lg-8">
<div class="card mb-4">
<div class="card-body">
<h1>First Java Program</h1>
<section>
<h2>Introduction</h2>
<p>In this article, we will learn how to write and run a simple "Hello World" program in
Java. This program is often the first example taught to beginners in Java programming as
it demonstrates the basic structure and syntax of a Java program.</p>
</section>
<section>
<h2>Prerequisites</h2>
<p>To follow along with this tutorial, you need:</p>
<ul>
<li>A computer with a text editor installed</li>
<li>Java Development Kit (JDK) installed</li>
</ul>
</section>
<section>
<h2>Step 1: Writing the Java Code</h2>
<p>Open your favorite text editor and create a new file named <code>HelloWorld.java</code>.
</p>
<p>Now, add the following Java code to the file:</p>
<div class="code-container">
<pre><code class="language-java">public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, world!");
}
}</code></pre>
<button class="copy-button" onclick="copyCode(this)">Copy Code</button>
</div>
<p>This Java code defines a class named <code>HelloWorld</code> with a <code>main</code>
method. Inside the <code>main</code> method, it prints "Hello, world!" to the console
using <code>System.out.println()</code>.</p>
</section>
<section>
<h2>Step 2: Compiling the Java Code</h2>
<p>Now that we have written our Java code, we need to compile it into bytecode that can be
executed by the Java Virtual Machine (JVM).</p>
<p>Open a terminal or command prompt, navigate to the directory containing
<code>HelloWorld.java</code>, and run the following command:</p>
<div class="code-container">
<pre><code class="language-java">javac HelloWorld.java</code></pre>
<button class="copy-button" onclick="copyCode(this)">Copy Code</button>
</div>
<p>If there are no syntax errors in your code, this command will generate a file named
<code>HelloWorld.class</code>.</p>
</section>
<section>
<h2>Step 3: Running the Java Program</h2>
<p>Now that we have compiled our Java code, we can run it using the <code>java</code>
command.</p>
<p>In the same terminal or command prompt, run the following command:</p>
<div class="code-container">
<pre><code class="language-java">java HelloWorld</code></pre>
<button class="copy-button" onclick="copyCode(this)">Copy Code</button>
</div>
<p>This command will execute the <code>HelloWorld</code> class, and you should see the
output <code>Hello, world!</code> printed to the console.</p>
</section>
<section>
<h2>Conclusion</h2>
<p>Congratulations! You have successfully written and run a "Hello World" program in Java.
This simple program serves as a foundation for learning more advanced concepts in Java
programming.</p>
</section>
</div>
</div>
</div>
<div class="col-lg-4">
<!-- Sidebar content -->
<!-- Search widget -->
<div class="card mb-4">
<!-- Search widget header -->
<div class="card-header">Search</div>
<!-- Search widget body -->
<div class="card-body">
<!-- Search form -->
<div class="input-group">
<!-- Search input -->
<input class="form-control" type="text" id="searchInput" placeholder="Enter search term..."
aria-label="Enter search term..." aria-describedby="button-search" />
<!-- Search button -->
<button class="btn btn-primary" id="button-search" type="button"
onclick="search()">Go!</button>
</div>
</div>
<!-- Search Results -->
<div id="searchResults"></div>
</div>
<!-- Categories widget -->
<div class="card mb-4">
<!-- Categories widget header -->
<div class="card-header">Categories</div>
<!-- Categories widget body -->
<div class="card-body">
<!-- Categories list -->
<div class="row">
<div class="col-sm-6">
<ul class="list-unstyled mb-0">
<li><a href="#!">Web Design</a></li>
<li><a href="#!">HTML</a></li>
<li><a href="#!">Freebies</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="list-unstyled mb-0">
<li><a href="#!">JavaScript</a></li>
<li><a href="#!">CSS</a></li>
<li><a href="#!">Tutorials</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Recent Posts widget -->
<div class="card mb-4">
<!-- Recent Posts widget header -->
<div class="card-header">Recent Posts</div>
<!-- Recent Posts widget body -->
<div class="card-body">
<p>Coming Soon..!</p>
</div>
</div>
<!-- Ads widget -->
<div class="card mb-4">
<!-- Ads widget body -->
<div class="card-body">
<!-- Google Ads -->
<!-- Ad unit 1 -->
<script async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8930077947690409"
crossorigin="anonymous"></script>
<ins class="adsbygoogle" style="display: block" data-ad-format="fluid"
data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-8930077947690409"
data-ad-slot="9866674087"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<!-- Ad unit 2 -->
<script async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8930077947690409"
crossorigin="anonymous"></script>
<ins class="adsbygoogle" style="display: block" data-ad-format="fluid"
data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-8930077947690409"
data-ad-slot="9866674087"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<!-- Ad unit 3 -->
<script async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8930077947690409"
crossorigin="anonymous"></script>
<ins class="adsbygoogle" style="display: block" data-ad-format="fluid"
data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-8930077947690409"
data-ad-slot="9866674087"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
</div>
</div>
</div>
</div>
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright &copy CSEdge Learn 2024</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="../script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-java.min.js"></script>
<script>
function copyCode(button) {
var code = button.previousElementSibling.querySelector('code');
var range = document.createRange();
range.selectNode(code);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();

button.innerText = "Copied";
button.classList.add("copied");
setTimeout(function () {
button.innerText = "Copy Code";
button.classList.remove("copied");
}, 2000);
}
</script>

</body>

</html>
37 changes: 37 additions & 0 deletions posts/javascript/javascript-basics.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
.code-snippet-container {
margin-top: 10px !important;
}

.copy-banner {
top: 0px;
left: 0;
width: 100%;
background-color: #f2f2f2;
padding: 5px;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}

.copy-banner span {
font-size: 14px;
font-weight: bold;
}

.copy-button {
background-color: #708090;
color: white;
border: none;
border-radius: 0.25rem;
padding: 0.25rem 0.5rem;
cursor: pointer;
}

.copy-button.copied {
background-color: #28a745;
}

.code-container {
margin-top: 2px;
}
88 changes: 88 additions & 0 deletions posts/javascript/javascript-basics.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en">

<head>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Javascript Basics - CSEdge." />
<meta name="keywords" content="Javascript Basics" />
<title>Javascript Basics</title>
<meta name="Dev-Soumya-Ranjan-Swain" content="CSEdge" />
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="https://csedge.courses/Images/CSEDGE-LOGO32X32.png" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css">
<link rel="stylesheet" href="javascript-basics.css">
</head>

<body>

<h1>Javascript Basics</h1>
<div class="code-snippet-container" style="margin-top: 30px;">
<div class="copy-banner">
<span class="language">JavaScript</span>
<button class="copy-button" onclick="copyCode(this)">Copy Code</button>
</div>
<div class="code-container">
<pre>
<code class="language-javascript">
//! variables (let, var, const)
let a = 1;
var b = 2;
const c = 3;
// c = 4; // will give error, can't change const

//! primitive data types(string, number, boolean)
let FirstName = "sonu";
let age = 21;
let isMarried = false;

//! conditional statement
if (isMarried) {
console.log(FirstName + " is married")
}
else console.log(FirstName + " is not married")

//! Loops
let res = 0;
for (let i = 0; i <= 100; i++) {
res += i;
}
console.log(res)

//! functions
function greet(name) {
return 'Hello, ' + name + '!';
}

console.log(greet('World'));
</code>
</pre>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<script>
function copyCode(button) {
var code = document.querySelector('code');
var range = document.createRange();
range.selectNode(code);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();

button.innerText = "Copied";
button.classList.add("copied");
setTimeout(function () {
button.innerText = "Copy Code";
button.classList.remove("copied");
}, 2000);
}
</script>

</body>

</html>
Loading