Skip to content

Commit fb7ce8c

Browse files
Banti ShawBanti Shaw
Banti Shaw
authored and
Banti Shaw
committed
Javascript practice
1 parent 6deacbe commit fb7ce8c

32 files changed

+3235
-1
lines changed

‎README.md

+53-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,53 @@
1-
# JavaScriptPractice
1+
# JavaScript Practice Repository
2+
3+
Welcome to my **JavaScript Practice** repository!
4+
This folder contains a wide range of JavaScript examples and exercises that I've practiced — from beginner to intermediate concepts.
5+
6+
## Folder Overview
7+
8+
This repository includes organized files and code snippets covering:
9+
10+
### Core Concepts
11+
- **Functions** – All types: regular, anonymous, arrow functions, IIFE, etc.
12+
- **Loops** – `for`, `while`, `do...while`, `for...of`, `for...in`
13+
- **Conditional Statements** – `if`, `else if`, `else`, `switch`
14+
15+
### Data Types & Operations
16+
- **Arrays** – Basic and advanced operations: `map`, `filter`, `reduce`, etc.
17+
- **Objects** – Properties, methods, destructuring, nested access
18+
- **Math Functions** – `Math.min`, `Math.max`, rounding, random numbers
19+
- **Type Checking** – `typeof`, `instanceof`, and other checks
20+
21+
### Working with Dates
22+
- Creating, formatting, and manipulating JavaScript `Date` objects
23+
24+
### ES5 vs ES6 Features
25+
- `let`, `const`, arrow functions, template literals, spread/rest, destructuring, classes, promises, etc.
26+
27+
### Form Validation
28+
- Basic HTML form validations using JavaScript (e.g., empty fields, email format, password length)
29+
30+
### Practical Solutions
31+
- Finding minimum and maximum numbers
32+
- Extracting the middle element of an array
33+
- Custom logic examples and common challenges
34+
35+
## Purpose
36+
37+
This repository helps me:
38+
- Solidify my understanding of core JS
39+
- Track my learning journey
40+
- Revisit solutions and best practices
41+
- Share knowledge with others
42+
43+
## Getting Started
44+
45+
Feel free to explore each file — no setup needed. Just open in any browser or use a code editor like VS Code.
46+
47+
## Contributions
48+
49+
While this is a personal practice repo, feedback and suggestions are welcome!
50+
51+
---
52+
53+
Thanks for visiting!

‎all_type_function.html

+194
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>demo</title>
6+
</head>
7+
<body>
8+
9+
<!--=====Function 1 alert with function======-->
10+
<input type="button" onclick="sayHello()" value="Say Hello">
11+
<script>
12+
function sayHello()
13+
{
14+
alert("Hello there!");
15+
}
16+
</script>
17+
18+
<!--=====Function 2 alert data with function======-->
19+
<input type="button" onclick="sayHello('Zara', 7)" value="Say Hello">
20+
<script>
21+
function sayHello(name, age)
22+
{
23+
alert(name + " is " + age + " years old.");
24+
}
25+
</script>
26+
27+
<!--=====Function 3 print data with var function=====-->
28+
<p id="demo"></p>
29+
<script>
30+
function myFunction(a, b) {
31+
return a * b;
32+
}
33+
34+
var x = myFunction(4, 3);
35+
document.getElementById("demo").innerHTML = x;
36+
</script>
37+
38+
<!--=====Function 4 print value with function======-->
39+
<p id="demo14"></p>
40+
<script>
41+
var a = 4;
42+
function myFunction() {
43+
document.getElementById("demo14").innerHTML = a * a;
44+
}
45+
</script>
46+
47+
<p id="demo41"></p>
48+
<script>
49+
var x = 7;
50+
function myFunc2(a){
51+
return a * a;
52+
}
53+
document.getElementById('demo41').innerHTML = myFunc2(5) * x;
54+
</script>
55+
56+
<!--=====Function 5 anonymous / function expression======-->
57+
<p id="demo3"></p>
58+
<script>
59+
var x = function (a, b) {return a * b};
60+
document.getElementById("demo3").innerHTML = x(4, 3);
61+
</script>
62+
63+
<!--=====Function 6 print data with var function======-->
64+
<p id="demo6"></p>
65+
<script>
66+
function myFunction(a, b) {
67+
return a * b;
68+
}
69+
var x = myFunction(4, 3) * 2;
70+
document.getElementById("demo6").innerHTML = x;
71+
</script>
72+
73+
<!--=====Function 7 object function======-->
74+
<p id="demo4"></p>
75+
<script>
76+
var person = {
77+
firstName: "John",
78+
lastName : "Doe",
79+
id : 5566,
80+
fullName : function() {
81+
return this.firstName + " " + this.lastName;
82+
}
83+
};
84+
document.getElementById("demo4").innerHTML = person.fullName();
85+
</script>
86+
87+
<!--=====Function 8 concatenate function======-->
88+
<input type="button" onclick="secondFunction()" value="Call Function">
89+
<script>
90+
function concatenate(first, last)
91+
{
92+
var full;
93+
full = first + last;
94+
return full;
95+
}
96+
function secondFunction()
97+
{
98+
var result;
99+
result = concatenate('Zara', 'Ali');
100+
document.write (result );
101+
}
102+
</script>
103+
104+
<!--=====Function 9 object constructor call function======-->
105+
<p id="demo9"></p>
106+
<script>
107+
var person = {
108+
fullName: function() {
109+
return this.firstName + " " + this.lastName;
110+
}
111+
}
112+
var person1 = {
113+
firstName:"John",
114+
lastName: "Doe",
115+
}
116+
var person2 = {
117+
firstName:"Mary",
118+
lastName: "Doe",
119+
}
120+
var x = person.fullName.call(person1);
121+
document.getElementById("demo9").innerHTML = x;
122+
</script>
123+
124+
<!--=====Function 10 object constructor call function======-->
125+
<p id="demo11"></p>
126+
<script>
127+
var person = {
128+
fullName: function(city, country) {
129+
return this.firstName + " " + this.lastName + "," + city + "," + country;
130+
}
131+
}
132+
var person1 = {
133+
firstName:"John",
134+
lastName: "Doe",
135+
}
136+
var person2 = {
137+
firstName:"Mary",
138+
lastName: "Doe",
139+
}
140+
var x = person.fullName.call(person1, "Oslo", "Norway");
141+
document.getElementById("demo11").innerHTML = x;
142+
</script>
143+
144+
<!--=====Function 11 object constructor apply function======-->
145+
<p id="demo12"></p>
146+
<script>
147+
var person = {
148+
fullName: function(city, country) {
149+
return this.firstName + " " + this.lastName + "," + city + "," + country;
150+
}
151+
}
152+
var person1 = {
153+
firstName:"John",
154+
lastName: "Doe",
155+
}
156+
var x = person.fullName.apply(person1, ["Oslo", "Norway"]);
157+
document.getElementById("demo12").innerHTML = x;
158+
</script>
159+
160+
<!--=====Function 12 object constructor new function=====-->
161+
<p id="demo2"></p>
162+
<script>
163+
var myFunction = new Function("a", "b", "return a * b");
164+
document.getElementById("demo2").innerHTML = myFunction(4, 3);
165+
</script>
166+
167+
<!--=====Function 13 consturctor value new function======-->
168+
<p id="demo8"></p>
169+
<script>
170+
function myFunction(arg1, arg2) {
171+
this.firstName = arg1;
172+
this.lastName = arg2;
173+
}
174+
var x = new myFunction("John","Doe")
175+
document.getElementById("demo8").innerHTML = x.firstName;
176+
</script>
177+
178+
<!--=====Function 14 self invoke======-->
179+
<p id="demo">0</p>
180+
<script>
181+
var add = (function () {
182+
var counter = 0;
183+
return function () {
184+
counter += 1; return counter;
185+
}
186+
})();
187+
function myFunction(){
188+
document.getElementById("demo").innerHTML = add();
189+
}
190+
</script>
191+
192+
</body>
193+
</html>
194+

