Web development

[Madeehatouqeer07]

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:-

<title>Personal Portfolio</title>

Your Name

• About
• Projects
• Contact

< 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:-

<title>Expense Tracker</title>

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:-

<title>Social Media Dashboard</title>

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">

</script> CSS :- body { font-family: Arial, sans-serif; margin: 0; padding: 0; text-align: center; }

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');

[Zijem]

你好，邮件已收到，谢谢！

[fireF]

这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

[TheZoomFlash]

这是来自QQ邮箱的自动回复邮件。   您好，我已收到邮件，尽快给您回复。

[ccate-x]

已收到，正在处理中。