Scribd
Upload
29 views12 pages

Asignmant

Uploaded by

mcak33358
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
29 views12 pages

Asignmant

Uploaded by

mcak33358
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/ 12

Below is the complete implementation of the 3-page bookstore website and the navigation file:

1. nav.html
<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f4f4f4; text-align:
center;">
<a href="index.html" style="color: black; text-decoration: none; margin:
10px;">Home</a> |
<a href="books.html" style="color: black; text-decoration: none; margin:
10px;">Books</a> |
<a href="contact.html" style="color: black; text-decoration: none; margin:
10px;">Contact</a>
</body>
</html>

2. index.html (Home Page)


<!DOCTYPE html>
<html>
<head>
<title>Bookstore - Home</title>
</head>
<body style="margin: 0; font-family: Arial, sans-serif;">

<!-- Header -->


<header style="background-color: #4CAF50; color: white; text-align: center;
padding: 20px;">
<h1>Welcome to Our Bookstore</h1>
<p><i>Your gateway to a world of books!</i></p>
</header>

<!-- Navigation -->


<iframe src="nav.html" style="width: 100%; height: 50px; border:
none;"></iframe>

<!-- Main Content -->


<div style="padding: 20px; text-align: center;">
<h2>Featured Books</h2>
<p>
Explore our collection of <b>bestsellers</b> and discover your next
favorite read!
Check out our <a href="books.html" style="color: #4CAF50;">Books
page</a> for more.
</p>
</div>

</body>
</html>
3. books.html (Books Page)
<!DOCTYPE html>
<html>
<head>
<title>Bookstore - Books</title>
</head>
<body style="margin: 0; font-family: Arial, sans-serif;">

<!-- Header -->


<header style="background-color: #2196F3; color: white; text-align: center;
padding: 20px;">
<h1>Our Book Collection</h1>
<p><i>A wide range of books to suit every reader.</i></p>
</header>

<!-- Navigation -->


<iframe src="nav.html" style="width: 100%; height: 50px; border:
none;"></iframe>

<!-- Main Content -->


<div style="padding: 20px; text-align: center;">
<h2>Browse Our Categories</h2>
<ul style="list-style-type: none; padding: 0;">
<li><b>Fiction</b></li>
<li><b>Non-Fiction</b></li>
<li><b>Children's Books</b></li>
</ul>
<p>
Looking for more? Feel free to <a href="contact.html" style="color:
#2196F3;">Contact us</a> for inquiries.
</p>
</div>

</body>
</html>

4. contact.html (Contact Page)


<!DOCTYPE html>
<html>
<head>
<title>Bookstore - Contact</title>
</head>
<body style="margin: 0; font-family: Arial, sans-serif;">

<!-- Header -->


<header style="background-color: #FF9800; color: white; text-align: center;
padding: 20px;">
<h1>Contact Us</h1>
<p><i>We'd love to hear from you!</i></p>
</header>

<!-- Navigation -->


<iframe src="nav.html" style="width: 100%; height: 50px; border:
none;"></iframe>

<!-- Main Content -->


<div style="padding: 20px; text-align: center;">
<h2>Get in Touch</h2>
<p><b>Email:</b> [email protected]</p>
<p><b>Phone:</b> (123) 456-7890</p>
<p>
Visit us at our location or reach out for more information. We’re here
to help!
</p>
</div>

</body>
</html>

How it Works:
1. Navigation (nav.html): Contains links to Home, Books, and Contact pages. Embedded in all
pages using <iframe>.
2. Home Page (index.html): Welcomes visitors, introduces the bookstore, and provides a link
to the Books page.
3. Books Page (books.html): Lists book categories and includes a link to the Contact page for
further inquiries.
4. Contact Page (contact.html): Displays contact details and invites visitors to reach out.

Each page uses inline styles for a clean and visually appealing layout, while the <iframe> ensures
consistent navigation across all pages.
Here is the implementation of the assignment requirements for your HTML and CSS project:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment 2: Web Development Basics</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- PART 1: Profile Information Form -->
<section id="profile-form" class="section">
<h1>Profile Information Form</h1>
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" required><br><br>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required><br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password"
required><br><br>

<label for="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob" required><br><br>

<label>Gender:</label>
<input type="radio" id="male" name="gender" value="Male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="Other">
<label for="other">Other</label><br><br>

