Displaying results

Introduction

The final step we are left with is displaying the final results of the customer’s order.

Displaying the final results

In keeping with our previous design pattern, we will extract this logic into a separate function to keep our main index.js file as clean as possible.

Create a new JavaScript module (file) called displayResults.js.
Setting up the displayResults function
Section titled “Setting up the displayResults function”

We are now ready to add our new function.
Challenge
In this file, can you create the starter code for our new function?
The function should:
- be called displayResults
- take our output object as an argument
- Use console.log() to display a message that says Displaying the final results...
Solution
Section titled “Solution”
Add the code shown below to displayResults.js, remembering to export the function using the export keyword.

displayResults.js
export function displayResults(output) { console.log('Displaying the final results...'); }

Save the file.

With this in place, you should now import the new function into index.js and call it after the calculateCost function.

index.js
import { calculateCosts } from "./calculateCosts.js"; import { displayResults } from "./displayResults.js"; import { validateForm } from "./validateForm.js"; // Capture user's input on form submission let form = document.querySelector("form"); form.addEventListener("submit", function (event) { event.preventDefault(); // Store the user's email address as userEmail (string/text) let userEmail = document.querySelector("#email").value; // Store the user's level as userLevel (string/text) let userLevel = document.querySelector("#level").value; // Store the user's hours of study as userHours (number) let userHours = parseInt(document.querySelector("#hoursPerWeek").value); // Validate the user's input const result = validateForm({ userEmail, userLevel, userHours }); console.log({ result }); if (result) { // Calculate the total cost const output = calculateCosts(result); console.log({ output }); // Display the total cost to the user displayResults(output); } }); // Display the total cost to the user

Note that we’ve updated our comment plan to reflect the new code.

All our comments have now been placed above the correct lines of code.

Click to reveal

Adding a HTML `id`

Next, open index.html.

We need find a space on the page to display the final results to the user.

There are lots of places we could choose, but here we will simply replace the form itself with the results.

This will:

help to minimise cumulative layout shift and keep the user’s focus on the results.
prevent users from submitting the form multiple times.

Look carefully for the first div with a class of form-section, and add an id of results directly onto the same page element:

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <title>Harmony | Sign Up</title>
5
    <link rel="stylesheet" href="./index.css" />
6
  </head>
7
  <body>
8
    <form class="form-wrapper">
9
      <div id="results" class="form-section">
38 collapsed lines
10
        <img
11
          class="mobile-display"
12
          src="./assets/harmony-music-academy-logo.svg"
13
          alt="Harmony Music Academy logo"
14
        />
15
        <div class="form-field">
16
          <label for="email" class="form-label">Email*</label>
17
          <input
18
            id="email"
19
            name="email"
20
            type="email"
21
            class="form-input"
22
            placeholder="Your email"
23
          />
24
          <div id="email-error"></div>
25
        </div>
26
        <div class="form-field">
27
          <label for="level" class="form-label">Level*</label>
28
          <select id="level" name="level" class="form-input">
29
            <option value="basic">Basic</option>
30
            <option value="advanced">Advanced</option>
31
            <option value="pro">Professional</option>
32
          </select>
33
          <div id="level-error"></div>
34
        </div>
35
        <div class="form-field">
36
          <label for="hoursPerWeek" class="form-label">Hours per week*</label>
37
          <input
38
            id="hoursPerWeek"
39
            name="hours-per-week"
40
            type="number"
41
            class="form-input"
42
            placeholder="How many?"
43
          />
44
          <div id="hoursPerWeek-error"></div>
45
        </div>
46

47
        <button type="submit" class="submit-btn">Sign up</button>
48
      </div>
49

50
      <div class="form-section">
51
        <img
52
          src="./assets/harmony-music-academy-logo.svg"
53
          alt="Harmony Music Academy logo"
54
        />
55
      </div>
56
    </form>
57

58
    <script type="module" src="./index.js"></script>
59
  </body>
60
</html>

Capturing the results HTML element with JavaScript
Section titled “Capturing the results HTML element with JavaScript”

Now that we have a space to display the results, we can update our displayResults function to show the final cost to the user.

Open displayResults.js.

Target the #results element using document.querySelector():
displayResults.js
```
export function displayResults(output) {
  console.log("Displaying the final results...");

  let results = document.querySelector("#results");
}
```
Display the user’s email address
Section titled “Display the user’s email address”

Next, we will display the user’s email address as the first item in the results.

