Description
Project
Web development
Task 1-
Personal Portfolio Website
Create a personal portfolio showcasing your skills,projects, and resume. Use HTML for structure, CSS for styling, and add a touch of JavaScript for interactivity.
Html code:-
Your Name
< section id="about">About Me
Brief introduction about yourself.
<section id="projects">
<h2>Projects</h2>
<div class="project">
<h3>Project 1</h3>
<p>Description of project 1.</p>
</div>
<div class="project">
<h3>Project 2</h3>
<p>Description of project 2.</p>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Email: [email protected]</p>
</section>
<script
src="scripts.js"></script>
CSS code:- body { font-family: Arial, sans-serif; margin: 0; padding: 0; }header {
background-color: #333;
color: white;
padding: 1em 0;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 1em;
}
nav ul li a {
color: white;
text-decoration: none;
}
section {
padding: 2em;
}
.project {
border: 1px solid #ccc;
margin: 1em 0;
padding: 1em;
}
JavaScript.js:-
document.addEventListener('DOMContentLoaded', () => {
// Add any interactivity you want here
}
);
Task 2:-
Html code:-
Expense Tracker
<main>
<form id="expense-form">
<input type="text" id="expense-name" placeholder="Expense Name" required>
<input type="number" id="expense-amount" placeholder="Amount" required>
<button type="submit">Add Expense</button>
</form>
<ul id="expense-list"></ul>
</main>
<script src="scripts.js"></
script>
CSS code:- body { font-family: Arial, sans-serif; margin: 0; padding: 0; text-align: center; }header {
background-color: #333;
color: white;
padding: 1em 0;
}
form {
margin: 2em 0;
}
input {
margin: 0.5em;
}
ul {
list-style-type: none;
padding: 0;
}
li {
border: 1px solid #ccc;
margin: 0.
5em 0;
padding: 0.5em;
}
Javascript.js:-
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('expense-form');
const expenseList = document.getElementById('expense-list');
form.addEventListener('submit', (event) => {
event.preventDefault();
const name = document.getElementById('expense-name').value;
const amount = document.getElementById('expense-amount').value;
const li = document.createElement('li');
li.textContent = `${name}: $${amount}`;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', () => {
expenseList.removeChild(li);
});
li.appendChild(deleteButton);
expenseList.appendChild(li);
document.getElementById('expense-name').value = '';
document.getElementById('expense-amount').value = '';
// Save to local storage
saveExpenses();
});
// Load expenses from local storage
loadExpenses();
function saveExpenses() {
const expenses = [];
document.querySelectorAll('#expense-list li').forEach(li => {
const text = li.childNodes[0].textContent.split(': $');
expenses.push({ name: text[0], amount: text[1] });
});
localStorage.setItem('expenses', JSON.stringify(expenses));
}
function loadExpenses() {
const expenses = JSON.parse(localStorage.getItem('expenses'));
if (expenses) {
expenses.forEach(expense => {
const li = document.createElement('li');
li.textContent = `${expense.name}: $${expense.amount}`;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', () => {
expenseList.removeChild(li);
});
li.appendChild(deleteButton);
expenseLi
st.appendChild(li);
});
}
}
});
Task 3:-
Social Media Dashboard
<main>
<section id="login">
<h2>Login</h2>
<button id="login-button">Login with Social Media</button>
</section>
<section id="dashboard" style="display: none;">
<h2>Your Dashboard</h2>
<div id="feeds"></div>
</section>
</main>
<script src="scripts.js">
header {
background-color: #333;
color: white;
padding: 1em 0;
}
section {
margin: 2em 0;
}
button {
padding: 1em;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
button:hover {
ba
ckground-color: #0056b3;
}
Javascript.js:-
document.addEventListener('DOMContentLoaded', () => {
const loginButton = document.getElementById('login-button');
const loginSection = document.getElementById('login');
const dashboardSection = document.getElementById('dashboard');