Scribd
Upload
42 views15 pages

Fullstactlabpdf

The document outlines the development of a personal portfolio website and a to-do list application using HTML, CSS, and JavaScript. The portfolio website includes sections for personal details, skills, and projects, while the to-do list application allows users to manage tasks with features for adding, editing, and deleting items. Both projects were successfully developed and verified.

Uploaded by

sudhanabirami007
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
42 views15 pages

Fullstactlabpdf

The document outlines the development of a personal portfolio website and a to-do list application using HTML, CSS, and JavaScript. The portfolio website includes sections for personal details, skills, and projects, while the to-do list application allows users to manage tasks with features for adding, editing, and deleting items. Both projects were successfully developed and verified.

Uploaded by

sudhanabirami007
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/ 15

EX.

NO:01 PORTFOLIO WEBSITE

AIM:
To develop the portfolio website for myself which gives details about myself by using
HTML, CSS, Java Script.
PROCEDURE:
1. Write a HTML code for displaying the details about me like personal details,
contact details, achievements, technology known and projects working.
2. Write the CSS style sheet for styling the portfolio website.
3. And write javascript code to make the website interactive.
SOURCE CODE:
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>Create a Personal Portfolio Website using HTML and CSS | Codehal</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.2.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2 class="logo"><span>I</span>T.</h2>
<nav class="navigation">
<a href="#">Home</a>
<a href="about.html">About</a>
<a href="#">Portfolio</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</nav>
<a href="#" class="btn-talk">Let's Talk</a>
</header>
<section class="home">
<div class="content">
<h2>Hi, I'm <span>Hari Hara Sudhan</span></h2>
<h4>Frontend Developer</h4>
<p>I am Currently working on mobile app development using Flutter for Stunning UI
and Backend as python Flask for the Server</p>
<div class="btn-group">
<a href="#">Hire Me</a>
<a href="#">See Projects</a>
</div>
<div class="social-icons">
<a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
<a href="#"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
</div>
</div>
</section>
</body>
</html>
about.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About - Hari Hara Sudhan</title>
<!-- <link rel="stylesheet" href="styles.css"> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"
rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;}
body {
font-family: 'Poppins', sans-serif;
background-color: #f8f9fc;
color: #333;
text-align: center;
}
header h1 {
font-size: 3rem;
color: #7a00cc;
margin-top: 50px;
header p {
font-size: 1.2rem;
color: #888;
}

.about-section {
margin: 50px auto;
}

.profile-pic img {
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.about-text p {
font-size: 1.1rem;
color: #555;
margin-top: 20px;
max-width: 700px;
line-height: 1.7;
margin: 20px auto;
}

.skills-section {
margin: 50px auto;
}

.skills-section h2 {
font-size: 2rem;
color: #7a00cc;
}

.skills {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}

.skill-item {
width: 80%;
max-width: 500px;
margin-bottom: 20px;
}

.skill-item span {
font-weight: 600;
font-size: 1.1rem;
}

.skill-bar {
width: 100%;
height: 10px;
background-color: #e0e0e0;
margin-top: 5px;
border-radius: 5px;
}

.skill-level {
height: 100%;
background-color: #7a00cc;
border-radius: 5px;
}

.experience-section {
margin: 50px auto;
}

.experience-section h2 {
font-size: 2rem;
color: #7a00cc;
}

.experience {
margin-top: 20px;
}

.experience-item {
margin: 20px auto;
max-width: 700px;
text-align: left;
}
.experience-item h3 {
font-size: 1.5rem;
color: #333;
font-weight: 600;
}

.experience-item p {
font-size: 1rem;
color: #666;
margin-top: 10px;
}

.cta-buttons {
margin: 50px 0;
}

.hire-me-btn, .projects-btn {
display: inline-block;
padding: 10px 20px;
font-size: 1rem;
border-radius: 5px;
text-decoration: none;
margin: 10px;
transition: background-color 0.3s;
}

.hire-me-btn {
background-color: #7a00cc;
color: #fff;
}

.projects-btn {
background-color: #fff;
border: 2px solid #7a00cc;
color: #7a00cc;
}

.hire-me-btn:hover, .projects-btn:hover {
background-color: #4e009b;
color: #fff;
}

footer {
margin-top: 50px;
padding: 20px;
background-color: #333;
color: #fff;
}

.social-icons a {
color: #fff;
font-size: 1.5rem;
margin: 0 10px;
text-decoration: none;
}

</style>
</head>
<body>
<header>
<h1>About Me</h1>
<p>Passionate Developer & Problem Solver</p>
</header>

<section class="about-section">
<div class="profile-pic">
<img src="https://media.licdn.com/dms/image/v2/D5603AQHy-82X3KZRhw/profile-
displayphoto-shrink_800_800/profile-displayphoto-
shrink_800_800/0/1711210204962?e=1732147200&v=beta&t=bWn_XmLfauiCBhbqMCsyj_e
1vQ-Qxod6CzYqMOHsWJ4" alt="Hari Hara Sudhan">
</div>
<div class="about-text">
<p>
I am Hari Hara Sudhan, a front-end developer specializing in building beautiful mobile and
web applications. With expertise in Flutter, I create intuitive and responsive UIs. Passionate
about turning ideas into reality through code, I constantly push myself to learn new technologies
and refine my skills.
</p>
</div>
</section>

<section class="skills-section">
<h2>Skills & Expertise</h2>
<div class="skills">
<div class="skill-item">
<span>Flutter</span>
<div class="skill-bar">
<div class="skill-level" style="width: 85%;"></div>
</div>
</div>
<div class="skill-item">
<span>Python Flask</span>
<div class="skill-bar">
<div class="skill-level" style="width: 80%;"></div>
</div>
</div>
<div class="skill-item">
<span>JavaScript</span>
<div class="skill-bar">
<div class="skill-level" style="width: 75%;"></div>
</div>
</div>
<div class="skill-item">
<span>Node.js</span>
<div class="skill-bar">
<div class="skill-level" style="width: 70%;"></div>
</div>
</div>
</div>
</section>

<section class="experience-section">
<h2>Experience</h2>
<div class="experience">
<div class="experience-item">
<h3>Mobile App Developer</h3>
<p>Developed several Flutter applications with seamless user interfaces and integrated
backends using Python Flask.</p>
</div>
<div class="experience-item">
<h3>Web Developer</h3>
<p>Worked on dynamic websites with JavaScript, Node.js, and responsive design
principles.</p>
</div>
</div>
</section>

<div class="cta-buttons">
<a href="#" class="hire-me-btn">Hire Me</a>
<a href="#" class="projects-btn">See Projects</a>
</div>

<footer>
<div class="social-icons">
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</footer>
</body>
</html>

OUTPUT:
RESULT:
To develop the portfolio website for myself which gives details about myself by using
HTML, CSS, Java Script was successfully developed and output is verified.
EX.NO:02 TODO LIST APPLICATION

AIM:
To develop the web application to manage TO-DO list of users where they can manage
their to-do items.
PROCEDURE:
1. Write a HTML form code for displaying the to-do lists and for adding, deleting,
editing the to-do list.
2. Write the CSS style sheet for styling the website.
3. And write java script code to make the website interactive.
SOURCE CODE:
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Task Manager</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}

h1 {
text-align: center;
color: #333;
}

.task-input {
display: flex;
justify-content: center;
margin-bottom: 20px;
}

.inputbox {
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px;
width: 300px;
}

button {
padding: 10px 20px;
margin-left: 10px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}

button:hover {
opacity: 0.9;
}

#addbtn {
background-color: #28a745;
color: white;
}

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

