March 30, 2024 [ NEvan perera ]

Web Design and Development

4COSC011W

Report

Author: Nevan Perera

Student ID: 20231669/w2051949

Group Number: 6
Student Role: member/student 3

1
 March 30, 2024 [ NEvan perera ]

Contents
1. Introduction..................................................................................................................................3
1.1 Team Members and Task Allocation...........................................................................................3
1.2 Website topic/theme...........................................................................................................3
1.3 Contributions........................................................................................................................3
1 Technical Discussion.....................................................................................................................3
1.1 Implementation....................................................................................................................3
1.2 Task completion checklist.....................................................................................................4
2 Webpage Validation Statement....................................................................................................5
3 Janet.............................................................................................................................................5
4 Self-reflection................................................................................................................................5
References.............................................................................................................................................6
Appendices............................................................................................................................................6
Appendix A: Code..............................................................................................................................6
Appendix B: Screenshots...................................................................................................................6
Appendix C: Screenshots - Webpage Validation Evidence...............................................................6
Appendix D: Task Completion Checklist............................................................................................6

2
 March 30, 2024 [ NEvan perera ]

1. Introduction

This assignment tasked us with creating a website with a theme of our choosing, allocating
different pages to be handled by different students. The theme we chose was Clean Water &
Sanitation. We took a lot of inspiration from the United Nations websites when considering the
structure of the website.

1.1 Team Members and Task Allocation

Dinuka – Home page, Feedback Page, navbar

Nevan – Profile Prompts, Profile page, Team page

Kavini – Gallery, Sitemap

Subashitha – Shop, Splash Screen

1.2 Website topic/theme

Clean Water & Sanitation – Promoting and Raising Awareness, as well as acting as a medium for
donations to the cause.

3
 March 30, 2024 [ NEvan perera ]

1.3 Contributions

1 Technical Discussion
1.1 Implementation

Team Page

The Team page was implemented by using a container going horizontally across middle of
the page. Created divs for each profile card inside this container. Since each profile card must look
the same, I created a class, “profile-container”, to style the cards. This way, the styling only needs to
be coded in once, but it is implemented to all of the profile cards. The styling for profile-container
consisted of setting width and height, a box shadow, margin, padding and background in translucent
black. Border radius was also included to round the corners of the container. The profile cards
consisted of an h3 for the name, small tag, for the Description, and an img, for the student’s image.
The image was styled by once again setting a width and height, making the position absolute, so
during the hover animation nothing overlaps over the image. I set the object-fit to cover so that an
image of any aspect ratio can be used without it being stretched. I then created a separate div inside
the profile-container, to display the links to the socials of each student, however this is only
cosmetic. It does not function. To display the socials, I used icons taken from fontawesome.
The animations were made so that when the cursor hovers over the profile-container,
h3,p,small and socials-container change color to the transluscent black, while the profile container
itself changes to a bright yellow, along with the socials icons. This creates an inverted effect during

4
 March 30, 2024 [ NEvan perera ]

hover. For the image hover animation, I simply set it to increase its width and height during hover,
and made the transition duration 0.5 seconds.

Profile Page

profile.html
Theres a div with a class “container” that holds all the contents of the prompts. Inside the
container, there’s a progress bar implemented using a div with the classes “progress” and “progress-
bar”. The width of the progress bar changes as the user progresses through the prompts. Each
prompt is enclosed within the div with class “prompt-container”. All the prompts constructed using
divs, input classes and buttons for next, skip and back. Each prompt contains a title and an input
field. The answers to the prompts are displayed in a separate div with the id “answer-container”.
Each answer is wrapped inside a div with the class “answer-box”.
“container” sets a maximum width of 600px. Padding and light grey back ground was
implemented. Added border, and border for radius for modern appearance. For the progress bar
styling, we have a grey background colour for the progress bar container and a green background
colour to represent progress. I implemented smooth transition for the width-changes of the progress
bar. (Transition: width 0.5s ease-in-out;). The prompt container sets margins to space out the
prompts. The prompts use bold font weights. For button styling, padding, background colour and
border radius was used. Also changes background colour on hover, to indicate interactivity. For
answer box, the appearance of each answer is defined. And the padding, margin and background
color was set, as well as positions a green line under each box for visual separation.
To handle the logic to move to the next prompt, we have the nextPrompt() function, which
stores user-input, updates the progress bar, and toggles prompt visibility. skipPrompt() function is
used to skip the current prompt and move to the next one. The goBack() function allows users to
move to the previous prompt. For the progress bar progression, we used another function called
updateProgressBar() function, which calculates the completion percentage and updates the width of
the progress bar accordingly. To create an answer box, we have the createAnswerBox() function,
which dynamically creates and appends a box to display the users answers for each prompt. As
users provide each piece of information, the system dynamically adjusts and displays subsequent
prompts based on their previous responses. This was done creating a function called
updateNextQuestion(). It updates the text of subsequent prompts based on the user’s previous
response. Another function called gatherUserInfo(), collects user information including name,
surname, email, etc. And in the same function, local storage is utilized to hold user input across
prompts and into the profile page. Each prompt’s value is stored with a unique key in local storage.
The gathered user data from all the inputs is stored as a json object, under they key user_data.

