Skip to content

Web development  #532

Open
Open
@Madeehatouqeer07

Description

@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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions