Sona College of Technology

(An Autonomous Institution)

Department of Computer Science and Engineering

Course Code: U19CS602 Course Name: Full Stack Development

1. JavaScript Form Validation using a Sample Registration Form. Following pictorial shows in which
field, what validation you want to impose.

2. Write JavaScript for the following. Provide a text box for the user to enter user name. Validate the
user name must contain eight characters. Provide submit button for the validation to happen. On
successful validation display a new page with an image and two textboxes for entering width and
height of the image respectively with a resize button at the bottom of the image. On clicking the
resize button validate the width and height on successful validation display the image.

3. Create a functional component that renders a text input field and displays a list of the strings that the
user has entered below it. Each string in the list should be displayed wholly if it has fewer than 6
characters. If not, it should be displayed as the first five characters of the string followed by ellipses.
When the user clicks on a string from the list, a modal should popup containing the complete text of
the string. The modal should be centered on the page, and it should block the input field. The modal
should close when the user clicks outside of it (you should add a border or background to the modal to
test that this functionality is included).
The picture below shows the component after the user has entered three strings: “Hi, my name is
Justin”, “What is your name?”, and “hello”.
The picture below is the state of the component after the user selects “Hi, m…” from the page above.

Again, the black square will only disappear and reveal the input field and list when the user clicks outside
of it.
Starter Code (App.js)
Use the environment you are most comfortable with. I recommend using create-react-app to create a local
version of the project so that you can inspect easily from your browser when debugging. Alternatively, you
can work from a blank React template in CodeSandbox. Here is some code to get you started:
import React, { useEffect, useState, useRef } from "react";
function App() {
const [input, setInput] = useState("");
const [list, setList] = useState([]);
const [modalOpen, setModalOpen] = useState(false);
const [modalText, setModalText] = useState("");
const modalRef = useRef();

//Your Code Here

}
export default App;

4. Write a functional component that allows a user to enter ratings on the five-star system. The
component should initially display five empty stars in a row. When the user hovers over a star, that star
as well as all the stars that come before it in the row should become filled (both the empty star and
filled star image URLs are provided in the started code below). When the user stops hovering over the
star, the component should return to its starting state. Further, if a user clicks on a star, then the
component should continue to display that rating even after the user stops hovering; the component
should reset only after the user hovers on a star that comes before the clicked star. If the user hovers
over later stars, the component should fill those stars but should still display the clicked rating after the
hover ends.
Starter Code (App.js)
import React from "react";
import { useState } from "react";
const EMPTY_STAR =
"https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/1088px-Five-
pointed_star.svg.png";
const FULL_STAR =
"https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Gold_Star.svg/1200px-
Gold_Star.svg.png";

function App() {
return <StarRating />;
}

const StarRating = () => {

//Your Code Here
};
export default App;

5. Write a functional component for a button that grows (in height and width) by a constant every second,
beginning as soon as the component renders. When the user clicks the button, it should start to instead
shrink at the same rate. If they click it again, it should switch back to growing, and so on. The title of
the button should reflect this behavior (i.e. it should say “Shrink” if it is currently growing and “Grow”
if it currently shrinking). You should also establish minimum and maximum sizes beyond which the
button will not shrink or grow, respectively.
Starter Code (App.js)
import React, { useEffect, useState } from "react";

function App() {
return (
<div style={{ display: "flex", justifyContent: "center", marginTop: 30 }}>
<GrowingButton />
</div>
);
}

const GrowingButton = () => {

//Your Code Here
};

export default App;

6. Open MongoDB - Create an imdb database with a collection of films, Switch to database imdb,
insert the following documents
{
"title": "Star Trek Into Darkness",
 "year": 2013,
"genre": [
"Action",
"Adventure",
"Sci-Fi"
],
"actors": [
"Pine, Chris",
"Quinto, Zachary",
"Saldana, Zoe"
],
"releases": [
{
"country": "USA",
"date": ISODate("2013-05-17"),
"prerelease": true
},
{
"country": "Germany",
"date": ISODate("2003-05-16"),
"prerelease": false
}
]
}

