Scribd
Upload
31 views103 pages

Web Tech Final

The document is a lab record for the Web Technologies Laboratory at Sri Ramakrishna Engineering College for the academic year 2024-2025. It includes a certification for a student named Akshaya R, along with an index of experiments conducted, such as HTML tag studies and webpage creation. The record outlines various HTML tags, their descriptions, syntax, and examples, demonstrating the practical applications of web technologies in the curriculum.

Uploaded by

akshaya180612
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
31 views103 pages

Web Tech Final

The document is a lab record for the Web Technologies Laboratory at Sri Ramakrishna Engineering College for the academic year 2024-2025. It includes a certification for a student named Akshaya R, along with an index of experiments conducted, such as HTML tag studies and webpage creation. The record outlines various HTML tags, their descriptions, syntax, and examples, demonstrating the practical applications of web technologies in the curriculum.

Uploaded by

akshaya180612
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 103

SRI RAMAKRISHNA ENGINEERING COLLEGE

[Educational Service: SNR Sons Charitable Trust]


[Autonomous Institution, Reaccredited by NAAC with ‘A+’ Grade]
[Approved by AICTE and Permanently Affiliated to Anna University, Chennai]
[ISO 9001-2015 Certified and all eligible programmes Accredited by NBA]
VATTAMALAIPALAYAM, N.G.G.O. COLONY
POST, COIMBATORE – 641 022

DEPARTMENT OF COMPUTER SCIENCE AND


ENGINEERING

LAB RECORD

ACADEMIC YEAR: 2024 - 2025

20CS279 -WEB TECHNOLOGIES LABORATORY

NOVEMBER 2024
SRI RAMAKRISHNA ENGINEERING COLLEGE
[Educational Service: SNR Sons Charitable Trust]
[Autonomous Institution, Reaccredited by NAAC with ‘A+’ Grade]
[Approved by AICTE and Permanently Affiliated to Anna University, Chennai]
[ISO 9001-2015 Certified and all eligible programs Accredited by NBA]
VATTAMALAIPALAYAM, N.G.G.O. COLONY POST, COIMBATORE – 641
022

Department of Computer Science and Engineering

CLASS: III B. E CSE & M. Tech CSE (5 Year Int. course) SEMESTER: V

Certified that this is the bonafide record of work done by


Mr. / Ms. AKSHAYA R in the 20CS212

WEB TECHNOLOGIES LABORATORY of this institution for V Semester during

the academic year 2024 - 2025.

Faculty In-Charge Professor &

Head Date:

REGISTER NUMBER
71812201017

Submitted for the V semester B.E and M. Tech practical examination held on

Internal Examiner Subject Expert


INDEX

Exp. No Date Name of the Experiment Page No.

1. 9/7/2024 Study On HTML Tags 1

2a. 16/7/2024 Simple Webpage Creation using HTML 8

2b. 23/7/2024 Registration Form Creation using HTML 10

3. 30/7/2024 Hotspot Creation 15

4. 13/8/2024 Blog Creation Using HTML5 17

5. 27/8/2024 College Website using HTML and CSS 19

6. 10/9/2024 Shopping Website using HTML and CSS 23

7. 17/9/2024 Basic Javascript Programs 28

8. 24/9/2024 Programs using DOM 48

9. 1/10/2024 Webpage Generation using NodeJS 52

10. 8/10/2024 Webpage Generation using ReactJS 56

11. 15/10/2024 Webpage Generation using NodeJS 60

12. 22/10/2024 Connecting NOSQL Databases Server 68


using NodeJS

Capstone Recipe Book Application 69


EX.NO: 1
STUDY ON HTML TAGS

DATE:09/07/2024

AIM:
To study and demonstrate the purpose of HTML tags.

TAGS:
1. Comment tag
Description:
 The comment tag is used to insert comments in the source code.
 Comments are not displayed in the browsers.
 You can use comments to explain your code, which can help you when you edit the
source code at a later date.
 This is especially useful if you have a lot of code.
Syntax:
<!-- statements -->
Eg:
<!-- function display "Hello World!" //-->

2. <!DOCTYPE> tag
Description:
 All HTML documents must start with a <!DOCTYPE> declaration.
 The declaration is not an HTML tag. It is an "information" to the browser about what
document type to expect.
Syntax:
<!DOCTYPE html>

Eg
: <!DOCTYPE html>
<html>
<head>
<title>Study on HTML tags</title>
</head>
<body>
<p> The villagers are very simple-hearted people. They know no cunning.
They are pure in their thoughts and actions. </p>
</body>
</html>

AKSHAYA R (71812201017)

1
3. <html> tag
Description:
 The <html> tag represents the root of an HTML document.
 The <html> tag is the container for all other HTML elements (except for
the <!DOCTYPE> tag).
Syntax:
<html> … </html>
Eg
: <!DOCTYPE html>
<html lang="en">
<head>
<title> HTML tag tutorial </title>
</head>
<body>
<p> The villagers are very simple-hearted people. They know no cunning.
They are pure in their thoughts and actions. </p>
</body>
</html>

4. <head> tag
Description:
 The <head> element is a container for metadata (data about data) and is placed
between the <html> tag and the <body> tag.
 Metadata is data about the HTML document.
 Metadata is not displayed.
 Metadata typically define the document title, character set, styles, scripts, and other
meta information.
Syntax:
<head> … </head>
Eg:
<head> <title> HTML tag tutorial </title> </head>

5. <body> tag
Description:
 The <body> tag defines the document's body.
 The <body> element contains all the contents of an HTML document, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.
Syntax:
<body> … </body>
Eg
: <body>
<h1> Paragraph about Village </h1>
<p> The villagers are very simple-hearted people. They know no cunning. They are
pure in their thoughts and actions. </p>
</body>

AKSHAYA R (71812201017)

2
6. <title> tag
Description:
 The <title> tag defines the title of the document.
 The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
 The <title> tag is required in HTML documents!
 The contents of a page title is very important for search engine optimization (SEO).
 The page title is used by search engine algorithms to decide the order when listing
pages in search results.
 The <title> element:
 defines a title in the browser toolbar
 provides a title for the page when it is added to favourites
 displays a title for the page in search-engine results
Syntax:
<title> Title of web page </title>
Eg:
<title> HTML tag tutorial </title>

7. <p> tag
Description:
 The <p> tag defines a paragraph.
 Browsers automatically add a single blank line before and after each <p> element.
Syntax:
<p> Paragraph Contents </p>
Eg
: <body>
<p> The villagers are very simple-hearted people. They know no cunning.
They are pure in their thoughts and actions. </p>
</body>

8. <br> tag
Description:
 The <br> tag inserts a single line break.
 The <br> tag is useful for writing addresses or poems.
 The <br> tag is an empty tag which means that it has no end tag.
Syntax:
<br>
Eg:
<body> <p> The villagers are very simple-hearted people. <br> They know no
cunning. <br> They are pure in their thoughts and actions <br> </p> </body>

9. <a> tag
Description:
 The <a> tag defines a hyperlink, which is used to link from one page to another.
 The most important attribute of the <a> element is the href attribute, which indicates
the link's destination.

AKSHAYA R (71812201017)

3
Syntax:
<a href="website link"> text </a>
Eg:
<a href="https://google.com">To visit Google</a>

10. <b> tag


Description:
 The <b> tag specifies bold text without any extra importance.
Syntax:
<b> Text </b>
Eg:
<p>This is normal text - <b>and this is bold text</b> </p>

11. <i> tag


Description:
 The <i> tag defines a part of text in an alternate voice or mood.
 The content inside is typically displayed in italic.
 The <i> tag is often used to indicate a technical term, a phrase from another language,
a thought, a ship name, etc.
Syntax:
<i> Text </i>
Eg:
<p><i>Lorem ipsum</i> is the most popular filler text in history</p>

12. <u> tag


Description:
 The <u> tag represents some text that is unarticulated and styled differently from
normal text, such as misspelled words or proper names in Chinese text.
 The content inside is typically displayed with an underline.
Syntax:
<u> Text </u>
Eg:
<p>This is some <u> mispeled </u> text</p>

13. <h1> to <h6> Tags


Description:
 The <h1> to <h6> tags are used to define HTML headings.
 <h1> defines the most important heading. <h6> defines the least important heading.
Syntax:
<h1> Text </h1>
<h2> Text </h2>
<h3> Text </h3>
<h4> Text </h4>
<h5> Text </h5>
<h6> Text </h6>

AKSHAYA R (71812201017)

4
Eg
: <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

14. <img> tag


Description:
 The <img> tag is used to embed an image in an HTML page.
 Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.
 The <img> tag has two required attributes:
 src - Specifies the path to the image
 alt - Specifies an alternate text for the image, if the image for some reason cannot
