full-stack-development-lab.docx LAXMAN
full-stack-development-lab.docx LAXMAN
Vision
Mission
To facilitate the graduates with the technical skills that prepare them for
immediate employment and pursue certification providing a deeper understanding
of the technology in advanced areas of computer science and related fields, thus
encouraging to pursue higher education and research based on their interest.
To facilitate the graduates with the soft skills that include fulfilling the
mission, setting goals, showing self-confidence by communicating effectively,
having a positive attitude, get involved in team-work, being a leader, managing
their career and their life.
After the completion of the course, B. Tech Computer Science and Engineering,
the graduates will have the following Program Specific Outcomes:
2. Lab Outcomes:
About lab:
A full-stack developer helps build and maintain both the front-end and the
back-end of a website. Learn about full-stack developer skills, salary, and how
you can become one.
A full-stack developer is a developer or engineer who can build both the front end and
the back end of a website. The front end (the parts of a website a user sees and interacts
with) and the back end (the behind-the-scenes data storage and processing) require
different skill sets. Since full-stack developers are involved with all aspects of the
development process, they must have expertise in both.
1. Students are advised to come to the laboratory at least 5 minutes before (to
the starting time), those who come after 5 minutes will not be allowed into the
lab.
2. Plan your task properly much before to the commencement, come
prepared to the lab with the synopsis / program / experiment details.
3. Student should enter into the laboratory with:
a. Laboratory observation notes with all the details (Problem statement, Aim,
Algorithm, Procedure, Program, Expected Output, etc.,) filled in for the lab session.
b. Laboratory Record updated up to the last session experiments and other
utensils (if any) needed in the lab. c. Proper Dress code and Identity card.
4. Sign in the laboratory login register, write the TIME-IN, and occupy the
computer system allotted to you by the faculty.
5. Execute your task in the laboratory, and record the results / output in the
lab observation note book, and get certified by the concerned faculty.
6. All the students should be polite and cooperative with the laboratory staff,
must maintain the discipline and decency in the laboratory.
7. Computer labs are established with sophisticated and high end branded systems,
which should be utilized properly.
8. Students / Faculty must keep their mobile phones in SWITCHED OFF mode
during the lab sessions. Misuse of the equipment, misbehaviors with the staff and
systems etc., will attract severe punishment.
9. Students must take the permission of the faculty in case of any urgency to go
out; if anybody found loitering outside the lab / class without permission during
working hours will be treated seriously and punished appropriately.
10. Students should LOG OFF/ SHUT DOWN the computer system before he/she
leaves the lab after completing the task (experiment) in all aspects. He/she must
ensure the system / seat is kept properly.
Users must be able to assign tasks to other users and must be able to comment on
it just like on a social media post. To start with, each user can have a calendar
view and a kanban style board. Users must be able to close and archive tasks as
well as projects when completed.
9 Create a project on Content Management System for a blog 24
Using the CMS users must be able to design a web page using the drag and drop
method. Users should be able to add textual or media content into placeholders
that are attached to locations on the web page using drag and drop method.
10 Create a project on Grocery delivery application 30
Assume this project is for a huge online departmental store. Assume that they
have a myriad of grocery items at their godown. All items must be listed on the
website, along with their quantities and prices.Users must be able to sign up and
purchase groceries. The system should present him with delivery slot options, and
the user must be able to choose his preferred slot. Users must then be taken to the
payment page where he makes the payment with his favourite method.
11 Create a project e-commerce portal for used furniture sales 34
Assume this project is for a startup that is acquiring used furniture from users at a
price, refurbishing them and selling them off at a margin. The website must
display second-hand furniture that is currently being sold.
DEPARTMENT OF CSE
<!DOCTYPE html>
<html>
<body>
</body>
</html>
Week-2. Write a program to create a website using HTML CSS and JavaScript?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Collecting Data</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
1|Page
</label>
<div class="form-group">
<label for="exampleFormControlInput1">
Email address
</label>
<script src=
"https://www.gstatic.com/firebasejs/3.7.4/firebase.js">
</script>
<script>
var firebaseConfig = {
apiKey: "Use Your Api Key Here",
authDomain: "Use Your authDomain Here",
databaseURL: "Use Your databaseURL Here",
projectId: "Use Your projectId Here",
storageBucket: "Use Your storageBucket Here",
messagingSenderId: "Use Your messagingSenderId Here",
appId: "Use Your appId Here"
};
firebase.initializeApp(firebaseConfig);
document.getElementById('contactForm')
.addEventListener('submit', submitForm);
function submitForm(e) {
e.preventDefault();
// Get values
var name = getInputVal('name');
var email = getInputVal('email');
2|Page
Downloaded by Nagilla Laxman
DEPARTMENT OF CSE
saveMessage(name, email);
document.getElementById('contactForm').reset();
}
</html>
Week-3. Write a program to build a Chat module using HTML CSS and JavaScript?
<div class="container">
<img src="/w3images/bandmember.jpg" alt="Avatar">
<p>Hello. How are you today?</p>
<span class="time-right">11:00</span>
</div>
<div class="container">
<img src="/w3images/bandmember.jpg" alt="Avatar">
<p>Sweet! So, what do you wanna do today?</p>
<span class="time-right">11:02</span>
</div>
3|Page
/* Clear floats */
.container::after
{ content: "";
clear: both;
display: table;
}
/* Style images */
.container img {
float: left;
max-width:
60px; width:
100%;
margin-right:
20px; border-
radius: 50%;
}
4|Page
color: #999;
}
5|Page
return (
<div
onClick={this.props.onClick}
className="Button"
data-size={this.props.size}
data-value={this.props.value}
>
{this.props.label}
</div>
)
}
}
class Display extends Component {
render() {
const string = this.props.data.join('')
return <div className="Display"> {string} </div>
}
}
handleClick = e => {
const value = e.target.getAttribute('data-value')
switch (value) {
case 'clear':
this.setState({
operations: [],
})
break
case 'equal':
this.calculateOperations()
break
default:
const newOperations = update(this.state.operations, {
$push: [value],
})
this.setState({
operations: newOperations,
})
break
}
calculateOperations = () => {
let result = this.state.operations.join('')
if (result) {
result = math.eval(result)
result = math.format(result, { precision: 14 })
6|Page
result = String(result)
this.setState({
operations: [result],
})
}
}
7|Page
Week-6. Write a program to create and Build a Password Strength Check using Jquery.
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/f
ont-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstra
p/4.0.0/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquer
y.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/boots
trap.min.js"></script>
<script src="CheckPasswordStrength.js"></script>
<link href="CheckPasswordStrength.css" rel="stylesheet" />
$(document).ready(function () {
$('#txtPassword').keyup(function () {
$('#strengthMessage').html(checkStrength($
('#txtPassword').v
al()))
})
function checkStrength(password) {
var strength = 0
if (password.length < 6) {
$('#strengthMessage').removeClass()
$('#strengthMessage').addClass('Short')
return 'Too short'
}
if (password.length > 7) strength += 1
Downloaded by Nagilla Laxman
DEPARTMENT OF CSE
8|Page
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))
strength +=
1
// If it has two special characters, increase strength
value
.
if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,
%,&,@,#,$
,^,*,?,_,~])/)) strength += 1
// Calculated strength value, we can return messages
// If value is less than 2
if (strength < 2) {
$('#strengthMessage').removeClass()
$('#strengthMessage').addClass('Weak')
return 'Weak'
} else if (strength == 2) {
$('#strengthMessage').removeClass()
$('#strengthMessage').addClass('Good')
return 'Good'
} else {
$('#strengthMessage').removeClass()
$('#strengthMessage').addClass('Strong')
return 'Strong'
}
}
});
.Short {
width: 100%;
background-color:
#dc3545; margin-top:
5px;
height: 3px;
color: #dc3545;
font-weight:
500; font-size:
12px;
}
.Weak {
Downloaded by Nagilla Laxman
DEPARTMENT OF CSE
width: 100%;
FULL STACK DEVELOPMENT LAB
9|Page
background-color: #ffc107;
margin-top: 5px;
height: 3px;
color: #ffc107;
font-weight: 500;
font-size: 12px;
}
.Good {
width: 100%;
background-color: #28a745;
margin-top: 5px;
height: 3px;
color: #28a745;
font-weight: 500;
font-size: 12px;
}
.Strong {
width: 100%;
background-color: #d39e00;
margin-top: 5px;
height: 3px;
color: #d39e00;
font-weight: 500;
font-size: 12px;
}
<body>
<form id="form1" runat="server">
<div class="container py-3">
<h4 class="text-center text-
uppercase">How to check password strength in jquery</h4>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card border-secondary">
<div class="card-header">
<h3 class="mb-0 my-
2">Sign Up</h3>
</div>
<div class="card-body">
<div class="form-group">
<label>Name</label>
<div class="input-group">
10 | P a g e
<div class="input-group-
prepend"
> <span class="input-
group-text"><i class="fa fa-user"></i></span>
</div>
<asp:TextBox
ID="txtFirst Name" runat="server" CssClass="form-
control"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label>Phone Number</label>
<div class="input-group">
<div class="input-group-
prepend">
<span class="input-
group-text"><i class="fa fa-phone"></i></span>
</div>
<asp:TextBox
ID="txtPhone Number" runat="server" CssClass="form-
control"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label>Email</label>
<div class="input-group">
<div class="input-group-
prepend">
<span class="input-
group-text"><i class="fa fa-envelope"></i></span>
</div>
<asp:TextBox
ID="txtEmail " runat="server" CssClass="form-
control"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label>Password</label>
<div class="input-group">
<div class="input-group-
prepend">
<span class="input-
group-text"><i class="fa fa-lock"></i></span>
</div>
<asp:TextBox
ID="txtPassw ord" runat="server" TextMode="Password"
CssClass="form- control"></asp:TextBox>
FULL STACK DEVELOPMENT LAB
</div>
<div
id="strengthMessage"></d
iv>
</div>
<div class="form-group">
<label>Confirm
Password</labe
l>
<div class="input-group">
<div class="input-
group-
prepend">
<span class="input-
group-text"><i class="fa fa-lock"></i></span>
</div>
<asp:TextBox
ID="txtConfi rmPassword" runat="server" TextMode="Password"
CssClass="form-
control"></asp:TextBox>
</div>
</div>
<div class="form-group">
<button type="submit"
class="
btn btn-success float-right rounded-0">Register</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
Week-7. Write a program to create and Build a star rating system using Jquery.
$(document).ready(function() {
$("#st1").click(function() {
$(".fa-star").css("color", "black");
$("#st1").css("color", "yellow");
});
<!DOCTYPE html>
FULL STACK DEVELOPMENT LAB
Downloaded by Nagilla Laxman
DEPARTMENT OF CSE
12 | P a g e
});
$("#st2").click(function() {
$(".fa-star").css("color", "black");
$("#st1, #st2").css("color", "yellow");
});
$("#st3").click(function() {
$(".fa-star").css("color", "black")
$("#st1, #st2, #st3").css("color", "yellow");
});
$("#st4").click(function() {
$(".fa-star").css("color", "black");
$("#st1, #st2, #st3, #st4").css("color", "yellow");
});
$("#st5").click(function() {
FULL STACK DEVELOPMENT LAB
14 | P a g e
$(".fa-star").css("color", "black");
$("#st1, #st2, #st3, #st4, #st5").css("color", "yellow");
});
});
</script>
</body>
</html>
15 | P a g e
Now we are creating a login form which is a very important in any application or website as you
know if open any website or application you will get a message to login if you click that you will
be redirected to login page in this week we will be creating login page
File Structure:-
----------------------------------------------App.js--------------------------------------
import './App.css';
function App() {
// React States
16 | P a g e
const database = [
username: "user1",
password: "pass1"
},
username: "user2",
password: "pass2"
];
const errors = {
uname: "invalid
password"
};
event.preventDefault();
17 | P a g e
Downloaded by Nagilla Laxman
DEPARTMENT OF CSE
if (userData) {
// Invalid password
} else {
setIsSubmitted(true);
} else {
};
errorMessages.name && (
<div className="error">{errorMessages.message}</div>
);
const renderForm = (
<div className="form">
FULL STACK DEVELOPMENT LAB
18 | P a g e
Downloaded by Nagilla Laxman
DEPARTMENT OF CSE
<form onSubmit={handleSubmit}>
<div className="input-container">
<label>Username </label>
{renderErrorMessage("uname")}
</div>
<div className="input-container">
<label>Password </label>
{renderErrorMessage("pass")}
</div>
<div className="button-container">
</div>
</form>
</div>
);
return (
<div className="app">
<div className="login-form">
</div>
</div>
FULL STACK DEVELOPMENT LAB
19 | P a g e
);
App.css
.app {
font-family: sans-serif;
display: flex;
align-items: center;
justify-content:
center; flex-direction:
height: 100vh;
input[type="text"],
input[type="password"] {
height: 25px;
20 | P a g e
input[type="submit"]
{ margin-top: 10px;
cursor: pointer;
font-size: 15px;
background: #01d28e;
color: #fff;
input[type="submit"]:hover {
background: #6cf0c2;
.button-container {
display: flex;
justify-content: center;
.login-form {
background-color: white;
padding: 2rem;
21 | P a g e
.list-container {
display: flex;
.error {
color: red;
font-size: 12px;
.title {
font-size: 25px;
margin-bottom: 20px;
.input-container {
display: flex;
flex-direction: column;
gap: 8px;
margin: 10px;
22 | P a g e
23 | P a g e
1. App.js
24 | P a g e
function App()
{ return (
<div className="main-container">
<h1 className="main-heading">
Blog App using React Js
</h1>
<Posts />
</div>
);
}
2. Posts.js
import React from "react";
import "./style.css";
25 | P a g e
return (
<div className="posts-container">
{blogPosts.map((post, index) => (
<Post key={index} index={index} post={post} />
FULL STACK DEVELOPMENT LAB
26 | P a g e
))}
</div>
);
};
3. Post.js
import React from "react";
import "./style.css";
const Post = ({ post: { title, body,
imgUrl, author }, index }) =>
{ return (
<div className="post-container">
<h1 className="heading">{title}</h1>
<img className="image" src={imgUrl} alt="post" />
<p>{body}</p>
<div className="info">
<h4>Written by: {author}</h4>
</div>
</div>
);
};
27 | P a g e
28 | P a g e
Downloaded by Nagilla Laxman
DEPARTMENT OF CSE
OUTPUT
29 | P a g e
This week will have many pages like Header,footer,categories and app.jsx
File Structure:
30 | P a g e
App.jsx
import "./index.css"
import "./App.css"
import products from "./assets/products.json"
import Product from "./components/Product";
<div className={"grid"}>
{
products.map((product, i) => <Product {...product} key={i}/>)
}
</div>
</main>
<div
id="snipcart"
data-api-
key="NWMwZWNkZGMtZjU2ZS00YzM3LWFlZjYtMmM5Zjk0MWViZDcxNjM3Njg0OTY
0ODg5NTk4MTM3" hidden
>
</div>
</div>
);
}
Components/Product/index.js
import "./index.css";
return (
<div
key={id}
className={"product"}
>
31 | P a g e
<img
src={imageUrl}
alt={`Image of ${name}`}
className={"image-product"}
/>
<h3>{name}</h3>
<p>{description}</p>
<span>${price}</span>
<div>
<button
className="snipcart-add-item"
data-item-id={id}
data-item-image={imageUrl}
data-item-name={name}
data-item-url="/"
data-item-price={price}
>
Add to Cart
</button>
</div>
</div>
);
}
Assets/products.json
[
{
"id": "t-shirt",
"name": "Fruits",
"price": 35.0,
"imageUrl": "https://www.lalpathlabs.com/blog/wp-content/uploads/2019/01/Fruits-and-
Vegetables.jpg",
"description": "A Basket of fruits",
"url": "/api/products/halfmoon"
},
{
"id": "wallet",
"name": "Vegitables",
"price": 20.0,
32 | P a g e
"imageUrl": "https://img.freepik.com/free-photo/bottom-view-fruits-vegetables-radish-cherry-
tomatoes-persimmon-tomatoes-kiwi-cucumber-apples-red-cabbage-parsley-quince-aubergines-
blue-table_140725-146174.jpg",
"description": "A Basket of Veges",
"url": "/api/products/wallet"
},
{
"id": "cup",
"name": "Milk",
"price": 5.0,
"imageUrl": "https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcSeujHMy6OLRZHTpsrUMVLsHyio1mZiZI4fMQ&us
qp=CAU",
"description": "Healthy Milk",
"url": "/api/products/veiltail"
}
]
Output
33 | P a g e
File Structure:
34 | P a g e
firebase.js
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
const firebaseApp =
firebase.initializeApp({ apiKey: "",
authDomain: "",
projectId: ",
storageBucket: ",
messagingSenderId: "",
appId: ":,
measurementId: ""
});
const db = firebaseApp.firestore();
Note Replace the highlighted code with your firebase connection compoenents
You can get you own keys from firebase account for more details Take the
Reference of below video
https://www.youtube.com/watch?v=ad6IavyAHsQ
Todo.js
import { ListItem, List, ListItemAvatar, ListItemText, Button, Modal, makeStyles
} from '@material-ui/core'
import './Todo.css';
import React, { useState } from 'react';
import db from './firebase'
function Todo(props) {
35 | P a g e
db.collection('todos').doc(props.todo.id).set({ to
do: input
}, { merge: true })
setOpen(false);
}
return (
<>
<div
open={open}
onClose={e => setOpen(false)}
>
<div >
<h1>I am a model</h1>
<input placeholder={props.todo.todo} value={input}
onChange={event => setInput(event.target.value)} />
<button onClick={updateTodo}>Update Todo</button>
</div>
</div>
<ul className='todo_list'>
<li>
<li primary={props.todo.todo} secondary='Dummy deadline ⏰' />
</li>
<button onClick={e => setOpen(true)}>Edit</button>
<button onClick={event =>
db.collection('todos').doc(props.todo.id).delete()}>❌DELETE ME</button>
</ul>
</>
)
}
36 | P a g e
function App() {
const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');
// when the upload, we need to listen to the database and fetch new todos as they get
added/remove
useEffect(() => {
// This code here... fires when the app.js lodes
db.collection('todos').orderBy('timestamp', 'desc').onSnapshot(snapshot => {
// console.log(snapshot.docs.map(doc => doc.data()));
setTodos(snapshot.docs.map(doc => ({id: doc.id, todo: doc.data().todo})))
})
}, []);
db.collection('todos').add({ tod
o: input,
timestamp: firebase.firestore.FieldValue.serverTimestamp()
})
setTodos([...todos, input]);
setInput(' '); // clear up the input after clicking todo
console.log(todos)
}
return (
<div className="App">
<h1>Build A TODO App 🚀!</h1>
<form>
37 | P a g e
<form>
<span>✅ Write a Todo</span>
<input value={input} onChange={event => setInput(event.target.value)} />
</form>
<ul>
{todos.map(todo => (
<Todo todo={todo}/>
// <li>{todo}</li>
))}
<li></li>
</ul>
</div>
);
}
38 | P a g e
OUTPUT
39 | P a g e