profile_form.html
For the profile section, it is divided into a left-container and right-container. The left-container
contains the user profile picture, name, email, and various profile options. Each profile option
(derived from prompts) is represented by an anchor tag with an on-click attribute to trigger
JavaScript functions to show different content sections (content1, content2, content3). Theres a
button called “Reset”, with an on-click event to redirect to the beginning of the prompts. The right
container contains several div elements representing different content sections, as mentioned
before. Each content section contains forms/input fields related to specific user
information/preferences. The javascript functions showContent() are defined to show the selected
content section and hide all others when a profile option is clicked. Initially all content sections are
hidden except for content1. The redirectToPage() function redirects the user to back to profile.html.

5
 March 30, 2024 [ NEvan perera ]

1.2 Task completion checklist

User Profile was implemented completely.

Team Page was implemented completely.

Content page was not implemented

Page Editor was implemented partially.

Nav bar was added to all pages.

Template was used in all pages.

Additional CSS was used in all pages.

Additional Interactivity was included in all pages.

2 Webpage Validation Statement

profile.html, profile_form.html & team.html all validated without errors

3 Janet

Did not complete the cross-check for janet policies and regulations.

4 Self-reflection

I enjoyed discussing the methods of implementation for the different tasks we had at hand. There is
nothing in particular that I did not enjoy.

Working in a team called for effective communication. I learnt how important communicating your
goals and requirements with all of your members is. Getting second and third opinions, and creative
suggestions proved to be invaluable assistance throughout the project.

I also learnt that tracking progress and setting mini-deadlines for different tasks is vital in a group
project.

A strength of mine that emerged during this project would be ability to work under pressure, and
limited timeframes. However, this only occurred as a result of a major weakness of mine that
emerged.

6
 March 30, 2024 [ NEvan perera ]

The weakness being procrastination. As a result of my procrastination, I was left with limited time to
implement the project, even though I maintained effective communication with my members, I
started my tasks much later than I should have. As a result, I had to work under smaller time
constraints and higher pressure than it should have been, and I learnt that pressure brings me
greater focus, but regardless, my procrastination is something that I need to address as soon as
possible.
If I had to undertake this project again, I would make and follow a detailed plan and timeline for
each task in the project. Set smaller, more achievable goals, that over the course of the project
duration, will culminate into a much more refined project.

References

Icons in team.html, link : https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-

awesome.min.css/

Appendices

Appendix A: Code
profile.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Profile</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="homeImages/favicon.ico">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.container {
max-width: 600px;
margin: 200px auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
}

.progress {
background-color: #ddd;
border-radius: 5px;

7
 March 30, 2024 [ NEvan perera ]

margin-bottom: 20px;
}

.progress-bar {
background-color: #4caf50;
height: 20px;
border-radius: 5px;
width: 0%;
transition: width 0.5s ease-in-out;
}

.prompt-container {
margin-bottom: 20px;
}

.prompt {
font-weight: bold;
}

.user-info {
display: none;
margin-top: 20px;
}

.confirmation {
display: none;
font-weight: bold;
margin-top: 20px;
}

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

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

#answers-container {
border-radius: 15px;
background-color: #f9f9f9;
padding: 10px;
margin-top: 20px;

8
 March 30, 2024 [ NEvan perera ]

.answer-box {
background-color: #f9f9f9;
padding: 5px 10px;
margin-top: 5px;
position: relative; /* Make the position of the pseudo-element relative to
the answer box */
}

.answer-box:not(:last-child)::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: green; /* Add a green line */
}

</style>
</head>
<body>
<header>
<nav class="navbar">
<ul>
<li><img class="logo" src="homeImages/goal6_menu_icon.jpg"
alt="logo"></li>
<li><a href="home.html"><b>Home</b></a></li>
<li><a href="gallery.html"><b>Gallery</b></a></li>
<li><a href="shop.html"><b>Shop</b></a></li>
<li><a href="sitemap.html"><b>Sitemap</b></a></li>
<li><a href="team.html"><b>Team</b></a></li>

