Assignment Of Day 1

Introduction to JavaScript

Assignment 1: Create a Simple Alert Message

Task

Create an HTML page with a button that, when clicked, displays an alert box with the message "Welcome to JavaScript!".

Solution

<!DOCTYPE html>

<head>

<title>Alert Message Example</title>

</head>

<body>

<h1>JavaScript Alert Example</h1>

<button onclick="showMessage()">Click Me</button>

function showMessage() {

alert("Welcome to JavaScript!");

}

</script>

</body>

</html>

Explanation

A button is created that triggers the showMessage function when clicked.
The showMessage function uses alert() to display the message "Welcome to JavaScript!".

Assignment 2: Console Log a Message

Task

Create an HTML document that logs "Hello, JavaScript World!" to the browser Console when the page loads.

Solution

<!DOCTYPE html>

<head>

<title>Console Log Example</title>

console.log("Hello, JavaScript World!");

</script>

</head>

<body>

<h1>Open the Console to see the message</h1>

</body>

</html>

Explanation

The <script> tag in the <head> section runs console.log("Hello, JavaScript World!"); as soon as the page loads.
Open the Console in the browser’s developer tools to see the message.

Assignment 3: Display Date and Time

Task

Create an HTML page with a button. When the button is clicked, an alert box should display the current date and time.

Solution

<!DOCTYPE html>

<head>

<title>Date and Time Alert</title>

</head>

<body>

<h1>Display Date and Time</h1>

function displayDateTime() {

let currentDate = new Date();

alert("Current Date and Time: " + currentDate);

}

</script>

</body>

</html>

Explanation

The displayDateTime function is triggered by the button click.
The Date object is used to get the current date and time, which is displayed in an alert box.

Assignment 4: Change Text Content with JavaScript

Task

Create an HTML page with a paragraph and a button. When the button is clicked, change the text inside the paragraph to say, "You clicked the button!"

Solution

<!DOCTYPE html>

<head>

<title>Change Text Content</title>

</head>

<body>

<h1>JavaScript Text Change Example</h1>

<p id="message">Original text here.</p>

<button onclick="changeText()">Click to Change Text</button>

function changeText() {

document.getElementById("message").textContent = "You clicked the button!";

}

</script>

</body>

</html>

Explanation

The changeText function is triggered by the button click.
It accesses the paragraph element with id="message" and updates its textContent property.

Assignment 5: Prompt User Input and Display It

Task

Create an HTML page with a button. When clicked, the button should prompt the user to enter their name, and then display a personalized greeting in an alert box.

Solution

<!DOCTYPE html>

<head>

<title>User Input Example</title>

</head>

<body>

<h1>Get User Input</h1>

<button onclick="greetUser()">Enter Your Name</button>

