Coding Problems with solution – Web Computing
Javascript
JavaScript Code for Email Validation check for @ in input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Validation</title>
</head>
<body>
<label for="email">Enter your email:</label>
<input type="text" id="email" placeholder="example@example.com">
<button onclick="validateEmail()">Check Email</button>
<p id="result"></p>
<script>
function validateEmail() {
// Get the value from the input field
var email = document.getElementById("email").value;
// Check if the email contains the "@" symbol
if (email.includes("@")) {
document.getElementById("result").innerHTML = "Email is valid!";
} else {
document.getElementById("result").innerHTML = "Email is invalid. Please include '@' in the email.";
}
}
</script>
</body>
</html>
JavaScript Code for Displaying a Digital Clock on a Web Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Clock</title>
</head>
<body>
<div id="clock"></div>
<script>
function updateClock() {
var now = new Date();
var timeString = now.toLocaleTimeString();
document.getElementById("clock").innerHTML = timeString;
}
setInterval(updateClock, 1000);
updateClock();
</script>
</body>
</html>
Javascript code for background color of the web page automatically after every 5 seconds.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Color Change</title>
<script>
function changeBackgroundColor() {
const colors = ['red', 'blue', 'green'];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
document.body.style.backgroundColor = randomColor;
}
setInterval(changeBackgroundColor, 5000);
</script>
</head>
<body>
<h1>Automatic Background Color Change</h1>
</body>
</html>To display three radio buttons on the web page, namely, “Red”, “Blue” and “Green”. Selecting any button changes the background color as per the name of the button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Background Color</title>
</head>
<body>
<form>
<label>
<input type="radio" name="color" value="red" onclick="changeBackgroundColor(this.value)">
Red
</label>
<label>
<input type="radio" name="color" value="blue" onclick="changeBackgroundColor(this.value)">
Blue
</label>
<label>
<input type="radio" name="color" value="green" onclick="changeBackgroundColor(this.value)">
Green
</label>
</form>
<script>
function changeBackgroundColor(color) {
document.body.style.backgroundColor = color;
}
</script>
</body>
</html>JavaScript Code for Setting a Cookie on the User’s Computer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Cookie</title>
</head>
<body>
<script>
// Function to set a cookie
function setCookie(cookieName, cookieValue, expirationDays) {
var d = new Date();
d.setTime(d.getTime() + (expirationDays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cookieName + "=" + cookieValue + "; " + expires + "; path=/";
}
// Example: set a cookie named "username" with the value "JohnDoe" that expires in 7 days
setCookie("username", "JohnDoe", 7);
</script>
</body>
</html>
JavaScript Code for Accepting Two Numbers and Displaying Their Sum
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sum Calculator</title>
</head>
<body>
<label for="num1">Enter the first number:</label>
<input type="number" id="num1" placeholder="Enter a number">
<br>
<label for="num2">Enter the second number:</label>
<input type="number" id="num2" placeholder="Enter another number">
<br>
<button onclick="calculateSum()">Calculate Sum</button>
<p id="result"></p>
<script>
function calculateSum() {
// Get values from input fields
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
// Check if the input is valid
if (isNaN(num1) || isNaN(num2)) {
document.getElementById("result").innerHTML = "Please enter valid numbers.";
} else {
// Calculate the sum
var sum = num1 + num2;
// Display the result
document.getElementById("result").innerHTML = "The sum is: " + sum;
}
}
</script>
</body>
</html>
React
React Code for “Greet the User” Button and Alert Box
import React from 'react';
class GreetButton extends React.Component {
greetUser = () => {
// Display an alert with a greeting
alert('Hello, User! Welcome!');
};
render() {
return (
<div>
<button onClick={this.greetUser}>Greet the User</button>
</div>
);
}
}
export default GreetButton;
import React from 'react';
import GreetButton from './GreetButton';
class App extends React.Component {
render() {
return (
<div>
<h1>Welcome to My App</h1>
<GreetButton />
</div>
);
}
}
export default App;
Nodejs
Creating a Simple Server to Display a “Welcome” Message
// Importing the http module
const http = require('http');
// Creating a simple server
const server = http.createServer((req, res) => {
// Setting the response header
res.writeHead(200, { 'Content-Type': 'text/plain' });
// Sending the response (in this case, a "Welcome" message)
res.end('Welcome to the Node.js Server!\n');
});
// Listening on port 3000
const PORT = 3000;
server.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
Code for Creating a Simple Text File with User-Provided Data
const fs = require('fs');
const readline = require('readline');
// Create a readline interface for reading user input
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});
// Ask the user for input
rl.question('Enter data to be written to the file: ', (userData) => {
// Close the readline interface
rl.close();
// Specify the file name (you can customize this)
const fileName = 'output.txt';
// Write the user-provided data to the file
fs.writeFile(fileName, userData, (err) => {
if (err) {
console.error('Error writing to the file:', err);
} else {
console.log(`Data written to ${fileName} successfully.`);
}
});
});
Advanced React
Write the code making use of Hooks useState function that displays the number of times button named “CLICK” is clicked
import React, { useState } from "react";
function App() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={handleClick}>CLICK</button>
<p>You have clicked the button {count} times.</p>
</div>
);
}
export default App;