li {
background: white;
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
margin-bottom: 10px;
position: relative;
transition: transform 0.3s ease, opacity 0.3s ease;
}

li.enter-animation {
transform: scale(1.05);
opacity: 1;
}
li.delete-animation {
transform: scale(0.9);
opacity: 0;
}

.edit-btn {
background-color: #007bff;
color: white;
}

.edit-btn:hover {
background-color: #0056b3;
}

.del-btn {
background-color: #dc3545;
color: white;
}

.del-btn:hover {
background-color: #c82333;
}

.task-time {
font-size: 0.9em;
color: #666;
}

.checkbox {
margin-right: 10px;
}
</style>
</head>
<body>
<h1>Task Manager</h1>
<div class="task-input">
<input type="text" id="inputbox" class="inputbox" placeholder="Enter task here...">
<button id="addbtn" onclick="AddButton()">ADD</button>
</div>

<ul id="ullist"></ul>

<script>
document.addEventListener('DOMContentLoaded', function() {
const input = document.getElementById("inputbox");

window.AddButton = function() {
if (input.value.trim() === "") {
alert("Enter the Text");
return;
}

const addele = document.createElement("li");


const now = new Date();
const formattedDate = now.toLocaleDateString();
const formattedTime = now.toLocaleTimeString();
const taskHTML = `
<input type="checkbox" class="checkbox" onclick="toggleCompletion(this)">
<div class="task-content">${input.value}</div>
<div class="task-time">${formattedDate} ${formattedTime}</div>
<button class="edit-btn" onclick="editbtn(this)">EDIT</button>
<button class="del-btn" onclick="delbtn(this)">DELETE</button>
`;
addele.innerHTML = taskHTML;

// Add animation for adding the task


addele.classList.add('enter-animation');
document.getElementById("ullist").append(addele);
setTimeout(() => addele.classList.remove('enter-animation'), 300);

input.value = "";
}

window.delbtn = function(button) {
const item = button.parentElement;
item.classList.add('delete-animation');
setTimeout(() => item.remove(), 300);
}

window.editbtn = function(button) {
const item = button.parentElement;
const taskContent = item.querySelector('.task-content');
const newText = prompt("Enter The Text", taskContent.textContent);
if (newText !== null && newText.trim() !== "") {
taskContent.textContent = newText;
}
}

window.toggleCompletion = function(checkbox) {
const item = checkbox.parentElement;
const taskContent = item.querySelector('.task-content');
if (checkbox.checked) {
taskContent.style.textDecoration = "line-through";
taskContent.style.color = "#999";
} else {
taskContent.style.textDecoration = "none";
taskContent.style.color = "#333";
}
}
});
</script>
</body>
</html>

OUTPUT:
RESULT:
To develop the web application to manage TO-DO list of users where they can manage
their to-do items was successfully developed and output is verified.

You might also like