ToSubmitJavaScript (1)

Name : Ajay Pratap Kerketta
Course: Full Stack Development

JDBC Assignment
Batch: 15/9/2023
Email:[email protected]
JavaScript
1.Write a program to demonstrate JavaScript loops, operators and

conditions?
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Loops, Operators, and Conditions</title>
</head>
<body>
<script>
// Variables
const num1 = 10;
const num2 = 5;
// Conditions
document.write('Num1 is greater.<br>');
// While Loop
letwhileCounter = 1;
while (whileCounter<= 5) {
document.write(`While loop iteration ${whileCounter}<br>`);
whileCounter++;
}
// For Loop
for (let forCounter = 1; forCounter<= 5; forCounter++) {
document.write(`For loop iteration ${forCounter}<br>`);
}
// Do-While Loop
letdoWhileCounter = 1;
do {
document.write(`Do while loop iteration ${doWhileCounter}<br>`);
doWhileCounter++;
} while (doWhileCounter<= 5);
// Switch Statement
constdayOfWeek = 'Monday';
switch (dayOfWeek) {
case 'Monday':
document.write('It\'s Monday.<br>');
break;
default:
document.write('It\'s not Monday.<br>');
}
</script>
</body>
</html>
OUTPUT:
2. Write a program to demonstrate different array and string
methods in JavaScript?
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Array and String Methods Demo</title>
</head>
<body>
<h2>Array Methods</h2>
<pre id="array-output"></pre>
<h2>String Methods</h2>
<pre id="string-output"></pre>
<script>
// Array Methods
const numbers = [1, 2, 3, 4, 5];
// 1. push() - Add an element to the end of the array
numbers.push(6);
document.getElementById('array-output').innerText += `push: $
{JSON.stringify(numbers)}\n`;
// 2. pop() - Remove the last element from the array

constpoppedElement = numbers.pop();
document.getElementById('array-output').innerText += `pop: $
{JSON.stringify(numbers)}, popped: ${poppedElement}\n`;
// 3. unshift() - Add an element to the beginning of the array

numbers.unshift(0);
document.getElementById('array-output').innerText += ùnshift: $
// 4. shift() - Remove the first element from the array

constshiftedElement = numbers.shift();
document.getElementById('array-output').innerText += `shift: $
{JSON.stringify(numbers)}, shifted: ${shiftedElement}\n`;
// 5. slice() - Extract a portion of the array

constslicedArray = numbers.slice(1, 4);
document.getElementById('array-output').innerText += `slice: $
{JSON.stringify(numbers)}, sliced: ${JSON.stringify(slicedArray)}\n`;
// 6. splice() - Remove or replace elements at a specific index

numbers.splice(2, 1, 'a', 'b');
document.getElementById('array-output').innerText += `splice: $
// 7. indexOf() - Find the index of a specific element

const index = numbers.indexOf('a');
document.getElementById('array-output').innerText += ìndexOf: ${index}\n`;
// String Methods
const greeting = 'Hello, World!';
// 8. length - Get the length of the string
conststringLength = greeting.length;
document.getElementById('string-output').innerText += `length: $
{stringLength}\n`;
// 9. toUpperCase() - Convert the string to uppercase

constupperCaseGreeting = greeting.toUpperCase();
document.getElementById('string-output').innerText += `toUpperCase: $
{upperCaseGreeting}\n`;
// 10. toLowerCase() - Convert the string to lowercase

constlowerCaseGreeting = greeting.toLowerCase();
document.getElementById('string-output').innerText += `toLowerCase: $
{lowerCaseGreeting}\n`;
// 11. charAt() - Get the character at a specific index

constcharAtIndex = greeting.charAt(7);
document.getElementById('string-output').innerText += `charAt: $
{charAtIndex}\n`;
// 12. substring() - Extract a portion of the string

const substring = greeting.substring(7, 12);
document.getElementById('string-output').innerText += `substring: $
{substring}\n`;
// 13. replace() - Replace a substring with another substring

constreplacedString = greeting.replace('World', 'Universe');
document.getElementById('string-output').innerText += `replace: $
{replacedString}\n`;
// 14. split() - Split the string into an array of substrings