‎array.html

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>demo</title>
6+
</head>
7+
<body>
8+
<input type="text" name="" value="" id="numb" />
9+
<input type="submit" name="" value="Submit" onclick="getValue()" />
10+
11+
<script>
12+
/*var x = [1,2,3,4,5,6,7,8];
13+
var n = 2;
14+
if(n == 2){
15+
document.write('yes')
16+
}else{
17+
document.write('No')
18+
}*/
19+
20+
document.write('<br/><br/>' + '<b>Q1: Number Exist or not</b> [1,2,3,4,5,6,7,8]' );
21+
function getValue(){
22+
var a = document.getElementById('numb').value;
23+
var b = 0;
24+
var y = [1,2,3,4,5,6,7,8];
25+
for(i=0; i < y.length; i++){
26+
if(a == y[i]){
27+
b++;
28+
}
29+
}
30+
if(b > 0){
31+
document.write('Number Exist in Array');
32+
}else{
33+
document.write('Number does not Exist in Array');
34+
}
35+
}
36+
37+
document.write('<br/><br/>' + '<b>Q2: Highest Vlue / Lowest value</b> [11,28,13,54,25,16,67,78]' + '<br/><br/>' );
38+
var arr = [11,28,13,54,25,16,67,78];
39+
var hv = 0;
40+
var lv = '';
41+
for(d = 0; d < arr.length; d++ ){
42+
if(hv < arr[d]){
43+
hv = arr[d];
44+
}
45+
}
46+
document.write(hv + '<br/>');
47+
for(e=0; e < arr.length; e++){
48+
if(lv > arr[e] || lv == ''){
49+
lv = arr[e];
50+
}
51+
}
52+
document.write(lv + '<br/>');
53+
</script>
54+
55+
<script>
56+
document.write('<br/><br/>' + '<b>Q3: Sort / Reverse</b> [Banana, Apple, Flower, Kela, Lotus, Rose]' + '<br/><br/>' );
57+
58+
var srt = ['Banana', 'Apple', 'Flower', 'Kela', 'Lotus', 'Rose'];
59+
var rslt = srt.sort();
60+
document.write(rslt + '<br/>');
61+
document.write(rslt.reverse());
62+
63+
document.write('<br/><br/>' + '<b>Q4: Sort / Reverse</b> [25, 18, 45, 88, 75, 63, 33, 69, 3, 8, 9, 1]' + '<br/><br/>' );
64+
var srtNum = [25, 18, 45, 88, 75, 63, 33, 69, 3, 8, 9, 1];
65+
var rsltNum = srtNum.sort(function(a,b){return a - b });
66+
document.write(rsltNum + '<br/>');
67+
68+
var srtNum2 = [25, 18, 45, 88, 75, 63, 33, 69, 3, 8, 9, 1];
69+
var rsltNum2 = srtNum2.sort(function(a,b){ return a - b});
70+
document.write(rsltNum2.reverse());
71+
72+
document.write('<br/><br/>' + '<b>Q5: Sort / Reverse with function</b> [25, 18, 45, 88, 75, 63, 33, 69, 3, 8, 9, 1]' + '<br/><br/>' );
73+
var srtNumF = [25, 18, 45, 88, 75, 63, 33, 69, 3, 8, 9, 1];
74+
75+
76+
77+
</script>
78+
79+
80+
</body>
81+
</html>
82+

0 commit comments

Comments
 (0)