<li class="category">
<a href="#" class="dropbtn"><b>Content Pages</b></a>
<div class="category-content">
<a href="#"><b>Subashitha (Student 1)</b></a>
<a href="content_page_dinuka.html"
id="content_page_dinuka"><b>Dinuka (Student 2)</b></a>
<a href="#"><b>Nevan (Student 3)</b></a>
<a href="content_page_kavini.html"><b>Kavini (Student 4)</b></a>
</div>
</li>

<li class="category">
<a href="#"><b>Page Editors</b></a>
<div class="category-content">

9
 March 30, 2024 [ NEvan perera ]

<a href="#" target="_blank"><b>Subashitha (Student 1)</b></a>

<a href="page_editor_dinuka.html" target="_blank"><b>Dinuka
(Student 2)</b></a>
<a href="#" target="_blank"><b>Nevan (Student 3)</b></a>
<a href="page_editor_kavini.html" target="_blank"><b>Kavini
(Student 4)</b></a>
</div>
</li>

<li><a href="feedback.html" id="feedback"><b>Feedback</b></a></li>

<li class="user-profile"><a href="profile.html" id="profile"><b>User
Profile</b></a>
</ul>
</nav>
</header>

<div class="container">
<div class="progress">
<div class="progress-bar" style="width: 0%;"></div>
</div>

<div class="prompt-container" id="prompt1">

<div class="prompt">Prompt 1: Enter your name</div>
<input type="text" id="name">
<button onclick="nextPrompt()">Next</button>

</div>

<div class="prompt-container" id="prompt2" style="display: none;">

<div class="prompt">Prompt 2: Enter your surname</div>
<input type="text" id="surname">
<button onclick="nextPrompt()">Next</button>
<button onclick="skipPrompt()">Skip</button>
<button onclick="goBack()">Back</button>

</div>

<div class="prompt-container" id="prompt3" style="display: none;">

<div class="prompt">Prompt 2: Enter your Phone number</div>
<input type="text" id="phone">
<button onclick="nextPrompt()">Next</button>
<button onclick="skipPrompt()">Skip</button>
<button onclick="goBack()">Back</button>

</div>

<div class="prompt-container" id="prompt4" style="display: none;">

<div class="prompt">Prompt 3: Enter your email</div>

10
 March 30, 2024 [ NEvan perera ]

<input type="email" id="email">

<button onclick="nextPrompt()">Next</button>
<button onclick="skipPrompt()">Skip</button>
<button onclick="goBack()">Back</button>

</div>

<div class="prompt-container" id="prompt5" style="display: none;">

<div class="prompt">Prompt 4: Enter your username</div>
<input type="text" id="username">
<button onclick="nextPrompt()">Next</button>
<button onclick="skipPrompt()">Skip</button>
<button onclick="goBack()">Back</button>
</div>

<div class="prompt-container" id="prompt6" style="display: none;">

<div class="prompt">Prompt 5: Enter your password</div>
<input type="password" id="password">
<button onclick="nextPrompt()">Next</button>
<button onclick="skipPrompt()">Skip</button>
<button onclick="goBack()">Back</button>
</div>

<div class="prompt-container" id="prompt7" style="display: none;">

<div class="prompt">Prompt 6: How have you contributed?</div>
<select id="contribution">
<option value="">--Select--</option>
<option value="Donated money to the cause">Donated money to the
cause</option>
<option value="Helped neighbourhood sanitation">Helped
neighbourhood sanitation</option>
</select>
<button onclick="updateNextQuestions()">Next</button>
<button onclick="skipPrompt()">Skip</button>
<button onclick="goBack()">Back</button>
</div>

<div class="prompt-container" id="prompt8" style="display: none;">

<div class="prompt"></div>
<input type="text">
<button onclick="nextPrompt()">Next</button>
<button onclick="skipPrompt()">Skip</button>
<button onclick="goBack()">Back</button>
</div>

<div class="prompt-container" id="prompt9" style="display: none;">

<div class="prompt"></div>
<input type="text">

11
 March 30, 2024 [ NEvan perera ]

<button onclick="nextPrompt()">Next</button>
<button onclick="skipPrompt()">Skip</button>
<button onclick="goBack()">Back</button>
</div>

<div class="prompt-container" id="prompt10" style="display: none;">

<div class="prompt"></div>
<input type="text">
<button onclick="nextPrompt()">Next</button>
<button onclick="skipPrompt()">Skip</button>
<button onclick="goBack()">Back</button>
</div>

<div class="prompt-container" id="prompt11" style="display: none;">

<div class="prompt"></div>
<input type="text">
<button onclick="nextPrompt()">Next</button>
<button onclick="skipPrompt()">Skip</button>
<button onclick="goBack()">Back</button>
</div>

<div class="prompt-container" id="prompt12" style="display: none;">

