20CSS3 – MEAN Stack Technologies
Module-5
5.a
Course Name: Javascript Module Name: Creating Arrays, Destructuring
Arrays, Accessing Arrays, Array Methods Create an array of objects having
movie details. The object should include the movie name, starring, language,
and ratings. Render the details of movies on the page using the array.
<!DOCTYPE html>
<html>
<head>
<title>Movies</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div style="margin-top:7%">
<center>
<h2>Your Favorite Movies!!</h2>
</center>
</div>
<div class="container" style="padding-top:5%">
<div class="row">
<div class="col-md-4">
<div style="text-align: center;">
<img src="k.jpg" width="200px" height="250px">
</div>
<div style="padding-top:10px;">
<div style="text-align: center; ">
<b><span id="mName0"></span></b></div>
<div style="padding-top:10px;padding-left: 101px;"><b>Language: </b><span id="lang0"></span>
</div>
<div style="padding-left: 100px;"><b>Rating: </b><span id="rating0"></span></div>
</div>
</div>
<div class="col-md-4">
<div style="text-align: center;">
<img src="d.jpg" width="200px" height="250px">
</div>
<div style="padding-top:10px;">
<div style="text-align: center; "><b><span id="mName1"></span></b></div>
<div style="padding-top:10px;padding-left: 95px;"><b>Language: </b><span id="lang1"></span>
</div>
<div style="padding-left: 94px;"><b>Rating:</b><span id="rating1"></span></div>
</div>
</div>
<div class="col-md-4">
<div style="text-align: center;">
<img src="r.jpg" width="200px" height="250px">
</div>
<div style="padding-top:10px;">
<div style="text-align: center; "><b><span id="mName2"></span></b></div>
<div style="padding-top:10px;padding-left: 118px;"><b>Language: </b><span id="lang2"></span>
</div>
<div style="padding-left: 117px;"><b>Rating:</b><span id="rating2"></span></div>
</div>
</div>
</div>
</div>
</body>
<script> const movies = [
name: "KALKI 2892 CE",
language: "TELUGU",
rating: 4.2
},
name: "Deadpool & Wolverine",
language: "English",
rating: 4.0
},
name: "RAJASAAB",
language: "TELUGU",
rating: 4.6
];
document.getElementById("mName0").innerHTML = movies[0].name;
document.getElementById("lang0").innerHTML = movies[0].language;
document.getElementById("rating0").innerHTML = movies[0].rating;
document.getElementById("mName1").innerHTML = movies[1].name;
document.getElementById("lang1").innerHTML = movies[1].language;
document.getElementById("rating1").innerHTML = movies[1].rating;
document.getElementById("mName2").innerHTML = movies[2].name;
document.getElementById("lang2").innerHTML = movies[2].language;
document.getElementById("rating2").innerHTML = movies[2].rating;
</script>
</html>
5.b
Course Name: Javascript Module Name: Introduction to Asynchronous
Programming, Callbacks, Promises, Async and Await, Executing Network
Requests using Fetch API Simulate a periodic stock price change and display
on the console. Hints: (i) Create a method which returns a random number -
use Math.random, floor and other methods to return a rounded value. (ii)
Invoke the method for every three seconds and stop when
<!DOCTYPE html>
<html>
<head>
<title>Stock Price Simulator</title>
</head>
<body>
<h1>Stock Price Simulator</h1>
<p id="stock-price">Current Price: $0</p>
<script>
// Get the HTML element to update
const stockPriceElement = document.getElementById("stock-price");
function generateRandomPrice() {
return Math.floor(Math.random() * 100) + 1; // Generates a number between 1 and 100
// Function to simulate stock price changes
function simulateStockPriceChanges() {
return new Promise((resolve, reject) => {
let count = 0;
const maxCount = 5;
const interval = 3000; // 3 seconds
const intervalId = setInterval(() => {
if (count < maxCount) {
const price = generateRandomPrice();
stockPriceElement.textContent = `Current Price: $${price}`; // Update the HTML element
count++;
} else {
clearInterval(intervalId);
resolve("Simulation completed.");
}, interval);
});
// Invoke the simulation and handle the response
simulateStockPriceChanges()
.then(message => {
stockPriceElement.textContent += ` - ${message}`; // Update the HTML element with the final
message
})
.catch(error => {
console.error(error);
});
</script>
</body>
</html>
5.c
Course Name: Javascript Module Name: Creating Modules, Consuming
Modules Validate the user by creating a login module. Hints: (i) Create a file
login.js with a User class. (ii) Create a validate method with username and
password as arguments. (iii) If the username and password are equal it will
return "Login Successful" else w
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Module</title>
<style>
/* Add some basic styling to make it look neat */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
h1 {
text-align: center;
color: #333;
#login-form {
max-width: 300px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
label {
display: block;
margin-bottom: 10px;
input[type="text"], input[type="password"] {
width: 100%;
height: 40px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
button[type="submit"] {
width: 100%;
height: 40px;
background-color: #4CAF50;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
button[type="submit"]:hover {
background-color: #3e8e41;
</style>
</head>
<body>
<h1>Login Module</h1>
<form id="login-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<button type="submit">Submit</button>
</form>
<script>
// login.js
class User {
/**
@param {string} username
@param {string} password
@returns {string}
*/
validate(username, password) {
if (username === password) {
return "Login Successful";
} else {
return "Unauthorized access";
const form = document.getElementById('login-form');
const user = new User();
form.addEventListener('submit', (e) => {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const result = user.validate(username, password);
alert(result);
});
</script>
</body>
</html>