be displayed
Syntax:
<img src="image file" alt="text/website link" width="100" height="100">
Eg:
<img src="Supercar.jpg" alt="www.supercars.com" width="500" height="600">

15. <link> tag


Description:
 The <link> tag defines the relationship between the current document and an external
resource.
 The <link> tag is most often used to link to external style sheets or to add a favicon to
your website.
 The <link> element is an empty element, it contains attributes only.

Syntax:
<head>
<link rel="file type" href="filename.extension">
</head>
Eg
: <head>
<link rel="stylesheet" href="styles.css">
</head>

16. <table> tag


Description:
 The <table> tag defines an HTML table.
 An HTML table consists of one <table> element and one or more <tr>, <th>,
and <td> elements.
 The <tr> element defines a table row, the <th> element defines a table header, and the
<td> element defines a table cell.

AKSHAYA R (71812201017)

5
Syntax:
<table> … </table>
Eg
: <table>
<tr>
<th>Month</th>
<th>Salary</th>
</tr>
</table>

17. <tr> tag


Description:
 The <tr> tag defines a row in an HTML table.
 A <tr> element contains one or more <th> or <td> elements.
Syntax:
<table> <tr> … </tr> </table>
Eg
: <table>
<tr>
<th>Month</th>
<th>Salary</th>
</tr>
</table>

18. <th> tag


Description:
 The <th> tag defines a header cell in an HTML table.
 The text in <th> elements are bold and centered by default.
Syntax:
<table> <tr> <th> … </th> </tr> </table>
Eg
: <table>
<tr>
<th>Month</th>
<th>Salary</th>
</tr>
</table>

19. <td> tag


Description:
 The <td> tag defines a standard data cell in an HTML table.
 The text in <th> elements are bold and centered by default.
Syntax:
<table> <tr> <td> … </td> </tr> </table>

AKSHAYA R (71812201017)

6
Eg
: <table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>

20. <li> tag


Description:
 The <li> tag defines a list item.
 The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu
lists (<menu>).
 In <ul> and <menu>, the list items will usually be displayed with bullet points.
 In <ol>, the list items will usually be displayed with numbers or letters.
Syntax:
<li> Text </li>
Eg
: <ol>
<li>Maths</li>
<li>Physics</li>
<li>Chemistry</li>
</ol>
<ul>
<li>Maths</li>
<li>Physics</li>
<li>Chemistry</li>
</ul>

RESULT:
Thus, the study on HTML tags has been completed successfully.

AKSHAYA R (71812201017)

7
EX.NO: 2. a)
SIMPLE WEBPAGE CREATION USING HTML

DATE:16/07/2024

AIM:
To create a simple webpage using HTML.
ALGORITHM:
Step 1: Start with the html version using DOCTYPE tag.
Step 2: Set the title using <title> tag.
Step 3: Create the heading of the webpage using h1 tag and to align center use align attribute
inside h1 tag.
Step 4: To set the search box, use <input> tag with type text and <button> tag.
Step 5: To divide the webpage into sections use <div> tag.
Step 6: To set image use <img> tag and to embed a paragraph use <p> tag.
Step 7: End
CODE:

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #eaeaea;
}
header {
background-color: #ff6347;
color: white;
padding: 15px;
text-align:
center;
}
nav a:hover {
color: #ff6347;
}
section {
margin-top: 20px;
background-color:
#fff; padding: 20px;
border: 2px solid
#ddd; border-radius:
5px;
}
footer {
margin-top: 20px;
text-align: center;

8
AKSHAYA R (71812201017)

9
}
</style>
</head>
<body>

<header>
<h1>Welcome to My Simple Webpage</h1>
</header>

<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>

<section>
<h2>About This Page</h2>
<p>This is a basic webpage designed using HTML and simple CSS. The structure is clean and easy to
understand, p>
</section>

<footer>
<p>&copy; 2024 Simple Webpage. All rights reserved.</p>
</footer>

</body>
</html>

OUTPUT

RESULT:
Thus, the creation of webpage using HTML has been completed and executed
successfully

AKSHAYA R (71812201017)

10
EX.NO: 2. b)

REGISTRATION FORM CREATION USING HTML

DATE:23/07/2024

AIM:
To create a registration form using HTML.

ALGORITHM:
Step 1: Start with the html version using DOCTYPE tag.
Step 2: Set the title using <title> tag.
Step 3: To create the heading of the webpage using h1-h6 tag and to align center use align
attribute inside h1-h6 tag.
Step 4: Use form tag to create a form.
Step 5: Use label tag to specify a label for an <input> element of a form.
Step 6: To get the input from the user use input tag with type as text to create a textbox.
Step 7: To create a radio button use input tag with type as radio.
Step 8: To create a checkbox button use input tag with type as checkbox.
Step 9: To create buttons use button tag.
Step 10: To create a textbox use textarea tag.
Step 11: End

CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration Form</title>
<style>
@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@300;400;600&display=swap');
body {
font-family: 'Poppins', sans-
serif; background-color:
#e0eafc; margin: 0;
padding: 0;
display: flex;
justify-content:
center; align-items:
center;
AKSHAYA R (71812201017)

11
height: 100vh;
}
.container {
width: 400px;
background-color: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
h2 {
text-align: center;
margin-bottom:
30px; font-weight:
600;
color: #333;
}
.input-group {
position: relative;
margin-bottom: 20px;
}
.input-group input {
width: 100%;
padding: 10px 40px;
border: 1px solid #ccc;
border-radius: 30px;
box-sizing: border-
box; transition: all 0.3s
ease;
}
.input-group input:focus {
border-color:
#4CAF50; outline:
none;
}
.input-group label {
position: absolute;
left: 15px;
top: 50%;

12
transform: translateY(-50%);

AKSHAYA R (71812201017)

13
font-size: 14px;
color: #999;
pointer-events: none;
transition: all 0.3s ease;
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
top: -10px;
left: 15px;
font-size: 12px;
color: #4CAF50;
background-color: white;
padding: 0 5px;
}
.input-group i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-
50%); font-size: 18px;
color: #ccc;
}
.input-group input:focus ~ i {
color: #4CAF50;
}
input[type="submit"] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px;
border: none;
border-radius:
30px; cursor:
pointer;
font-weight: 600;
transition: background-color 0.3s ease;
}

AKSHAYA R (71812201017)

14
input[type="submit"]:hover {
background-color:
#45a049;
}
</style>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>

<div class="container">
<h2>Create Your Account</h2>
<form action="/submit_registration" method="post">
<div class="input-group">
<i class="fas fa-user"></i>
<input type="text" id="fname" name="firstname" placeholder=" " required>
<label for="fname">First Name</label>
</div>
<div class="input-group">
<i class="fas fa-user"></i>
<input type="text" id="lname" name="lastname" placeholder=" " required>
<label for="lname">Last Name</label>
</div>
<div class="input-group">
<i class="fas fa-envelope"></i>
<input type="email" id="email" name="email" placeholder=" " required>
<label for="email">Email</label>
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" id="password" name="password" placeholder=" " required>
<label for="password">Password</label>
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" id="confirmpassword" name="confirmpassword" placeholder=" "
required>
<label for="confirmpassword">Confirm Password</label>
</div>
AKSHAYA R (71812201017)

15
<input type="submit" value="Register">
</form>
</div>

</body>
</html>

OUTPUT:

RESULT:
Thus, the creation of registration form using HTML has been completed and executed
successfully.

AKSHAYA R (71812201017)

16
EX.NO: 3
HOTSPOT CREATION

DATE:30/07/2024

AIM:
To create an image hotspot using HTML.
ALGORITHM:
Step 1: Start with the html version using DOCTYPE tag.
Step 2: Set the title using <title> tag.
Step 3: To create the heading of the webpage using h1-h6 tag and to align center use align
attribute inside h1-h6 tag.
Step 4: To create an image use <img> tag.
Step 5: To make an image as hotspot use map tag along with area tag with shape attribute and
mention the coordinates of the shape using coords attribute.
Step 6: End
CODE:
<!DOCTYPE html>
<html>
<body>
<h2>INDIA MAP</h2>
<p>Click on the Indian States to get information about it</p>

<img src="Indiamap.jpg" alt="India map" usemap="#indiamap" width="590" height="700">

<map name="indiamap">
<area shape="poly" coords="51,223,96,203,125,181,161,229,165,276,113,293,62,269"
alt="Rajasthan" href="https://en.wikipedia.org/wiki/Rajasthan">
<area shape="poly" coords="96,400,146,377,232,377,245,404,162,445,101,448" alt="Maharashtra"
href="https://en.wikipedia.org/wiki/Maharashtra">
<area shape="poly" coords="175,593,204,572,240,563,230,613,187,665,178,613" alt="Tamil Nadu"
href="https://en.wikipedia.org/wiki/Tamil_Nadu">
</map>

