Skip to content

Commit 5ae1300

Browse files
added a codesnippet in an article (#118)
* added a codesnippet in an article * added a JAVA code snippet * copy script updated * made mobile responsive
1 parent c177eb2 commit 5ae1300

File tree

4 files changed

+383
-0
lines changed

4 files changed

+383
-0
lines changed

posts/java/hello-world-in-java.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.copy-button {
2+
position: absolute;
3+
top: 5px;
4+
right: 5px;
5+
background-color: #708090;
6+
color: white;
7+
border: none;
8+
border-radius: 0.25rem;
9+
padding: 0.25rem 0.5rem;
10+
cursor: pointer;
11+
z-index: 1;
12+
}
13+
14+
.copy-button.copied {
15+
background-color: #28a745;
16+
}
17+
18+
.code-container {
19+
position: relative;
20+
overflow: hidden;
21+
}

posts/java/hello-world-in-java.html

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7+
<meta name="description" content="How to create and run first Java program HelloWorld - CSEdge." />
8+
<meta name="keywords" content="java, HelloWorld, firstprogram, javac" />
9+
<title>First Java Program - CSEdge</title>
10+
<meta name="Dev-Soumya-Ranjan-Swain" content="CSEdge" />
11+
<!-- Favicon-->
12+
<link rel="icon" type="image/x-icon" href="https://csedge.courses/Images/CSEDGE-LOGO32X32.png" />
13+
<!-- Core theme CSS (includes Bootstrap)-->
14+
<link href="../styles.css" rel="stylesheet" />
15+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css">
16+
<link rel="stylesheet" href="hello-world-in-java.css">
17+
</head>
18+
19+
<body>
20+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
21+
<div class="container">
22+
<img height="32px" width="32px" src="https://csedge.courses/Images/CSEDGE-LOGO32X32.png" alt="logo" />
23+
<a class="navbar-brand" href="../.././index.html">CSEdge Learn</a>
24+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
25+
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
26+
aria-label="Toggle navigation">
27+
<span class="navbar-toggler-icon"></span>
28+
</button>
29+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
30+
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
31+
<li class="nav-item">
32+
<a class="nav-link" href="https://learn.csedge.courses">Home</a>
33+
</li>
34+
<li class="nav-item">
35+
<a class="nav-link" href="https://csedge.courses/about">About</a>
36+
</li>
37+
<li class="nav-item">
38+
<a class="nav-link" href="https://csedge.courses#contact">Contact</a>
39+
</li>
40+
<li class="nav-item">
41+
<a class="nav-link active" aria-current="page" href="https://learn.csedge.courses">Blog</a>
42+
</li>
43+
</ul>
44+
</div>
45+
</div>
46+
</nav>
47+
<div class="container mt-5">
48+
<div class="row">
49+
<div class="col-lg-8">
50+
<div class="card mb-4">
51+
<div class="card-body">
52+
<h1>First Java Program</h1>
53+
<section>
54+
<h2>Introduction</h2>
55+
<p>In this article, we will learn how to write and run a simple "Hello World" program in
56+
Java. This program is often the first example taught to beginners in Java programming as
57+
it demonstrates the basic structure and syntax of a Java program.</p>
58+
</section>
59+
<section>
60+
<h2>Prerequisites</h2>
61+
<p>To follow along with this tutorial, you need:</p>
62+
<ul>
63+
<li>A computer with a text editor installed</li>
64+
<li>Java Development Kit (JDK) installed</li>
65+
</ul>
66+
</section>
67+
<section>
68+
<h2>Step 1: Writing the Java Code</h2>
69+
<p>Open your favorite text editor and create a new file named <code>HelloWorld.java</code>.
70+
</p>
71+
<p>Now, add the following Java code to the file:</p>
72+
<div class="code-container">
73+
<pre><code class="language-java">public class HelloWorld {
74+
public static void main(String[] args) {
75+
System.out.println("Hello, world!");
76+
}
77+
}</code></pre>
78+
<button class="copy-button" onclick="copyCode(this)">Copy Code</button>
79+
</div>
80+
<p>This Java code defines a class named <code>HelloWorld</code> with a <code>main</code>
81+
method. Inside the <code>main</code> method, it prints "Hello, world!" to the console
82+
using <code>System.out.println()</code>.</p>
83+
</section>
84+
<section>
85+
<h2>Step 2: Compiling the Java Code</h2>
86+
<p>Now that we have written our Java code, we need to compile it into bytecode that can be
87+
executed by the Java Virtual Machine (JVM).</p>
88+
<p>Open a terminal or command prompt, navigate to the directory containing
89+
<code>HelloWorld.java</code>, and run the following command:</p>
90+
<div class="code-container">
91+
<pre><code class="language-java">javac HelloWorld.java</code></pre>
92+
<button class="copy-button" onclick="copyCode(this)">Copy Code</button>
93+
</div>
94+
<p>If there are no syntax errors in your code, this command will generate a file named
95+
<code>HelloWorld.class</code>.</p>
96+
</section>
97+
<section>
98+
<h2>Step 3: Running the Java Program</h2>
99+
<p>Now that we have compiled our Java code, we can run it using the <code>java</code>
100+
command.</p>
101+
<p>In the same terminal or command prompt, run the following command:</p>
102+
<div class="code-container">
103+
<pre><code class="language-java">java HelloWorld</code></pre>
104+
<button class="copy-button" onclick="copyCode(this)">Copy Code</button>
105+
</div>
106+
<p>This command will execute the <code>HelloWorld</code> class, and you should see the
107+
output <code>Hello, world!</code> printed to the console.</p>
108+
</section>
109+
<section>
110+
<h2>Conclusion</h2>
111+
<p>Congratulations! You have successfully written and run a "Hello World" program in Java.
112+
This simple program serves as a foundation for learning more advanced concepts in Java
113+
programming.</p>
114+
</section>
115+
</div>
116+
</div>
117+
</div>
118+
<div class="col-lg-4">
119+
<!-- Sidebar content -->
120+
<!-- Search widget -->
121+
<div class="card mb-4">
122+
<!-- Search widget header -->
123+
<div class="card-header">Search</div>
124+
<!-- Search widget body -->
125+
<div class="card-body">
126+
<!-- Search form -->
127+
<div class="input-group">
128+
<!-- Search input -->
129+
<input class="form-control" type="text" id="searchInput" placeholder="Enter search term..."
130+
aria-label="Enter search term..." aria-describedby="button-search" />
131+
<!-- Search button -->
132+
<button class="btn btn-primary" id="button-search" type="button"
133+
onclick="search()">Go!</button>
134+
</div>
135+
</div>
136+
<!-- Search Results -->
137+
<div id="searchResults"></div>
138+
</div>
139+
<!-- Categories widget -->
140+
<div class="card mb-4">
141+
<!-- Categories widget header -->
142+
<div class="card-header">Categories</div>
143+
<!-- Categories widget body -->
144+
<div class="card-body">
145+
<!-- Categories list -->
146+
<div class="row">
147+
<div class="col-sm-6">
148+
<ul class="list-unstyled mb-0">
149+
<li><a href="#!">Web Design</a></li>
150+
<li><a href="#!">HTML</a></li>
151+
<li><a href="#!">Freebies</a></li>
152+
</ul>
153+
</div>
154+
<div class="col-sm-6">
155+
<ul class="list-unstyled mb-0">
156+
<li><a href="#!">JavaScript</a></li>
157+
<li><a href="#!">CSS</a></li>
158+
<li><a href="#!">Tutorials</a></li>
159+
</ul>
160+
</div>
161+
</div>
162+
</div>
163+
</div>
164+
<!-- Recent Posts widget -->
165+
<div class="card mb-4">
166+
<!-- Recent Posts widget header -->
167+
<div class="card-header">Recent Posts</div>
168+
<!-- Recent Posts widget body -->
169+
<div class="card-body">
170+
<p>Coming Soon..!</p>
171+
</div>
172+
</div>
173+
<!-- Ads widget -->
174+
<div class="card mb-4">
175+
<!-- Ads widget body -->
176+
<div class="card-body">
177+
<!-- Google Ads -->
178+
<!-- Ad unit 1 -->
179+
<script async
180+
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8930077947690409"
181+
crossorigin="anonymous"></script>
182+
<ins class="adsbygoogle" style="display: block" data-ad-format="fluid"
183+
data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-8930077947690409"
184+
data-ad-slot="9866674087"></ins>
185+
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
186+
<!-- Ad unit 2 -->
187+
<script async
188+
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8930077947690409"
189+
crossorigin="anonymous"></script>
190+
<ins class="adsbygoogle" style="display: block" data-ad-format="fluid"
191+
data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-8930077947690409"
192+
data-ad-slot="9866674087"></ins>
193+
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
194+
<!-- Ad unit 3 -->
195+
<script async
196+
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8930077947690409"
197+
crossorigin="anonymous"></script>
198+
<ins class="adsbygoogle" style="display: block" data-ad-format="fluid"
199+
data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-8930077947690409"
200+
data-ad-slot="9866674087"></ins>
201+
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
202+
</div>
203+
</div>
204+
</div>
205+
</div>
206+
</div>
207+
<footer class="py-5 bg-dark">
208+
<div class="container">
209+
<p class="m-0 text-center text-white">Copyright &copy CSEdge Learn 2024</p>
210+
</div>
211+
</footer>
212+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
213+
<script src="../script.js"></script>
214+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
215+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-java.min.js"></script>
216+
<script>
217+
function copyCode(button) {
218+
var code = button.previousElementSibling.querySelector('code');
219+
var range = document.createRange();
220+
range.selectNode(code);
221+
window.getSelection().removeAllRanges();
222+
window.getSelection().addRange(range);
223+
document.execCommand('copy');
224+
window.getSelection().removeAllRanges();
225+
226+
button.innerText = "Copied";
227+
button.classList.add("copied");
228+
setTimeout(function () {
229+
button.innerText = "Copy Code";
230+
button.classList.remove("copied");
231+
}, 2000);
232+
}
233+
</script>
234+
235+
</body>
236+
237+
</html>
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.code-snippet-container {
2+
margin-top: 10px !important;
3+
}
4+
5+
.copy-banner {
6+
top: 0px;
7+
left: 0;
8+
width: 100%;
9+
background-color: #f2f2f2;
10+
padding: 5px;
11+
display: flex;
12+
justify-content: space-between;
13+
align-items: center;
14+
box-sizing: border-box;
15+
}
16+
17+
.copy-banner span {
18+
font-size: 14px;
19+
font-weight: bold;
20+
}
21+
22+
.copy-button {
23+
background-color: #708090;
24+
color: white;
25+
border: none;
26+
border-radius: 0.25rem;
27+
padding: 0.25rem 0.5rem;
28+
cursor: pointer;
29+
}
30+
31+
.copy-button.copied {
32+
background-color: #28a745;
33+
}
34+
35+
.code-container {
36+
margin-top: 2px;
37+
}
Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<head>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
8+
<meta name="description" content="Javascript Basics - CSEdge." />
9+
<meta name="keywords" content="Javascript Basics" />
10+
<title>Javascript Basics</title>
11+
<meta name="Dev-Soumya-Ranjan-Swain" content="CSEdge" />
12+
<!-- Favicon-->
13+
<link rel="icon" type="image/x-icon" href="https://csedge.courses/Images/CSEDGE-LOGO32X32.png" />
14+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css">
15+
<link rel="stylesheet" href="javascript-basics.css">
16+
</head>
17+
18+
<body>
19+
20+
<h1>Javascript Basics</h1>
21+
<div class="code-snippet-container" style="margin-top: 30px;">
22+
<div class="copy-banner">
23+
<span class="language">JavaScript</span>
24+
<button class="copy-button" onclick="copyCode(this)">Copy Code</button>
25+
</div>
26+
<div class="code-container">
27+
<pre>
28+
<code class="language-javascript">
29+
//! variables (let, var, const)
30+
let a = 1;
31+
var b = 2;
32+
const c = 3;
33+
// c = 4; // will give error, can't change const
34+
35+
//! primitive data types(string, number, boolean)
36+
let FirstName = "sonu";
37+
let age = 21;
38+
let isMarried = false;
39+
40+
//! conditional statement
41+
if (isMarried) {
42+
console.log(FirstName + " is married")
43+
}
44+
else console.log(FirstName + " is not married")
45+
46+
//! Loops
47+
let res = 0;
48+
for (let i = 0; i <= 100; i++) {
49+
res += i;
50+
}
51+
console.log(res)
52+
53+
//! functions
54+
function greet(name) {
55+
return 'Hello, ' + name + '!';
56+
}
57+
58+
console.log(greet('World'));
59+
</code>
60+
</pre>
61+
</div>
62+
</div>
63+
64+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
65+
<script
66+
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
67+
<script>
68+
function copyCode(button) {
69+
var code = document.querySelector('code');
70+
var range = document.createRange();
71+
range.selectNode(code);
72+
window.getSelection().removeAllRanges();
73+
window.getSelection().addRange(range);
74+
document.execCommand('copy');
75+
window.getSelection().removeAllRanges();
76+
77+
button.innerText = "Copied";
78+
button.classList.add("copied");
79+
setTimeout(function () {
80+
button.innerText = "Copy Code";
81+
button.classList.remove("copied");
82+
}, 2000);
83+
}
84+
</script>
85+
86+
</body>
87+
88+
</html>

0 commit comments

Comments
 (0)