CODEWITHSUNDEEP
javascripthtml
iEchoFrost
iEchoFrost

Reputation: 5

How do I change the heading separately?

I learn JavaScript and I am trying to change the <em>"h1<em/> element without affecting the <em>break<em/> element.

A button gives the "option" to change the city, which will present three prompts asking for first name, city, and temperature, resulting in <em>"Hi ${firstName}! It is currently ${temperature}° in ${location}"<em/>.

I want to change the emoji based on the temperature. When it's below 60°, the freezing emoji shows on top of the text, which would change .

My functions change the heading of the innerHTML. I have also attempted to assign separate classes, but my placements are where I am lost. I know how to change the heading as a whole but that wouldn't separate the Emoji and the text.

Here is my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Weather App</title>
    <style>
      h1,
      h2,
      h3 {
        text-align: center;
        font-family: Helvetica, Arial, sans-serif;
      }

      h1 {
        color: #1a64d6;
        font-size: 34px;
        line-height: 48px;
        margin: 0;
      }

      h2 {
        margin: 0;

        font-size: 34px;
        line-height: 48px;
        font-weight: 400;
      }

      ul {
        padding: 0;
      }

      li {
        list-style: none;
        text-align: center;
        padding: 10px 0;
        border-radius: 10px;
        transition: all 200ms ease-in-out;
        max-width: 400px;
        margin: 0 auto;
      }

      li:hover {
        background: #fffbef;
      }

      p {
        font-size: 18px;
        opacity: 0.7;
        text-align: center;
        font-family: monospace;
      }

      button {
        display: block;
        margin: 20px auto;
        border: 1px solid #1a64d6;
        background: #1a64d6;
        color: #fff;
        font-size: 16px;
        line-height: 22px;
        padding: 16px 24px;
        border-radius: 30px;
        transition: all 200ms ease;
        box-shadow: rgba(37, 39, 89, 0.08) 0px 8px 8px 0;
        cursor: pointer;
      }

      button:hover {
        background: white;
        color: #1a64d6;
        border: 1px solid #1a64d6;
      }
    </style>
  </head>
  <body>
    <h1>
      <span class="emoji">🌤</span>
      <br />
      <span class="currentCityTemp">Currently 21° in Tokyo</span>
    </h1>
    <h2>13° / <strong>23°</strong></h2>
    <ul>
      <li>
        <h3>🌧Tomorrow</h3>
        <p>10° / <strong>22°</strong></p>
      </li>
      <li>
        <h3>🌥 Saturday</h3>
        <p>15° / <strong>17°</strong></p>
      </li>
      <li>
        <h3>☀️ Sunday</h3>
        <p>25° / <strong>28°</strong></p>
      </li>
    </ul>

    <button>Change city</button>
    <p>Coded by Matt Delac</p>
    <script>
      function heading(newHeading) {
        let h1A = document.querySelector(".emoji");
        h1A.innerHTML = changeCity;
        let h1B = document.querySelector(".currentCityTemp");
        h1B.innerHTML = changeCity;
      }
      function changeCity() {
        let firstName = prompt("What is your first name?");
        let location = prompt("What city do you live in?");
        let temperature = prompt("What is the current temperature?");
        return temperature >= 60;
      }
      function headingChange() {
        if (heading) {
          h1A("😎");
          h1B(
            "Hi ${firstName}! It is currently ${temperature}° in ${location}"
          );
        } else {
          h1A("🥶");
          h1B(
            "Hi ${firstName}! It is currently ${temperature}° in ${location}"
          );
        }
      }
      let changeCityButton = document.querySelector("button");
      changeCityButton.addEventListener("click", changeCity);
    </script>
  </body>
</html>

Upvotes: 0

Views: 79

Answers (3)

iEchoFrost
iEchoFrost

Reputation: 5

In conclusion, my initial goal was to utilize the Single Responsibility Principle, but I still have a ways to go.

I combined everything under function changeCity() as well as modified the h1 with div and span elements and updated the variables.

<h1>
      <div>🌤</div>
      <span>Currently 21° in Tokyo</span>
    </h1>

The updated result:

<script>
      function changeCity() {
        let div = document.querySelector("div");
        div.innerHTML = prompt;
        let span = document.querySelector("span");
        span.innerHTML = prompt;
        let firstName = prompt("What is your first name?");
        let location = prompt("What city do you live in?");
        let temperature = prompt("What is the current temperature?");
        if (temperature >= 60) {
          div.innerHTML = "😎";
          span.innerHTML =
            "Hi " +
            firstName +
            "! It is currently " +
            temperature +
            "° in " +
            location;
        } else {
          div.innerHTML = "🥶";
          span.innerHTML =
            "Hi " +
            firstName +
            "! It is currently " +
            temperature +
            "° in " +
            location;
        }
      }
      let changeCityButton = document.querySelector("button");
      changeCityButton.addEventListener("click", changeCity);
    </script>

My assignment result: Updated header

Upvotes: 0

Alexey Zelenin
Alexey Zelenin

Reputation: 730

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Weather App</title>
        <style>
          h1,
          h2,
          h3 {
            text-align: center;
            font-family: Helvetica, Arial, sans-serif;
          }

          h1 {
            color: #1a64d6;
            font-size: 34px;
            line-height: 48px;
            margin: 0;
          }

          h2 {
            margin: 0;

            font-size: 34px;
            line-height: 48px;
            font-weight: 400;
          }

          ul {
            padding: 0;
          }

          li {
            list-style: none;
            text-align: center;
            padding: 10px 0;
            border-radius: 10px;
            transition: all 200ms ease-in-out;
            max-width: 400px;
            margin: 0 auto;
          }

          li:hover {
            background: #fffbef;
          }

          p {
            font-size: 18px;
            opacity: 0.7;
            text-align: center;
            font-family: monospace;
          }

          button {
            display: block;
            margin: 20px auto;
            border: 1px solid #1a64d6;
            background: #1a64d6;
            color: #fff;
            font-size: 16px;
            line-height: 22px;
            padding: 16px 24px;
            border-radius: 30px;
            transition: all 200ms ease;
            box-shadow: rgba(37, 39, 89, 0.08) 0px 8px 8px 0;
            cursor: pointer;
          }

          button:hover {
            background: white;
            color: #1a64d6;
            border: 1px solid #1a64d6;
          }
        </style>
      </head>
      <body>
        <h1>
          <span class="emoji">🌤</span>
          <br />
          <span class="currentCityTemp">Currently 21° in Tokyo</span>
        </h1>
        <h2>13° / <strong>23°</strong></h2>
        <ul>
          <li>
            <h3>🌧Tomorrow</h3>
            <p>10° / <strong>22°</strong></p>
          </li>
          <li>
            <h3>🌥 Saturday</h3>
            <p>15° / <strong>17°</strong></p>
          </li>
          <li>
            <h3>☀️ Sunday</h3>
            <p>25° / <strong>28°</strong></p>
          </li>
        </ul>

        <button>Change city</button>
        <p>Coded by Matt Delac</p>
        <script>
          function heading(h1aText, h1bText) {
            let h1A = document.querySelector(".emoji");
            h1A.innerHTML = h1aText;
            let h1B = document.querySelector(".currentCityTemp");
            h1B.innerHTML = h1bText;
          }
          function changeCity() {
            let firstName = prompt("What is your first name?");
            let location = prompt("What city do you live in?");
            let temperature = prompt("What is the current temperature?");
            headingChange(firstName, temperature, location);
          }
          function headingChange(firstName, temperature, location) {
            if (temperature > 60) {
              heading("😎", `Hi ${firstName}! It is currently ${temperature}° in ${location}`);
            } else {
              heading("🥶", `Hi ${firstName}! It is currently ${temperature}° in ${location}`);
            }
          }
          let changeCityButton = document.querySelector("button");
          changeCityButton.addEventListener("click", changeCity);
        </script>
      </body>
    </html>

That's how I would rewrite it.

  1. As it was already mentioned, you should somehow send the variables from one function to another. That's what I did here headingChange(firstName, temperature, location);. We collected the values into variables, now we need the next function to use them.
  2. Function headingChange selects the right emoji and text and sends it to the next function, heading which puts the in the right place.
  3. If you want to use the ${variable} construction, you need to use "`" symbol to define the string, because else interpolation will not work.

Upvotes: 1

Ryan O&#39;D
Ryan O&#39;D

Reputation: 350

First of all, the following variables

let firstName = prompt("What is your first name?");
let location = prompt("What city do you live in?");
let temperature = prompt("What is the current temperature?");

Aren't accessible outside of the function in which you define them. You are only returning a boolean from that function. The result of...

return temperature >= 60;

And, you're never calling the headingChange() function. If you did, you would see an error as it doesn't have access to those variables.

The same issue exists with the h1A and the h1B variables. So, I would start by addressing those issues.

Help understanding scope in Javascript

Upvotes: 1

Related Questions