</body>
</html>

AKSHAYA R (71812201017)

17
OUTPUT:

RESULT:
Thus, the creation of image hotspot using HTML has been completed and executed
successfully.

AKSHAYA R (71812201017)

18
EX.NO: 4
BLOG CREATION USING HTML5

DATE:13/08/2024

AIM:
To create a personal blog creation using html and css.
ALGORITHM:
Step 1: Start with the html version using DOCTYPE tag.
Step 2: Set the title using <title> tag.
Step 3: Create the <style> tag to define the css properties.
Step 4: Create and define the semantic elements such as <header>, <footer>, <section>,
<aside> and <article> tags.
Step 5: To insert video use <video> tag with width and source of the video.
Step 6: End
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blog Post</title>
<style>
.blog-content {
font-family: 'Arial', sans-
serif; background-color:
white; padding: 20px;
border-radius: 8px;
}
.comment {
padding: 10px;
margin-top:
10px;
border-bottom: 1px solid whitesmoke;
}
</style>
</head>
<body>
<h1>WEB TECH - BLOG</h1>
<div class="blog-content">
AKSHAYA R (71812201017)

19
20
<h2>FRONT-END</h2>
<p>HTML (HyperText Markup Language) serves as the backbone of web content, structuring
elements like headings, paragraphs, and images to build the foundation of a web page.
CSS (Cascading Style Sheets), on the other hand, brings that content to life by styling and
positioning HTML elements, from adjusting colors and fonts to managing layouts, creating an
engaging and visually appealing user experience.</p>
</div>
<div class="comments">
<h3>Comments:</h3>
<div class="comment" style="color: blue;">
<strong>Author:</strong> This is an author comment.
</div>
<div class="comment" style="color: green;">
<strong>Guest:</strong> This is a guest comment. Guests often share their opinions or
questions.
</div>
<div class="comment" style="color: green;">
<strong>Guest:</strong> Another guest comment with some additional thoughts or reactions.
</div>
</div>
</body>
</html>
OUTPUT:

RESULT:
Thus, the creation of personal blog creation using html and css has been completed and
executed successfully.
AKSHAYA R (71812201017)

21
EX.NO: 5
COLLEGE WEBPAGE USING CSS

DATE:27/08/2024

AIM:
To create a college website creation using HTML and CSS.
ALGORITHM:
Step 1: Start with the html version using DOCTYPE tag.
Step 2: Set the college name as website title using <title>
tag. Step 3: Create the <style> tag to define the CSS
properties.
Step 4: Create the menu bar using <div> tag and align it with the help of CSS. Insert the
elements in the menu using <ul> tag.
Step 5: Use <marquee> tag to insert a scrolling area of text or images.
Step 6: End
CODE:
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SREC College</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-
serif; line-height: 1.6;
background-color: #f4f4f4;
}

header {
background-color: #0066cc;
color: white;
padding: 20px 0;
text-align:
center;
}

nav {
background-color: #333;
padding: 10px;
}

nav ul {
list-style: none;

22
AKSHAYA R (71812201017)

23
text-align: center;
}

nav ul li {
display: inline;
margin: 0 15px;
}

nav ul li a {
color: white;
text-decoration: none;
padding: 10px 15px;
}

nav ul li a:hover {
background-color:
#575757; border-radius:
5px;
}

.hero {
background-color: #0044cc;
color: white;
padding: 50px
20px; text-align:
center;
}

.hero h2 {
font-size: 2.5em;
margin-bottom:
10px;
}

.hero p {
font-size: 1.2em;
}

