Scribd
Upload
20 views56 pages

FSWDfinal 22

The document outlines the creation of a portfolio website and a web application for managing to-do lists, detailing the procedures for setting up HTML, CSS, and JavaScript components. It includes specific instructions for creating a micro-blogging application similar to Twitter, utilizing React and Firebase for backend support. Each project emphasizes user interface design, functionality, and testing to ensure a successful implementation.

Uploaded by

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

FSWDfinal 22

The document outlines the creation of a portfolio website and a web application for managing to-do lists, detailing the procedures for setting up HTML, CSS, and JavaScript components. It includes specific instructions for creating a micro-blogging application similar to Twitter, utilizing React and Firebase for backend support. Each project emphasizes user interface design, functionality, and testing to ensure a successful implementation.

Uploaded by

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

EX No:01 DEVELOP A PORTFOLIO WEBSITE FOR YOURSELF WHICH

GIVES DETAILS ABOUT YOURSELF FOR A POTENTIAL


Date: RECRUITER

AIM:

The aim of this question is to create a simple portfolio website using HTML and CSS. The website

should provide information about yourself for potential recruiters.

Procedure:

1. HTML Setup:

• Create an HTML file (e.g., index.html) with basic structure.

2. CSS Linking:

• Link an external CSS file (e.g., styles.css) to your HTML.

3. Header Section:

• Add a header with your name and job title.

4. About Me:

• Include a section for a brief self-introduction.

5. Skills:

• Create a skills section using an unordered list.

6. Projects:

• Showcase projects using div elements for each.

7. Contact:

• Provide a section with contact information.

8. CSS Styling:

• Write CSS rules for styling elements.

9. Responsive Design:

• Implement media queries for responsiveness.

10. Testing and Review:

• Test in various browsers and devices; review and refine as needed.

1
Code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="head">
<div>
<img src="https://img.freepik.com/free-vector/programmer-working-desk_23-
2148288753.jpg?t=st=1724149600~exp=1724153200~hmac=cf747c814aeb84c4db
3464a2bedea9419e0e2a87b8b706d437946850643e11ab&w=740" class="img2"
alt="Dharshinie" />
<h1 class="name1">Dharshinie</h1>
</div>
<div>
<div class="head-para">
<p>Currently I am studying B.tect IT third year in CSICE ooty. I've developed
some of MERN stack developement projects.</p>
</div>
<div class="cont">
<img src="https://as2.ftcdn.net/v2/jpg/02/72/89/67/1000_F_272896745_tlT
ivOH81qWIVzz34KqFGm8LO3N9hMYQ.jpg" alt="location" class="img1" />
<p class="cont-para">ooty</p>
<img src="https://img.freepik.com/premium-vector/green-phone-with-
green-phone-it_1140986-12356.jpg?w=740" alt="phone" class="img1" />
<p class="cont-para">1234567890</p>
<img src="https://as1.ftcdn.net/v2/jpg/01/81/00/34/1000_F_181003490_CxW4fQ0H3
VypIIsPkFGpMDviO8ysWjOZ.jpg" alt="email" class="img1" />
<p class="cont-para">[email protected]</p>
</div>
</div>
</header>
<section class="sec-cont">
<h2 class="head2">Skills</h2>
<div class="skill-cont">

2
<h3 class="head2">Frontend Skils</h3>
<ul class="un-list">
<p>HTML</p>
<p>CSS</p>
<p>JAVA SCRIPT</p>
<p>REACT JS</p>
</ul>
<h3 class="head2">Other Skills</h3>
<ul class="un-list">
<p>NODE JS</p>
<p>EXPRESS JS</p>
<p>MY SQL</p>
<p>PYTHON</p>
<p>JAVA</p>
</ul>
</div>
</section>
<section id="projects" class="pro-cont">
<h2 class="head2">My Projects</h2>
<div class="project1">
<h3 class="pro-head">Price landing page</h3>
<p class="pro-para">It's specific landing page that list different pricing plans
available for your products and services</p>
</div>
<div class="project1">
<h3 class="pro-head">E-Commerce website</h3>
<p class="pro-para">Here you can find the product's price, feature, color,
and all other essentail details.</p>
</div>
<div class="project1">
<h3 class="pro-head">Hotel Booking page</h3>
<p class="pro-para">Here you can find the holtel's location, costs, avilability,
and other facility for booking.</p>
</div>
</section>
<footer>
<p class="foot-para">&copy; 2024 Your Name. All rights reserved.</p>
</footer>
<script src="main.js"></script>
</body></html>
Main.css
*{

3
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
}

