This assignment aims to apply the concepts of HTML$,$ CSS$,$ Bootstrap, and Javascript to create a personal profile webpage. Students must use various HTML elements, CSS properties, and Bootstrap to structure and style their web pages.

Assignment Instructions: Create a Personal Profile Webpage

Login Section$($login$.$html$)$: $10$ point

$$ Createaloginformwithfieldsforusernameandpassword. $$ Includethe"Login"and"Register"buttons.

Registration Section$($register$.$html$)$: $10$ point

$$ Create a registration form with fields for username, email, password, and confirm password.

$$ Includea"Register"button.

$$ After registration, the user can log in to the personal website

and check their other activity like home, post blogs, about, contact inbox, fare calculation, etc.

Home Page $($main$.$html$)$: $10$ point

$$ Includeaheaderwithatitleandanavigationbar.

$$ The navigation bar should have links to the following sections:

Home, Post Blogs, About, Contact, Inbox, Fare Calculation

$$ Addanintroductionsectionwithabriefwelcomemessage.

$$ Add an "Article Blogs" section with at least three blog post

summaries that are extracted from the local database.

Figure: Demo example

Post blogs $($blogs$.$html$)$: $10$ point

$$ Create a "Posts blogs" section with a form that includes fields for Blog Title, Travel Description, Image, and include a submit

$$ Aftercreatingtheform,yousavealldatatoyourlocaldatabase

and show these data to the home$($main$.$html$)$ page.

Figure: Demo example

About Me Section $($about$\_$me$.$html$)$: $20$ point

$$ Create an "About" section with a form that includes fields for Course Name, Course Code, Instructor, and Term. Include a submit and Reset button.

$$ Create a $"$My courses" section with a heading and create a table with $4$ columns and $4$ rows to save the data which is extracted from the local storage database using the CRUD application. For Example:

Figure: Demo example

Contact Me Section $($contact$.$html$)$: $10$ point

$$ Create a "Contact Me$"$ section with a form that includes fields for name, subject, and message. Include a submit button. After that save all the field values to the local database and show these values to the inbox.html page.

Figure: Demo example

Inbox Section $($inbox$.$html$)$: $10$ point

$$ Add an "Inbox message" with at least three inbox messages that are extracted from the local database based on your provided contact form data.

Figure: Demo example

Fare Section $($fare$.$html$)$: $20$ point

$$ Calculate the fare for bus and train travel based on distance and apply promotional codes for discounts.

$$ To calculate the bus fare, enter the starting location in the "From" field, the destination in the $"$To$"$ field, and the distance in kilometers in the "Distance $($km$)"$ field. Click on the "Fare Calculation" button to compute the fare based on the rate of $$1\mathrm{.}23$ per kilometer. For example, if the distance is $10$ km$,$ the total fare will be $10$ km multiplied by $$1\mathrm{.}23/$km$,$ resulting in a fare of $$12\mathrm{.}30.$

$$ To calculate the train fare, enter the starting location in the "From" field, the destination in the $"$To$"$ field, and the distance in kilometers in the "Distance $($km$)"$ field. You can also enter a promo code in the "Promo Code" field to receive a discount. Click on the "Fare Calculation" button to compute the fare based on the rate of $$1\mathrm{.}23$ per kilometer. For example, if the distance is $10$ km$,$ the fare will be calculated as $10$ km multiplied by $$1\mathrm{.}23/$km$,$ resulting in a base fare of $$12\mathrm{.}30.$ Promo codes such as PROMO$10$ and SAVE$10$ offer a $10\%$ discount, while PROMO$15$ and SAVE$15$ provide a $15\%$ discount. For instance, with the promo code "PROMO$10,"$ the discount would be $10\%$ of $$12\mathrm{.}30,$ amounting to $$1\mathrm{.}23,$ resulting in a total fare of $$11\mathrm{.}07.$

Figure: Demo example

Apply CSS Styling $($style$.$css$)$

$$ UseanexternalCSSfiletostyleyourwebpage.

$$ Style the header and footer with background colors and

padding.

$$ Stylethenavigationbarwithhovereffects.

$$ Style the sections with appropriate margins, padding, and

borders.

$$ Styletheformelementstoimprovetheirappearance.

Apply JavaScript Functionality $($script$.$js$)$

$$ UseanexternalJavaScriptfiletoaddinteractivefunctionalityto your webpage.

$$ Addeventlistenerstohandleuseractionslikebuttonclicksand form submissions.

$$ Implementformvalidationtocheckforcorrectinputanddisplay error messages if needed.

$$ UseJavaScripttodynamicallyupdateandmanipulatecontent, such as adding, editing, or deleting items.

$$ StoreandmanagedatausinglocalStoragetomaintainstate across sessions.