We will use the innerHTML property to update the #results element with the user’s email address, and display the output properties via a HTML description list (<dl>).
displayResults.js
```
export function displayResults(output) {
  console.log("Displaying the final results...");

  let results = document.querySelector("#results");

  results.innerHTML = `
    <dl>
      <dt>Email</dt>
      <dd>${output.userEmail}</dd>
    </dl>
  `;
}
```
With this code in place, submit a valid form.

You should see the user’s email address displayed in place of the form itself:
Challenge
Challenge: Display all data
Section titled “Challenge: Display all data”
Can you complete the displayResults function to display the rest of the output data to the user?
The final output should include:
- The user’s email address
- The user’s chosen level
- The user’s hours of study
- The total cost in UK pounds (£)
It should look like this:
Solution
Section titled “Solution”
To display the rest of the user’s data, we simply need to add more <dt> and <dd> elements to the results.innerHTML string.

displayResults.js
export function displayResults(output) { console.log("Displaying the final results..."); let results = document.querySelector("#results"); results.innerHTML = ` <dl> <dt>Email</dt> <dd>${output.userEmail}</dd> <dt>Level</dt> <dd>${output.userLevel}</dd> <dt>Hours per week</dt> <dd>${output.userHours}</dd> <dt>Total cost</dt> <dd>£${output.totalCost}</dd> </dl> `; }

Save the file.

Now, when you submit the form, the final cost will be displayed to the user:

Click to reveal

Challenge: Style the results

Finally, we can add some CSS to style the results.

Open index.css and add the following styles towards the end of the file, just above the final media query:


117 collapsed lines
1
:root {
2
  --black: rgb(22, 22, 22);
3
  --white: rgb(255, 255, 255);
4
  --grey-50: rgb(250, 250, 250);
5
  --grey-300: rgb(192, 198, 201);
6
  --grey-500: rgb(88, 104, 112);
7
  --brand-light: rgb(255, 90, 58);
8
  --brand-dark: rgb(172, 62, 41);
9
  --sky-500: rgb(14 165 233);
10
  --box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
11
    0 4px 6px -4px rgb(0 0 0 / 0.1);
12
  --error-bkg: rgb(255, 241, 241);
13
  --error-placeholder: rgb(255, 157, 157);
14
}
15
* {
16
  color: var(--grey-500);
17
  box-sizing: border-box;
18
  font-family: Arial, Helvetica, sans-serif;
19
  margin: 0;
20
}
21
button {
22
  cursor: pointer;
23
}
24
.form-wrapper {
25
  display: flex;
26
  background-color: var(--grey-50);
27
  min-height: 100vh;
28
}
29
.form-section {
30
  width: calc(50% - 1px);
31
  display: flex;
32
  flex-grow: 1;
33
  flex-direction: column;
34
  justify-content: center;
35
  align-items: flex-start;
36
  gap: 2rem;
37
  padding: 2rem 4rem;
38
}
39
.form-section:first-of-type {
40
  border-right: 1px solid var(--grey-300);
41
}
42
.form-field {
43
  display: flex;
44
  flex-direction: column;
45
  gap: 0.5rem;
46
  align-items: flex-start;
47
  width: 100%;
48
}
49
.form-label {
50
  font-size: 1.25rem;
51
}
52
.form-input {
53
  background-color: var(--white);
54
  border-radius: 999px;
55
  border: 1px solid var(--grey-300);
56
  font-size: 1.5rem;
57
  padding: 0.75rem 1.5rem;
58
  font-weight: 300;
59
  color: var(--black);
60
  width: 100%;
61
}
62
.form-input::placeholder {
63
  color: var(--grey-300);
64
}
65
.form-input:focus {
66
  outline: none;
67
  outline: 2px solid var(--sky-500);
68
  box-shadow: var(--box-shadow-lg);
69
}
70
.mobile-display {
71
  display: none;
72
}
73
.submit-btn {
74
  border-radius: 1.75rem;
75
  margin: 0 auto;
76
  text-align: center;
77
  color: var(--white);
78
  border: 0;
79
  padding: 0.75rem 2rem;
80
  font-size: 1.5rem;
81
  background: linear-gradient(
82
    180deg,
83
    var(--brand-light) 0%,
84
    var(--brand-dark) 100%
85
  );
86
  transition: all 0.3s ease;
87
  outline: none;
88
  box-shadow: none;
89
}
90
.submit-btn:hover {
91
  outline: 1px solid var(--brand-dark);
92
  box-shadow: var(--box-shadow-lg);
93
  transition: all 0.3s ease;
94
}
95