<div class="prompt">Prompt 12: Would you like to donate to our cause
on a monthly basis?</div>
<input type="text" id="monthly_ba">
<button onclick="nextPrompt()">Next</button>
<button onclick="skipPrompt()">Skip</button>
<button onclick="goBack()">Back</button>
</div>

<div class="prompt-container" id="prompt13" style="display: none;">

<div class="prompt">Prompt 13: How much?</div>
<input type="text" id="how_much">
<button onclick="nextPrompt()">Next</button>
<button onclick="skipPrompt()">Skip</button>
<button onclick="goBack()">Back</button>
</div>

<div id="answers-container"></div>

</div>

<footer>
<div class="footer_bar">
<p><a href="#" target="_blank">Subashitha</a> <a
href="page_editor_dinuka.html" target="_blank">Dinuka</a> <a
href="page_editor_nevan.html" target="_blank">Nevan</a> <a
href="page_editor_kavini.html" target="_blank">Kavini</a></p>

12
 March 30, 2024 [ NEvan perera ]

</div>
</footer>

<script>
localStorage.clear();
var currentPrompt = 1;
var totalPrompts = 12;
var answerBoxes = [];

function nextPrompt(promptNumber) {
var currentElement = document.getElementById("prompt" + currentPrompt);
var nextElement = document.getElementById("prompt" + (currentPrompt + 1));

if (currentElement && currentElement.querySelector("select") &&

currentElement.querySelector("option")) {
var selectedValue = currentElement.querySelector("select").value;
console.log("Selected value for prompt " + currentPrompt + ": " +
selectedValue);
var key = "prompt" + currentPrompt; // Define key using currentPrompt

if (localStorage.getItem(key)) {
localStorage.setItem(key, selectedValue);
// Update the corresponding answer box
answerBoxes[currentPrompt - 1].innerText = selectedValue;
} else {
localStorage.setItem(key, selectedValue);
var answerBox = createAnswerBox(selectedValue);
answerBoxes.push(answerBox); // Store the reference to the answer
box
}
} else if (currentElement) {
var userInput = currentElement.querySelector("input").value;
console.log("User input for prompt " + currentPrompt + ": " +
userInput);
var key = "prompt" + currentPrompt;

if (localStorage.getItem(key)) {
localStorage.setItem(key, userInput);
// Update the corresponding answer box
answerBoxes[currentPrompt - 1].innerText = userInput;
} else {
localStorage.setItem(key, userInput);
var answerBox = createAnswerBox(userInput);
answerBoxes.push(answerBox); // Store the reference to the answer
box
}
}

13
 March 30, 2024 [ NEvan perera ]

if (currentElement && nextElement) {

currentElement.style.display = "none";
nextElement.style.display = "block";
updateProgressBar();
currentPrompt++;
} else {
// Display user info and confirmation if there are no more prompts
// document.getElementById("user-info").style.display = "block";
// document.getElementById("confirmation").style.display = "block";
document.querySelector(".progress-bar").style.width = "100%";
gatherUserInfo();
}
}

function createAnswerBox(value) {
var answerBox = document.createElement('div');
answerBox.className = 'answer-box';
answerBox.innerText = value;
document.getElementById('answers-container').appendChild(answerBox);
return answerBox;
}

function skipPrompt() {
nextPrompt(); // Call nextPrompt to move to the next prompt
}

function goBack() {
var currentElement = document.getElementById("prompt" + currentPrompt);
var prevElement = document.getElementById("prompt" + (currentPrompt - 1));
if (currentElement && prevElement) {
currentElement.style.display = "none";
prevElement.style.display = "block";
updateProgressBar();
currentPrompt--;
}
}

function updateProgressBar() {
var progress = (currentPrompt / totalPrompts) * 100;
document.querySelector(".progress-bar").style.width = progress + "%";
}

function updateNextQuestions() {
var contribution = document.getElementById("contribution").value;
var nextPromptText1, nextPromptText2;

14
 March 30, 2024 [ NEvan perera ]

// Update the next prompt texts based on the selected contribution

switch (contribution) {
case "Donated money to the cause":
nextPromptText1 = "Prompt 8: Estimate of amount of money donated";
nextPromptText2 = "Prompt 9: Which organzitions have you donated
to?";
nextPromptText3 = "Prompt 10: Do you plan on making future
donations?";
nextPromptText4 = "Prompt 11: Why did you donate?";
break;
case "Helped neighbourhood sanitation":
nextPromptText1 = "Prompt 8: How have you helped?";
nextPromptText2 = "Prompt 9: How has the neighbourhood supported
you?";
nextPromptText3 = "Prompt 10: How long have you been doing these
things (months/years)?";
nextPromptText4 = "Prompt 11: How has the neighbourhood changed
since you started helping?";
break;
default:
break;
}

// Update the next two prompts

var nextElement1 = document.getElementById("prompt8");
var nextElement2 = document.getElementById("prompt9");
var nextElement3 = document.getElementById("prompt10");
var nextElement4 = document.getElementById("prompt11");
if (nextElement1 && nextElement2) {
nextElement1.querySelector(".prompt").textContent = nextPromptText1;
nextElement2.querySelector(".prompt").textContent = nextPromptText2;
nextElement3.querySelector(".prompt").textContent = nextPromptText3;
nextElement4.querySelector(".prompt").textContent = nextPromptText4;
}

nextPrompt();
}