<label>Hobbies:</label>
<input type="checkbox" id="reading" name="hobbies" value="Reading">
<label for="reading">Reading</label>
<input type="checkbox" id="traveling" name="hobbies"
value="Traveling">
<label for="traveling">Traveling</label>
<input type="checkbox" id="music" name="hobbies" value="Music">
<label for="music">Music</label>
<input type="checkbox" id="sports" name="hobbies" value="Sports">
<label for="sports">Sports</label><br><br>

<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="uk">United Kingdom</option>
<option value="india">India</option>
<option value="canada">Canada</option>
</select><br><br>

<label for="profile-pic">Profile Picture:</label>


<input type="file" id="profile-pic" name="profile-pic"><br><br>

<label for="bio">Short Bio:</label><br>


<textarea id="bio" name="bio" rows="4"
cols="50"></textarea><br><br>

<label for="phone">Phone Number:</label>


<input type="tel" id="phone" name="phone"><br><br>

<label for="color">Favorite Color:</label>


<input type="color" id="color" name="color"><br><br>

<label for="website">Website URL:</label>


<input type="url" id="website" name="website"><br><br>

<button type="submit">Submit</button>
<button type="reset">Reset</button>
</fieldset>
</form>
</section>
<!-- PART 2: Data Summary Table -->
<section id="data-summary" class="section">
<h1>Data Summary Table</h1>
<table>
<thead>
<tr>
<th>Field Description</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Full Name</td>
<td>Your Input</td>
</tr>
<tr>
<td>Email Address</td>
<td>Your Input</td>
</tr>
<tr>
<td>Date of Birth</td>
<td>Your Input</td>
</tr>
<tr>
<td>Gender</td>
<td>Your Input</td>
</tr>
<tr>
<td>Hobbies</td>
<td>Your Input</td>
</tr>
<tr>
<td>Country</td>
<td>Your Input</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">End of Table</td>
</tr>
</tfoot>
</table>
</section>

<!-- PART 3: Formatted Article -->


<section id="article" class="section">
<h1>The Importance of Learning Web Development</h1>
<h2>Why It Matters</h2>
<p>
Web development is a critical skill in today’s digital age. It opens
doors to new opportunities,
fosters creativity, and enables individuals to build and share their
ideas with the world.
</p>
<ul>
<li>Increased job opportunities</li>
<li>Boosts creativity and innovation</li>
<li>Enhances problem-solving skills</li>
</ul>
<ol>
<li>Learn HTML</li>
<li>Practice CSS</li>
<li>Explore JavaScript</li>
</ol>
<img src="webdev.jpg" alt="Web Development Illustration" style="width:
100%; max-width: 600px;">
<p>
Want to learn more? Visit
<a href="https://developer.mozilla.org/en-US/" target="_blank">MDN Web
Docs</a>
for comprehensive resources on web development.
</p>
</section>
</body>
</html>

styles.css
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

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

/* Section Styling */
.section {
padding: 20px;
margin: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}

/* Form Styling */
form {
background-color: #f9f9f9;
padding: 20px;
width: 500px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 5px;
}

/* Table Styling */
table {
width: 80%;
margin: 0 auto;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}

thead tr {
background-color: #f4f4f4;
}

tbody tr:nth-child(even) {
background-color: #f9f9f9;
}

/* Article Link Hover Effect */


a:hover {
color: #007BFF;
text-decoration: underline;
}

/* Responsive Layout */
@media (max-width: 768px) {
form {
width: 90%;
}

table {
width: 100%;
}
}

Notes
• Ensure the image webdev.jpg is added to your project folder for the article.
• The CSS makes the layout responsive and visually appealing with hover effects and alternating
table row colors.
• Inline comments in the HTML and CSS guide students through the structure and styling.
Here’s how you can structure and implement your Portfolio Website with the required Converters
using HTML, CSS, and JavaScript. This structure provides a strong foundation, highlights the core
requirements, and includes detailed sections to integrate the converters.

1. File Structure
Organize your project as follows:
portfolio/
├── index.html
├── about.html
├── projects.html
├── converters/
│ ├── currency.html
│ ├── temperature.html
│ ├── unit.html
│ ├── binary.html
│ ├── timezone.html
├── css/
│ ├── styles.css
│ ├── converters.css
├── js/
│ ├── currency.js
│ ├── temperature.js
│ ├── unit.js
│ ├── binary.js
│ ├── timezone.js
├── assets/
│ ├── images/
│ ├── fonts/
├── api/
│ ├── exchange-rates.js

