Fs Lab Index Record
Uploaded by
PriyaFs Lab Index Record
Uploaded by
PriyaCollege of Engineering & Technology
(An Autonomous Institution)
Kothandaraman Nagar, Dindigul- 624 622. Tamilnadu.
IT3511 –FULL STACK WEB DEVELOPMENT
LABORATORY RECORD NOTE BOOK
Name : ……………………………………………
Register No: ……………………………………...
Year & Sec: ………………………………………
PSNA
College of Engineering & Technology
(An Autonomous Institution)
Kothandaraman Nagar, Dindigul- 624 622. TAMILNADU.
RECORD NOTE BOOK
Reg.No.
Certify that this is the bonafide record of work done by
Selvan/Selvi …………….…….…………….. of the FIFTH semester
INFORMATION TECHNOLOGY branch during the year 2023 - 2024 in the
IT3511 – FULL STACK WEB DEVELOPMENT Laboratory.
Staff-in-Charge Head of the Department
Submitted for the University Practical
Examination on / /2023
Internal Examiner External Examiner
CONTENTS
PAGE
S.No DATE NAME OF THE EXPERIMENT MARK SIGN
NO.
Develop a portfolio website for yourself whichgives
1. details about yourself for potential recruiter.
Create a web application to manage the TO-DO
2.
list of users, where users can login and manage
their to-do items
Create a simple micro blogging application (like
twitter) that allows people to post their content
3.
which can be viewed by people who follow them.
Create a food delivery website where users can
4. order food from a particular restaurant listed in the
website.
5. Develop a classifieds web application to buy and
sell used products.
6. Develop a leave management system for an
organization where users can apply different types
of leaves such as casual leave and medical
leave. They also can view the available number of
days.
7. Develop a simple dashboard for projec management
where the statuses of various tasks ar available. New
tasks can be added and the status o
existing tasks can be changed among Pending, In
Progress or Completed.
8. Develop an online survey application where a
collection of questions is available and users
are asked to answer any random 5 questions.
Average:
EXP NO:
Develop A Portfolio Website For Yourself Which Gives Details About
DATE: Yourself For A Potential Recruiter.
AIM:
To develop a portfolio website that describes the information about personal details for
potential recruiter
ALGORITHM:
1. Start the Program
2. Write the content inside <body> tag
3. Using unordered list some of the tabs such as Home, About, Projects, Education,
Skills, Contact etc. are created
4. The style properties are created in separate sheet in the name of “style.css”
5. Style.css is linked with this index sheet using <href>
6. Run the program
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Vishwaharan - Portfolio</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="Education.html">Education</a></li>
<li><a href="Skills.html">Skills</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</nav>
<br>
<center>
<img src="img.png" alt="" height="50%" width="19%">
</center>
</body>
</html>
Style.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
header {
background-color: red;
background-image: linear-gradient(to bottom right, red, yellow);
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: red;
background-image: linear-gradient(to bottom right, red, yellow);
color: #fff;
padding: 10px;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.profile-image {
display: block;
margin: 0 auto;
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
.details {
margin-top: 20px;
}
.details p {
margin-bottom: 10px;
}
.details p strong {
font-weight: bold;
}
.skills {
margin-top: 20px;
}
.skills ul {
list-style-type: none;
padding: 0;
}
.skills li {
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
padding: 5px 10px;
background-color: #ccc;
border-radius: 3px;
}
Skills.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Vishwaharan - Portfolio</h1>
</header>
<br>
<div class="container">
<section id="about">
<h2>Skills</h2>
<ul>
<li>HTML</li><br>
<li>CSS</li><br>
<li>JavaScript</li><br>
<li>Python</li><br>
<li>Java</li>
</ul>
</div>
</section>
</div>
</body>
</html>
Projects.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Vishwaharan - Portfolio</h1>
</header>
<div class="container">
<section id="about">
<h2>Projects</h2>
<h3><b>Driver Drowsiness System</b></h3>
<p>Driver drowsiness detection is a car safety technology which helps prevent
accidents caused by the driver getting drowsy.
</p>
</div>
</section>
</div>
</body>
</html>
Education.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Vishwaharan - Portfolio</h1>
</header>
<br>
<div class="container">
<section id="about">
<h2>Education</h2>
<p><b>Higher Studies :</b></p>
<p>Chevalier Academy and Matriculation School</p>
<p><b>Degree in Inforamtion Technology : </b></p>
<p>PSNA College Of Engineering and Technology</p>
</div>
</section>
</div>
</body>
</html>
Contact.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Vishwaharan - Portfolio</h1>
</header>
<br>
<div class="container">
<section id="about">
<h2>Contact Me :</h2>
<ul>
<li>Email: [email protected]</li><br>
<li>Phone: 6385872619</li><br>
<li>LinkedIn: https://www.linkedin.com/in/vishwaharan-m-b57481227</li>
</ul>
</div>
</section>
</div>
</body>
</html>
OUTPUT:
Preparation 30
Performance 30
Record 40
Total 100
RESULT:
Thus the script to create website portfolio has been executed successfully.
EXP NO: 2
Create a web application to manage the TO-DO list of users, where users
DATE: can login and manage their to-do items.
AIM:
To create a web application to manage the TO-DO list of users, where users can login and
manage their to-do items.
ALGORITHM:
1. Start the Program
2. Write the content inside <body> tag
3. Using the Login.html file, the login page for todo list is created
4. Using the Todo.html file, the todo_list page is created
5. Use Media Queries to make the website portable for various devices
6. The style properties are created inside the html file using <style> tag
7. Run the program
Login.html
<!DOCTYPE html>
<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>Login page in HTML</title>
<style>
body
{
font-family:sans-serif;
background: -webkit-linear-gradient(to right, #155799, #159957);
background: linear-gradient(to right, #155799, #159957);
color:whitesmoke;
}
h1{
text-align: center;
}
form{
width:35rem;
margin: auto;
color:whitesmoke;
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(11, 15, 13, 0.582);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.125);
padding: 20px 25px;
}
input[type=text], input[type=password]{
width: 100%;
margin: 10px 0;
border-radius: 5px;
padding: 15px 18px;
box-sizing: border-box;
}
input[type=button] {
background-color: #030804;
color: white;
padding: 14px 20px;
border-radius: 5px;
margin: 7px 0;
width: 100%;
font-size: 18px;
}
.headingsContainer{
text-align: center;
}
.headingsContainer p{
color: gray;
}
.mainContainer{
padding: 16px;
}
.subcontainer{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.subcontainer a{
font-size: 16px;
margin-bottom: 12px;
}
span.forgotpsd a {
float: right;
color: whitesmoke;
padding-top: 16px;
}
.forgotpsd a{
color: rgb(74, 146, 235);
}
.forgotpsd a:link{
text-decoration: none;
}
.register{
color: white;
text-align: center;
}
.register a{
color: rgb(74, 146, 235);
}
.register a:link{
text-decoration: none;
}
@media screen and (max-width: 600px) {
form{
width: 25rem;
}
}
@media screen and (max-width: 400px) {
form{
width: 20rem;
}
}
</style>
</head>
<body>
<center>
<h1>TO-DO List</h1>
</center>
<form action="">
<div class="headingsContainer">
<h3>Sign in</h3>
<p>Sign in with your username and password</p>
</div>
<div class="mainContainer">
<label for="username">Your username</label>
<input type="text" placeholder="Enter Username" name="username" >
<br><br>
<label for="pswrd">Your password</label>
<input type="password" placeholder="Enter Password" name="pswrd">
<div class="subcontainer">
<p class="forgotpsd"> <a href="#">Forgot Password?</a></p>
</div>
<input type="button" onClick="parent.location='todo.html'" value='Login'>
</div>
</form>
</body>
</html>
Todo.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple To Do List</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.2/css/all.min.css">
<style>
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 100vh;
color: #111111;
background: -webkit-linear-gradient(to right, #155799, #159957);
background: linear-gradient(to right, #155799, #159957);
}
.container{
width: 40%;
min-width: 450px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 30px;
padding: 30px 40px;
}
#newtask{
position: relative;
background-color: #ffffff;
padding: 30px 20px;
border-radius: 5px;
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
#newtask input{
width: 70%;
width: 70%;
height: 45px;
font-family: 'Poppins',sans-serif;
font-size: 15px;
border: 2px solid #d1d3d4;
padding: 12px;
color: #111111;
font-weight: 500;
position: relative;
border-radius: 5px;
}
#newtask input:focus{
outline: none;
border-color: #8052ec;
}
#newtask button{
position: relative;
float: right;
width: 20%;
height: 45px;
border-radius: 5px;
font-family: 'Poppins',sans-serif;
font-weight: 500;
font-size: 16px;
background-color: #8052ec;
border: none;
color: #ffffff;
cursor: pointer;
outline: none;
}
#tasks{
background-color: #ffffff;
padding: 30px 20px;
margin-top: 60px;
border-radius: 10px;
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
width: 100%;
position: relative;
}
.task{
background-color: #ffffff;
height: 50px;
padding: 5px 10px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #d1d3d4;
cursor: pointer;
}
.task span{
font-family: 'Poppins',sans-serif;
font-size: 15px;
font-weight: 400;
}
.task button{
background-color: #8052ec;
color: #ffffff;
height: 100%;
width: 40px;
border-radius: 5px;
border: none;
cursor: pointer;
outline: none;
}
.completed{
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="container">
<div id="newtask">
<input type="text" placeholder="Task to be done..">
<button id="push">Add</button>
</div>
<div id="tasks"></div>
</div>
<script>
document.querySelector('#push').onclick = function(){
if(document.querySelector('#newtask input').value.length == 0){
alert("Please Enter a Task")
}
else{
document.querySelector('#tasks').innerHTML += `
<div class="task">
<span id="taskname">
${document.querySelector('#newtask input').value}
</span>
<button class="delete">
<i class="far fa-trash-alt"></i>
</button>
</div>
var current_tasks = document.querySelectorAll(".delete");
for(var i=0; i<current_tasks.length; i++){
current_tasks[i].onclick = function(){
this.parentNode.remove();
}
}
var tasks = document.querySelectorAll(".task");
for(var i=0; i<tasks.length; i++){
tasks[i].onclick = function(){
this.classList.toggle('completed');
}
}
document.querySelector("#newtask input").value = "";
}
}
</script>
</body>
</html>
OUTPUT:
Preparation 30
Performance 30
Record 40
Total 100
RESULT:
Thus the script to create to-do list has been executed successfully.
EXP NO:
Create a simple micro blogging application ( like twitter ) that allows
DATE: people to post their content which can be viewed by people who follow
them.
AIM:
Create a simple micro blogging application (like twitter) that allows people to post their
content which can be viewed by people who follow them
ALGORITHM:
1. Start the Program
2. Within the <nav> tag create the tweet box
3. Include the profile, friends , groups options inside the <div> tag and locate it to left
4. Include the followers list in the right side using <div> tag and css styles
5. In the centre , include the posts and tweets of the followers
6. The style properties are created in separate sheet in the name of “style.css”
7. Style.css is linked with this index sheet using <href>
8. Run the program
Index.html
<!DOCTYPE html>
<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>TechX</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="script.js"></script>
<nav>
<div class="left">
<h2 style="color: Black">TechX</h2>
<div class="search_bar">
<i class="fa-solid fa-magnifying-glass"></i>
<input type="text" placeholder="Search">
</div>
</div>
</nav>
<div class="main">
<div class="left">
<div class="left">
<div class="img">
<img src="image/profile.png">
<p>Vishwaharan</p>
</div>
<div class="img">
<img src="image/friend.png">
<p>Friends</p>
</div>
<div class="img">
<img src="image/saved.png">
<p>Saved</p>
</div>
<div class="img">
<img src="image/group.png">
<p>Groups</p>
</div>
<div class="img">
<img src="image/marketplace.png">
<p>Marketplace</p>
</div>
<div class="img">
<img src="image/watch.png">
<p>Watch</p>
</div>
<hr>
</div>
</div>
<div class="center">
<div class="my_post">
<div class="post_top">
<img src="image/profile.png">
<input type="text" id="tweetInput" placeholder="What's on your mind?">
</div>
</div>
<div class="friends_post">
<div class="friend_post_top">
<div class="img_and_name">
<img src="image/profile.png">
<div class="friends_name">
<p class="friends_name">
Vishwaharan
</p>
<p class="time">10h.<i class="fa-solid fa-user-group"></i></p>
</div>
</div>
<div class="menu">
<i class="fa-solid fa-ellipsis"></i>
</div>
</div>
<center><p><b>Switzerland</b></p></center>
<br>
<img src="image/post_1.jpg" width="100%">
</div>
<div class="friends_post">
<div class="friend_post_top">
<div class="img_and_name">
<img src="image/contact_1.jpg">
<div class="friends_name">
<p class="friends_name">
Siva Prakash
</p>
<p class="time">6h.<i class="fa-solid fa-user-group"></i></p>
</div>
</div>
<div class="menu">
<i class="fa-solid fa-ellipsis"></i>
</div>
</div>
<center><p><b>Camping with Friends</b></p></center>
<br>
<img src="image/post_3.png" width="100%">
</div>
</div>
<div class="right">
<div class="right">
<div class="third_warpper">
<div class="contact_tag">
<h2>Followers</h2>
<div class="contact_icon">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
</div>
<div class="contact">
<img src="image/contact_1.jpg">
<p>Siva Prakash</p>
</div>
<div class="contact">
<img src="image/contact_2.jpg">
<p>Bala Aravind</p>
</div>
<div class="contact">
<img src="image/contact_3.jpg">
<p>Trafalgar Law</p>
</div>
<div class="contact">
<img src="image/contact_4.jpg">
<p>Dark King Rayleigh</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Style.css:
*{ nav .left .search_bar input{
margin: 0; background: transparent;
padding: 0; outline: none;
box-sizing: border-box; border: 0;
font-family: sans-serif; font-size: 16px;
} width: 200px;
nav{ }
width: 100%; nav .center{
height: 60px; position: relative;
display: flex; right: 45px;
align-items: center; }
justify-content: space-between; nav .center i{
border-bottom: 1px solid #cccccc; margin: 0 45px 0 45px;
background: #fff; font-size: 22px;
position: fixed; }
top: 0; nav .center i:hover{
z-index: 1000; color: #45abff;
} cursor: pointer;
nav .left{ }
display: flex; nav .right{
align-items: center; display: flex;
justify-content: center; align-items: center;
margin-left: 10px; margin-right: 10px;
} }
nav .left .search_bar{ nav .right img{
width: 250px; width: 35px;
height: 40px; height: 35px;
background: #efefef; object-fit: cover;
border-radius: 30px; object-position: center;
padding: 0 10px; border-radius: 50%;
margin-left: 10px; margin-left: 8px;
position: relative; line-height: 45px;
left: 15px; cursor: pointer;
} }
nav .left .search_bar i{ /*-----------------main---------------*/
line-height: 40px; .main{
font-size: 19px; display: flex;
color: #919191; margin-top: 60px;
margin-right: 5px; background: #f5f5f5;
} }
.main .left{ background: #cccccc;
width: 25%; margin: 10px 0;
height: 92vh; }
overflow: hidden; .main .left:hover .edit{
overflow-y: scroll; opacity: 1;
background: #f5f5f5; }
padding: 20px 6px 5px 10px; .main .center{
position: fixed; width: 50%;
} height: auto;
.main .left::-webkit-scrollbar{ padding: 20px 20px 0 20px;
width: 7px; background: #f5f5f5;
} margin-left: 25%;
.main .left::-webkit-scrollbar-thumb{ }
border-radius: 20px; .main .center .my_post{
background: #f5f5f5; width: 100%;
} height: auto;
.main .left:hover::-webkit-scrollbar- background: #fff;
thumb{ padding: 10px 15px;
background: #cccccc; border-radius: 7px;
} box-shadow: 0 1px 8px rgba(0,0,0,0.2);
.main .left .img{ margin: 10px 0;
display: flex; }
align-items: center; .main .center .my_post img{
cursor: pointer; width: 45px;
transition: 0.2s; height: 45px;
} border-radius: 50%;
.main .left .img:hover{ object-fit: cover;
background: #e3e3e3; object-position: center;
} }
.main .left .img img{ .main .center .my_post .post_top{
width: 40px; display: flex;
height: 40px; align-items: center;
object-fit: cover; }
object-position: center; .main .center .my_post .post_top input{
border-radius: 50%; width: 90%;
margin: 8px 15px 8px 0; padding: 10px;
} margin-left: 20px;
.main .left hr{ border: 0;
width: 100%; outline: none;
height: 1px; background: #efefef;
border: 0; border-radius: 30px;
font-size: 17px; height: 35px;
} border-radius: 50%;
.main .center .my_post .post_top }
input:hover{ .main .center .friends_post
background: #e3e3e3; .friend_post_top .menu:hover{
cursor: pointer; background: #efefef;
} cursor: pointer;
.main .center .friends_post{ }
margin: 10px 0; .main .center .friends_post
width: 100%; .friend_post_top .menu i{
height: auto; line-height: 35px;
background: #fff; margin-left: 8px;
padding: 10px 15px; font-size: 18px;
border-radius: 7px; }
box-shadow: 0 1px 8px rgba(0,0,0,0.2); .main .center .friends_post .info{
} display: flex;
.main .center .friends_post align-items: center;
.friend_post_top{ justify-content: space-between;
display: flex; margin: 10px 0;
align-items: center; }
justify-content: space-between; /*-----------------right------------------*/
margin-bottom: 15px; .main .right{
} width: 25%;
.main .center .friends_post height: 92vh;
.friend_post_top .img_and_name{ overflow: hidden;
display: flex; overflow-y: scroll;
align-items: center; background: #f5f5f5;
} padding: 20px 10px 5px 6px;
.main .center .friends_post position: fixed;
.friend_post_top .img_and_name img{ right: 0;
width: 45px; }
height: 45px; .main .right::-webkit-scrollbar{
border-radius: 50%; width: 7px;
object-fit: cover; }
object-position: center; .main .right::-webkit-scrollbar-thumb{
margin-right: 8px; border-radius: 20px;
cursor: pointer; background: #f5f5f5;
} }
.main .center .friends_post .main .right:hover::-webkit-scrollbar-
.friend_post_top .menu{ thumb{
width: 35px; background: #cccccc;
}
.main .right .third_warpper .contact_tag{
display: flex;
align-items: center;
justify-content: space-between;
}
.main .right .third_warpper .contact_tag h2{
font-size: 18px;
color: #919191;
margin: 5px 0;
}
.main .right .third_warpper .contact_tag .contact_icon i{
margin: 0 5px;
width: 35px;
height: 35px;
border-radius: 50%;
line-height: 35px;
padding-left: 10px;
}
.main .right .third_warpper .contact_tag .contact_icon i:hover{
background: #efefef;
cursor: pointer;
}
.main .right .third_warpper .contact{
display: flex;
align-items: center;
}
.main .right .third_warpper .contact img{
width: 35px;
height: 35px;
object-fit: cover;
object-position: center;
border-radius: 50%;
margin: 8px 15px 8px 0;
border: 3px solid #45abff;
cursor: pointer;
}
OUTPUT:
Preparation 30
Performance 30
Record 40
Total 100
RESULT:
Thus the script to create micro-blogging website has been executed successfully.
EXP NO:
Create a food delivery website where users can order food from a
DATE: particular restaurant listed in the website
AIM:
To create a food delivery website where users can order food from a particular restaurant
listed in the website
ALGORITHM:
1. Start the Program
2. Display the different restaurants details using <div> tag
3. Link each restaurant to its separate food menu page using <a> tag
4. Add the items to your Cart using the function addToCart()
5. The reloadCart() function is used to empty the Cart items
6. The style properties are created in separate sheet in the name of “style.css”
7. Style.css is linked with this index sheet using <href>
8. Run the program
Index.html
<html>
<head>
<title>RESTAURANT WEBSITE</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
</head>
<body>
<div class="main">
<div class="header">
<div class="header-left">
<div class="header-right">
<ul>
<li><a href="#!">Home</a></li>
<li><a href="#!">About</a></li>
<li><a href="#!">Review</a></li>
<li><a href="#!">Contact</a></li>
</ul>
</div>
<div class="header-bottom">
<div class="header-font">Eat healthy food & Enjoy your life.</div>
</div>
</div>
<div class="content-part-3">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="content-part-3-left"><img src="images/menu/1.jpg" width="230"
height="155"></div>
<div class="content-part-3-right">
<div class="content-part-3-right-h4">Saravanabhavan</div>
Food, Folks and Fun all together.
<div class="margin_p3"><a href="menu.html" class="order-now">Order Now</a></div>
</div>
<div class="content-part-3-left"><img src="images/menu/2.jpg" width="230"
height="155"></div>
<div class="content-part-3-right">
<div class="content-part-3-right-h4">Hotel Aambur</div>
Spices have a story.
<div class="margin_p3"><a href="menu.html" class="order-now">Order
Now</a></div>
</div>
<div class="content-part-3-left"><img src="images/menu/3.jpg" width="230"
height="155"></div>
<div class="content-part-3-right">
<div class="content-part-3-right-h4">Hotel Anbu</div>
Like Mom’s house.
<div class="margin_p3"><a href="menu.html" class="order-now">Order
Now</a></div>
</div>
<div class="content-part-3-left"><img src="images/menu/4.jpg" width="230"
height="155"></div>
<div class="content-part-3-right">
<div class="content-part-3-right-h4">Hotel Aachis</div>
Listen to your tongue.
<div class="margin_p3"><a href="menu.html" class="order-now">Order
Now</a></div>
</div>
<div class="content-part-3-left"><img src="images/menu/5.jpg" width="230"
height="155"></div>
<div class="content-part-3-right">
<div class="content-part-3-right-h4">Hotel A2B</div>
Quality first.
<div class="margin_p3"><a href="menu.html" class="order-now">Order
Now</a></div>
</div>
<div class="content-part-3-left"><img src="images/menu/6.png" width="230"
height="155"></div>
<div class="content-part-3-right">
<div class="content-part-3-right-h4">Star biriyani</div>
You need a chicken dinner.
<div class="margin_p3"><a href="menu.html" class="order-now">Order
Now</a></div>
</div>
<div class="clearfix"></div>
</div>
</body>
</html>
Order.html
<html>
<head>
<title>RESTAURANT WEBSITE</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<style>
body {
text-align: center;
padding: 40px 0;
}
h1 {
color: #88B04B;
font-family: "Nunito Sans", "Helvetica Neue", sans-serif;
font-weight: 900;
font-size: 40px;
margin-bottom: 10px;
}
p{
color: #404F5E;
font-family: "Nunito Sans", "Helvetica Neue", sans-serif;
font-size:20px;
margin: 0;
}
i{
color: #9ABC66;
font-size: 100px;
line-height: 200px;
margin-left:-15px;
}
</style>
</head>
<body>
<div class="main">
<div class="header">
<div class="header-right">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#!">About</a></li>
<li><a href="#!">Review</a></li>
<li><a href="#!">Contact</a></li>
</ul>
</div>
<div class="header-bottom">
<div class="header-font">Eat healthy food & Enjoy your life.</div>
</div>
</div>
<div class="content-part-3">
<div class="card">
<br><br><br>
<div style="border-radius:200px; height:200px; width:200px; background: #F8FAF5;
margin:0 auto;">
<i class="checkmark">✓</i>
</div>
<h1>Order Success</h1>
<p>Food is preparing</p><br><br>
</div>
</div>
<div class="clearfix"></div>
</div>
</body>
</html>
Menu.html
<html>
<head>
<title>RESTAURANT WEBSITE</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="header">
<div class="header-right">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#!">About</a></li>
<li><a href="#!">Review</a></li>
<li><a href="#!">Contact</a></li>
</ul>
</div>
<div class="header-bottom">
<div class="header-font">Eat healthy food & Enjoy your life.</div>
</div>
</div>
<div class="content-part-3">
<div class="container">
<header>
<h1>Your Shopping Cart</h1>
<div class="shopping">
<img src="image/shopping.svg">
<span class="quantity">0</span>
</div>
</header>
<div class="list">
</div>
</div>
<div class="card">
<h1>Cart</h1>
<ul class="listCard">
</ul>
<div class="checkOut">
<div class="total">0</div>
<div class="closeShopping">
<a href="order.html">ORDER NOW</a></div>
</div>
<script src="app.js"></script>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</body>
</html>
Style.css:
body{ justify-content: center;
background-color: #E3E7E8; align-items: center;
font-family: system-ui; color: #fff;
} position: absolute;
.container{ top: -5px;
width: 1000px; left: 80%;
margin: auto; padding: 3px 10px;
transition: 0.5s; }
} .list{
header{ display: grid;
display: grid; grid-template-columns: repeat(3, 1fr);
grid-template-columns: 1fr 50px; column-gap: 20px;
margin-top: 50px; row-gap: 20px;
} margin-top: 50px;
header .shopping{ }
position: relative; .list .item{
text-align: right; text-align: center;
} background-color: #DCE0E1;
header .shopping img{ padding: 20px;
width: 40px; box-shadow: 0 50px 50px #757676;
} letter-spacing: 1px;
header .shopping span{ }
background: red; .list .item img{
border-radius: 50%; width: 90%;
display: flex; height: 430px;
object-fit: cover; bottom: 0;
} width: 100%;
.list .item .title{ display: grid;
font-weight: 600; grid-template-columns: repeat(2, 1fr);
} }
.list .item .price{ .card .checkOut div{
margin: 10px; background-color: #E8BC0E;
} width: 100%;
.list .item button{ height: 70px;
background-color: #1C1F25; display: flex;
color: #fff; justify-content: center;
width: 100%; align-items: center;
padding: 10px; font-weight: bold;
} cursor: pointer;
.card{ }
position: fixed; .card .checkOut div:nth-child(2){
top:0; background-color: #577ece;
left: 100%; color: #fff;
width: 500px; }
background-color: #453E3B; .listCard li{
height: 100vh; display: grid;
transition: 0.5s; grid-template-columns: 100px repeat(3,
} 1fr);
.active .card{ color: #fff;
left: calc(100% - 500px); row-gap: 10px;
} }
.active .container{ .listCard li div{
transform: translateX(-200px); display: flex;
} justify-content: center;
.card h1{ align-items: center;
color: #E8BC0E; }
font-weight: 100; .listCard li img{
margin: 0; width: 90%;
padding: 0 20px; }
height: 80px; .listCard li button{
display: flex; background-color: #fff5;
align-items: center; border: none;
} }
.card .checkOut{ .listCard .count{
position: absolute; margin: 0 10px;
margin: 0 10px; }
App.js
let openShopping = },
document.querySelector('.shopping'); {
let closeShopping = id: 4,
document.querySelector('.closeShopping'); name: 'Burger',
let list = document.querySelector('.list'); image: 'c.png',
let listCard = price: 80
document.querySelector('.listCard'); },
let body = document.querySelector('body'); {
let total = document.querySelector('.total'); id: 5,
let quantity = name: 'Pepper Fish',
document.querySelector('.quantity'); image: '10.png',
price: 180
openShopping.addEventListener('click', },
()=>{ {
body.classList.add('active'); id: 6,
}) name: 'Grill Chicken',
closeShopping.addEventListener('click', image: '6.png',
()=>{ price: 300
body.classList.remove('active'); }
}) ];
let listCards = [];
let products = [ function initApp(){
{ products.forEach((value, key) =>{
id: 1, let newDiv =
name: 'Panner Fried Rice', document.createElement('div');
image: 'g.png', newDiv.classList.add('item');
price: 110 newDiv.innerHTML = `
}, <img
{ src="images/menu/${value.image}">
id: 2, <div
name: 'Schezwan Noodles', class="title">${value.name}</div>
image: 'h.png', <div
price: 95 class="price">${value.price.toLocaleStrin
}, g()}</div>
{ <button
id: 3, onclick="addToCard(${key})">ADD TO
name: 'Chicken lollipop', CART</button>`;
image: 'd.jfif', list.appendChild(newDiv);
price: 150 })
} <button
initApp(); onclick="changeQuantity(${key},
function addToCard(key){ ${value.quantity - 1})">-</button>
if(listCards[key] == null){ <div
listCards[key] = class="count">${value.quantity}</div>
JSON.parse(JSON.stringify(products[key]) <button
); onclick="changeQuantity(${key},
listCards[key].quantity = 1; ${value.quantity + 1})">+</button>
} </div>`;
reloadCart(); listCard.appendChild(newDiv);
} quantity.innerText = count;
function reloadCart(){ }
listCard.innerHTML = ''; })
let count = 0;
let totalPrice = 0; total.innerText =
listCards.forEach((value, key)=>{ totalPrice.toLocaleString();
totalPrice = totalPrice + value.price;
count = count + value.quantity; }
if(value != null){ function changeQuantity(key, quantity){
let newDiv = if(quantity == 0){
document.createElement('li'); delete listCards[key];
newDiv.innerHTML = ` }else{
<div><img listCards[key].quantity = quantity;
src="images/menu/${value.image}"/></di listCards[key].price = quantity *
v> products[key].price;
<div>${value.name}</div> }
reloadCart();
<div>${value.price.toLocaleString()}</div }
>
<div>
OUTPUT:
Preparation 30
Performance 30
Record 40
Total 100
RESULT:
Thus the script for Online food ordering website has been executed successfully.
EXP NO:
DATE: Develop a classifieds web application to buy and sell used products
AIM:
To develop a classifieds web application to buy and sell used products
ALGORITHM:
1. Start the Program
2. Include the details of the products using the JSON file (“Products.json”)
3. The addCartItem() function is used to add the item to the shopping cart
4. Use Media Queries in the CSS file, to make the website responsive
5. The “fas fa” class is used to include icons in the webpage
6. The style properties are created in separate sheet in the name of “style.css”
7. Style.css is linked with this index sheet using <href>
8. Run the program
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Shopsy</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-
oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar">
<img src="images/img.png" alt="" width="50px"> 
<p>Shopsy</p>
<div class="navbar-center">
<div class="navb">
<a class="active" href="#home">Home</a>
<a href="#news">About</a>
<a href="#contact">Products</a>
<a href="#about">Contact Us</a>
</div>
<div class="cart-btn">
<span class="nav-icon">
<i class="fas fa-cart-plus"></i>
</span>
<div class="cart-items">0</div>
</div>
</div>
</nav>
<header class="hero">
<div class="banner">
</div>
</header>
<section class="products">
<div class="section-title">
<h2>Used Products</h2>
</div>
<div class="products-center">
</div>
</section>
<div class="cart-overlay">
<div class="cart">
<span class="close-cart">
<i class="fas fa-window-close"></i>
</span>
<h2>Your cart</h2>
<div class="cart-content">
</div>
<div class="cart-footer">
<h3>your total: ₹ <span class="cart-total">0</span></h3>
<button class="clear-cart banner-btn">clear cart</button>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Style.css align-items: center;
background: rgb(231, 226, 221);
@import z-index: 1;
url("https://fonts.googleapis.com/css?famil }
y=Lato:400,700"); p{
:root { font-family: 'Segoe UI', Tahoma, Geneva,
--primaryColor: #f09d51; Verdana, sans-serif;
--mainWhite: #fff; font-weight: bold;
--mainBlack: #222; position: relative;
--mainGrey: #ececec; left: 35px;
--mainSpacing: 0.1rem; font-size: 20px;
--mainTransition: all 0.3s linear; }
} .navbar img{
*{ position: relative;
margin: 0; left: 30px;
padding: 0; }
box-sizing: border-box; .navbar-center {
} max-width: 1170px;
body { margin: 0 auto;
color: var(--mainBlack); display: flex;
background: var(--mainWhite); align-items: center;
font-family: "Lato", sans-serif; justify-content: space-between;
} padding: 0 1.5rem;
.navbar a { }
float: left; .nav-icon {
color: #f2f2f2; position: relative;
text-align: center; font-size: 1.5rem;
padding: 14px 16px; left: 80px;
text-decoration: none; }
font-weight: bold; .cart-btn {
font-size: 20px; position: relative;
} cursor: pointer;
.navbar-center a{ left: 50%;
color: black; }
} .cart-items {
.navbar { position: absolute;
position: sticky; top: -8px;
top: 0; left: 60px;
height: 60px; background: var(--primaryColor);
width: 100%; padding: 0 5px;
display: flex; border-radius: 30%;
color: var(--mainWhite); overflow: hidden;
} }
.hero { .bag-btn {
min-height: calc(100vh - 60px); position: absolute;
background: url("./images/hero- top: 70%;
bcg.jpeg") center no-repeat; right: 0;
background-size: 95%; background: var(--primaryColor);
} border: none;
.banner-btn { text-transform: uppercase;
padding: 1rem 3rem; padding: 0.5rem 0.75rem;
text-transform: uppercase; letter-spacing: var(--mainSpacing);
letter-spacing: var(--mainSpacing); font-weight: bold;
font-size: 1rem; transition: var(--mainTransition);
background: var(--primaryColor); transform: translateX(101%);
color: var(--mainBlack); cursor: pointer;
border: 1px solid var(--primaryColor); }
transition: var(--mainTransition); .bag-btn:hover {
cursor: pointer; color: var(--mainWhite);
} }
.products { .fa-shopping-cart {
padding: 4rem 0; margin-right: 0.5rem;
} }
.section-title h2 { .img-container:hover .bag-btn {
text-align: center; transform: translateX(0);
font-size: 2.5rem; }
margin-bottom: 5rem; .product-img {
text-transform: capitalize; display: block;
letter-spacing: var(--mainSpacing); width: 100%;
} min-height: 12rem;
.products-center { transition: var(--mainTransition);
width: 90vw; }
margin: 0 auto; .img-container:hover .product-img {
max-width: 1170px; opacity: 0.5;
display: grid; }
grid-template-columns: repeat(auto-fit, .product h3 {
minmax(260px, 1fr)); text-transform: capitalize;
grid-column-gap: 1.5rem; font-size: 1.1rem;
grid-row-gap: 2rem; margin-top: 1rem;
} letter-spacing: var(--mainSpacing);
.img-container { text-align: center;
position: relative; }
.product h4 { }
margin-top: 0.7rem; .close-cart {
letter-spacing: var(--mainSpacing); font-size: 1.7rem;
color: var(--primaryColor); cursor: pointer;
text-align: center; }
} .cart h2 {
.cart-overlay { text-transform: capitalize;
position: fixed; text-align: center;
top: 0; letter-spacing: var(--mainSpacing);
right: 0; margin-bottom: 2rem;
width: 100%; }
height: 100%; .cart-item {
transition: var(--mainTransition); display: grid;
background: rgb(240, 157, 81, 0.5); align-items: center;
z-index: 2; grid-template-columns: auto 1fr auto;
visibility: hidden; grid-column-gap: 1.5rem;
} margin: 1.5rem 0;
.cart { }
position: fixed; .cart-item img {
top: 0; width: 75px;
right: 0; height: 75px;
width: 100%; }
height: 100%; .cart-item h4 {
overflow: scroll; font-size: 0.85rem;
z-index: 3; text-transform: capitalize;
background: rgb(231, 226, 221); letter-spacing: var(--mainSpacing);
padding: 1.5rem; }
transition: var(--mainTransition); .cart-item h5 {
transform: translateX(100%); margin: 0.5rem 0;
} letter-spacing: var(--mainSpacing);
.showCart { }
transform: translateX(0); .item-amount {
} text-align: center;
.transparentBcg { }
visibility: visible; .remove-item {
} color: grey;
@media screen and (min-width: 768px) { cursor: pointer;
.cart { }
width: 30vw; .fa-chevron-up,
min-width: 450px; .fa-chevron-down {
} color: var(--primaryColor);
cursor: pointer; }
} .cart-footer h3 {
.cart-footer { text-transform: capitalize;
margin-top: 2rem; margin-bottom: 1rem;
letter-spacing: var(--mainSpacing); }
text-align: center;
App.js
const cartBtn = const image
document.querySelector(".cart-btn"); =item.fields.image.fields.file.url;
const closeCartBtn = return {title,price,id,image}
document.querySelector(".close-cart"); })
const clearCartBtn = return products;
document.querySelector(".clear-cart"); }catch (error){
const cartDOM = console.log(error);
document.querySelector(".cart"); }
const cartOverlay = }
document.querySelector(".cart-overlay"); }
const cartItems = class UI{
document.querySelector(".cart-items"); displayProducts(products){
const cartTotal = let result ="";
document.querySelector(".cart-total"); products.forEach(product => {
const cartContent = result += `
document.querySelector(".cart-content"); <article class="product">
const productsDOM = <div class="img-container">
document.querySelector(".products- <img src=${product.image}
center"); alt="product" class="product-img">
let cart = []; <button class="bag-btn" data-
let buttonsDOM =[]; id=${product.id}>
class Products{ <i class="fas fa-shopping-
async getProducts(){ cart"></i>
try{ add to cart
let result = await </button>
fetch("products.json"); </div>
let data = await result.json(); <h3>${product.title}</h3>
let products = data.items; <h4>₹ ${product.price}/-</h4>
products = products.map(item =>{ </article>
const {title,price}= item.fields; `;
const {id} = item.sys; });
productsDOM.innerHTML = result; addCardItem(item){
} const div =
getBagButtons(){ document.createElement('div');
const buttons = div.classList.add('cart-item');
[...document.querySelectorAll(".bag- div.innerHTML =` <img
btn")]; src=${item.image} alt="product">
buttonsDOM = buttons; <div>
buttons.forEach(button => { <h4>${item.title}</h4>
let id =button.dataset.id; <h5>₹${item.price}</h5>
let inCart = cart.find(item =>item.id <span class="remove-
=== id); item" data-id=${item.id}>remove</span>
if (inCart){ </div>
button.innerText= "In cart"; <div>
button.disabled = true; <i class="fas fa-chevron-
} up" data-id=${item.id}></i>
<p class="item-
button.addEventListener('click',(event)=>{ amount">${item.amount}</p>
event.target.innerText = "In cart"; <i class="fas fa-chevron-
event.target.disabled = true; down" data-id=${item.id}></i>
let cartItem = </div> `;
{...Storage.getProduct(id),amount:1}; cartContent.appendChild(div);
cart = [...cart,cartItem]; }
Storage.saveCart(cart ); showCart(){
this.setCartValues(cart);
this.addCardItem(cartItem); cartOverlay.classList.add('transparentBcg')
this.showCart(); ;
}); cartDOM.classList.add('showCart');
}); }
} setupApp(){
setCartValues(cart){ cart = Storage.getCart();
let tempTotal = 0; this.setCartValues(cart);
let itemsTotal=0; this.populateCart(cart);
cart.map(item =>{
tempTotal += item.price * cartBtn.addEventListener('click',this.show
item.amount; Cart);
itemsTotal += item.amount;
}) closeCartBtn.addEventListener('click',this.
cartTotal.innerText = parseFloat hideCart);
(tempTotal.toFixed(2)); }
cartItems.innerText = itemsTotal; populateCart(cart){
}
cart.forEach(item =>
this.addCardItem(item)); addAmount.nextElementSibling.innerText
} =
hideCart(){ tempItem.amount;
}
cartOverlay.classList.remove('transparentB else if
cg'); (event.target.classList.contains('fa-
chevron-down'))
cartDOM.classList.remove('showCart'); {
} let lowerAmount = event.target;
cartLogic(){ let id = lowerAmount.dataset.id;
let tempItem = cart.find(item =>
clearCartBtn.addEventListener("click",()= item.id === id);
>{this.clearCart(); tempItem.amount =
}); tempItem.amount - 1;
cartContent.addEventListener if(tempItem.amount > 0){
('click',event=>{ Storage.saveCart(cart);
this.setCartValues(cart);
if(event.target.classList.contains('remove-
item')) lowerAmount.previousElementSibling.inn
{ erText = tempItem.amount;
let removeItem = event.target; }
let id = removeItem.dataset.id; else {
cartContent.removeChild(removeItem.pare cartContent.removeChild(lowerAmount.pa
ntElement.parentElement); rentElement.parentElement);
this.removeItem(id); this.removeItem(id);
} }
else if }
(event.target.classList.contains('fa- });
chevron-up')) }
{ clearCart(){
let addAmount = event.target; let cartItems = cart.map(item
let id = addAmount.dataset.id; =>item.id);
let tempItem = cart.find(item => cartItems.forEach(id =>
item.id === id); this.removeItem(id));
tempItem.amount = console.log(cartContent.children);
tempItem.amount + 1; while (cartContent.children.lenght > 0){
Storage.saveCart(cart); cartContent.removeChild
this.setCartValues(cart); (cartContent.children[0]);
}
this.hideCart(); return products.find(product =>
} product.id=== id);
removeItem(id){ }
cart = cart.filter(item => item.id !==id); static saveCart(cart){
this.setCartValues(cart);
Storage.saveCart(cart); localStorage.setItem('cart',JSON.stringify(
let button = this.getSingleButton(id); cart))
button.disabled = false; }
button.innerHTML = `<i class= "fas fa- static getCart(){
shopping-cart"></i>add to cart`; return
} localStorage.getItem('cart')?JSON.parse(lo
getSingleButton(id){ calStorage.getItem('cart')):[]
return buttonsDOM.find(button => }
button.dataset.id === id); }
} document.addEventListener("DOMConten
} tLoaded",()=>{
class Storage{ const ui= new UI();
static saveProducts(products){ const products = new Products();
ui.setupApp();
localStorage.setItem("products",JSON.stri products.getProducts().then(products =>
ngify(products)); {ui.displayProducts(products)
} Storage.saveProducts(products);
static getProduct(id){ }).then(()=>{
let products ui.getBagButtons();
=JSON.parse(localStorage.getItem('produc ui.cartLogic();
ts')); });
});
Products.json :
{ {
"items": [ "sys": { "id": "2" },
{ "fields": {
"sys": { "id": "1" }, "title": "Apple Iphone 12",
"fields": { "price": 28000,
"title": "OPPO A78", "image": { "fields": { "file": { "url":
"price": 8000.00, "./images/product-2.jpeg" } } }
"image": { "fields": { "file": { "url": }
"./images/product-1.jpeg" } } } },
} {
}, "sys": { "id": "3" },
"fields": { }
"title": "OnePlus Nord CE 3", },
"price": 12000, {
"image": { "fields": { "file": { "url": "sys": { "id": "8" },
"./images/product-3.jpeg" } } } "fields": {
} "title": "Asus Vivobook 15",
}, "price": 25000,
{ "image": { "fields": { "file": { "url":
"sys": { "id": "4" }, "./images/product-8.jpeg" } } }
"fields": { }
"title": "Vivo T2X 5G", },
"price": 7000, {
"image": { "fields": { "file": { "url": "sys": {
"./images/product-4.jpeg" } } } "id": "9"
} },
}, "fields": {
{ "title": "Canon EOS 11000D",
"sys": { "id": "5" }, "price": 12500,
"fields": { "image": {
"title": "DELL Inspiron 15 3000", "fields": {
"price": 21000, "file": {
"image": { "fields": { "file": { "url": "url": "./images/product-9.jpeg"
"./images/product-5.jpeg" } } } }
} }
}, }
{ }
"sys": { "id": "6" }, },
"fields": { {
"title": "Acer Nitro 5", "sys": {
"price": 32000, "id": "10"
"image": { "fields": { "file": { "url": },
"./images/product-6.jpeg" } } } "fields": {
} "title": "Sony a7 III",
}, "price": 100000,
{ "image": {
"sys": { "id": "7" }, "fields": {
"fields": { "file": {
"title": "Lenovo Ideapad Slim 3", "url": "./images/product-10.jpeg"
"price": 20000, }
"image": { "fields": { "file": { "url": }
"./images/product-7.jpeg" } } } }
} {
}, "sys": {
{ "id": "12"
"sys": { },
"id": "11" "fields": {
}, "title": "Fujifilm X-T3",
"fields": { "price": 60000,
"title": "Nikon D850 SLR Camera", "image": {
"price": 175000, "fields": {
"image": { "file": {
"fields": { "url": "./images/product-12.jpeg"
"file": { }
"url": "./images/product-11.jpeg" }
} }
} }
} }
} ]
}, }
OUTPUT:
Preparation 30
Performance 30
Record 40
Total 100
RESULT:
Thus the script to create a classified website to buy and sell used products has been executed
successfully.
EXP NO:
Develop a leave management system for an organization where users
DATE: can apply different types of leaves such as casual leave and medical
leave. They also can view the available number of days
AIM:
To develop a leave management system for an organization where users can apply different
types of leaves such as casual leave and medical leave. They also can view the available
number of days
ALGORITHM:
1. Start the program
2. The Index page (index.html) allows the users to request for leave and view the
available leave days
3. Add the different types of leaves using <select> and <option> tag
4. Using the addEventListener() method in “script.js” file, the users leave request will be
updated
5. The style properties are created in separate sheet in the name of “styles.css”
6. Styles.css is linked with the index sheet using the <link> tag
7. Run the program
Index.html
<!DOCTYPE html> <select id="leave-type">
<html lang="en"> <option value="casual">Casual
<head> Leave</option>
<meta charset="UTF-8"> <option value="medical">Medical
<meta name="viewport" Leave</option>
content="width=device-width, initial- </select>
scale=1.0"> <div class="date-input">
<link rel="stylesheet" href="styles.css"> <label for="fromDate">From
<title>Leave Management System</title> Date:</label>
</head> <input type="date" id="fromDate">
<body> </div>
<h1>Leave Management System</h1> <div class="date-input">
<div class="leave-form"> <label for="toDate">To Date:</label>
<h2 style="color: black;font-size: <input type="date" id="toDate">
24px;">Name : Vishwaharan M</h2> </div>
<h2>Request Leave</h2>
<form id="leave-request-form"> <label for="leave-days">Number of
<label for="leave-type">Leave Days:</label>
Type:</label>
<input type="number" id="leave-days" <th>Date</th>
min="1" required> <th>Leave Type</th>
<button type="submit">Submit</button> <th>Days</th>
</form> </tr>
</div> </thead>
<div class="leave-summary"> <tbody id="leave-records">
<h2>Leave Summary</h2> </tbody>
<p>Available Leave Days: <span </table>
id="available-days">20</span></p> </div>
<table> <script src="script.js"></script>
<thead> </body>
<tr> </html>
Form.html :
<!DOCTYPE html> <label for="username">Your
<html lang="en"> username</label>
<head> <input type="text"
<meta charset="UTF-8"> placeholder="Enter Username"
<meta http-equiv="X-UA-Compatible" id="username" name="username" >
content="IE=edge"> <br><br>
<meta name="viewport" <label for="pswrd">Your
content="width=device-width, initial- password</label>
scale=1.0"> <input type="password"
<title>Login page in HTML</title> placeholder="Enter Password"
<link rel="stylesheet" href="form.css"> id="password" name="pswrd">
</head> <div class="subcontainer">
<body> <p class="forgotpsd"> <a
<br> href="#">Forgot Password?</a></p>
<h1>Login Page</h1> </div>
<form action="index.html" id="login- <input type="submit"
form"> value='Login'>
<div class="headingsContainer"> </div>
<p>Sign in with your username and </form>
password</p> <script src="script.js"></script>
</div> </body>
<div class="mainContainer"> </html>
Style.css
body { }
font-family: 'Segoe UI', Tahoma,
Geneva, Verdana, sans-serif; .leave-form h2,
margin: 0; .leave-summary h2 {
padding: 0; text-align: center;
background-color: #f0f0f0; /* Lighter color: #007BFF; /* Blue header text
background color */ color */
} }
*{ .leave-form form label,
font-size: 22px; .leave-form form select,
} .leave-form form input {
display: block;
h1 { margin: 10px 0;
text-align: center; width: 100%; /* Full width */
padding: 20px; }
background-color: #007BFF;
color: white; .leave-form form button {
font-size: 36px; /* Larger font size */ background-color: #007BFF;
} color: white;
border: none;
.leave-form, padding: 12px 24px; /* Larger button */
.leave-summary { cursor: pointer;
width: 80%; /* Wider containers */ transition: background-color 0.3s ease-
margin: 20px auto; in-out; /* Smooth hover animation */
padding: 20px; }
background-color: #fff;
border-radius: 10px; /* Rounded corners .leave-form form button:hover {
*/ background-color: #0056b3; /* Darker
box-shadow: 0px 0px 10px 0px rgba(0, blue on hover */
0, 0, 0.2); /* Slightly darker shadow */ }
transition: transform 0.3s ease-in-out; /*
Smooth hover animation */ .leave-info {
} display: flex;
justify-content: space-between;
.leave-form:hover, align-items: center;
.leave-summary:hover { margin-bottom: 20px;
transform: scale(1.02); /* Slight scale-up }
on hover */
.date-input { margin-top: 20px; /* Spacing above the
display: flex; table */
justify-content: space-between; }
align-items: center;
} table, th, td {
border: 1px solid #ddd;
.date-input label { }
font-weight: bold;
} th, td {
padding: 12px; /* Larger cell padding */
.date-input input { text-align: center;
padding: 10px; /* Slightly larger input }
padding */
} th {
background-color: #007BFF;
table { color: white;
width: 100%; font-weight: bold; /* Bolder table
border-collapse: collapse; headers */
}
Form.css :
body }
{ form{
font-family:sans-serif; width: 800px;
background: -webkit-linear-gradient(to height: 600px;
right, #155799, #159957); position: relative;
background: linear-gradient(to right, top: 40px;
#155799, #159957); margin: auto;
color:whitesmoke; color:whitesmoke;
} backdrop-filter: blur(16px)
html{ saturate(180%);
font-size: 30px; -webkit-backdrop-filter: blur(16px)
} saturate(180%);
background-color: rgba(11, 15, 13,
input{ 0.582);
font-size: 24px; border-radius: 12px;
} border: 1px solid rgba(255, 255, 255,
0.125);
h1{ padding: 30px;
text-align: center; }
input[type=text], input[type=password]{ justify-content: space-between;
width: 100%; }
margin: 10px 0; .subcontainer a{
border-radius: 5px; font-size: 16px;
padding: 15px 18px; margin-bottom: 12px;
box-sizing: border-box; }
} span.forgotpsd a {
input[type=submit] { float: right;
background-color: #030804; color: whitesmoke;
color: white; padding-top: 16px;
padding: 14px 20px; }
border-radius: 5px; .forgotpsd a{
margin: 7px 0; color: rgb(74, 146, 235);
width: 100%; }
font-size: 18px; .forgotpsd a:link{
} text-decoration: none;
.headingsContainer{ }
text-align: center;
} @media screen and (max-width: 600px) {
.headingsContainer p{ form{
color: gray; width: 25rem;
} }
.mainContainer{ }
padding: 16px;
} @media screen and (max-width: 400px) {
.subcontainer{ form{
display: flex; width: 20rem;
flex-direction: row; }
align-items: center; }
Script.js :
document.addEventListener('DOMContentLoaded', function () {
const leaveRequestForm = document.getElementById('leave-request-form');
const availableDaysElement = document.getElementById('available-days');
const leaveHistoryElement = document.getElementById('leaveHistory');
const leaveRecordsTable = document.getElementById('leave-records');
let availableDays = 20;
leaveRequestForm.addEventListener('submit', function (e) {
e.preventDefault();
const leaveType = document.getElementById('leave-type').value;
const leaveDays = parseInt(document.getElementById('leave-days').value);
function updateLeaveHistory(fromDate, toDate) {
const historyItem = document.createElement('li');
historyItem.textContent = `From: ${fromDate} - To: ${toDate}`;
leaveHistoryElement.appendChild(historyItem);
const leaveDays = (new Date(toDate) - new Date(fromDate)) / (1000 * 60 *
60 * 24) + 1;
leaveTaken += leaveDays;
updateLeaveInfo();
fromDateInput.value = '';
toDateInput.value = '';
}
if (leaveDays <= availableDays) {
availableDays -= leaveDays;
availableDaysElement.textContent = availableDays;
const newRow = document.createElement('tr');
newRow.innerHTML = `
<td>${new Date().toLocaleDateString()}</td>
<td>${leaveType}</td>
<td>${leaveDays}</td>
`;
leaveRecordsTable.appendChild(newRow);
leaveRequestForm.reset();
} else {
alert('Not enough available leave days.');
}
});
});
OUTPUT:
Preparation 30
Performance 30
Record 40
Total 100
RESULT:
Thus the script for leave management system has been executed successfully.
EXP NO:
Develop a simple dashboard for project management where the statuses
DATE: of various 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.
ALGORITHM:
1. Start the program
2. The Index page (Task.html) allows the users to view the statuses of various tasks
3. Add the different types of charts using <canvas> tag
4. By using the Chart() function in the 'Chart.js' file, we can configure the properties of
the charts
5. The style properties are created in separate sheet in the name of “styles.css”
6. Styles.css is linked with the index sheet using the <link> tag
7. Run the program
Task.html
<html> <div class="sidebar">
<head> <div class="profile">
<meta charset="UTF-8"> <img src="img.png"
<meta name="viewport" alt="profile_picture">
content="width=device-width, initial- <h3>Vishwaharan M</h3>
scale=1.0"> <p>Designer</p>
<title>Dashboard</title> </div>
<link rel="stylesheet" <ul>
href="https://cdn.jsdelivr.net/npm/bootstra <li>
[email protected]/dist/css/bootstrap.min.css"> <a href="#">
<link rel="stylesheet" <span class="icon"><i
href="https://cdnjs.cloudflare.com/ajax/lib class="fas fa-home"></i></span>
s/font-awesome/5.15.1/css/all.min.css"> <span
<link rel="stylesheet" class="item">Home</span>
href="Styles.css"> </a>
<script </li>
src="https://cdn.jsdelivr.net/npm/chart.js@ <li>
2.9.4"></script> <a href="#" class="active">
</head> <span class="icon"><i
<body> class="fas fa-desktop"></i></span>
<span class="item">My <span
Dashboard</span> class="item">Admin</span>
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<span class="icon"><i <span class="icon"><i
class="fas fa-user-friends"></i></span> class="fas fa-cog"></i></span>
<span <span
class="item">People</span> class="item">Settings</span>
</a> </a>
</li> </li>
<li> </ul>
<a href="#"> </div>
<span class="icon"><i </div>
class="fas fa-tachometer-alt"></i></span> <div class="top-bar">
<span <h2>Task Management
class="item">Perfomance</span> Dashboard</h2>
</a> </div>
</li> <div class="container">
<li> <center>
<a href="#"> <div class="row">
<span class="icon"><i <div class="col-md-4">
class="fas fa-database"></i></span> <div class="card">
<span <img src="tasks.png" alt=""
class="item">Development</span> style="margin-bottom: 10px;">
</a> <br>
</li> <h2>Total Tasks</h2>
<li> <p>100</p>
<a href="#"> </div>
<span class="icon"><i </div>
class="fas fa-chart-line"></i></span> <div class="col-md-4">
<span <div class="card">
class="item">Reports</span> <img src="tick.png" alt=""
</a> style="margin-bottom: 10px;">
</li> <br>
<li> <h2>Completed Tasks</h2>
<a href="#"> <p>35</p>
<span class="icon"><i </div>
class="fas fa-user-shield"></i></span> </div>
<div class="col-md-4">
<div class="card"> <canvas
<img src="progress.png" id="taskByStatusChart"></canvas>
alt="" style="margin-bottom: 35px;"> </div>
<h2>In Progress</h2> <div class="col-md-6">
<p>75</p> <!-- Percentage of Sales
</div> Increment Chart -->
</div> <p>Task by Duration</p>
</div> <canvas
</center> id="taskByDurationChart"></canvas>
<div class="row chart-container"> </div>
<div class="col-md-6"> </div>
<p>Workload by Tasks</p> </div>
<canvas <!-- Print Button -->
id="workloadByTasksChart"></canvas> <script
</div> src="https://cdn.jsdelivr.net/npm/jquery@3
<div class="col-md-6"> .5.1/dist/jquery.min.js"></script>
<p>Workload by Duration</p> <script
<canvas src="https://cdn.jsdelivr.net/npm/popper.js
id="workloadByDurationChart"></canvas @1.16.0/dist/umd/popper.min.js"></script
> >
</div> <script
</div> src="https://cdn.jsdelivr.net/npm/bootstrap
<div class="row chart-container"> @4.5.2/dist/js/bootstrap.min.js"></script>
<div class="col-md-6"> <script src="Chart.js"></script>
<p>Task by Status</p> </body>
</html>
Styles.css
body { }
font-family: Arial, sans-serif; .top-bar {
} background-color:rgb(5, 68, 104);
img{ color: #fff;
margin-left: 130px; text-align: center;
width: 50px; padding: 10px 0;
} border: 2px solid blue;
p{ border-radius: 10px;
font-size: 20px; margin-left:300px;
font-weight: bold; margin-right: 10px;
text-align: center; }
font-size: 16px;
.top-bar h2{ position: relative;
text-align: center; }
}
li{ .sidebar ul li a .icon{
list-style: none; color: #dee4ec;
} width: 30px;
.sidebar{ display: inline-block;
background: rgb(5, 68, 104); }
position: fixed; .sidebar ul li a:hover,
top: 0; .sidebar ul li a.active{
left: 0; color: #0c7db1;
width: 280px; background:white;
height: 100%; border-right: 2px solid rgb(5, 68, 104);
padding: 20px 0; }
transition: all 0.5s ease; .sidebar ul li a:hover .icon,
} .sidebar ul li a.active .icon{
.sidebar .profile{ color: #0c7db1;
margin-bottom: 30px; }
text-align: center; .sidebar ul li a:hover:before,
} .sidebar ul li a.active:before{
.sidebar .profile img{ display: block;
display: block; }
width: 100px; .section{
height: 100px; width: calc(100% - 225px);
border-radius: 50%; margin-left: 225px;
margin: 0 auto; transition: all 0.5s ease;
} }
.sidebar .profile h3{ .container {
color: #ffffff; margin-top: 30px;
margin: 10px 0 5px; margin-left: 325px; /* Adjust the margin
} to accommodate the sidebar width */
.sidebar .profile p{ }
color: rgb(206, 240, 253); .card {
font-size: 14px; border: none;
} box-shadow: 0 4px 8px rgba(0, 0, 0,
.sidebar ul li a{ 0.2);
display: block; transition: 0.3s;
padding: 13px 30px; padding: 20px;
border-bottom: 1px solid #10558d; text-align: center;
color: rgb(241, 237, 237); }
.card:hover { .chart-container {
box-shadow: 0 8px 16px rgba(0, 0, 0, margin-top: 30px;
0.2); margin-bottom: 50px;
} }
Chart.js :
var workloadByTasksData = { };
labels: ["Crystal Codebase", "Peter var taskByDurationData = {
Perfcycle", "Harry Helpsalot", "Roger labels: ["On Hold", "Planning",
Reports"], "Approved", "Pending
datasets: [{ Review","Completed","In Progress"],
label:"Tasks", datasets: [{
data: [40, 12, 25, 15], data: [18, 26, 9, 4, 33, 57],
backgroundColor: ["#007BFF", backgroundColor:
"#28A745", "#FFC107", "#DC3545"], ["yellow","blue","lightblue","red","lightgre
}] en","darkgreen"],
}; }]
var workloadByDurationData = { };
labels: ["Crystal Codebase", "Peter var workloadByTasksChart = new
Perfcycle", "Harry Helpsalot", "Roger Chart(document.getElementById("workloa
Reports"], dByTasksChart"), {
datasets: [{ type: "horizontalBar",
label:"Days", data: workloadByTasksData,
data: [30, 15, 20, 25], });
backgroundColor: ["#007BFF", var workloadByDurationChart = new
"#28A745", "#FFC107", "#DC3545"], Chart(document.getElementById("workloa
}] dByDurationChart"), {
}; type: "horizontalBar",
var taskByStatusData = { data: workloadByDurationData,
labels: ["On Hold", "Planning", });
"Approved", "Pending var taskByStatusChart = new
Review","Completed","In Progress"], Chart(document.getElementById("taskByS
datasets: [{ tatusChart"), {
data: [15, 20, 5, 15 ,35 , 10], type: "pie",
backgroundColor: data: taskByStatusData,
["yellow","blue","lightblue","red","lightgre });
en","darkgreen"],
}]
var taskByDurationChart = new type: "pie",
Chart(document.getElementById("taskBy data: taskByDurationData,
DurationChart"), { });
OUTPUT:
Preparation 30
Performance 30
Record 40
Total 100
RESULT:
Thus the script to create a simple dashboard for project management has been executed
successfully.
EXP NO:
Develop an online survey application where a collection of questions is
DATE: 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
ALGORITHM:
1. Start the program
2. The Index page (Survey.html) allows the users to give their reviews
3. Add the different types of charts using <canvas> tag
4. By using the Chart() function in the 'Chart.js' file, we can configure the properties of
the charts
5. The style properties are created in separate sheet in the name of “Design.css”
6. Design.css is linked with the index sheet using the <link> tag
7. Run the program
Survey.html:
<!DOCTYPE html> <input type="text" name="name"
<html lang="en"> class="ll" placeholder="Enter your
name"><br><br>
<head> <label for="mno">Mobile No :
<meta charset="UTF-8"> </label>
<meta name="viewport" <input type="tel" name="mno"
content="width=device-width, initial- class="ll" placeholder="Enter your mobile
scale=1.0"> number"><br><br>
<title>Survey Form</title> <label for="age" >Age : </label>
<link rel="stylesheet" <input type="number" name="age"
href="design.css"> class="ll" placeholder="Enter your
age"><br><br>
</head> <div class="questions">
<div class="qa">
<body> <div class="qa">
<center><h1>Movie Survey 1. How often do you watch
Form</h1></center> movies in a theater?
<main> <div class="options">
<form action="chart.html"> <input type="radio"
<label for="name" >Name : name="q1"> Once a month
</label>
<input type="radio" 4. Do you usually read movie
name="q1"> Few times a week reviews or ratings before deciding to watch
<input type="radio" a film?
name="q1"> Several times a week <div class="options">
<input type="radio" <input type="radio"
name="q1"> Rarely or Never name="q4"> Yes. always
</div> <input type="radio"
</div> name="q4"> Yes, sometimes
<div class="qa"> <input type="radio"
2. What is your preferred name="q4"> No, never
movie genre? </div>
<div class="options"> </div>
<input type="radio" <div class="qa">
name="q2"> Action 5. Where do you prefer to
<input type="radio" watch movies?
name="q2"> Comedy <div class="options">
<input type="radio" <input type="radio"
name="q2"> Crime name="q5"> In a movie theater
<input type="radio" <input type="radio"
name="q2"> Science Fiction name="q5"> On streaming platforms
</div> <input type="radio"
</div> name="q5"> Both
<div class="qa"> </div>
3. On a scale of 1 to 5, how <div class="qa">
would you rate the last movie you 6. How important is the
watched? movie's cast in influencing your choice to
<div class="options"> watch a film?
<input type="radio" <div class="options">
name="q3"> 1 (Terrible) <input type="radio"
<input type="radio" name="q6"> Very important
name="q3"> 2 (Not great) <input type="radio"
<input type="radio" name="q6"> Somewhat important
name="q3"> 3 (Average) <input type="radio"
<input type="radio" name="q6"> Not important
name="q3"> 4 (Good) </div>
<input type="radio" </div>
name="q3"> 5 (Excellent) <div class="qa">
</div> 7. Have you ever walked out
</div> of a movie before it ended?
<div class="qa"> <div class="options" id="q7">
<input type="radio" <input type="radio"
name="q7"> Yes name="q9"> With family
<input type="radio" </div>
name="q7"> No </div>
</div> <div class="qa">
</div> 10. How do you usually
<div class="qa"> choose the movies you watch?
8. What is your favorite part <div class="options">
of the movie-watching experience? <input type="radio"
<div class="options"> name="q10"> Personal Interest
<input type="radio" <input type="radio"
name="q8"> Storline name="q10"> Online reviews
<input type="radio" <input type="radio"
name="q8"> Acting name="q10"> Trailers
<input type="radio" <input type="radio"
name="q8"> Special Effects name="q10"> Randomly
<input type="radio" </div>
name="q8"> Soundtrack </div>
</div>
</div> </div>
<div class="qa"> <center>
9. Do you prefer watching <button
movies alone or with friends / family? type="submit">Submit</button>
<div class="options"> </center>
<input type="radio" </form>
name="q9"> Alone </main>
<input type="radio" </body>
name="q9"> With friends
</html>
Chart.html :
<!DOCTYPE html> <script
<html lang="en"> src="https://cdnjs.cloudflare.com/ajax/libs/
Chart.js/2.9.4/Chart.js"></script>
<head> <script
<meta charset="UTF-8"> src="https://cdnjs.cloudflare.com/ajax/libs/
<meta name="viewport" Chart.js/2.5.0/Chart.min.js"></script>
content="width=device-width, initial- <style>
scale=1.0"> .chart {
<title>Review</title> display: flex;
gap: 230px; font-size: 2em;
padding-top: 2em; margin-left: 180px;
margin-left: 80px; }
} </style>
</head>
#c2 {
justify-content: center; <body>
align-items: center; <h2 class="hh">Movie Review
} Report</h2>
<header>
.hh { <h2>Favorite Movie Genre</h2>
font-size: 2rem; <h2>Ratings</h2>
text-align: center; </header>
} <div class="chart">
<canvas id="myChart" style="max-
html { width:500px; height: 450px;"
background: wheat; id="c1"></canvas>
} <canvas id="mychart" style="max-
width:650px; height: 450px;"
header { id="c2"></canvas>
display: grid; </div>
grid-template: 1fr / 1.2fr 0.86fr; <script src="chart.js"></script>
} </body>
</html>
header h2 {
Design.css :
html {
background-image: url(images/bg.png); main {
background-repeat: no-repeat; display: flex;
background-size: cover; justify-content: center;
font-family: 'Segoe UI', Tahoma, align-items: center;
Geneva, Verdana, sans-serif; font-size: 1.2em;
} }
h1 { form {
padding: 0.5rem; display: inline-block;
font-size: 1.8rem; background-color: rgba(255, 255, 255,
color: blanchedalmond; 0.9);
} padding: 4rem;
border-radius: 1.5em; grid-template: 1fr 1fr auto / 0.3fr 1fr
width: 650px; 0.3fr 1fr;
margin-bottom: 20px; row-gap: 0.5rem;
} padding: 1em;
}
.ll{
display: inline-block; input[type="radio"] {
border: 2px solid darkred; width: 1.25em;
padding: 1em; height: 1.25em;
border-radius: 1em; }
margin-top: 1em;
width: 100%; .qa {
} padding: 0.1rem;
}
button {
background-color: rgba(183, 24, 24, input[type="radio"] {
0.854); margin-left: 10px;
color: white; }
padding: 0.9em;
border-radius: 1rem; #q7 {
font-size: 1rem; display:grid;
} grid-template: 1fr / 0.3fr 1fr 0.3fr 1fr;
row-gap: 0.5rem;
.options { padding: 1em;
display:grid; }
Chart.js :
// Doughnut Chart data: {
var xValues = ["Action", "Comedy", labels: xValues,
"Crime", "Science Fiction"]; datasets: [{
var yValues = [55, 49, 44, 24]; backgroundColor: barColors,
var barColors = [ data: yValues
"#b91d47", }]
"#00aba9", },
"#2b5797", options: {
"#e8c3b9", title: {
]; display: true,
text: "Favorite Movie Genre",
new Chart("myChart", { }
type: "doughnut", }
}); datasets: [{
backgroundColor: barcolors,
// Bar Chart data: yvalues
var xvalues = ["Terrible", "Not Great", }]
"Average", "Good", "Excellent"]; },
var yvalues = [13, 18 , 30, 25 , 20]; options: {
var barcolors = ["red", legend: {display: false},
"orange","yellow","lightgreen","green"]; title: {
display: true,
new Chart("mychart", { text: "Ratings"
type: "bar", }
data: { }
labels: xvalues, });
OUTPUT:
Preparation 30
Performance 30
Record 40
Total 100
RESULT:
Thus the script to create a survey application has been executed successfully.
You might also like
- Front End Webdevelopment Internship Motion CutNo ratings yetFront End Webdevelopment Internship Motion Cut44 pages
- It3511 - Full Stack Web Development Lab Manual Final 14112023No ratings yetIt3511 - Full Stack Web Development Lab Manual Final 1411202381 pages
- Ultimate Nuxt.js for Full-Stack Web Applications: Build Production-Grade Server-Side Rendering (SSR) and Static-Site Generated (SSG) Vue.js Applications Using Nuxt.js, Node.js, and Composition API (English Edition)From EverandUltimate Nuxt.js for Full-Stack Web Applications: Build Production-Grade Server-Side Rendering (SSR) and Static-Site Generated (SSG) Vue.js Applications Using Nuxt.js, Node.js, and Composition API (English Edition)No ratings yet
- Introduction To Arduino Smartphone Controlled WiFi CarNo ratings yetIntroduction To Arduino Smartphone Controlled WiFi Car5 pages
- Javascript Introduction: Javascript Can Change HTML ContentNo ratings yetJavascript Introduction: Javascript Can Change HTML Content41 pages
- How To Inspect Pages Customly With Google ChromeNo ratings yetHow To Inspect Pages Customly With Google Chrome1 page
- Ujian Tengah Semester Digital Marketing - Atika KhairulNo ratings yetUjian Tengah Semester Digital Marketing - Atika Khairul3 pages
- Cheat Sheet covering best practices for HTML, CSS, and JavaScriptNo ratings yetCheat Sheet covering best practices for HTML, CSS, and JavaScript4 pages
- Programação Web - Como Fazer Um Projeto No PycharmNo ratings yetProgramação Web - Como Fazer Um Projeto No Pycharm1 page
- 9 Magento SEO Tips For Your Ecommerce SiteNo ratings yet9 Magento SEO Tips For Your Ecommerce Site2 pages