var valueForPrompt6 = getPromptValue('prompt1');

console.log(valueForPrompt6); // This will log the selected value of the
prompt with id 'prompt6'

function gatherUserInfo() {
var user_data = {};

15
 March 30, 2024 [ NEvan perera ]

user_data.Name = document.getElementById("name").value;
user_data.Surname = document.getElementById("surname").value;
user_data.Email = document.getElementById("email").value;
user_data.Phone = document.getElementById("phone").value;
user_data.Username = document.getElementById("username").value;
user_data.Password = document.getElementById("password").value;
user_data.contribution = document.getElementById("contribution").value;

// Additional prompts based on contribution selection

var contribution = document.getElementById("contribution").value;
if (contribution === "Donated money to the cause") {
user_data.Estimate =
document.getElementById("prompt8").querySelector("input").value;
user_data.Organization =
document.getElementById("prompt9").querySelector("input").value;
user_data.Future_don =
document.getElementById("prompt10").querySelector("input").value;
user_data.Donate =
document.getElementById("prompt11").querySelector("input").value;
} else {
user_data.How_help =
document.getElementById("prompt8").querySelector("input").value;
user_data.neigh_supported =
document.getElementById("prompt9").querySelector("input").value;
user_data.Long_been =
document.getElementById("prompt10").querySelector("input").value;
user_data.neigh_changed =
document.getElementById("prompt11").querySelector("input").value;
}

// Monthly donation and donation amount

user_data.monthly_donation =
document.getElementById("prompt12").querySelector("input").value;
user_data.donation_amount =
document.getElementById("prompt13").querySelector("input").value;

// Additional info prompts

for (var i = 13; i <= totalPrompts; i++) {
user_data["additional_info_" + i] = document.getElementById("prompt" +
i).querySelector("input").value;
}

// Convert the user_data object to a JSON string and save it to local

storage
localStorage.setItem('user_data', JSON.stringify(user_data));

window.location.replace("profile_form.html");

16
 March 30, 2024 [ NEvan perera ]

</script>
<script src="navbarBorderBottom.js"></script>
</body>
</html>

profile_form.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Profile</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="homeImages/favicon.ico">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.parent-container{
/* background-color: #666; */
max-width: 1000px;
display:flex;
margin: 40px auto;
justify-content: center;

}
.right-container, .left-container {
max-width: 50%;

margin-left: 6px;
margin-right: 6px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
height: 450px;

17
 March 30, 2024 [ NEvan perera ]

.right-container{
background-color: rgb(0,0,0, 0.25);
width: 75%;
}
.left-container{
background-color: rgb(0,0,0, 0.25);
width: 25%;
text-align: left;

}
.profile {
text-align: left;
width: 100%;
}
.profile img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 10px;
object-fit:cover;

}
.profile h3 {
margin: 5px 0;
}
.profile p {
color: #666;
font-size:small;
margin: auto;
}
.profile-options{
margin: 0;
padding: 0;
display: flex;
align-items: center;
text-decoration: none;
color: #525252;
}
.profile-options p{
width: 90%;
}
.profile-options hr{
border: 0;
height: 1px;
width: 100%;
background: #525252;

18
 March 30, 2024 [ NEvan perera ]

.profile-options span{
display: inline-block;
transition: transform 0.2s;
}

.profile-options:hover span{
transform: translateX(5px);
color: rgb(255, 255, 0, 0.8);
}
.profile-options:hover p{
font-weight: 700;
color: rgb(255, 255, 0, 0.8);
}

/* -----------------------------Form CSS-----------------------------
*/
form{
margin: 0 auto;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"] {
width: calc(85% - 80px); /* Adjust width based on label width and
padding */
float: right;

#content3 label {
display: block;
margin-bottom: 5px; /* Adjust spacing between label and input */
}

#content3 input[type="text"] {
width: 100%; /* Make inputs fill the width */
box-sizing: border-box; /* Include padding and border in the width
*/
margin-bottom: 10px; /* Adjust spacing between inputs */
}

#content4 label {
display: block;
margin-bottom: 5px; /* Adjust spacing between label and input */
}