header {
background: #bff864;
color: #fff;
padding: 1rem;
text-align: center;
}

header nav ul {
list-style: none;
}

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

header nav ul li a {
color: #fff;
text-decoration: none;
}

section {
padding: 1rem;
margin: 1rem 0;
}

.project {
margin-bottom: 1rem;
}

footer {
background: #333;

4
color: #fff;
text-align: center;
padding: 0.5rem;
position: fixed;
width: 100%;
bottom: 0;
}
form {
display: flex;
flex-direction: column;
}
form label {
margin: 0.5rem 0 0.2rem;
}
form input, form textarea {
margin-bottom: 1rem;
padding: 0.5rem;
border: 1px solid #ccc;
}
form button {
padding: 0.7rem;
background: #beee64;
color: #fff;
border: none;
cursor: pointer;
}
form button:hover {
background: #555;
}
.head{
background-color: #555;
height: 170px;
width: 100%;
padding: 10px;
display: flex;
flex-direction: row;
justify-content: center;
}
.cont{
display: flex;
flex-direction:row;
padding: 20px;

5
margin: 6px;
justify-content: center;
}
.skill-cont{
display: flex;
flex-direction: row;
padding: 10px;
margin:10px;
}
.img2{
height: 90px;
width: 100px;
}
.img1{
height: 20px;
width: 20px;
}
.head-para{
background-color: #555;
width: 30%;
margin: auto
}
.cont-para{
margin-right: 100px;
margin-left: 20px;
}
.sec-cont{
background-color: rgb(241, 233, 237);
font-family: 'roboto';
padding: 10px;
color: #272626;

}
.head2{
font-weight: bold;
font-family: 'roboto';
color: #525252;
font-size: 35px;
margin: 10px;
}
.name1{
font-size: 40px;

6
font-weight: bold;
font-family:'roboto';
}
.un-list{
margin: 20px;
}
.pro-cont{
background-color: rgb(241, 233, 237);
font-family: 'roboto';
padding: 10px;
color: #524949;
height: 380px;

}
.project1{
color: #4e4949;
font-family: 'roboto';
}
.pro-head{
font-weight: bold;
font-size: 30px;
}
.pro-para{
font-size: 23px;
}
Main.js
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('contact-form');
form.addEventListener('submit', (e) => {
e.preventDefault();
alert('Form submitted!');
form.reset();
});
});

7
Output:

Result:
Thus a simple portfolio website using HTML and CSS was created successfully.

8
EX No:02 CREATE A WEB APPLICATION TO MANAGE THE TO-DO LIST OF
USERS, WHERE USERS CAN LOGIN AND
Date: MANAGE THEIR TO-DO ITEMS

Aim:

Create a web application to manage the to-do list of users, where users can login

and manage their to-do items

Procedure:

1. Create the Login Form:


a. Add input fields for the username and a login button.
b. Use JavaScript to switch the display from the login container to the TO-DO
container upon successful login.
2. Design the TO-DO List Interface:
a. Include input fields for adding tasks and a button to add tasks.
b. Display the list of tasks and buttons for task management (e.g., remove task).
3. Style Your Application:
a. Apply CSS styles to make your application visually appealing.
b. Focus on a clean and user-friendly design.
4. Implement JavaScript Functions:
a. Write JavaScript functions to handle user login and TO-DO list functionality.
b. Use DOM manipulation to show/hide containers, add tasks, and manage tasks.
5. Test the Application:
a. Open your HTML file in a web browser.
b. Test the login functionality and TO-DO list features.
6. Enhance and Expand (Optional):
a. Consider adding more features like task editing, task completion status, or data
persistence using local storage or a server and database.

Code:

todo.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="todo.css">
</head>
<body>

9
<div class="cont">
<div class="container">
<h1>WEB TECHNOLOGIES</h1>
<input type="text" id="taskInput" placeholder="Add a new technology" class="input-val">
<button onclick="addTask()">Add Task</button>
<ul id="taskList" class="cont"></ul>
</div>
</div>
<script src="todo.js"></script>
</body>
</html>

todo.css
body {
font-family: Arial, sans-serif;
background-color: #c5c4c46b;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
background-image: linear-gradient(rgb(245, 97, 122),rgb(84, 164, 238)
,rgb(163, 248, 163),rgb(253, 253, 169));
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 800px;
}