96
.error-input {
97
  background-color: var(--error-bkg);
98
  color: var(--brand-dark);
99
  border-color: var(--brand-dark);
100
}
101
.error-input::placeholder {
102
  color: var(--error-placeholder);
103
}
104
.error-label {
105
  color: var(--brand-dark);
106
}
107
.error-message ul {
108
  padding-left: 0;
109
}
110
.error-message ul li {
111
  color: var(--brand-dark);
112
  font-weight: 800;
113
  font-size: 0.8rem;
114
  letter-spacing: 0.1px;
115
  list-style: none;
116
  margin-bottom: 0.5rem;
117
}
118

119
#results dl {
120
  padding: 2rem;
121
}
122
#results dt {
123
  font-weight: bold;
124
  margin-bottom: 0.25rem;
125
  font-size: 1.2rem;
126
}
127
#results dd {
128
  margin-bottom: 1rem;
129
  font-size: 1.2rem;
130
}
131

132
@media screen and (max-width: 640px) {
133
  .mobile-display {
134
    display: block;
135
  }
136
  .mobile-hidden {
137
    display: none;
138
  }
139
}

This will separate out the results more obviously, and make the category headings bold:

Styles start

Develop your CSS to fully style the results to your customer.

Below are some ideas for how your output could be designed, with increasing levels of complexity. Use these as a starting point, or design your own.

Basic

Results style basic

Solution 1

#results dl {
  padding: 2rem;
  background-color: var(--white);
  width: 100%;
  border-radius: 1rem;
  box-shadow: var(--box-shadow-lg);
}
#results dt {
  font-weight: bold;
  margin-bottom: 0.25rem;
  font-size: 1.2rem;
}
#results dd {
  margin-bottom: 1rem;
  font-size: 1.2rem;
}
#results dd:last-of-type {
  margin-bottom: 0;
}

Click to reveal

Advanced

Results style basic

results.innerHTML = `
  <dl>
    <dd class="results-email">${output.userEmail}</dd>

    <dd class="results-cost">£${output.totalCost}<span>per week</span></dd>

    <div class="results-details">
      <div>
        <dt>Level</dt>
        <dd class="results-detail">${output.userLevel}</dd>
      </div>
      <div>
        <dt>Hours</dt>
        <dd class="results-detail">${output.userHours}</dd>
      </div>
    </div>
  </dl>
`;

.results-details {
  display: flex;
  gap: 2rem;
  justify-content: space-evenly;
  padding: 2rem 0;
  text-align: center;
}
.results-detail {
  text-transform: uppercase;
  color: var(--grey-500);
  font-size: 1.3rem;
}
.results-email {
  background-color: var(--brand-light);
  color: var(--white);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  padding: 0.75rem 0;
  text-align: center;
  font-size: 1.2rem;
}
.results-cost {
  text-align: center;
  font-size: 3rem;
  font-weight: 800;
  padding: 2rem 0;
  color: var(--black);
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.results-cost span {
  font-size: 0.8rem;
  color: var(--brand-dark);
}

#results dl {
  background-color: var(--white);
  width: 100%;
  border-radius: 1rem;
  box-shadow: var(--box-shadow-lg);
}
#results dt {
  font-weight: 800;
  font-size: 0.8rem;
  text-align: center;
  color: var(--brand-dark);
}

Click to reveal

Clear `console.log()` statements

As we’ve worked through this project, we’ve used console.log() statements to help us debug our code.

Now that we have finished, we should remove these statements to keep our code clean.

Use VS Code’s global search feature to find and remove all instances of console.log() in your project:

Press Ctrl + Shift + F (Windows/Linux) or Cmd + Shift + F (Mac) to open the global search bar.
Search for console.log.
Click each result to navigate to the line of code and delete it.

Remember to save your changes.

Summary

In this step, we have:

Displayed the final results to the user
Styled the results using CSS with increasing levels of complexity
Removed all console.log() statements from our code using VS Code’s global search feature

Next steps

The final step of this assignment section is to write up your changes.

Displaying results

Introduction

Displaying the final results

Setting up the `displayResults` function

Adding a HTML `id`

Capturing the `results` HTML element with JavaScript

Display the user’s email address

Challenge: Style the results

Clear `console.log()` statements

Summary

Next steps

Displaying results

Introduction

Displaying the final results

Setting up the displayResults function

Adding a HTML id

Capturing the results HTML element with JavaScript

Display the user’s email address

Challenge: Style the results

Clear console.log() statements

Summary

Next steps

Setting up the `displayResults` function

Adding a HTML `id`

Capturing the `results` HTML element with JavaScript

Clear `console.log()` statements