19
 March 30, 2024 [ NEvan perera ]

#content4 input[type="text"] {
width: 100%; /* Make inputs fill the width */
box-sizing: border-box; /* Include padding and border in the width
*/
margin-bottom: 10px; /* Adjust spacing between inputs */
}

#content5 label {
display: block;
margin-bottom: 5px; /* Adjust spacing between label and input */
}

#content5 input[type="text"] {
width: 100%; /* Make inputs fill the width */
box-sizing: border-box; /* Include padding and border in the width
*/
margin-bottom: 10px; /* Adjust spacing between inputs */
}

</style>
</head>
<body>
<header>
<nav class="navbar">
<ul>
<li><img class="logo" src="homeImages/goal6_menu_icon.jpg"
alt="logo"></li>
<li><a href="home.html"><b>Home</b></a></li>
<li><a href="gallery.html"><b>Gallery</b></a></li>
<li><a href="shop.html"><b>Shop</b></a></li>
<li><a href="sitemap.html"><b>Sitemap</b></a></li>
<li><a href="team.html"><b>Team</b></a></li>

<li class="category">
<a href="#" class="dropbtn"><b>Content Pages</b></a>
<div class="category-content">
<a href="#"><b>Subashitha (Student 1)</b></a>
<a href="content_page_dinuka.html"
id="content_page_dinuka"><b>Dinuka (Student 2)</b></a>
<a href="#"><b>Nevan (Student 3)</b></a>
<a href="content_page_kavini.html"><b>Kavini (Student 4)</b></a>
</div>
</li>

<li class="category">
<a href="#"><b>Page Editors</b></a>
<div class="category-content">
<a href="#" target="_blank"><b>Subashitha (Student 1)</b></a>

20
 March 30, 2024 [ NEvan perera ]

<a href="page_editor_dinuka.html" target="_blank"><b>Dinuka

(Student 2)</b></a>
<a href="#" target="_blank"><b>Nevan (Student 3)</b></a>
<a href="page_editor_kavini.html" target="_blank"><b>Kavini
(Student 4)</b></a>
</div>
</li>

<li><a href="feedback.html" id="feedback"><b>Feedback</b></a></li>

<li class="user-profile"><a href="profile.html" id="profile"><b>User
Profile</b></a>
</ul>
</nav>
</header>
<br><br>
<div class="parent-container">

<div class="left-container">
<div class="profile">
<img src= "profile_images/profile_image.jpg" alt="Profile
Picture">
<h3>John Doe</h3>
<p>Email: john.doe@example.com</p>
<br>
<br>
<hr>
<a href="#" class = "profile-options"
onclick="showContent('content1');">
<p>Profile</p>
<span>></span>
</a>
<hr>
<a href="#" class = "profile-options"
onclick="showContent('content2');">
<p>Privacy & Security</p>
<span>></span>
</a>
<hr>
<a href="#" class = "profile-options"
onclick="showContent('content3');">
<p>Donations</p>
<span>></span>
</a>
<hr>
<a href="#" class = "profile-options"
onclick="showContent('content4');">
<p>Contribution(Donations)</p>
<span>></span>

21
 March 30, 2024 [ NEvan perera ]

</a>
<hr>
<a href="#" class = "profile-options"
onclick="showContent('content5');">
<p>Contributions(Neighborhood Awarness)</p>
<span>></span>
</a>
<hr>
<button onclick="redirectToPage()">Reset</button>

</div>
</div>

<div class="right-container">
<div id="content1">
<form action="/submit_form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required
placeholder="John"><br><br>

<label for="surname">Surname:</label>
<input type="text" id="surname" name="surname" required
placeholder="Doe"><br><br>

<label for="email">Email Address:</label>

<input type="email" id="email" name="email" required
placeholder="jdoe@gmail.com"><br><br>

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

<input type="tel" id="phone" name="phone" pattern="[0-9]
{3}-[0-9]{3}-[0-9]{4}" required placeholder="012-345-6789"><br><br><br>

</form>

</div>
<div id="content2" style="display: none;">

<form action="/submit_form" method="post">

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

22
 March 30, 2024 [ NEvan perera ]

</form>