{
"title": "Iron Man 3",
"year": 2013,
"genre": [
"Action",
"Adventure",
"Sci-Fi"
],
"actors": [
"Downey Jr., Robert",
"Paltrow, Gwyneth"
]
}

{
"title": "This Means War",
"year": 2011,
"genre": [
"Action",
"Comedy",
"Romance"
],
 "actors": [
"Pine, Chris",
"Witherspoon, Reese",
"Hardy, Tom"
],
"releases": [
{
"country": "USA",
"date": ISODate("2011-02-17"),
"prerelease": false
},
{
"country": "UK",
"date": ISODate("2011-03-01"),
"prerelease": true
}
]
}

{
"title": "This Means War",
"year": 2011,
"genre": [
"Action",
"Comedy",
"Romance"
],
"actors": [
"Pine, Chris",
"Witherspoon, Reese",
"Hardy, Tom"
],
"releases": [
{
"country": "USA",
"date": ISODate("2011-02-17"),
"prerelease": false
},
{
"country": "UK",
"date": ISODate("2011-03-01"),
"prerelease": true
}
]
}

1. return all films with title "Iron Man 3"

 2. List all movies that start with the letter T (use projection)
3. returns the titles of all films starting with the letter T where the year attribute is greater
than 2009 and less than or equal to 2011
4. Print movies with undefined releases
5. returns the title and releases of every movie that is known to be released in the UK

7. MongoDB - Insert the following documents into a movies collection.

title : Fight Club
writer : Chuck Palahniuk
year : 1999
actors : [
Brad Pitt
Edward Norton
]

title : Pulp Fiction

writer : Quentin Tarantino
year : 1994
actors : [
John Travolta
Uma Thurman
]

title : Inglorious Basterds

writer : Quentin Tarantino
year : 2009
actors : [
Brad Pitt
Diane Kruger
Eli Roth
]

title : The Hobbit: An Unexpected Journey

writer : J.R.R. Tolkein
year : 2012
franchise : The Hobbit

title : The Hobbit: The Desolation of Smaug

writer : J.R.R. Tolkein
year : 2013
franchise : The Hobbit

title : The Hobbit: The Battle of the Five Armies

writer : J.R.R. Tolkein
year : 2012
franchise : The Hobbit
 synopsis : Bilbo and Company are forced to engage in a war against an array of combatants and
keep the Lonely Mountain from falling into the hands of a rising darkness.

title : Pee Wee Herman's Big Adventure

title : Avatar

Query the movies collection to

I. get all documents
II. get all documents with writer set to "Quentin Tarantino"
III. get all documents where actors include "Brad Pitt"
IV. get all documents with franchise set to "The Hobbit"
V. get all movies released in the 90s
VI. get all movies released before the year 2000 or after 2010

8. Create an online-examination web portal. Prepare the questions of your choice. The students should
enter their name and register number before answering the questions. The online exam should contain
at least five questions of type multiple choice. The choice of selection should use radio buttons and
for each correct answer one mark should be awarded. After attempting all questions, proceed with
submit button. After clicking the submit button, display the result with register number, name of the
student and marks. Design a web portal using JavaScript and HTML forms.
9. Create a Node.js application using Express.js that implements a REST API to manage books in a
virtual bookstore.
Requirements:
 Project Setup
o Initialize a Node.js project using npm.
o Install required packages such as express and body-parser. You may
also use mongoose if connecting to a MongoDB database.
 Define Book Model
o Each book should include the following properties:
 bookId (number)
 title (string)
 author (string)
 price (number)
 available (boolean)
 Implement the following RESTful routes using Express.js:
o [POST] /books – Add a new book
o [GET] /books – List all books
o [GET] /books/:id – Retrieve a specific book by its bookId
o [PUT] /books/:id – Update details of a specific book
o [DELETE] /books/:id – Delete a specific book

If you’re not using MongoDB, you can store data in an in-memory array.

 Input Validation and Error Handling

o Ensure proper validation for missing or incorrect fields
o Handle cases such as book not found, unsupported routes, etc.
10.Create a Node.js program to read a text file and count the number of words in it.
Requirements:
 Accept a filename as input from the user.
 Read the contents of the file using Node.js fs module.
 Count the number of words in the file.
 Display the total word count in the console.