function greetUser() {

let userName = prompt("Please enter your name:");

if (userName) {

alert("Hello, " + userName + "! Welcome to JavaScript.");

} else {

alert("You didn't enter a name.");

}

</script>

</body>

</html>

Explanation

The greetUser function uses prompt() to get input from the user.
If the user enters a name, it displays a personalized greeting using alert(). If no name is entered, a message indicates this.

Assignment 6: Simple Calculator (Addition Only)

Task

Create an HTML page with two input fields and a button. When the button is clicked, display the sum of the two numbers entered in an alert box.

Solution

<!DOCTYPE html>

<head>

<title>Simple Calculator</title>

</head>

<body>

<h1>JavaScript Addition Calculator</h1>

function addNumbers() {

let number1 = parseFloat(document.getElementById("num1").value);

let number2 = parseFloat(document.getElementById("num2").value);

let sum = number1 + number2;

alert("The sum is: " + sum);

}

</script>

</body>

</html>

Explanation

The addNumbers function retrieves the values from the input fields with id="num1" and id="num2", converts them to numbers using parseFloat(), adds them, and displays the result in an alert box.

Assignment 7: Background Color Changer

Task

Create an HTML page with a button. When the button is clicked, change the background color of the page to a random color.

Solution

<!DOCTYPE html>

<head>

<title>Background Color Changer</title>

</head>

<body>

<h1>JavaScript Background Color Changer</h1>

<button onclick="changeBackgroundColor()">Change Background Color</button>

function getRandomColor() {

let letters = "0123456789ABCDEF";

let color = "#";

for (let i = 0; i < 6; i++) {

color += letters[Math.floor(Math.random() * 16)];

}

return color;

}

function changeBackgroundColor() {

document.body.style.backgroundColor = getRandomColor();

}

</script>

</body>

</html>

Explanation

getRandomColor generates a random color in hexadecimal format.
changeBackgroundColor changes the background color of the body to a randomly generated color.

Assignment 8: Simple Multiplication Table

Task

Create an HTML page with an input field and a button. When a user enters a number and clicks the button, display the multiplication table for that number up to 10 in a list below.

Solution

<!DOCTYPE html>

<head>

<title>Multiplication Table</title>

</head>

<body>

<h1>JavaScript Multiplication Table</h1>

<button onclick="generateTable()">Generate Table</button>

function generateTable() {

let number = parseInt(document.getElementById("num").value);

let tableList = document.getElementById("table");

tableList.innerHTML = ""; // Clear previous table

for (let i = 1; i <= 10; i++) {

let listItem = document.createElement("li");

listItem.textContent = `${number} x ${i} = ${number * i}`;

tableList.appendChild(listItem);

}

</script>

</body>

</html>

Explanation

generateTable retrieves the input number, clears any previous table, and then uses a loop to create and display each line of the multiplication table in a list.

Assignment 9: Counting Characters in an Input

Task

Create an HTML page with a text input field and a counter that shows the number of characters typed in real-time.

Solution

<!DOCTYPE html>

<head>

<title>Character Counter</title>

</head>

<body>

<h1>Real-Time Character Counter</h1>

<p>Character count: <span id="charCount">0</span></p>

function countCharacters() {

let text = document.getElementById("textInput").value;

document.getElementById("charCount").textContent = text.length;

}

</script>

</body>

</html>

Explanation

countCharacters is triggered every time the input changes. It updates the charCount element with the length of the input text.

Assignment 10: Temperature Converter (Celsius to Fahrenheit)

Task

Create an HTML page with an input field for temperature in Celsius. When the user enters a temperature and clicks a button, display the equivalent temperature in Fahrenheit.

Solution

<!DOCTYPE html>

<head>

<title>Temperature Converter</title>

</head>

<body>

<h1>Celsius to Fahrenheit Converter</h1>

<button onclick="convertToFahrenheit()">Convert</button>

<p>Temperature in Fahrenheit: <span id="fahrenheit"></span></p>

function convertToFahrenheit() {

let celsius = parseFloat(document.getElementById("celsius").value);

let fahrenheit = (celsius * 9/5) + 32;

document.getElementById("fahrenheit").textContent = fahrenheit.toFixed(2);

}

</script>

</body>

</html>

Explanation

convertToFahrenheit reads the Celsius value, calculates the Fahrenheit equivalent using the formula, and displays the result.

Assignment 11: Show/Hide Password

Task

Create an HTML page with a password input field and a checkbox. When the checkbox is checked, show the password in plain text; when unchecked, hide it.

Solution

<!DOCTYPE html>

<head>

<title>Show/Hide Password</title>

</head>

<body>

<h1>Password Visibility Toggle</h1>

<label>

<input type="checkbox" onclick="togglePassword()"> Show Password

</label>

function togglePassword() {

let passwordField = document.getElementById("password");

if (passwordField.type === "password") {

passwordField.type = "text";

} else {

passwordField.type = "password";

}

</script>

</body>

</html>

Explanation

togglePassword checks the type of the password field and switches between "password" and "text" to hide/show the password.

Assignment 12: Simple Voting Counter

Task

Create an HTML page with three buttons labeled "Like", "Dislike", and "Neutral". Display counters for each that increase when the respective button is clicked.

Solution

<!DOCTYPE html>

<head>

<title>Voting Counter</title>

</head>

<body>

<h1>Vote Your Opinion</h1>

<button onclick="increaseDislike()">Dislike</button>

<button onclick="increaseNeutral()">Neutral</button>

<p>Likes: <span id="likeCount">0</span></p>

<p>Dislikes: <span id="dislikeCount">0</span></p>

<p>Neutrals: <span id="neutralCount">0</span></p>

let likeCount = 0;

let dislikeCount = 0;

let neutralCount = 0;

function increaseLike() {

likeCount++;

document.getElementById("likeCount").textContent = likeCount;

}

function increaseDislike() {

dislikeCount++;

document.getElementById("dislikeCount").textContent = dislikeCount;

}

function increaseNeutral() {

neutralCount++;

document.getElementById("neutralCount").textContent = neutralCount;

}

</script>

</body>

</html>

Explanation

Each button increases its respective counter and updates the displayed count on the page.

Assignment Of Day 1: Introduction to JavaScript

Solution

Explanation

Explanation

Solution

Explanation

Solution

Explanation

Solution

Solution

Solution

Solution

Explanation

Post a Comment

Assignments On Day 22: JavaScript and CSS Interactions

MSOFFICE101

Contact form

Assignment Of Day 1: Introduction to JavaScript

Solution

Explanation

Explanation

Solution

Explanation

Solution

Explanation

Solution

Solution

Solution

Solution

Explanation

You Might Like

Post a Comment

Contact form