constsplitArray = greeting.split(', ');
document.getElementById('string-output').innerText += `split: $
{JSON.stringify(splitArray)}\n`;
// 15. includes() - Check if a string includes another string
constincludesCheck = greeting.includes('Hello');
document.getElementById('string-output').innerText += ìncludes: $
{includesCheck}\n`;
// 16. indexOf() - Find the index of a specific substring

constindexOfSubstring = greeting.indexOf('World');
document.getElementById('string-output').innerText += ìndexOf: $
{indexOfSubstring}\n`;
// 17. trim() - Remove whitespaces from the beginning and end of a string
conststringWithWhitespaces = ' Trim Me! ';
consttrimmedString = stringWithWhitespaces.trim();
document.getElementById('string-output').innerText += `trim: $
{trimmedString}\n`;
</script>
</body>
</html>
OUTPUT:
3.Write a program to show different ways to create a function
in JavaScript?
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Function Creation in JavaScript</title>
</head>
<body>
<script>
// 1. Function Declaration
functiondeclarationFunction(name) {
return `Hello, ${name} (Function Declaration)`;
}
// 2. Function Expression
constexpressionFunction = function(name) {
return `Hello, ${name} (Function Expression)`;
};
// 3. Arrow Function
constarrowFunction = (name) => `Hello, ${name} (Arrow Function)`;
// 4. Function Constructor (not recommended due to security and
performance concerns)
constconstructorFunction = new Function('name', 'return "Hello, " +
name + " (Function Constructor)"');
// 5. Immediately Invoked Function Expression (IIFE)
constiifeResult = (function(name) {
return `Hello, ${name} (IIFE)`;
})('Eve');
// 6. Generator Function
function* generatorFunction(name) {
yield `Hello, ${name} (Generator Function)`;
}
// 7. Function returning a Function
functioncreateGreeter(greeting) {
return function(name) {
return `${greeting}, ${name} (Returned Function)`;
};
}
constgreetWithHey = createGreeter('Hey');
// 8. Object Method
constobj = {
method: function(name) {
return `Hello, ${name} (Object Method)`;
}
};
// Displaying the results on the page
document.write('<p>' + declarationFunction('Alice') + '</p>');
document.write('<p>' + expressionFunction('Bob') + '</p>');
document.write('<p>' + arrowFunction('Charlie') + '</p>');
document.write('<p>' + constructorFunction('Dave') + '</p>');
document.write('<p>' + iifeResult + '</p>');
const generator = generatorFunction('World');

document.write('<p>' + generator.next().value + '</p>');
document.write('<p>' + greetWithHey('Frank') + '</p>');

document.write('<p>' + obj.method('Grace') + '</p>');
</script>
</body>
</html>
OUTPUT:
4. Write a program to implement pomodoro using JavaScript
DOM?
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pomodoro Timer</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
}
.row {
display: flex;
width: 100%;
height: 70px;
margin: 5px 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
#timer-container {
background-color: #333;
}
#timer {
font-size: 3em;
color: white;
}
#controls, #buttons {
background-color: #4CAF50;
}
button {
font-size: 1.2em;
margin: 0 5px;
padding: 10px 15px;
cursor: pointer;
border: none;
border-radius: 5px;
}
#session-length, #break-length {
font-size: 1.5em;
margin: 0 10px;
padding: 10px 20px;
border-radius: 30px;
text-align: center;
color: white;
}
#reset, #start {
background-color: #000000;
color: white;
}
</style>
</head>
<body>
<div id="timer-container" class="row">
<div id="timer">25:00</div>
</div>
<div id="controls" class="row">

<button id="session-decrement">-</button>
<div id="session-length">25</div>
<button id="session-increment">+</button>
<button id="break-decrement">-</button>
<div id="break-length">5</div>
<button id="break-increment">+</button>
</div>
<div id="buttons" class="row">

<button id="reset">Reset</button>
<button id="start">Start</button>
</div>
<script>
let timer;
lettimeLeft = 25 * 60; // Initial time in seconds
letisRunning = false;
functionupdateTimerDisplay() {
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
document.getElementById('timer').innerText = `${String(minutes).padStart(2,
'0')}:${String(seconds).padStart(2, '0')}`;
}
functionstartTimer() {
if (!isRunning) {
timer = setInterval(() => {
if (timeLeft> 0) {
timeLeft--;
updateTimerDisplay();
} else {
clearInterval(timer);
isRunning = false;
alert('Pomodoro session completed!');
}
}, 1000);
isRunning = true;
}
}
functionresetTimer() {
clearInterval(timer);
isRunning = false;
timeLeft = 25 * 60;
}
document.getElementById('session-decrement').addEventListener('click', () => {
constsessionLengthElement = document.getElementById('session-length');
letsessionLength = parseInt(sessionLengthElement.innerText);
if (sessionLength> 1) {
sessionLength--;
sessionLengthElement.innerText = sessionLength;
if (!isRunning) {
timeLeft = sessionLength * 60;
}
}
});
document.getElementById('session-increment').addEventListener('click', () => {
constsessionLengthElement = document.getElementById('session-length');
letsessionLength = parseInt(sessionLengthElement.innerText);
if (sessionLength< 60) {
sessionLength++;
sessionLengthElement.innerText = sessionLength;
if (!isRunning) {
timeLeft = sessionLength * 60;
}
}
});
document.getElementById('break-decrement').addEventListener('click', () => {
constbreakLengthElement = document.getElementById('break-length');
letbreakLength = parseInt(breakLengthElement.innerText);
if (breakLength> 1) {
breakLength--;
breakLengthElement.innerText = breakLength;
}
});
document.getElementById('break-increment').addEventListener('click', () => {
constbreakLengthElement = document.getElementById('break-length');
letbreakLength = parseInt(breakLengthElement.innerText);
if (breakLength< 60) {
breakLength++;
breakLengthElement.innerText = breakLength;
}
});
document.getElementById('start').addEventListener('click', startTimer);
document.getElementById('reset').addEventListener('click', resetTimer);
</script>
</body>
</html>
OUTPUT:
5. Write a program to implement swap 1 to 9 numbers using drag
and drop?
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Swap Numbers</title>
<style>
body {
display: flex;
height: 100vh;
margin: 0;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 50px);
grid-template-rows: repeat(3, 50px);
border: 1px solid black;
}
.cell {
width: 48px;
height: 48px;
background-color: lightgray;
text-align: center;
line-height: 48px;
font-size: 16px;
cursor: pointer;
border: 1px solid black;
float: left;
}
.cell:nth-child(3n+1) {
clear: left;
}
</style>
</head>
<body>
<div class="grid" id="grid">