.content {
padding: 20px;
max-width: 1000px;
margin: 20px auto;
background-color:
white; border-radius:
10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.content h2 {
color: #333;
margin-bottom: 15px;
}

.content p {
margin-bottom: 20px;
}

.departments {
display: flex;

24
justify-content: space-between;
AKSHAYA R (71812201017)

25
}

.departments .dept {
background-color:
#f9f9f9; padding: 15px;
text-align: center;
width: 30%;
border-radius:
8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.departments .dept h3 {
color: #0066cc;
margin-bottom:
10px;
}

.departments .dept p {
font-size: 0.9em;
color: #555;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
margin-top: 20px;
}
</style>
</head>
<body>

<header>
<h1>SREC College</h1>
<p>Shaping Bright Minds for a Brighter Future</p>
</header>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Departments</a></li>
<li><a href="#">Admissions</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<section class="hero">
<h2>Welcome to SREC College</h2>
<p>Leading the Way in Education Since 1965</p>
</section>

<section class="content">
<h2>About Our College</h2>
<p>SREC College has a rich history of excellence in education, providing students with the knowledge and
skills they need to succeed in today’s dynamic world. Our mission is to foster intellectual growth and prepare

26
AKSHAYA R (71812201017)

27
students for a successful career.</p>

<h3>Our Departments</h3>
<div class="departments">
<div class="dept">
<h3>Science</h3>
<div class="dept">
<h3>Arts</h3>
<p>Our Arts Department nurtures creativity, offering courses in Literature, History, and Philosophy to
inspire critical thinking.</p>
</div>
<div class="dept">
<h3>Commerce</h3>
<p>The Commerce Department prepares future business leaders, with courses in Economics,
Accounting, and Business Management.</p>
</div>
</div>
</section>

<footer>
<p>&copy; 2024 ABC College | All Rights Reserved</p>
</footer>

</body>
</html>

OUTPUT

RESULT:
Thus, the creation of college website creation using HTML and CSS has been
completed and executed successfully.

AKSHAYA R (71812201017)

28
EX.NO: 6
SHOPPING WEBPAGE USING CSS

DATE:10/09/2024

AIM:
To create a shopping website creation using HTML and CSS.
ALGORITHM:
Step 1: Start with the html version using DOCTYPE tag.
Step 2: Set the college name as website title using <title>
tag. Step 3: Create the <style> tag to define the CSS
properties.
Step 4: Create the menu bar using <div> tag and align it with the help of CSS. Insert the
elements in the menu using <ul> tag.
Step 5: Use <marquee> tag to insert a scrolling area of text or images.
Step 6: End
CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Online Shopping</title>
<style>
/* Basic Reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-
serif; background-color:
#f4f4f4; line-height: 1.6;
}

/* Header */
header {
background-color: #333;
color: white;
padding: 20px;
text-align:
center;
}

header h1 {
margin-bottom: 10px;
}

29
AKSHAYA R (71812201017)

30
header p {
font-size: 1.2em;
}

/* Navigation Bar */
nav {
background-color: #0066cc;
padding: 10px;
}

nav ul {
list-style-type:
none; text-align:
center;
}

nav ul li {
display: inline;
margin: 0 15px;
}

nav ul li a {
color: white;
text-decoration: none;
padding: 10px;
}

nav ul li a:hover {
background-color: #004099;
padding: 10px;
border-radius: 5px;
}

/* Hero Section */
.hero {
background-color: #00509e;
color: white;
text-align: center;
padding: 50px 20px;
margin-bottom:
30px;
}

.hero h2 {
font-size: 2.5em;
}

.hero p {
font-size: 1.3em;
}

/* Product Section */

31
AKSHAYA R (71812201017)

32
.products {
display: flex;
justify-content: space-between;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}

.products .product-card {
background-color:
white; padding: 15px;
width: 30%;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0,
0.1); text-align: center;
}

.products .product-card h3 {
color: #333;
margin-bottom: 15px;
}

.products .product-card p
{ margin-bottom: 15px;
color: #777;
}

.products .product-card .price


{ font-size: 1.2em;
color: #0066cc;
margin-bottom:
15px;
}

.products .product-card button


{ background-color:
#28a745; color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

.products .product-card button:hover


{ background-color: #218838;
}

/* Footer */
footer {
background-color: #333;
color: white;
text-align: center;
AKSHAYA R (71812201017)

33
padding: 20px 0;
margin-top:
30px;
}

</style>
</head>
<body>

<!-- Header Section -->


<header>
<h1>Welcome to Online Shop</h1>
<p>Your one-stop shop for the best products!</p>
</header>

<!-- Navigation Bar -->


<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>

<!-- Hero Section -->


<section class="hero">
<h2>Discover the Latest Trends!</h2>
<p>Shop now and enjoy exclusive discounts on your favorite items.</p>
</section>

<!-- Product Section -->


<section class="products">
<!-- Product 1 -->
<div class="product-card">
<h3>Product 1</h3>
<p>High-quality product that meets all your needs.</p>
<p class="price">$29.99</p>
<button>Add to Cart</button>
</div>

<!-- Product 2 -->


<div class="product-card">
<h3>Product 2</h3>
<p>Stylish and affordable, perfect for any occasion.</p>
<p class="price">$49.99</p>
<button>Add to Cart</button>
</div>

<!-- Product 3 -->


<div class="product-card">
<h3>Product 3</h3>
AKSHAYA R (71812201017)

34
<p>A popular choice for the modern shopper.</p>
<p class="price">$19.99</p>
<button>Add to Cart</button>
</div>
</section>

<!-- Footer Section -->


<footer>
<p>&copy; 2024 Online Shop. All rights reserved.</p>
</footer>

</body>
</html>

OUTPUT:

RESULT:
Thus, the creation of shopping website creation using HTML and CSS has been
completed and executed successfully.

AKSHAYA R (71812201017)

35
EX.NO:7a

SIMPLE JAVASCRIPT PROGRAMS


DATE:17-09-24 -Quadratic equation

AIM:
To write a simple Quadratic equation program using JavaScript.

PROCEDURE:
STEP 1: Open the notepad and define html and script tags.
STEP 2: Get the input from user using parseInt
STEP 3: Print the “Fibonacci series” using document.write
STEP 4: Use for loop to iterate and add both integers
STEP 5: Assign n2 value to n1 and next_sum to n2.
STEP 6: Close the tags
STEP 7: Save file using .js
STEP 8: Run in a browser.

CODE:

```html
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Quadratic Equation
Solver</title>
<style>
body {
font-family: 'Helvetica
Neue', sans-serif;
background-color:
#e0f7fa;
display: flex;
justify-content:
center; align-items:
center; height: 100vh;
margin: 0;
}
.solver-container {
background: #ffffff;
padding: 25px;
border-radius:
15px;
box-shadow: 0 8px
20px rgba(0, 0, 0, 0.15);

AKSHAYA R (71812201017)

36
max-width: 450px;
width: 100%;
}
h2 {
color: #00796b;
margin-bottom:
10px; font-size:
1.5rem;
}
p{
font-size: 0.9rem;
color: #555;
}
form {
display: flex;
flex-direction:
column; align-items:
center;
}
input {
width: calc(100% -
20px);
max-width: 100px;
padding: 10px;
margin: 10px 0;
border: 2px solid
#00796b;
border-radius:
10px; font-size:
1rem;
text-align: center;
}
button {
background-color:
#00796b;
color: #ffffff;
border: none;
padding: 12px
20px; margin-top:
10px; border-radius:
10px; cursor:
pointer;
font-size: 1rem;
transition: background-
color 0.3s ease;
}
button:hover {
background-color:
#004d40;
}
.output {
margin-top: 15px;
AKSHAYA R (71812201017)

37
padding: 15px;
background-color:

AKSHAYA R (71812201017)

38
#e0f2f1;
border-radius: 10px;
border-left: 4px
solid
#00796b;
font-size: 1rem;
text-align: left;
}
</style>
</head>
<body>

<div class="solver-container">
<h2>Quadratic Solver</h2>
<p>Solve: <em>ax² + bx + c
= 0</em></p>
<form id="quadraticForm">
<input type="number"
id="a" placeholder="Enter a"
required>
<input type="number"
id="b" placeholder="Enter b"
required>
<input type="number"
id="c" placeholder="Enter c"
required>
<button
type="submit">Calculate
Roots</button>
</form>

<div class="output"
id="output"></div>
</div>

<script>

document.getElementById('quad
raticForm').addEventListener('su
bmit', (event) => {
event.preventDefault();

const a =
parseFloat(document.getElement
ById('a').value);
const b =
parseFloat(document.getElement
ById('b').value);
const c =
parseFloat(document.getElement
ById('c').value);

AKSHAYA R (71812201017)

39
const output =
document.getElementById('outp
ut');

if (a === 0) {
output.textContent =
'Error: "a" cannot be zero.
This is not a quadratic
equation.';
return;
}

const discriminant = b * b
- 4 * a * c;
let message;

if (discriminant > 0)
{ const root1 = (-b
+
Math.sqrt(discriminant)) / (2
* a);
const root2 = (-b -
Math.sqrt(discriminant)) / (2
* a);
message = `Two real
roots: x₁ = $
{root1.toFixed(2)}, x₂ = $
{root2.toFixed(2)}`;
} else if (discriminant ===
0) {
const root = -b / (2 *
a); message = `One
real
root: x = ${root.toFixed(2)}`;
} else {
const realPart = (-b / (2
* a)).toFixed(2);
const imaginaryPart =
(Math.sqrt(-discriminant) / (2
* a)).toFixed(2);
message =
`Complex roots: x₁ = $
{realPart} +
${imaginaryPart}i, x₂ =
${realPart} -
${imaginaryPart}i`;
}

output.textContent =
message;
});
</script>
AKSHAYA R (71812201017)

40
</body>
</html>

AKSHAYA R (71812201017)

41
OUTPUT:

RESULT:
Thus, the simple Quadratic equation program using JavaScript has been executed successfully
and verified.

AKSHAYA R (71812201017)

42
EX.NO:7b
SIMPLE JAVASCRIPT PROGRAMS
DATE:17-09-24 -Prime number in intervals

AIM:
To write a simple prime number in intervals program using JavaScript.

PROCEDURE:
STEP 1: Open the notepad and define html and script tags.
STEP 2: Get the input from user using parseInt
STEP 3: Print the “Fibonacci series” using document.write
STEP 4: Use for loop to iterate and add both integers
STEP 5: Assign n2 value to n1 and next_sum to n2.
STEP 6: Close the tags
STEP 7: Save file using .js
STEP 8: Run in a browser.

CODE:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Prime Numbers in Interval</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f0f8ff;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

AKSHAYA R (71812201017)

43
}

.prime-container {

background-color: #ffffff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

input {

width: 60px;

padding: 5px;

margin: 10px 5px;

.output {

margin-top: 20px;

padding: 10px;

background-color: #f0f0f0;

border-radius: 4px;

</style>

</head>

<body>

<div class="prime-container">

<h2>Find Prime Numbers in an Interval</h2>

<p>Enter the interval:</p>

<form id="primeForm">

<label>Start: <input type="number" id="start" required></label>

<label>End: <input type="number" id="end" required></label>

<button type="submit">Find Primes</button>

AKSHAYA R (71812201017)

44
</form>

<div class="output" id="output"></div>

</div>

<script>

document.getElementById('primeForm').addEventListener('submit', function(event) {

event.preventDefault();

const start = parseInt(document.getElementById('start').value);

const end = parseInt(document.getElementById('end').value);

const primes = [];

if (start > end || start < 2) {

document.getElementById('output').innerText = 'Please enter a valid range starting


from 2.';

return;

function isPrime(num) {

for (let i = 2, sqrt = Math.sqrt(num); i <= sqrt; i++)

{ if (num % i === 0) return false;

return num > 1;

for (let i = start; i <= end; i++) {

if (isPrime(i)) {

primes.push(i);

const result = primes.length > 0 ? `Prime numbers: ${primes.join(', ')}` : 'No prime
numbers found in this interval.';

document.getElementById('output').innerText = result;

});

AKSHAYA R (71812201017)

45
</script>

</body>

</html>

Output:

RESULT:
Thus, the simple prime number in intervals using JavaScript has been executed successfully
and verified.

AKSHAYA R (71812201017)

46
EX.NO:7c

SIMPLE JAVASCRIPT PROGRAMS


DATE:17-09-24 -Remove duplicate from an array

AIM:
To write a simple Remove duplicate from an array program using JavaScript.

PROCEDURE:
STEP 1: Open the notepad and define html and script tags.
STEP 2: Get the input from user using parseInt
STEP 3: Print the “Fibonacci series” using document.write
STEP 4: Use for loop to iterate and add both integers
STEP 5: Assign n2 value to n1 and next_sum to n2.
STEP 6: Close the tags
STEP 7: Save file using .js
STEP 8: Run in a browser.

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Remove Duplicates
from Array</title>
<style>
body {
font-family: Arial, sans-
serif;
background-color:
#e0f7fa;
display: flex;
justify-content:
center; align-items:
center; height: 100vh;
margin: 0;
}
.container {
background-color:

#ffffff;
padding: 20px;
border-radius:
8px;
box-shadow: 0 4px 8px
AKSHAYA R (71812201017)

47
rgba(0, 0, 0, 0.1);
}
input {
width: 200px;
padding: 5px;
margin: 10px
0;
}
.output {
margin-top: 20px;
padding: 10px;
background-color:
#f0f0f0;
border-radius: 4px;
}
</style>
</head>
<body>

<div class="container">
<h2>Remove Duplicates from
Array</h2>
<p>Enter an array of
numbers (comma-
separated):</p>
<input type="text"
id="arrayInput"
placeholder="e.g.
1,2,2,3,4,4,5">
<button
onclick="removeDuplicates()">
Remove Duplicates</button>

<div class="output"
id="output"></div>
</div>

<script>
function removeDuplicates() {
const input =
document.getElementById('arra
yInput').value;

if (!input) {

document.getElementById('outp
ut').innerText = 'Please enter a
valid array.';
return;
}

const array =
AKSHAYA R (71812201017)

48
input.split(',').map(Number);

if (array.some(isNaN)) {

document.getElementById('outp
ut').innerText = 'Please enter a
valid array of numbers.';
return;
}

const uniqueArray =
[...new Set(array)];

document.getElementById('outp
ut').innerText = `Array without
duplicates:
[${uniqueArray.join(', ')}]`;
}
</script>

</body>
</html>

OUTPUT:

RESULT:
Thus, the simple Remove duplicate from an program using JavaScript has been executed
successfully and verified.

AKSHAYA R (71812201017)

49
EX.NO:7d
SIMPLE JAVASCRIPT PROGRAMS
DATE:17-09-24 -Function Overloading

AIM:
To write a simple Function Overloading program using JavaScript.

PROCEDURE:
STEP 1: Open the notepad and define html and script tags.
STEP 2: Get the input from user using parseInt
STEP 3: Print the “Fibonacci series” using document.write
STEP 4: Use for loop to iterate and add both integers
STEP 5: Assign n2 value to n1 and next_sum to n2.
STEP 6: Close the tags
STEP 7: Save file using .js
STEP 8: Run in a browser.

CODE:

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Function Overloading
Example</title>
<style>
body {
font-family: 'Segoe
UI', sans-serif;
background-color:
#e3f2fd;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color:
#ffffff;
padding: 25px;

AKSHAYA R (71812201017)

50
border-radius: 10px;
box-shadow: 0 6px 12px
rgba(0, 0, 0, 0.15);
max-width: 400px;
width: 100%;
text-align: center;
}
h2 {
color: #00796b;
margin-bottom: 15px;
font-size: 1.4rem;
}
p{
font-size: 0.9rem;
color: #555;
margin-bottom: 20px;
}
input {
width: calc(100% -
20px);
padding: 10px;
margin: 10px 0;
border: 2px solid
#00796b;
border-radius: 8px;
font-size: 1rem;
text-align: center;
}
button {
background-color:
#00796b;
color: #ffffff;
border: none;
padding: 10px
20px; border-radius:
8px; cursor: pointer;
font-size: 1rem;
margin-top: 10px;
transition: background-
color 0.3s ease;
}
button:hover {
background-color:
#004d40;
}
.output {
margin-top: 20px;
padding: 15px;
background-color:
#e0f7fa;

AKSHAYA R (71812201017)

51
border-radius: 8px;
border-left: 4px solid
#00796b;
font-size: 1rem;
text-align: left;
}
</style>
</head>
<body>

<div class="container">
<h2>JavaScript Function
Overloading</h2>
<p>Provide two numbers or
one string:</p>
<input type="text"
id="input1" placeholder="Enter
value 1">
<input type="text"
id="input2" placeholder="Enter
value 2 (optional)">
<button
onclick="handleInput()">Submi
t</button>

<div class="output"
id="output"></div>
</div>

<script>
function handleInput() {
const input1 =
document.getElementById('inp
ut1').value;
const input2 =
document.getElementById('inp
ut2').value;
let result;

if (input2) {
result =
overloadedFunction(input1,
input2);
} else {
result =
overloadedFunction(input1);
}

document.getElementById(

AKSHAYA R (71812201017)

52
if (!isNaN(num1) &&
!isNaN(num2)) {
return num1 + num2;
} else {
return param1 +
param2;
}
} else {
return
param1.split('').reverse().join('');
}
}
</script>

</body>
</html>

OUTPUT:

RESULT:
Thus, the simple Function Overloading program using JavaScript has been executed
successfully and verified.

AKSHAYA R (71812201017)

53
EX.NO:7b

SIMPLE JAVASCRIPT PROGRAMS


DATE:17-09-24 -Convert Date to Time

AIM:
To write a simple Date to Time program using JavaScript.

PROCEDURE:
STEP 1: Open the notepad and define html and script tags.
STEP 2: Get the input from user using parseInt
STEP 3: Print the “Fibonacci series” using document.write
STEP 4: Use for loop to iterate and add both integers
STEP 5: Assign n2 value to n1 and next_sum to n2.
STEP 6: Close the tags
STEP 7: Save file using .js
STEP 8: Run in a browser.

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Date to
Time
Converter</title>
<style>
body {
font-family: Arial, sans-
serif;
background-color:
#f0f8ff;
display: flex;
justify-content:
center; align-items:
center; height: 100vh;
margin: 0;
}
.container {
background-color:

#ffffff;
padding: 20px;
border-radius:
8px;
AKSHAYA R (71812201017)

54
box-shadow: 0 4px
8px

AKSHAYA R (71812201017)

55
rgba(0, 0, 0, 0.1);
}
input {
width: 200px;
padding: 5px;
margin: 10px
0;
}
.output {
margin-top: 20px;
padding: 10px;
background-color:
#f0f0f0;
border-radius: 4px;
}
</style>
</head>
<body>

<div class="container">
<h2>Date to
Time
Converter</h2>
<p>Select a date:</p>
<input type="datetime-local"
id="dateInput">
<button
onclick="convertToTime()">Co
nvert to Time</button>

<div class="output"
id="output"></div>
</div>

<script>
function convertToTime() {
const dateInput =
document.getElementById('date
Input').value;

if (!dateInput) {

document.getElementById('outp
ut').innerText = 'Please select a
valid date and time.';
return;
}

const date =
new Date(dateInput);
const hours
=
AKSHAYA R (71812201017)

56
date.getHours();

AKSHAYA R (71812201017)

57
const minutes
=
date.getMinutes();
const seconds
=
date.getSeconds();

const timeString =
`${formatTime(hours)}:${forma
tTime(minutes)}:${formatTime(
seconds)}`;

document.getElementById('outp
ut').innerText = `Time:
${timeString}`;
}

function formatTime(unit) {
return unit < 10 ? '0' + unit
:
unit;
}
</script>

</body>
</html>

OUTPUT:

RESULT:
Thus, the simple Date to Time program using JavaScript has been executed successfully and
verified.
AKSHAYA R (71812201017)

58
EX.NO: 8

PROGRAMS USING DOM


DATE:24-09-2024

AIM:
To create a simple calculator using javascript.

ALGORITHM:
Step 1: Start with the html version using DOCTYPE tag.
Step 2: Create the buttons to enter numbers, arithmetic operations, equals to, clear
and backspace with event handlers like onclick, onmouseover, onmouseout etc..
Step 3: Create functions for equals to, insert, backspace and arithmetic operations to
perform calculations.
Step 4: End

CODE:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator Program</title>
<style>
body {
font-family: 'Roboto', sans-
serif; background-color:
#e3f2fd; display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.formstyle {
width: 320px;
height: 400px;
border-radius: 12px;
padding: 20px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);

AKSHAYA R (71812201017) 59
background-color: #ffffff;
display: flex;
flex-direction:
column; align-items:
center;
}

h1 {
font-size: 1.5rem;
color: #00796b;
margin-bottom: 20px;
}

.textview {
width: 100%;
height: 50px;
font-size: 1.5rem;
padding: 5px;
text-align: right;
border: 2px solid
#00796b; border-radius:
8px;
margin-bottom: 15px;
background-color:
#f0f0f0;
}

.btn {
width: 60px;
height: 60px;
margin: 5px;
font-size: 1.2rem;
border-radius: 8px;
border: none;
background-color: #00796b;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}

.btn:hover {
background-color: #004d40;
}

.btn:active {
background-color: #00362e;
}

.btn-large {
AKSHAYA R (71812201017) 60
width: 128px;

AKSHAYA R (71812201017) 61
}
.btn-equal {
height: 130px;
background-color: #ff5722;
}

.btn-equal:hover {
background-color: #e64a19;
}
</style>
<script>
function insert(num) {
document.form1.textview.value +=
num;
}

function equal() {
const exp = document.form1.textview.value;
if (exp) {
document.form1.textview.value = eval(exp);
}
}

function backspace() {
const exp = document.form1.textview.value;
document.form1.textview.value = exp.substring(0, exp.length - 1);
}
</script>
</head>
<body>
<div class="formstyle">
<h1>Simple Calculator</h1>
<form name="form1">
<input class="textview" name="textview" readonly>
</form>
<div>
<button class="btn" onclick="document.form1.textview.value = ''">C</button>
<button class="btn" onclick="backspace()">B</button>
<button class="btn" onclick="insert('/')">/</button>
<button class="btn" onclick="insert('*')">x</button>
</div>
<div>
<button class="btn" onclick="insert(7)">7</button>
<button class="btn" onclick="insert(8)">8</button>
<button class="btn" onclick="insert(9)">9</button>
<button class="btn" onclick="insert('-')">-</button>
</div>

AKSHAYA R (71812201017) 62
<div>
<button class="btn" onclick="insert(4)">4</button>
<button class="btn" onclick="insert(5)">5</button>
<button class="btn" onclick="insert(6)">6</button>
<button class="btn" onclick="insert('+')">+</button>
</div>
<div>
<button class="btn" onclick="insert(1)">1</button>
<button class="btn" onclick="insert(2)">2</button>
<button class="btn" onclick="insert(3)">3</button>
<button class="btn-equal" onclick="equal()">=</button>
</div>
<div>
<button class="btn btn-large" onclick="insert(0)">0</button>
<button class="btn" onclick="insert('.')">.</button>
</div>
</div>
</body>
</html>

OUTPUT:

AKSHAYA R (71812201017) 63
RESULT:
Thus, the implementation of simple calculator using JavaScript has been
completed and executed successfully.

AKSHAYA R (71812201017) 64
EX.NO: 9

WEBPAGE CREATION USING REACT JS


DATE:1-10-2024

AIM:
To create a Text Utilis using React JS.

ALGORITHM:
Step 1: Create React app using npx-create-app command
Step 2: Create the component TextForm ,Navbar ,Footer component to display in
page.Step 3: Create a Container and create a textarea for input .
Step 4: Add Button to Textform Component .
Step 5: Write a function for each feature (covert to
uppercase,lowercase..etc).Step 6:Then Add click events to button to
perform task.
Step 7:End

CODE:
HTML Code:
import React, { useState } from 'react';

export default function TextForm(props) {


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

const handleUPClick = () => {


let newText = text.toUpperCase();
setText(newText);
props.showAlert('Converted to Uppercase', 'success');
};

const handleLoClick = () => {


let newText = text.toLowerCase();
setText(newText);
props.showAlert('Converted to Lowercase', 'success');
};

const handleClearClick = () => {


setText('');
props.showAlert('Text Cleared', 'success');

AKSHAYA R (71812201017)
65
};

const handleCopyClick = () => {


navigator.clipboard.writeText(text);
props.showAlert('Text Copied', 'success');
};

const handleExtraSpaceClick = () => {


let newText = text.split(/\s+/).join(' ');
setText(newText);
props.showAlert('Extra spaces removed', 'success');
};

const handleOnChange = (event) => {


setText(event.target.value);
};

return (
<>
<div className="container" id="Container">
<h1 className="my-3">{props.heading}</h1>
<div className="mb-3">
<textarea
className="form-control"
id="myBox"
value={text}
onChange={handleOnChange}
style={{
backgroundColor: '#282c34',
color: '#ffffff',
border: '1px solid #495057',
borderRadius: '8px',
padding: '10px'
}}
rows="8"
></textarea>
</div>
<div className="button-group">
<button
disabled={text.length === 0}
className="btn btn-primary mx-1 my-1"
onClick={handleUPClick}
>
Convert to Uppercase
</button>

AKSHAYA R (71812201017)
66
<button
disabled={text.length === 0}
className="btn btn-primary mx-1 my-1"
onClick={handleLoClick}
>
Convert to Lowercase
</button>
<button
disabled={text.length === 0}
className="btn btn-primary mx-1 my-1"
onClick={handleExtraSpaceClick}
>
Remove Extra Spaces
</button>
<button
disabled={text.length === 0}
className="btn btn-danger mx-1 my-1"
onClick={handleClearClick}
>
Clear
</button>
<button
disabled={text.length === 0}
className="btn btn-secondary mx-1 my-1"
onClick={handleCopyClick}
>
Copy
</button>
</div>
</div>
<div className="container my-3">
<h2>Your Text Summary</h2>
<p>
{
text.split(/\s+/).filter((element) => element.length !== 0)
.length
}{' '}
words and {text.length} characters
</p>
<p>
{0.008 *
text.split(/\s+/).filter((element) => element.length !== 0)
.length}{' '}
minutes read
</p>

AKSHAYA R (71812201017)
67
<h3>Preview</h3>
<p>{text.length > 0 ? text : 'Enter the text to preview it here'}</p>
</div>
</>
);

OUTPUT:

RESULT:

Thus, the implementation of TextUtilis using React JS has been completed and
executed successfully.

AKSHAYA R (71812201017)
68
EX.NO: 10
WEBPAGE GENERATION USING REACT JS

DATE:8-10-2024

AIM:
To create a Text Utilis using React JS.

ALGORITHM:

Step 1: Create React app using npx-create-app command


Step 2: Create the component TextForm ,Navbar ,Footer component to display in
page.Step 3: Create a Container and create a textarea for input .
Step 4: Add Button to Textform Component .
Step 5: Write a function for each feature (covert to
uppercase,lowercase..etc).Step 6:Then Add click events to button to
perform task.
Step 7:End

CODE:

HTML Code:

import React, { useState } from 'react';

export default function Textform(props) {


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

const handleUPClick = () => {


let newText = text.toUpperCase();
setText(newText);
props.showAlert('Converted to Uppercase', 'success');
};

const handleLoClick = () => {


let newText = text.toLowerCase();
setText(newText);
props.showAlert('Converted to Lowercase', 'success');
};

const handleClearClick = () => {

AKSHAYA R (71812201017)
69
let newText = '';
setText(newText);
props.showAlert('Text Cleared', 'success');
};

const handleCopyClick = () => {


navigator.clipboard.writeText(text);
props.showAlert('Text Copied', 'success');
};

const handleExtraSpaceClick = () =>


{ let textinBox = text.split(/[ ]+/);
setText(textinBox.join(' '));
props.showAlert('Extra space cleared', 'success');
};

const handleOnChange = (event) =>


{ setText(event.target.value);
};

return (
<>
<div className="container" id="Container">
<h1>{props.heading}</h1>
<div className="mb-3">
<textarea
style={{ backgroundColor: 'grey', color: 'white' }}
className="form-control"
id="myBox"
value={text}
onChange={handleOnChange}
rows="8"
></textarea>
</div>
<button
disabled={text.length === 0}
className="btn btn-secondary mx-1 my-1"
onClick={handleUPClick}
id="btn"
>
Convert to Uppercase
</button>
<button
disabled={text.length === 0}
className="btn btn-secondary mx-1 my-1"

AKSHAYA R (71812201017)
70
onClick={handleLoClick}
id="btn"
>
Convert to Lowercase
</button>
<button
disabled={text.length === 0}
className="btn btn-secondary mx-1 my-1"
onClick={handleExtraSpaceClick}
id="btn"
>
Remove extra space
</button>
<button
disabled={text.length === 0}
className="btn btn-secondary mx-1 my-1"
onClick={handleClearClick}
id="btn"
>
Clear
</button>
<button
disabled={text.length === 0}
className="btn btn-secondary mx-1 my-1"
onClick={handleCopyClick}
id="btn"
>
Copy
</button>
</div>
<div className="container my-3">
<h2>Your Text Summary</h2>
<p>
{text.split(/\s/).filter((elem) => elem.length !== 0).length} words and{' '}
{text.length} characters
</p>
<p>
{0.008 * text.split(/\s/).filter((elem) => elem.length !== 0).length}{' '}
Minutes read
</p>
<h3>Preview</h3>
<p>{text.length > 0 ? text : 'Enter the text to preview it here'}</p>
</div>
</>
);
}
AKSHAYA R (71812201017)
71
OUTPUT:

RESULT:
Thus, the implementation of TextUtilis using React JS has been completed and
executed successfully.

AKSHAYA R (71812201017)
72
EX.NO: 11
WEBPAGE CREATION USING ANGULAR JS

DATE: 15-10-24

AIM:
To create a webpage for contact form using angular JS.

ALGORITHM:

Step 1: Create angular app using npx-create-app command


Step 2: Create the component TextForm ,Navbar ,Footer component to display in
page.Step 3: Create a Container and create a textarea for input .
Step 4: Add Button to Textform Component .
Step 5: Write a function for each feature (covert to
uppercase,lowercase..etc).
Step 6:Then Add click events to button to perform task.
Step 7:End

CODE:
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@Component({ sele
ctor: 'app-root',
template: `
<div style="text-align:center">
<h1>Welcome to {{ title }}!</h1>
</div>
<app-textform></app-textform>
`,
styles: []
})
export class AppComponent {
AKSHAYA R (71812201017)
73
title = 'Text Utility App';
}

@Component({ selector
: 'app-textform',
template: `
<div class="container">
<h1>Text Utility</h1>
<div *ngIf="alertMessage" class="alert alert-{{ alertType
}}">
{{ alertMessage }}
</div>
<div class="mb-3">
<textarea
style="background-color: grey; color: white;"
class="form-control"
id="myBox"
[(ngModel)]="text"
rows="8"
(input)="handleOnChange($event)"
></textarea>
</div>
<button
[disabled]="text.length === 0"
class="btn btn-secondary mx-1 my-1"
(click)="handleUPClick()"
>
Convert to Uppercase
</button>
<button