2. Portfolio Website: Pages Overview


index.html (Home Page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Website</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<h1>Welcome to My Portfolio</h1>
<nav>
<ul>
<li><a href="about.html">About Me</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="converters/currency.html">Converters</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="intro">
<h2>Hi, I'm [Your Name]</h2>
<p>A passionate web developer with a knack for building interactive web
solutions.</p>
</section>
<section id="highlights">
<h2>Highlighted Projects</h2>
<div class="project-preview">
<a href="projects.html">View My Work</a>
</div>
</section>
</main>
<footer id="contact">
<h2>Contact Me</h2>
<p>Email: [email protected]</p>
<p>Phone: (123) 456-7890</p>
</footer>
</body>
</html>

about.html (About Me Page)


This page introduces you with a photo, a brief biography, and your skills.

projects.html (Projects Page)


Showcase your projects, including links to live demos and GitHub repositories.

3. Converters Pages
Each converter will be its own webpage. Below are the details for one of the converters—Currency
Converter—and a similar approach can be applied to others.

Currency Converter (currency.html)


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currency Converter</title>
<link rel="stylesheet" href="../css/converters.css">
<script defer src="../js/currency.js"></script>
</head>
<body>
<header>
<h1>Currency Converter</h1>
</header>
<main>
<section id="converter">
<label for="amount">Amount:</label>
<input type="number" id="amount" placeholder="Enter amount" required>

<label for="fromCurrency">From:</label>
<select id="fromCurrency"></select>

<label for="toCurrency">To:</label>
<select id="toCurrency"></select>

<button id="convert">Convert</button>

<div id="result"></div>
</section>
</main>
</body>
</html>

currency.js
const fromCurrency = document.getElementById("fromCurrency");
const toCurrency = document.getElementById("toCurrency");
const amountInput = document.getElementById("amount");
const resultDiv = document.getElementById("result");

const apiUrl = "https://api.exchangerate-api.com/v4/latest/";

async function fetchCurrencies() {


try {
const response = await fetch(`${apiUrl}USD`);
const data = await response.json();
const currencies = Object.keys(data.rates);

currencies.forEach(currency => {
const option = document.createElement("option");
option.value = currency;
option.textContent = currency;
fromCurrency.appendChild(option.cloneNode(true));
toCurrency.appendChild(option);
});
} catch (error) {
console.error("Failed to fetch currencies", error);
}
}

async function convertCurrency() {


const amount = parseFloat(amountInput.value);
const from = fromCurrency.value;
const to = toCurrency.value;

if (isNaN(amount) || !from || !to) {


resultDiv.textContent = "Please provide valid inputs.";
return;
}

try {
const response = await fetch(`${apiUrl}${from}`);
const data = await response.json();
const rate = data.rates[to];
const convertedAmount = (amount * rate).toFixed(2);
resultDiv.textContent = `${amount} ${from} = ${convertedAmount} ${to}`;
} catch (error) {
console.error("Conversion failed", error);
}
}

document.getElementById("convert").addEventListener("click", convertCurrency);
window.addEventListener("load", fetchCurrencies);

CSS (converters.css)
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

header {
text-align: center;
background-color: #4CAF50;
color: white;
padding: 1rem 0;
}

main {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
}

#converter {
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label, select, input {


display: block;
margin-bottom: 10px;
}

button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}

#result {
margin-top: 20px;
font-weight: bold;
}

4. Extending for Other Converters


1. Temperature Converter:
• Create fields for Fahrenheit, Celsius, and Kelvin.
• Use JavaScript to calculate conversions dynamically.
2. Unit Converter:
• Add dropdowns for selecting units like meters to feet, kilograms to pounds, etc.
3. Binary/Decimal/Hexadecimal Converter:
• Use JavaScript to handle conversions and include error handling for invalid inputs.
4. Time Zone Converter:
• Use the Intl.DateTimeFormat API or a library like moment-timezone.

5. Responsive Design
Use CSS Grid or Flexbox to make all pages responsive. For example:
@media (max-width: 768px) {
main {
flex-direction: column;
padding: 10px;
}
}

This approach ensures each section of the portfolio is interactive, responsive, and well-designed.

You might also like