</div>
<div id="content3" style="display: none;">
<label for="name">Would you like to donate to our cause on a
monthly basis?</label>
<input type="text" id="month" name="month">
<label for="name">How much?</label>
<input type="text" id="much" name="much">
</div>
<div id="content4" style="display: none;">
<label for="name">Estimate of amount of money donated</label>
<input type="text" id="Est" name="Est"><br><br>
<label for="name">Which organzitions have you donated to?
</label>
<input type="text" id="Org" name="Org"><br><br>
<label for="name">Do you plan on making future donations?
</label>
<input type="text" id="Pla" name="Pla"><br><br>
<label for="name">Why did you donate?</label>
<input type="text" id="Why" name="Why"><br><br>
</div>
<div id="content5" style="display: none;">
<label for="name">How have you helped?</label>
<input type="text" id="Help" name="Help"><br><br>
<label for="name">How has the neighbourhood supported you?
</label>
<input type="text" id="Supp" name="Supp"><br><br>
<label for="name">How long have you been doing these things?
(months/years)</label>
<input type="text" id="Long" name="Long"><br><br>
<label for="name">How has the neighbourhood changed since you
started helping?</label>
<input type="text" id="Change" name="Change"><br><br>
</div>

</div>

</div>

<footer>
<div class="footer_bar">
<p><a href="#" target="_blank">Subashitha</a> <a
href="page_editor_dinuka.html" target="_blank">Dinuka</a> <a
href="page_editor_nevan.html" target="_blank">Nevan</a> <a
href="page_editor_kavini.html" target="_blank">Kavini</a></p>

23
 March 30, 2024 [ NEvan perera ]

</div>
</footer>

<script>
function redirectToPage() {
// Replace 'destination.html' with the URL of the page you want to
redirect to
window.location.href = 'profile.html';
}
function showContent(contentId) {
// Hide all content sections
var contents = document.querySelectorAll('.right-container >
div');
contents.forEach(function(content) {
content.style.display = 'none';
});

// Show the selected content section

var selectedContent = document.getElementById(contentId);
if (selectedContent) {
selectedContent.style.display = 'block';
}
}

// Retrieve stored user data from localStorage

var userData = JSON.parse(localStorage.getItem('user_data'));
if (userData) {
// Fill input fields with stored data
document.getElementById('name').value = userData.Name || '';
document.getElementById('surname').value = userData.Surname || '';
document.getElementById('email').value = userData.Email || '';
document.getElementById('phone').value = userData.Phone || '';
document.getElementById('password').value = userData.Password ||
'';
document.getElementById('month').value = userData.monthly_donation
|| '';
document.getElementById('much').value = userData.donation_amount
|| '';
document.getElementById('Est').value = userData.Estimate || '';
document.getElementById('Org').value = userData.Organization ||
'';
document.getElementById('Pla').value = userData.Future_don || '';
document.getElementById('Why').value = userData.Donate || '';
document.getElementById('Help').value = userData.How_help || '';
document.getElementById('Supp').value = userData.neigh_supported
|| '';
document.getElementById('Long').value = userData.Long_been || '';

24
 March 30, 2024 [ NEvan perera ]

document.getElementById('Change').value = userData.neigh_changed
|| '';
}
</script>
<script src="navbarBorderBottom.js"></script>
</body>
</html>

team.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Team</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="homeImages/favicon.ico">
<!-- icons taken from fontawesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: content-box;
}
body{
background: whitesmoke;
font-family: Arial, sans-serif;
}
.heading-container{
text-align: center;
margin: 65px auto 50px;
}
.heading-container p{
margin-top: 10px;
line-height: 24px;
}
.profile-container{
width: 220px;
height: 220px;
background: rgb(0, 0, 0, 0.3);
border-radius: 4px;
margin-bottom: 30px;
box-shadow: 0 10px 10px 10px rgba(115,193,255, 0.1);
padding: 20px;

25
 March 30, 2024 [ NEvan perera ]

position: relative;
transition: 0.5s;

}
.profile-container img{
width: 85px;
height: 85px;
position: absolute;
top: 20px;
right: 20px;
border-radius: 4px;
object-fit:cover;
transition: 0.5s;

}
.profile-container h3{
margin-top: 25px;
margin-bottom: 5px;
color: yellow;

}
small{
color: white;
}
.socials-container{
background: rgb(255,255,0, 0.67);
margin: 60px auto 20px;
text-align: center;
border-radius: 3px;

}
.socials-container .fa{
margin: 5px;
color:rgb(0, 0, 0, 0.6);
cursor: pointer;
}
.profile-container p{
font-size: small;
text-align: center;
line-height: 20px;
color: white;

}
.team-container{
display: flex;
justify-content: space-between;

26
 March 30, 2024 [ NEvan perera ]

flex-wrap: wrap;
width: 85%;
margin: auto;

}
.profile-container img:hover {
width: 220px;
height: 220px;
}
.profile-container:hover{
background: rgb(255,255,0, 0.68);
}
.profile-container:hover h3{
color:rgb(0, 0, 0, 0.6);
}
.profile-container:hover p{
color:rgb(0, 0, 0, 0.6);
}
.profile-container:hover small{
color:rgb(0, 0, 0, 0.6);
}
.profile-container:hover .socials-container{
background: rgb(0, 0, 0, 0.76);
}
.profile-container:hover .socials-container .fa{
color: rgb(255,255,0, 0.8);
}