h1 {
font-size: 34px;
margin-bottom: 10px;
}

input {
width: calc(100% - 90px);
padding: 10px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}

button {
padding: 10px 20px;
border: none;

10
background-color: #8345f7;
color: white;
border-radius: 4px;
cursor: pointer;

button:hover {
background-color: #218838;
}

ul {
list-style-type: none;
padding: 10px;
margin-top: 20px;

li {
background-color: #f0e0ea;
padding: 10px;
margin-bottom: 5px;
border-radius: 4px;
display: flex;
flex-direction: row;
justify-content:center;
align-items: center;
}

.delete {
height: 30px;
width: 30px;
margin: 6px;
}

button.delete:hover {
background-color: #c82333;
}

input[type="checkbox"] {
margin: auto;
}
.input-val{
margin: 10px;
}

todo.js
function addTask() {

11
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');

if (taskInput.value.trim() === '') {


alert('Please enter a task.');
return;
}

const li = document.createElement('li');

const checkbox = document.createElement('input');


checkbox.type = 'checkbox';
checkbox.addEventListener('change', () => {
if (checkbox.checked) {
li.style.textDecoration = 'line-through';
} else {
li.style.textDecoration = 'none';
}
});

const span = document.createElement('span');


span.textContent = taskInput.value;

const deleteButton = document.createElement('img');


deleteButton.src="https://img.freepik.com/premium-vector/icon-delete-
related-delete-symbol-glyph-style-simple-design-illustration_1239425-1541.jpg?w=740";
deleteButton.className = 'delete';
deleteButton.addEventListener('click', () => {
taskList.removeChild(li);
});

li.appendChild(checkbox);
li.appendChild(span);
li.appendChild(deleteButton);
taskList.appendChild(li);

taskInput.value = '';
}

12
Output:

Result:
Thus, the creation of a web application to manage users' to-do lists, where users can log in and
manage their to-do items, was verified.

13
EX No:03 CREATE A SIMPLE MICRO-BLOGGING APPLICATION (LIKE
TWITTER) THAT ALLOWS PEOPLE TO POST THEIR
Date: CONTENT THAT CAN BE VIEWED BY PEOPLE WHO FOLLOW
THEM

Aim:
To Create a simple micro-blogging application (like Twitter) that allows people to post
their content which can be viewed by people who follow them

Procedure:

1. Setup:

• Create a project folder with public and server subdirectories.

• Initialize Node.js project and install dependencies

(react, firebase,material Ui).

2. Frontend:

• Create app.js, index.js, feed. js,sidebar.js,sidebaroption.js,widgets.js

• Design a basic UI with an input field for posting and a post timeline.

3. Backend:

. Create a firebase project and connect with it.


App.js

import './App.css';

import Sidebar from './Sidebar';

import Feed from './Feed';

import Widget from './Widget'

function App() {

return (

<div className="App">

<Sidebar />

{/*feed*/}

14
<Feed />

{/*widgets*/}

<Widget />

</div>

);

export default App;

feed.js

import React from 'react'

import './Feed.css'

import TweetBox from './TweetBox'

import Post from './Post'

function Feed(){

return(

<div className='feed'>

{/*home*/}

<div className='feed__header'>

<h2>Home</h2>

</div>

{/*Tweetbox */}

<TweetBox />

{/*post*/}

<Post />

<Post />

<Post />

<Post />

</div>

15
)

export default Feed

firebase.js

// For Firebase JS SDK v7.20.0 and later, measurementId is optional

import {initializeApp} from 'firebase/app'

import {getFirestore} from 'firebase/firestore'

const firebaseConfig = {

apiKey: "AIzaSyDokLsDpuNfHYMzqLmxFSvgDMcuokFB7XM",

authDomain: "twitter-clone-1a1b1.firebaseapp.com",

projectId: "twitter-clone-1a1b1",

storageBucket: "twitter-clone-1a1b1.firebasestorage.app",

messagingSenderId: "947522005712",

appId: "1:947522005712:web:1859e284cb435776ce4cd5",

measurementId: "G-8PYVRWQJER"

};

const firebaseApp = initializeApp(firebaseConfig)

const db = getFirestore(firebaseApp)

export default db;

index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

16
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

post.js

import { Avatar } from '@mui/material';

import PublishIcon from '@mui/icons-material/Publish';

import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';

import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';

import RepeatIcon from '@mui/icons-material/Repeat';

import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';

import React from 'react'

import './Post.css'

const Post = () => {

return (

<div className='post'>

<div className='post__avatar'>

<Avatar src={"https://as1.ftcdn.net/v2/jpg/08/29/87/70/1000_F_829877082_

17
TolsfkGZLyrACPngwpQIBPyfp6BHDOQ1.jpg"}/>

</div>

<div className='post__body'>

<div className='post__header'>

<div className='post__headerText'>

<h3>Dharshinie

<span className='post__headerSpecial'>

<VerifiedUserIcon className='post__badge'/>

</span>

</h3>

</div>

<div className='post__headerDescription'>

<p>Tweet something about!!</p>

</div>

</div>

<img src={"https://img.freepik.com/free-vector/bouquet-roses-

white-background-flower-rose-pink-gold-arrangement_41066-
3926.jpg?t=st=1731402890~exp=1731406490~hmac=3c7be2a91

a1fb92feff13d31ea76e578f6a0c758d9587905dfcd83dbb72ad080&w=740"} alt=""
className='img1'/>

<div className='post__footer'>

<ChatBubbleOutlineIcon fontSize='small'/>

<RepeatIcon fontSize='small'/>

<FavoriteBorderIcon fontSize='small'/>

<PublishIcon fontSize='small'/>

</div>

</div>

</div>

18
}

export default Post

sidebar.js

import React from 'react';

import TwitterIcon from '@mui/icons-material/Twitter';

import SidebarOption from './SidebarOptions';

import HomeIcon from '@mui/icons-material/Home';

import SearchIcon from '@mui/icons-material/Search';

import NotificationsIcon from '@mui/icons-material/Notifications';

import EmailIcon from '@mui/icons-material/Email';

import BookmarkIcon from '@mui/icons-material/Bookmark';

import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';

import AccountBoxIcon from '@mui/icons-material/AccountBox';

import MoreHorizIcon from '@mui/icons-material/MoreHoriz';

import './Sidebar.css';

import Button from '@mui/material/Button';

function Sidebar() {

return(

<div className='sidebar'>

<TwitterIcon className='sidebar-twitterIcon' />

<SidebarOption active Icon={HomeIcon} text="Home"/>

<SidebarOption Icon={SearchIcon} text="Explore"/>

<SidebarOption Icon={NotificationsIcon} text="Notifications"/>

<SidebarOption Icon={EmailIcon} text="Message"/>

<SidebarOption Icon={BookmarkIcon} text="Bookmarks"/>

19
<SidebarOption Icon={FormatListBulletedIcon} text="Lists"/>

<SidebarOption Icon={AccountBoxIcon} text="Profile"/>

<SidebarOption Icon={MoreHorizIcon} text="More"/>

<Button className='sidebar__tweet' variant="outlined">Tweet</Button>

</div>

export default Sidebar;

sidebaroption.js

import React from 'react'

import "./SidebarOption.css"

function SidebarOption ({active,text,Icon}){

return(

<div className={`sidebarOptions ${active && 'sidebarOptions--active'}`}>

<Icon />

<h2>{text}</h2>

</div>

export default SidebarOption

tweetbox.js

import React , {useState} from 'react'

import Avatar from '@mui/material/Avatar'

import Button from '@mui/material/Button'

import "./TweetBox.css"

import db from './firebase'

20
function TweetBox() {

const [tweetMessage, setTweeetMessage] = useState("")

const [tweetImage, setTweetImage] = useState("")

const sendTweet= (e) => {

e.preventDefault()

db.collection('posts').add({

displayName:"dharsh",

userName:"d_shine",

verified:true,

text: tweetMessage,

image:tweetImage,

avatar:"https://img.freepik.com/free-vector/bouquet-roses-white-background-

flower-rose-pink-gold-arrangement_41066-
3926.jpg?t=st=1731402890~exp=1731406490~hmac=3c7be2a91a1fb92feff

13d31ea76e578f6a0c758d9587905dfcd83dbb72ad080&w=740",

})

setTweeetMessage("")

setTweetImage("")

return (

<div className='tweetBox'>

<form>

<div className="tweetBox__input">

<Avatar alt="Remy Sharp" src="https://img.freepik.com/free-vector/

businessman-character-avatar-isolated_24877-
60111.jpg?t=st=1729247337~exp=1729250937~hmac=482c5d3b88c9

c1584ce0f88e25c593646f85b7bb1dabe87f068b2ff0455e07bc&w=740" />

<input type="text" placeholder='What is happening' onChange={(e) =>


setTweeetMessage(e.target.value)} value={tweetMessage}/>

21
</div>

<input className='tweetBox__imageInput' placeholder='enter image

url' onChange={(e) => setTweetImage(e.target.value)} value={tweetImage}/>

<Button className='tweetBox__tweetButton' onClick={sendTweet}>Tweet</Button>

</form>

</div>

export default TweetBox;

widgets.js

import React from 'react';

import './Widget.css'

import { TwitterTimelineEmbed, TwitterShareButton, TwitterTweetEmbed}

from 'react-twitter-embed';

import SearchIcon from '@mui/icons-material/Search';

function Widget() {

return (

<div className='widget'>

<div className='Widget__searchIcon'>

<SearchIcon className='widget__input'/>

<input placeholder='search tweet' type="text" />

</div>

<div className='widget__container'>

<h2>what is happening?</h2>

<TwitterTweetEmbed tweetId={"13215567899765433"}/>

<TwitterTimelineEmbed sourceType='profile' screenName='d_shine' options={

22
{height:400}} />

<TwitterShareButton url="http/sample" options={{text:"subscribe my channel"}} />

</div>

</div>

}w

export default Widget

Output:

Result:
Thus to create a simple micro-blogging application (like Twitter) that allows people to post their
content which can be viewed by people who follow them was executed.

23
EX No:04 CREATE A FOOD DELIVERY WEBSITE WHERE USERS
CAN ORDER FOOD FROM A PARTICULAR RESTAURANT
Date: LISTED IN THE WEBSITE.

Aim:

To create Food Delivery app using react.js.

Components:

In ‘src’ folder create the following components:

1. App.js

2. Index.js

3. Header.js

4. Cart.js

5. AvailableMeals.js

6. Model.js

1. App.js:

24
Index.js:

Header.js

25
Cart.js:

26
AvailableMeals.js:

27
Card.js:

Model.js:

28
29
OUTPUT:

Result:
Thus to create a Food Delivery app using react.js was executed.

30
EX No:05 DEVELOP A CLASSIFIEDS WEB APPLICATION TO BUY AND
SELL
Date: USED PRODUCTS.

Aim:

To Develop a classifieds web application to buy and sell used products.

Procedure:

1. Initialize Variables:
• Set up variables to store references to the necessary HTML elements, such as the
form, post list, and button.
2. Create Functions:
• Implement functions for creating a new post, adding a post to the UI, and clearing
the form.
3. Create Post Function:
• Retrieve user input (title, description, and price), validate the input, and
create a new post object.
4. Add Post to UI Function:
• Create a new HTML list item containing the post details and append it to the post
list.
5. Clear Form Function:
• Reset the form fields after successfully creating a new post.
6. Load Initial Posts:
• Pre-populate the UI with initial posts (dummy data) when the page loads.
7. Event Listener Setup:
• Set up an event listener for the button to trigger the creation of a new post.
8. DOM Content Loaded Event:
• Ensure that the script runs only when the DOM is fully loaded to avoid
referencing undefined elements.
9. Style the Interface:
• Add CSS styles to enhance the visual appearance of the application, including
layout, colors, and button styles.
10. Test and Debug:
• Open the application in a web browser, create new posts, and verify that the UI
updates
accordingly. Use the browser's developer tools to identify and fix any issues.

31
Code

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Classifieds App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Classifieds App</h1>
</header>
<main>
<section id="post-form">
<h2>Create a New Post</h2>
<form id="new-post-form">
<label for="title">Title:</label>
<input type="text" id="title" required>
<label for="description">Description:</label>
<textarea id="description" required></textarea>
<label for="price">Price:</label>
<input type="number" id="price" required>
<button type="button" id="create-post-button">Create Post</button>
</form>
</section>
<section id="posts">
<h2>Recent Posts</h2>
<ul id="post-list"></ul>
</section>
</main>
<script src="script.js"></script>
</body>
</html>

Style.css

32
body {
font-family: Arial, sans-
serif; margin: 0;
padding: 0;
}

header {
background-color:
#333; color: #fff;
padding: 1rem;
text-align: center;
}

main {
padding: 2rem;
}

#post-form, #posts {
margin-bottom: 2rem;
}

h2 {
color:
#333;
}

form {
display: grid;
gap: 1rem;
}

label {
font-weight: bold;
}

button {
background-color:
#333; color: #fff;
padding: 0.5rem
1rem; border:
none; cursor:
pointer;
}

33
button:hover {
background-color: #555;
}

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

li {
margin-bottom:
1rem; border:
1px solid #ddd;
padding: 1rem; }

Script.js

document.addEventListener('DOMContentLoaded', function ()
{ const postForm = document.getElementById('new-post-
form'); const postList = document.getElementById('post-
list');

function createPost() { const title =


document.getElementById('title').value; const description =
document.getElementById('description').value; const price
= document.getElementById('price').value;

if (title && description && price)


{ const post = {
title: title, description:
description, price: price
};

addPostToUI(post);
clearForm(); } else {
alert('Please fill in all fields.');
}
}

function addPostToUI(post) {
const li =
document.createElement('li');
li.innerHTML = `
<strong>${post.title}</strong>

34
<p>${post.description}</p>
<p>Price: $${post.price}</p>
`;
postList.appendChild(li);
}

function clearForm() {
document.getElementById('title').value = '';
document.getElementById('description').value = '';
document.getElementById('price').value = '';
}
// Dummy data for initial posts
const initialPosts = [
{ title: 'Laptop', description: 'Used laptop in good condition', price: 500 },
{ title: 'Bicycle', description: 'Mountain bike for sale', price: 200 },
];

// Load initial posts


initialPosts.forEach(post => addPostToUI(post));

// Event listener for creating a new post document.getElementById('create-


post-button').addEventListener('click', createPost); });

Output:

Result:
Thus to Develop a classifieds web application to buy and sell used products was executed.

35
EX No:06 DEVELOP A LEAVE MANAGEMENT SYSTEM FOR AN
ORGANIZATION WHERE USERS CAN APPLY DIFFERENT
Date: TYPES OF LEAVES SUCH AS CASUAL LEAVE AND
MEDICAL LEAVE. THEY ALSO CAN VIEW THE
AVAILABLE NUMBER OF DAYS.

Aim:
To create Leave Management system app using react.js.

Components:
In ‘src’ folder create the following components:
1App.js
2. Index.js
3. AdminHouse.js
4. AdminLogin.js
5. Maintanance.js
6. Navbar.js
7. Pagenotfound.js

APP.JS:

36
INDEX.JS:

ADMINHOME.JS:

37
38
ADMINLOGIN.JS:

39
40
41
MAINTAINANCE.JS:

42
NAVBAR.JS:

PAGENOTFOUND.JS:

43
OUTPUT:

Result:

Thus to create a Leave Management system app using react.js was executed.

44
EX No:07 DEVELOP A SIMPLE DASHBOARD FOR PROJECT
MANAGEMENT WHERE THE STATUSES OF VARIOUS
Date: TASKS
ARE AVAILABLE. NEW TASKS CAN BE ADDED AND
THE
STATUS OF EXISTING TASKS CAN BE CHANGED
AMONG PENDING, INPROGRESS OR COMPLETED.

Aim:

To Develop a simple dashboard for project management where the statuses of various tasks
are available. New tasks can be added and the status of existing tasks can be changed
among pending, InProgress or completed.

Procedure:

1. HTML Structure:
• Standard HTML structure with a container for the project management
dashboard.
2. Task Form:
• Form includes input fields for task name and status, with a dropdown for
task status.
3. JavaScript Functions:
• manageTask function handles both adding new tasks and updating existing
ones.
4. Add Task:
• New tasks are added with a unique ID and appended to the task list.
5. Update Task:
• Existing tasks are updated in-place, and the form switches back to "Add
Task" mode.
6. Task List:
• A dynamic list (<ul>) displays added tasks.
7. Edit Task Button:
• Each task includes an "Edit Task" button triggering the editTask function.
8. Styling:
• Basic styling for a clean and user-friendly interface.
9. Conditional Button:
• The "Add Task" button dynamically changes its text and functionality based
on the mode.

45
10. Data Attribute Usage:
• Data attributes store task status for easy retrieval and manipulation during
updates.

Code

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Project Management Dashboard</title>
</head>
<body>
<div class="container">
<h1>Project Management Dashboard</h1>
<div class="task-form">
<label for="taskName">Task Name:</label>
<input type="text" id="taskName" required>

<label for="taskStatus">Task Status:</label>


<select id="taskStatus">
<option value="Pending">Pending</option>
<option value="InProgress">In Progress</option>
<option value="Completed">Completed</option>
</select>

<button onclick="manageTask()">Add Task</button>


</div>

<div class="task-list">
<h2>Task List</h2>
<ul id="tasks">
<!-- Task items will be added dynamically here -->
</ul>
</div>
</div>

<script src="script.js"></script>

46
</body>
</html>

Style.cs
s body
{
font-family: 'Arial', sans-
serif; margin: 0;
padding: 0;
display: flex; justify-
content: center;
align-items: center;
height: 100vh;
background-color:
#f4f4f4;
}

.container { text-align: center;


background-color: #fff; padding:
20px; border-radius: 8px; box-
shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
color:
#333;
}

.task-form {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom:
8px; color:
#555;
}

input, select, button


{ width: 100%;
padding: 10px;
margin-bottom:
16px; box-
sizing: border-box;

47
border: 1px solid
#ccc; border-
radius: 4px; font-
size: 16px;
}

button { padding: 12px;


background-color: #4caf50;
color: #fff; border: none;
border-radius: 4px; cursor:
pointer; font-size: 16px;
transition: background-color 0.3s
ease; }

button:hover {
background-color: #45a049;
}

.task-list { border-
top: 2px solid #ccc;
padding-top: 20px;
}

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

li {
margin-bottom: 10px;
}

/* Added style for the status span


*/ span {
margin-right: 10px;
}

Script.js

function manageTask() {
const taskName = document.getElementById('taskName').value;
const taskStatus = document.getElementById('taskStatus').value;

48
// Check if the button is in 'Add Task' mode or 'Update Task' mode
const isUpdateMode = document.getElementById('taskUpdateBtn');

if (isUpdateMode) { // Update existing task const


taskToUpdate = isUpdateMode.dataset.taskId; const
existingTask = document.getElementById(taskToUpdate);
existingTask.querySelector('strong').innerText = taskName;
existingTask.querySelector('span').innerText = taskStatus;

// Clear input fields and switch back to 'Add Task' mode


document.getElementById('taskName').value = '';
document.getElementById('taskStatus').value = 'Pending';
document.getElementById('taskUpdateBtn').removeAttribute('id');
document.getElementById('taskUpdateBtn').innerText = 'Add Task';
} else {
// Add new task
const newTaskItem = document.createElement('li');
const taskId = `task_${Date.now()}`;
newTaskItem.setAttribute('id', taskId);
newTaskItem.innerHTML = `
<strong>${taskName}</strong> -
<span data-status="${taskStatus}">${taskStatus}</span>
<button onclick="editTask('${taskId}')">Edit Task</button>
`;
document.getElementById('tasks').appendChild(newTaskItem);

// Clear input fields


document.getElementById('taskName').value = '';
document.getElementById('taskStatus').value = 'Pending';
}
}

function editTask(taskId) { // Retrieve task data


const taskItem = document.getElementById(taskId);
const taskName =
taskItem.querySelector('strong').innerText;
const taskStatus = taskItem.querySelector('span').getAttribute('data-status');

// Populate input fields with task data


document.getElementById('taskName').value = taskName;
document.getElementById('taskStatus').value = taskStatus;

// Change 'Add Task' button to 'Update Task' mode


const addButton =

49
document.querySelector('button');
addButton.innerText = 'Update Task';
addButton.setAttribute('id', 'taskUpdateBtn');
addButton.dataset.taskId = taskId;
}

Output:

Result:

Thus to Develop a simple dashboard for project management where the statuses of various
tasks are available. New tasks can be added and the status of existing tasks can be changed
among pending, progressed or completed , executed.

50
EX No:08 DEVELOP AN ONLINE SURVEY APPLICATION
WHERE A
Date: COLLECTION OF QUESTIONS IS AVAILABLE AND
USERS ARE ASKED TO ANSWER ANY
RANDOM 5 QUESTIONS.

Aim:

To Develop an online survey application where a collection of questions is available and


users are asked to answer any random 5 questions.

Procedure:

1. HTML Structure:
• The HTML file contains a basic structure with a container,
survey form, and summary container.
2. Styling:
• CSS is used to style the survey form, questions, checkboxes, and the
summary section. 3. Questions and Options:
• The JavaScript script defines an array of questions and corresponding
options.
4. Dynamic Question Rendering:
• The script dynamically creates HTML elements to display questions and
options based on the defined arrays.
5. Checkbox Selection:
• Users can select multiple options for each question using checkboxes.
6. Submit Button:
• A submit button triggers the submitSurvey function when clicked.
7. Data Gathering:
• The submitSurvey function gathers user-selected options for each question.
8. Summary Display:
• The script dynamically creates a summary section to display user responses.
9. Hide Form:
• After submission, the survey form is hidden to reveal the summary section.
10. Summary Population:
• The summary section is populated with the questions and the selected
options by
the user.

Code
Index.html

<!DOCTYPE html>

51
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">k
<title>Checkbox Survey</title>
</head>
<body>
<div class="container">
<h1>Checkbox Survey</h1>
<form id="surveyForm">
<div id="questions" class="question-container"></div>
<button type="button" onclick="submitSurvey()">Submit Survey</button>
</form>

<div id="summary">
<h2>Survey Summary</h2>
<ul id="resultList"></ul>
</div>
</div>

<script src="script.js"></script>
</body>
</html>

Style.css

body {
font-family: 'Arial', sans-
serif; margin: 0;
padding: 0; display:
flex; justify-content:
center; height: auto;
background-color: #f4f4f4;
}

.container { text-align: center;


background-color: #fff; padding:
20px; border-radius: 8px; box-
shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 80%; max-width: 600px;
}

52
h1, h2 {
color:
#333;
}

#surveyForm {
margin-top: 20px;
}

.question {
margin-bottom:
16px; text-align:
left;
}

label { display:
block; margin-
bottom: 8px; color:
#555; background-
color: #f0f0f0;
padding: 10px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}

label:hover {
background-color:
#e0e0e0;
}

input[type="checkbox"] {
margin-right: 8px;
}

button { padding:
12px; background-
color: #4caf50;
color: #fff; border:
none; border-radius:
4px; cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}

53
button:hover {
background-color:
#45a049;
}

#summary {
margin-top: 20px;
display: none;
}

#resultList {
list-style: none;
padding: 0;
}

#resultList li {
margin-bottom: 8px;
}

Script.js

const questions = [
"Which programming languages do you use regularly?",
"Select the topics you are interested in:",
"Choose your favorite hobbies:",
"Indicate your preferred mode of transportation:"
];

const options = [
["JavaScript", "Python", "Java", "C#"],
["Technology", "Science", "Art", "Health"],
["Reading", "Gaming", "Cooking", "Traveling"],
["Car", "Bicycle", "Public Transportation", "Walking"]
];

const surveyForm =
document.getElementById('surveyForm'); const
questionContainer = document.getElementById('questions');
const summaryContainer =
document.getElementById('summary'); const resultList =
document.getElementById('resultList');

54
// Display survey questions questions.forEach((question,
index) => { const questionDiv =
document.createElement('div'); questionDiv.className =
'question'; questionDiv.innerHTML = `<p>${index + 1}.
${question}</p>`; options[index].forEach((option,
optionIndex) => { const checkboxInput =
document.createElement('input'); checkboxInput.type =
'checkbox'; checkboxInput.name = `q${index}[]`;
checkboxInput.value = option; const label =
document.createElement('label');
label.appendChild(checkboxInput);
label.appendChild(document.createTextNode(option));
questionDiv.appendChild(label);
});
questionContainer.appendChild(questionDiv);
});

function submitSurvey() { //
Gather and display survey
results const results = [];
const questionDivs =
document.querySelectorAll('.q
uestion');
questionDivs.forEach((questio
nDiv, index) => { const
selectedOptions =
document.querySelectorAll(`input[name="q${index}[]"]:checked`);
if (selectedOptions.length > 0) { results.push({
question: questions[index], answers:
Array.from(selectedOptions).map(option => option.value)
});
}
}
)
;
// Display survey summary
displaySurveySummary(results);
}

function displaySurveySummary(results) {
// Hide the survey form
surveyForm.style.display = 'none';

// Display the summary container


summaryContainer.style.display = 'block';

55
// Populate the result list results.forEach(result => { const listItem =
document.createElement('li'); listItem.innerHTML =
`<strong>${result.question}:</strong> ${result.answers.join(', ')}`;
resultList.appendChild(listItem);
});
}

Output:

Result:
Thus to Develop an online survey application where a collection of questions is available
and users are asked to answer any random 5 questions was executed.

56

You might also like