AKSHAYA R (71812201017)
74
[disabled]="text.length === 0"
class="btn btn-secondary mx-1 my-1"
(click)="handleLoClick()"

Convert to Lowercase
</button>
<button
[disabled]="text.length === 0"
class="btn btn-secondary mx-1 my-1"
(click)="handleExtraSpaceClick()"
>
Remove Extra Space
</button>
<button
[disabled]="text.length === 0"
class="btn btn-secondary mx-1 my-1"
(click)="handleClearClick()"
>
Clear
</button>
<button
[disabled]="text.length === 0"
class="btn btn-secondary mx-1 my-1"
(click)="handleCopyClick()"
>
Copy
</button>
</div>
<div class="container my-3">
<h2>Your Text Summary</h2>

AKSHAYA R (71812201017)
75
<p>{{ getWordCount() }} words and {{ text.length }}
characters</p>
<p>{{ getReadTime() }} Minutes read</p>
<h3>Preview</h3>

<p>{{ text.length > 0 ? text : 'Enter the text to preview it here'


}}</p>
</div>
`,
styles: [`
.container {
margin-top: 20px;
}
textarea {
width: 100%;
padding: 10px;
}
button {
margin-right: 10px;
margin-top: 10px;
}
.alert {
margin-bottom: 20px;
}
`]
})
export class TextformComponent {
text: string = '';
alertMessage: string = '';
alertType: string = '';
showAlert(message: string, type: string) {
AKSHAYA R (71812201017)
76
this.alertMessage = message;
this.alertType = type;
setTimeout(() => {

this.alertMessage = '';
}, 3000);
}

handleUPClick() {
this.text = this.text.toUpperCase();
this.showAlert('Converted to Uppercase', 'success');
}

handleLoClick() {
this.text = this.text.toLowerCase();
this.showAlert('Converted to Lowercase', 'success');
}

handleClearClick() {
this.text = '';
this.showAlert('Text Cleared', 'success');
}

async handleCopyClick() {
try {
await navigator.clipboard.writeText(this.text);
this.showAlert('Text Copied', 'success');
} catch (error) {
this.showAlert('Failed to copy text', 'danger');

AKSHAYA R (71812201017)
77
}

}
handleExtraSpaceClick() {
this.text = this.text.split(/[ ]+/).join(' ');

this.showAlert('Extra spaces removed', 'success');


}

handleOnChange(event: Event) {
this.text = (event.target as HTMLTextAreaElement).value;
}

getWordCount() {
return this.text.trim().split(/\s+/).filter((elem) =>
elem.length !== 0).length;
}

getReadTime() {
return (0.008 * this.getWordCount()).toFixed(2);
}
}

@NgModule({ declaratio
ns: [ AppComponent,
TextformComponent
],
imports: [
BrowserModule,
FormsModule

AKSHAYA R (71812201017)
78
],
getWordCount() {
return this.text.trim().split(/\s+/).filter((elem) =>
elem.length !== 0).length;
}

getReadTime() {
return (0.008 * this.getWordCount()).toFixed(2);
}
}

providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

OUTPUT:

AKSHAYA R (71812201017)
79
RESULT:
Thus, the implementation of contact form using angular JS has been completed and
executed successfully.

AKSHAYA R (71812201017)
80
EX.NO: 12
CONNECTING NOSQL DATABASE SERVER FROM NODE.JS
DATE:22-10-2024

AIM:
To connect a NOSQL (Mongo DB) database server from node.js

PROCEDURE:

INSTALLING MONGODB
Step 1: To install MongoDB Go to MongoDB Download Center to download MongoDB Community
Server.

Step 2: When the download is complete open the msi file and click the next button in the startup screen:

Step 4: Now select the complete option to install all the program features. Here, if you can want to install only
selected program features and want to select the location of the installation, then use the Custom option:
Step 5: Select “Run service as Network Service user” and copy the path of the data directory. Click Next:
Step 6: Click the Install button to start the installation process:
Step 7: After clicking on the install button installation of MongoDB begins
Step 8: Now click the Finish button to complete the installation process
Step 9: Now we go to the location where MongoDB installed in step 5 in your system and copy the bin path:

81
AKSHAYA R (71812201017)
Step 10: Now, to create an environment variable open system properties << Environment Variable << System
variable << path << Edit Environment variable and paste the copied link to your environment system and click Ok:

We have successfully installed mongo bd and made the necessary changes

CONNECTING MONGODB WITH NODEJS

Step 1 : To connect a Node.js application to MongoDB, we have to use a library called Mongoose.

const mongoose = require("mongoose");

Step 2 : After that, we have to call the connect method of Mongoose

mongoose.connect("mongodb://localhost:27017/collectionName", {
useNewUrlParser: true,
useUnifiedTopology: true
});

Step 3 : Then we have to define a schema. A schema is a structure, that gives information about how the data is
being stored in a collection.
Example: Suppose we want to store information from a contact form of a website.

82
AKSHAYA R (71812201017)
const contactSchema = {
email: String,
query: String,
};

Step 4 : Then we have to create a model using that schema which is then used to store data in a document as
objects.

const Contact = mongoose.model("Contact", contactSchema);


Then, finally, we are able to store data in our document.
app.post("/contact", function (req, res) {
const contact = new Contact({
email: req.body.email,
query: req.body.query,
});
contact.save(function (err) {
if (err) {
res.redirect("/error");
} else {
res.redirect("/thank-you");
}
});
});

Code:-
Contact.js

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content=

"width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

83
AKSHAYA R (71812201017)
<form action="/contact" method="post">

<input type="text" placeholder="Email" name="email">

<input type="text" placeholder="Query" name="query">

<button type="submit">Submit</button>

</form>

</body>
</html>

Server File ( App.js or Index.js )

const express = require("express");

const ejs = require("ejs");

const mongoose = require("mongoose");

const bodyParser = require("body-parser");

mongoose.connect("mongodb://localhost:27017/newCollection", {

useNewUrlParser: true,

useUnifiedTopology: true

});

const contactSchema =

{ email: String,

query: String,

};

const Contact = mongoose.model("Contact", contactSchema);

const app = express();

app.set("view engine", "ejs");

app.use(bodyParser.urlencoded({

extended: true

}));

84
AKSHAYA R (71812201017)
app.use(express.static( dirname + '/public'));

app.get("/contact", function(req, res){

res.render("contact");

});

app.post("/contact", function (req, res) {

console.log(req.body.email);

const contact = new Contact({

email: req.body.email,

query: req.body.query,

});

contact.save(function (err) {

if (err) {

throw err;

} else {

res.render("contact");

});

});

app.listen(3000, function(){

console.log("App is running on Port 3000");


});

Output:

Starting our Node server

85
AKSHAYA R (71812201017)
Making our query

Our Database

Result :
Thus we have successfully connected out mongodb database with our node server

86
AKSHAYA R (71812201017)
SRI RAMAKRISHNA ENGINEERING COLLEGE
[Educational Service: SNR Sons Charitable Trust]
[Autonomous Institution, Reaccredited by NAAC with ‘A+’ Grade]
[Approved by AICTE and Permanently Affiliated to Anna University,
Chennai] [ISO 9001:2015 Certified and all eligible programmes Accredited by
NBA] Vattamalaipalayam, N.G.G.O. Colony Post, Coimbatore – 641 022.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CAPSTONE PROJECT

RECIPE BOOK APPLICATION

AKSHAYA R 71812201017
HAMSAVARTHINI V 71812201052
HARSHINI B 71812201060
PAVITHRA S 71812201153

THIRD YEAR B.E./M. Tech CSE – V SEM


Academic Year 2024-2025

20CS212 &WEB TECHNOLOGIES

COURSE COORDINATOR

Mrs. G. Anusha,
AP/CSE
SRI RAMAKRISHNA ENGINEERING COLLEGE
[Educational Service: SNR Sons Charitable Trust]
[Autonomous Institution, Reaccredited by NAAC with ‘A+’ Grade]
[Approved by AICTE and Permanently Affiliated to Anna University,
Chennai] [ISO 9001:2015 Certified and all eligible programmes Accredited by
NBA] Vattamalaipalayam, N.G.G.O. Colony Post, Coimbatore – 641 022.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CAPSTONE PROJECT
RECIPE BOOK APPLICATION

Assessment
Introduction (2)

Logic Building (2)

Implementation
Steps (4)

Report (2)
S.
Name & Roll No.
No. Total
(10)

1. AKSHAYA R
71812201017
2. HAMSAVARTHINI V
71812201052
3. HARSHINI B
71812201060
4. PAVITHRA S
71812201153

SIGNATURE OF COURSE COORDINATOR


Mrs. G. Anusha,
AP/CSE
S. No. TITLE PAGE
NUMBER

RECIPE BOOK APPLICATION

1. INTRODUCTION 1

2. REQUIREMENTS 2

3. IMPLEMENTATION STEPS 3

4. CODE AND OUTPUT SCREENSHOTS 4

5. CONCLUSION 10
1. INTRODUCTION

The Recipe Book application is a user-friendly, digital solution for organizing and
exploring a personal collection of recipes. Designed with convenience and versatility in
mind, it allows users to seamlessly manage recipes and access them across devices. Key
features include the ability to add, edit, delete, and search recipes by title or ingredients,
ensuring quick and easy retrieval of desired dishes. Users can also filter recipes by
category, such as breakfast, lunch, or dessert, making meal planning and discovery
straightforward.

Built with AngularJS, the app leverages services to handle recipe data management,
storing information in local storage for a consistent experience without the need for an
internet connection. With a responsive layout, the Recipe Book provides an optimized
view whether accessed on a desktop or mobile device, making it ideal for both at-home
cooking and on-the-go meal preparation. This comprehensive tool is perfect for anyone
looking to curate a versatile and easily navigable collection of recipes. The Recipe Book
application is designed to be a comprehensive, personal culinary assistant, catering to
both novice cooks and seasoned chefs alike.

With an intuitive interface, users can add new recipes, edit existing ones, and even
delete recipes that are no longer needed. The powerful search functionality allows users
to quickly locate recipes by title or key ingredients, which is especially useful when
planning meals based on available pantry items. Additionally, users can organize recipes
into categories, such as breakfast, lunch, and dessert, to streamline meal planning and
make browsing easier. This feature also makes it convenient for users to discover new
recipes within specific categories, inspiring them to try new dishes while staying
organized.

AngularJS serves as the backbone for managing the app's functionality, with services
that handle recipe data storage directly within the user's browser. By using local storage,
the app ensures that recipes are readily accessible, even without an internet connection.
This feature is particularly useful for users who may be using the app in locations with
limited connectivity, such as in kitchens or while grocery shopping. Furthermore, the
app’s responsive design enables a smooth experience across various devices, from
mobile phones to tablets and desktops, adapting to different screen sizes to provide a
consistent look and feel. With this all-encompassing feature set, the Recipe Book is not
only practical but also enhances the joy of cooking by providing users with a simple and
efficient way to manage and enjoy their favorite recipes.
2. REQUIREMENTS
User Requirements:
 Admin: Manage the recipe database by adding, editing, and deleting recipes.
Monitor overall system usage, oversee data storage, and generate reports on popular
recipes or categories.
 User: Add personal recipes, edit and delete their entries, and browse or search
recipes by title or ingredients. Filter recipes by category (e.g., breakfast, lunch,
dessert) and view detailed recipe information, including ingredients and cooking
instructions.
 Guest: Explore publicly available recipes, search by title or ingredients, filter by
category, and view recipe details. Registration is encouraged to access more features
like saving favorite recipes or adding personal notes.

Functional Requirements:
 User Authentication: Secure login and registration for Admin and User roles, with
basic access for Guests. Admins have extended permissions to manage recipes and
system operations.
 Dashboard: Customized dashboards for each user role. Admins access recipe and
system management tools, while Users and Guests see personalized browsing and
recipe features.
 Recipe Management: Ability for Admins and Users to add, update, delete, and
view recipes with details like title, ingredients, instructions, and category.
 Category Filtering: Users and Guests can filter recipes by category (e.g., breakfast,
lunch, dessert) for targeted browsing.
 Search Functionality: Search recipes by title or ingredients, helping users quickly
find desired recipes.

Non-Functional Requirements:
 Performance: The application should handle multiple users simultaneously, with a
smooth browsing experience for desktop and mobile.
 Usability: The user interface should be visually appealing, easy to navigate, and
optimized for different devices and user roles.
 Security: Implement data encryption, secure authentication, and role-based access
to protect user information and sensitive recipe data.
 Scalability: The system should be capable of scaling with an increasing number of
users, recipes, and data storage needs.
 Maintainability: The code should follow modular and well-documented practices,
facilitating easy maintenance, updates, and future enhancements.
3. IMPLEMENTATION STEPS

1. Project Initialization:
Backend Setup: Start by creating a new Node.js project with Express for backend routing.
Set up the folder structure with controllers, models, routes, and config directories.
Frontend Setup: Initialize a React application to build the user interface, using create-react-
app or configuring your preferred setup for state management and styling.

2. Database Configuration (MongoDB):


Database Setup: Use MongoDB Atlas or a local MongoDB instance to store recipe data.
Schema Design: Define recipe schemas with fields like title, ingredients, category, and
instructions using Mongoose.

3. Backend API Development:


Controllers & Routes: Implement CRUD (Create, Read, Update, Delete) operations for
recipes. Set up endpoints, such as /recipes for all recipes and /recipes/:id for specific
recipes. Middleware & Error Handling: Add middleware for validation, authentication, and
error handling.

4. Frontend Development (React):


UI Design: Create components like Recipe List, Recipe Detail, Add Recipe, and Edit
Recipe. Use React Router for navigation.
API Integration: Set up service functions to connect with backend APIs for CRUD
operations on recipes.

5. Search, Filter, and Data Visualization:


Search and Filter: Implement search by title or ingredient and filters by category.
Data Visualization: Use a chart library to show recipe statistics, such as popular categories.

6. Testing and Debugging


Backend Testing: Use Postman or Insomnia to test each API endpoint and ensure correct
data handling and response status.
Frontend Testing: Perform unit tests for components and integration tests to ensure the
system behaves as expected.
4. CODE IMPLEMENTATION

App.js
var app = angular.module('recipeApp', []);

app.controller('RecipeController', function($scope) {
$scope.recipes = JSON.parse(localStorage.getItem('recipes')) || [];

$scope.newRecipe = {};

$scope.saveRecipe = function() {
if ($scope.newRecipe.title && $scope.newRecipe.ingredients &&
$scope.newRecipe.instructions) {
if ($scope.editIndex !== undefined) {
$scope.recipes[$scope.editIndex] = $scope.newRecipe;
} else {
$scope.recipes.push($scope.newRecipe);
}

localStorage.setItem('recipes', JSON.stringify($scope.recipes));
$scope.newRecipe = {};
$scope.editIndex = undefined;
}
};

$scope.editRecipe = function(index) {
$scope.newRecipe = angular.copy($scope.recipes[index]);
$scope.editIndex = index;
};

$scope.deleteRecipe = function(index) {
$scope.recipes.splice(index, 1);
localStorage.setItem('recipes', JSON.stringify($scope.recipes));
};
$scope.clearForm = function() {
$scope.newRecipe = {};
$scope.editIndex = undefined;
};
$scope.clearAll = function() {

if (confirm('Are you sure you want to delete all recipes?')) {


$scope.recipes = [];
localStorage.setItem('recipes', JSON.stringify([]));
}
};
});

Styles.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}

header {
background-color: #5cb85c;
color: white;
padding: 10px 0;
text-align: center;
}

h1 {
margin: 0;
}

.add-recipe, .search-recipe, .filter-category, .recipe-list {


padding: 20px;
background-color: white;
margin: 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

input, textarea, select {


display: block;
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}

button {
padding: 10px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}

button:hover {
background-color: #4cae4c;
}

ul {
list-style-type: none;
padding: 0;
}

li {
padding: 10px;
background-color: #f9f9f9;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}

.recipe-actions {
margin-top: 10px;
}

.recipe-actions button {
margin-right: 10px;
}

.responsive {
max-width: 600px;
margin: 0 auto;
}

@media (max-width: 600px) {


.add-recipe, .search-recipe, .filter-category, .recipe-list {
margin: 5px;
}
}
5. OUTPUT SCREENSHOTS
5. CONCLUSION
In conclusion, the Recipe Book application combines a structured backend, a
responsive and user-friendly frontend, and secure data management to deliver an
efficient and enjoyable experience for all users. By leveraging Node.js, Express,
React, and MongoDB, the application provides seamless recipe management and
browsing features with real-time search, filtering, and data visualization. The inclusion
of JWT-based authentication ensures that user roles and permissions are well-defined
and secure, allowing both Users and Admins to interact with the system effectively.
Through careful planning, modular development, and thorough testing, this Recipe
Book application is designed to be scalable, maintainable, and accessible across
different devices. Once deployed, the application serves as a comprehensive tool for
managing and sharing recipes, meeting both current needs and future growth
requirements.

You might also like