</style>
</head>

<body>
<nav class="navbar">
<ul>
<li><img class="logo" src="homeImages/goal6_menu_icon.jpg"
alt="logo"></li>
<li><a href="home.html"><b>Home</b></a></li>
<li><a href="gallery.html"><b>Gallery</b></a></li>
<li><a href="shop.html"><b>Shop</b></a></li>
<li><a href="sitemap.html"><b>Sitemap</b></a></li>
<li><a href="team.html"><b>Team</b></a></li>

<li class="category">
<a href="#" class="dropbtn"><b>Content Pages</b></a>
<div class="category-content">
<a href="#"><b>Subashitha (Student 1)</b></a>

27
 March 30, 2024 [ NEvan perera ]

<a href="content_page_dinuka.html"
id="content_page_dinuka"><b>Dinuka (Student 2)</b></a>
<a href="#"><b>Nevan (Student 3)</b></a>
<a href="content_page_kavini.html"><b>Kavini (Student 4)</b></a>
</div>
</li>

<li class="category">
<a href="#"><b>Page Editors</b></a>
<div class="category-content">
<a href="#" target="_blank"><b>Subashitha (Student 1)</b></a>
<a href="page_editor_dinuka.html" target="_blank"><b>Dinuka
(Student 2)</b></a>
<a href="#" target="_blank"><b>Nevan (Student 3)</b></a>
<a href="page_editor_kavini.html" target="_blank"><b>Kavini
(Student 4)</b></a>
</div>
</li>

<li><a href="feedback.html" id="feedback"><b>Feedback</b></a></li>

<li class="user-profile"><a href="profile.html" id="profile"><b>User
Profile</b></a>
</ul>
</nav>

<div class="heading-container">
<br><br>
<h1>Our Team</h1>
<p>Hover over the cards and our images to get a Better Look!</p>
</div>
<div class="team-container">
<div class="profile-container">
<h3>Dinuka</h3>
<small>Leader</small>
<img src="teamImages/Dinuka.jpg" alt="Leader">
<!-- these are the icons taken from fontawesome. -->
<div class="socials-container">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-instagram"></i>
</div>
<p>Built the Home Page, Nav-Bar and Feedback Page.</p>
</div>
<div class="profile-container">
<h3>Nevan</h3>
<small>Member</small>
<img src="teamImages/Nevan.jpg" alt="Member">

28
 March 30, 2024 [ NEvan perera ]

<div class="socials-container">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-instagram"></i>
</div>
<p>Created the Profile page, and the Team page</p>
</div>
<div class="profile-container">
<h3>Kavini</h3>
<small>Member</small>
<img src="teamImages/Kavini.jpg" alt="Member">
<div class="socials-container">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-instagram"></i>
</div>
<p>Designed the Sitemap page, and the Gallery</p>
</div>
<div class="profile-container">
<h3>Subashitha</h3>
<small>Member</small>
<img src="teamImages/Subashitha.jpg" alt="Member">
<div class="socials-container">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-instagram"></i>
</div>
<p>Created the Splash Screen and the Shop</p>
</div>

</div>

<footer>
<div class="footer_bar">
<p><a href="#" target="_blank">Subashitha</a> <a
href="page_editor_dinuka.html" target="_blank">Dinuka</a> <a
href="page_editor_nevan.html" target="_blank">Nevan</a> <a
href="page_editor_kavini.html" target="_blank">Kavini</a></p>
</div>
</footer>
<script src="navbarBorderBottom.js"></script>
</body>
</html>

29
 March 30, 2024 [ NEvan perera ]

Appendix B: Screenshots
profile.html

profile_form.html

30
 March 30, 2024 [ NEvan perera ]

team.html

Appendix C: Screenshots - Webpage Validation Evidence

profile.html

31
 March 30, 2024 [ NEvan perera ]

profile_form.html

team.html

32
 March 30, 2024 [ NEvan perera ]

Appendix D: Task Completion Checklist

Completed Student Comments

Student 3 Tasks
Yes No Partially
More complicated than
expected. Javascript was
1 – User Profile x
required, rather than optional
in my experience.
Went smoothly. Used
2 – Team x fontawesome library for a
few icons
3 – Content page x
4 – Page Editor x
5 – Use of the provided navigation
x
bar (adapted)
6 – Use of provided template
x
(adapted)
7 – Additional CSS x
8 – Additional Interactivity x
9 – Uploaded to Webserver x

33