The ‘True Color Personality Test’ Web Application helps the user to explore his personality type based on personality-color test. It helps the user to get along better with other people, increase productivity, and realize their full potential.
Overview: This web application implements "The True Colors Personality Test" using HTML, CSS, JavaScript, and jQuery. It features a login system, a questionnaire form, and result display based on user inputs.
Features: Authentication: Users can log in using the username "user1" and randomly generated password. Navigation Menu: Includes Home, Login, About Us, and Logout features. Pages:
- Homepage: Contains the login form for authentication.
- Login Form: Allows users to authenticate with credentials.(username: user1, password: generate Randomly)
- About Us: Provides information about "The True Colors Personality Test."
- Questionnaire: 11 individual pages for answering questions.
- Result: Displays the test results in an HTML table. Styling:
- Attractive layout with images, backgrounds, and centered components.
- Use of HTML5 semantic elements (, , , , ). Error Handling:
- Error messages for failed logins or incomplete form submissions.
- Form validation to ensure all fields are filled before submission. Personalization:
- Uses JavaScript session storage to identify and personalize the test for the user. Code Structure:
- Well-formatted HTML, CSS, and JavaScript for easy maintenance.
- Descriptive comments in code files (HTML, CSS, JS). File Organization:
- Standard file and directory naming conventions (index.html, style.css, js/). Readability:
- Standardized coding practices (lowercase letters, appropriate indentation). README:
- Provides an overview of the application and its features.
- Lists developers.
- Contains instructions or noteworthy details about the application.
Instructions: Clone/download the repository. Open the index.html file in a web browser. Use the provided credentials to log in. Answer the questionnaire to get the personality test result. Get the results of your Two most Personality relevant colors. Check the Personality traits of different colors using on the result page. Explore different pages using the navigation menu.