<div class="cell" id="1" draggable="true" ondragstart="dragStart(event)"
ondragover="dragOver(event)" ondrop="drop(event)">1</div>
</div>
<script>
letdragSrcEl = null;
functiondragStart(event) {
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData('text/html', event.target.innerHTML);
dragSrcEl = event.target;
}
functiondragOver(event) {
if (event.preventDefault) {
event.preventDefault();
}
event.dataTransfer.dropEffect = 'move';
return false;
}
function drop(event) {
if (event.stopPropagation) {
event.stopPropagation();
}
if (dragSrcEl !== event.target) {
dragSrcEl.innerHTML = event.target.innerHTML;
event.target.innerHTML = event.dataTransfer.getData('text/html');
}
return false;
}
</script>
</body>
</html>
OUTPUT:
6. Demonstrate all ES6 concepts with examples.

<!DOCTYPE html>
<html lang="en">
<head>
<title>ES6 Concepts</title>
</head>
<body>
<script>
// 1. let and const

letvariableExample = 'I can be changed';
constconstantExample = 'I cannot be changed';
// 2. Arrow Functions
const add = (a, b) => a + b;
const multiply = (a, b) => {
return a * b;
};
// 3. Template literals
const name = 'John';
const greeting = `Hello, ${name}!`;
// 4. Destructuring assignment
const person = { firstName: 'Alice', lastName: 'Doe' };
const { firstName, lastName } = person;
// 5. Default parameters
const greet = (name = 'Guest') => `Hello, ${name}!`;
// 6. Spread and rest operators

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
constcombinedArray = [...arr1, ...arr2];
constsumNumbers = (...numbers) =>numbers.reduce((acc, num) =>acc + num,

0);
// 7. Classes
class Animal {
constructor(name) {
this.name = name;
}
makeSound() {
return 'Generic animal sound';
}
}
class Dog extends Animal {

makeSound() {
return 'Woof!';
}
}
constmyDog = new Dog('Buddy');
// 8. Promises
constfetchData = () => {
return new Promise((resolve, reject) => {
// Simulating asynchronous data fetching
setTimeout(() => {
const data = 'Fetched data';
resolve(data);
}, 2000);
});
};
fetchData()
.then(data => console.log('Data:', data))
.catch(error =>console.error('Error:', error));
</script>
</body>
</html>

ToSubmitJavaScript (1)

Uploaded by

Copyright:

Available Formats

ToSubmitJavaScript (1)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ToSubmitJavaScript (1)

Uploaded by

Copyright:

Available Formats

Name : Ajay Pratap Kerketta

Course: Full Stack Development

1.Write a program to demonstrate JavaScript loops, operators and

// 2. pop() - Remove the last element from the array

// 3. unshift() - Add an element to the beginning of the array

// 4. shift() - Remove the first element from the array

// 5. slice() - Extract a portion of the array

// 6. splice() - Remove or replace elements at a specific index

// 7. indexOf() - Find the index of a specific element

// 9. toUpperCase() - Convert the string to uppercase

// 10. toLowerCase() - Convert the string to lowercase

// 11. charAt() - Get the character at a specific index

// 12. substring() - Extract a portion of the string

// 13. replace() - Replace a substring with another substring

// 14. split() - Split the string into an array of substrings

// 16. indexOf() - Find the index of a specific substring

const generator = generatorFunction('World');

document.write('<p>' + greetWithHey('Frank') + '</p>');

<div id="controls" class="row">

<div id="buttons" class="row">

<div class="grid" id="grid">

6. Demonstrate all ES6 concepts with examples.

// 1. let and const

// 6. Spread and rest operators

constsumNumbers = (...numbers) =>numbers.reduce((acc, num) =>acc + num,

class Dog extends Animal {

constmyDog = new Dog('Buddy');

You might also like