Experiment List for Front-end Web development

1. Perform the task to display a welcome message in JavaScript: Use

alert() and console.log() to show a greeting message.

alert('Welcome to JavaScript!');
console.log('Welcome to JavaScript!');

2. Demonstrate the use of variables: Create variables with let, const, and
var, and display their values.

let name = 'Alice';

const age = 25;
var city = 'New York';

console.log('Name:', name);
console.log('Age:', age);
console.log('City:', city);

3. Show how to use basic data types in JavaScript: Demonstrate with

examples of string, number, and boolean.

let str = 'Hello, World!';

let num = 42;
let isActive = true;

console.log('String:', str);
console.log('Number:', num);
console.log('Boolean:', isActive);

4. Perform arithmetic operations in JavaScript: Perform and display

results for addition, subtraction, multiplication, and division.
let a = 10;
let b = 5;

console.log('Addition:', a + b);
console.log('Subtraction:', a - b);
console.log('Multiplication:', a * b);
console.log('Division:', a / b);

5. Demonstrate the use of comparison operators: Use operators like ==,

===, >, and <, and log the results to the console.

let x = 10;
let y = '10';

console.log('x == y:', x == y); // true

console.log('x === y:', x === y); // false
console.log('x > y:', x > y); // false
console.log('x < y:', x < y); // false

6. Write a function that takes two numbers and returns their sum:
Implement a simple JavaScript function to calculate the sum of two
numbers

function add(a, b) {
return a + b;
}

console.log('Sum:', add(5, 3));

7. Implement control structures in JavaScript: Use if, else, and switch to

handle different conditions.

let number = 7;

// if-else
if (number > 0) {
 console.log('Positive number');
} else {
console.log('Non-positive number');
}

// switch
switch (number) {
case 1:
console.log('One');
break;
case 7:
console.log('Seven');
break;
default:
console.log('Other number');
}

8. Write a function to check if a number is even or odd: Use modulus

operator to check the condition.

function isEven(num) {
return num % 2 === 0;
}

console.log('Is 4 even?', isEven(4)); // true

console.log('Is 7 even?', isEven(7)); // false

9. Demonstrate variable scope in JavaScript: Show examples of local vs.

global variables and their accessibility.

let globalVar = 'I am global';

function testScope() {
let localVar = 'I am local';
console.log(globalVar); // Accessible
console.log(localVar); // Accessible
}
testScope();

console.log(globalVar); // Accessible
// console.log(localVar); // Uncaught ReferenceError: localVar is
not defined

10. Write an arrow function that takes two parameters and returns their
product: Create an arrow function to multiply two numbers

const multiply = (a, b) => a * b;

console.log('Product:', multiply(4, 5));

11. Demonstrate the use of promises in JavaScript: Create a promise

and use .then() and .catch() to handle resolved or rejected states.

const myPromise = new Promise((resolve, reject) => {

let success = true;
if (success) {
resolve('Operation successful');
} else {
reject('Operation failed');
}
});

myPromise
.then(result => {
console.log(result);
})
.catch(error => {
console.error(error);
});

12. Access and modify DOM elements: Use document.getElementById()

and document.querySelector() to select and change elements.
document.getElementById('message').textContent = 'Welcome to DOM
manipulation!';
document.querySelector('.text').style.color = 'blue';

13. Handle events in JavaScript: Set up event listeners like click and
hover using addEventListener().

document.getElementById('clickBtn').addEventListener('click', () =>
{
alert('Button clicked!');
});

14. Dynamically change the background color of a webpage: Use

JavaScript to update the background color based on user input

document.getElementById('colorPicker').addEventListener('input',
(event) => {
document.body.style.backgroundColor = event.target.value;
});

15. Use jQuery to manipulate DOM elements: Target and modify

elements using jQuery selectors like $('#id') and $('.class').

$('#myDiv').text('jQuery is fun!');
$('.myClass').css('color', 'green');

16. Add click event listeners to buttons in jQuery: Change the text
content of elements on button click using jQuery

$('#myButton').on('click', function () {
$('#text').text('You clicked the button!');
});
17. Create simple animations in jQuery: Implement animations like
fade-in and fade-out using jQuery effects.

$('#fadeBtn').on('click', function () {
$('#box').fadeOut();
});

18. Perform AJAX requests using jQuery: Fetch data from a remote API
using $.ajax() in jQuery

$('#fetchData').on('click', function () {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts/1',
method: 'GET',
success: function (response) {
$('#data').text(JSON.stringify(response));
},
});
});

19. Toggle the visibility of elements with jQuery: Use jQuery to hide or
show elements based on button clicks.

$('#toggleBtn').on('click', function () {
$('#content').toggle();
});

20. Create a React app using create-react-app: Set up and run your first
React application with create-react-app.

npx create-react-app my-app

cd my-app
npm start
21. Use createElement() to create a React element: Demonstrate how to
create and render a basic React element using React.createElement(

const element = React.createElement('h1', null, 'Hello, React!');

ReactDOM.render(element, document.getElementById('root'));

22. Create a simple React component: Build and render a functional

React component, and pass props to it.

function Greeting({ name }) {

return <h1>Hello, {name}!</h1>;
}

23. Create and use state in a functional React component: Use the
useState hook to manage and update state in a React component.

const [count, setCount] = useState(0);

<button onClick={() => setCount(count + 1)}>Increment</button>

24. Simulate lifecycle methods in functional components: Use the

useEffect hook to simulate componentDidMount and
componentWillUnmount methods.

useEffect(() => {
const interval = setInterval(() => {
console.log('Tick');
}, 1000);

return () => clearInterval(interval);

}, []);
25. Handle user input and dynamically update state in React: Create a
form where user input updates the state using the useState hook.

const [text, setText] = useState('');

<input
type="text"
value={text}
onChange={(e) => setText(e.target.value)}
/>
<p>You typed: {text}</p>