Test_Summary

Frontend Mentor is a website where front-end developers get a design and are asked to make it into a page to practice their skills. This repository is my approach for the following design: https://www.frontendmentor.io/challenges/results-summary-component-CE_K6s0maV

If you want to see this repository live you can do it here: https://avoscanemile.github.io/Test_Summary

The website generates a new score every time you press continue or reload the page.

Table of Contents

• HTML Classes and Styling
• Layout Tools and CSS Functions used
• Media Queries

HTML Classes and Styling

card__result

• This class styles the upper section of the card, providing a background and text color to create a visual distinction.

result__h1

• It makes the main heading stand out with a larger font size and a bold font weight.

result__circle

• The circular shape and gradient background create an eye-catching result circle.
• The large font size and increased font weight emphasize the result value.
• The circle's dimensions and alignment make it visually appealing.

result__value

• This class enhances the result value with a larger font size and bold font weight for emphasis.

result__percent

• Styling for the result percentage text, making it visually appealing and readable.

result__adjective

• It styles the result adjective, providing a cohesive look to the result section.

result__description

• Adds styling to the result description for a clean and readable appearance.

card__summary

• This section's styling includes display, width, and padding to achieve the desired layout.

summary__title

• It styles the section title with the chosen text color, font size, and font weight.

summary__flex

• Utilizes flex properties for alignment and spacing within the summary section.
• The padding and border-radius enhance the section's appearance.

summary__flex--red, summary__flex--yellow, summary__flex--green, summary__flex--blue

• These classes provide color-coded styling to differentiate sections within the summary.

summary__reaction, summary__memory, summary__verbal, summary__visual

• Style different aspects within the summary section, giving each its own visual identity.

summary__score

• Styling for the score values, ensuring they are clear and readable.

summary__value

• Enhances the numerical values within the summary section for clarity.

summary__link

• Styles the "Continue" link to make it visually distinct and encourages user interaction.

Layout Tools and CSS Functions used

Flexbox

• Used for arranging items within the card, card__result and card__summary sections, providing a flexible, responsive layout.

CSS Functions

In this project, various CSS functions are employed to achieve specific styling effects. Here's an overview of the CSS functions and their purposes:

hsl()

• Purpose: Used for defining colors.
• Example: hsl(0, 100%, 67%) is applied to create the light red color used as the background for the result section.

hsla()

• Purpose: Used for defining colors with transparency.
• Example: hsla(0, 100%, 67%, 0.1) sets the light red background with some transparency.

var()

• Purpose: Enables the use of CSS variables to maintain consistency in color and typography.
• Example: Variables like --light-red and --dark-gray-blue are used throughout the project to define colors and maintain a consistent style.

clamp()

• Purpose: Ensures that the card width is responsive and adapts to different screen sizes.
• Example: clamp(300px, 90vw, 720px) is applied to set the width of the card, ensuring it doesn't get too narrow or too wide on different screens.

linear-gradient()

• Purpose: Creates gradient backgrounds.
• Example: Used for creating gradient backgrounds in various sections, such as the result section and the "Continue" button.

hsla()

• Purpose: Defines colors with hue, saturation, lightness, and alpha (transparency) components.
• Example: hsla(256, 72%, 46%, 1) is applied for the violet-blue color in the result section.

Media Queries

@media (max-width: 650px)

• Stacks the card sections vertically for smaller screens, improving mobile user experience.
• Adapts spacing and alignment of the summary__title for better readability.
• Adjusts the margin of the "Continue" link for an improved user interface.

JavaScript

The JavaScript code in this project is well explained and concise. Please refer to the script.js file for more info about it. There's also a little secret inside it.