using the following
<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  
  <meta charset="utf-8">
  <title>Album Creator</title>
  
   <!-- Link to Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

  <link rel="stylesheet" type="text/css" href="css/cover.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <script defer src="js/main.js"></script>
  <script defer src="js/value-generator.js"></script>
  <!-- Link your JS File below here via a script tag -->

</head>
  
<body class="text-white bg-light">
  <header data-bs-theme="dark">
    <div class="collapse text-bg-dark" id="navbarHeader">
      <div class="container">
        <div class="row">
          <div class="col-sm-8 col-md-7 py-4">
            <h4>About</h4>
            <p class="text-body-secondary">Our app to learn javascript.</p>
          </div>
          <div class="col-sm-4 offset-md-1 py-4">
            <h4>Contact</h4>
            <ul class="list-unstyled">
              <li><a href="https://en.wikipedia.org/wiki/English_Carrier_pigeon" class="text-white">We only use Carrier Pigeon</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="navbar navbar-dark bg-dark shadow-sm">
      <div class="container">
        <a href="#" class="navbar-brand d-flex align-items-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-braces-asterisk" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M1.114 8.063V7.9c1.005-.102 1.497-.615 1.497-1.6V4.503c0-1.094.39-1.538 1.354-1.538h.273V2h-.376C2.25 2 1.49 2.759 1.49 4.352v1.524c0 1.094-.376 1.456-1.49 1.456v1.299c1.114 0 1.49.362 1.49 1.456v1.524c0 1.593.759 2.352 2.372 2.352h.376v-.964h-.273c-.964 0-1.354-.444-1.354-1.538V9.663c0-.984-.492-1.497-1.497-1.6ZM14.886 7.9v.164c-1.005.103-1.497.616-1.497 1.6v1.798c0 1.094-.39 1.538-1.354 1.538h-.273v.964h.376c1.613 0 2.372-.759 2.372-2.352v-1.524c0-1.094.376-1.456 1.49-1.456v-1.3c-1.114 0-1.49-.362-1.49-1.456V4.352C14.51 2.759 13.75 2 12.138 2h-.376v.964h.273c.964 0 1.354.444 1.354 1.538V6.3c0 .984.492 1.497 1.497 1.6ZM7.5 11.5V9.207l-1.621 1.621-.707-.707L6.792 8.5H4.5v-1h2.293L5.172 5.879l.707-.707L7.5 6.792V4.5h1v2.293l1.621-1.621.707.707L9.208 7.5H11.5v1H9.207l1.621 1.621-.707.707L8.5 9.208V11.5h-1Z"/>
          </svg>
          <strong class="px-1">Introduction to JavaScript</strong>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </div>
  </header>
    <div class="px-3 cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
      <main class="">
        <h1 id="app-title" class="title text-dark">Multiplying Calculator</h1>
        <p class="lead text-dark">
          What is the result of the following calculation?
        </p>
        <p class="lead text-dark">
          <span id="first-value"></span> x <span id="second-value"></span>
        </p>
        
        <p class="lead text-dark">
          Result = <span id="result"></span>
        </p>
      </main>
    </div>
  </main>
</div>
  

</body>

</html>
// do not change this file.

function randomValue(selector) {
  let value = Math.floor(Math.random() * 10);
  let element = document.querySelector(selector);
  element.innerText = value;
}

function generateRandomValues() {
  randomValue("#first-value");
  randomValue("#second-value");
}

generateRandomValues();
/* our custom CSS file*/ 
.card-img-top {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}

.cover-container {
  max-width: 42em;
}


/*
 * Header
 */

.nav-masthead .nav-link {
  color: rgba(255, 255, 255, .5);
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}
Functions are the building blocks of almost everything we will do in the course.
At their core functions are collections of statements that allow us to break down more significant 
problems into smaller ones and will enable us to reuse code.
In this exercise, we will use a combination of functions that we create and JavaScript built-in functions to 
create our “Multiplying Calculator,” which will take two values, multiply them and update the dom with 
our result.
Exercise Step 1 – Create the “getElementValue” function.
1. Link your JavaScript file in your HTML, and print a console.log that prints out “javascript 
calculator linked.”
2. Create a function named “getElementValue” that will take one parameter named “selector.”
3. The function should return the innerText of the element selected (using the “selector” 
parameter)
a. If you test your element it should look like the output of the following picture. (Note the 
console.)
4. Once you have completed this, you can move on to the next step.
Exercise Step 2 – Create a “multiply” function
1. Create a function named “multiply” that will take two parameters: “firstValue” and 
“secondValue”.
a. Note when you call this function, you’ll need to pass in numbers, not strings.
2. The function will return both numbers multiplied together. If you’re confused about how to do 
this and want some reference https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Operators/Multiplication. 
a. Testing your function should look like this. (Note the console)
3. Once you have completed this, you can move on to the next step.
Exercise Step 3 – Updating the Result in the Dom
1. Create a function named “updateResult” that doesn’t take any parameters.
2. The first two things we want to do is get both number values that you see in the dom.
a. Use the function “getElementValue” to get the values
3. Since these values from the dom are string values, we will use the built-in function “parseInt” to 
convert the string into a number. For reference (https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_Objects/parseInt)
4. After we convert both input values to numbers, call the “multiply” with the values from step 3 
as the arguments to the function (you should pass two arguments).
a. Store the result of the function in a variable named “result.”
5. Select the element with the id of “result” and update the innerText to the new value.
6. Call the “updateResult” function so that the result is updated every time you reload the page.