kandi background
Explore Kits

freeCodeCamp | freeCodeCamp | Learning library

 by   freeCodeCamp JavaScript Version: Current License: BSD-3-Clause

 by   freeCodeCamp JavaScript Version: Current License: BSD-3-Clause

Download this library from

kandi X-RAY | freeCodeCamp Summary

freeCodeCamp is a JavaScript library typically used in Institutions, Learning, Education, Tutorial, Learning, React, Nodejs applications. freeCodeCamp has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.
freeCodeCamp.org is a friendly community where you can learn to code for free. It is run by a donor-supported 501(c)(3) nonprofit to help millions of busy adults transition into tech. Our community has already helped more than 10,000 people get their first developer job. Our full-stack web development and machine learning curriculum is completely free and self-paced. We have thousands of interactive coding challenges to help you expand your skills.
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • freeCodeCamp has a medium active ecosystem.
  • It has 344419 star(s) with 28503 fork(s). There are 8454 watchers for this library.
  • It had no major release in the last 12 months.
  • There are 121 open issues and 15785 have been closed. On average issues are closed in 44 days. There are 27 open pull requests and 0 closed requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of freeCodeCamp is current.
freeCodeCamp Support
Best in #Learning
Average in #Learning
freeCodeCamp Support
Best in #Learning
Average in #Learning

quality kandi Quality

  • freeCodeCamp has 0 bugs and 0 code smells.
freeCodeCamp Quality
Best in #Learning
Average in #Learning
freeCodeCamp Quality
Best in #Learning
Average in #Learning

securitySecurity

  • freeCodeCamp has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • freeCodeCamp code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.
freeCodeCamp Security
Best in #Learning
Average in #Learning
freeCodeCamp Security
Best in #Learning
Average in #Learning

license License

  • freeCodeCamp is licensed under the BSD-3-Clause License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
freeCodeCamp License
Best in #Learning
Average in #Learning
freeCodeCamp License
Best in #Learning
Average in #Learning

buildReuse

  • freeCodeCamp releases are not available. You will need to build from source code and install.
  • It has 5473 lines of code, 0 functions and 733 files.
  • It has low code complexity. Code complexity directly impacts maintainability of the code.
freeCodeCamp Reuse
Best in #Learning
Average in #Learning
freeCodeCamp Reuse
Best in #Learning
Average in #Learning
Top functions reviewed by kandi - BETA

kandi has reviewed freeCodeCamp and discovered the below as its top functions. This is intended to give you an instant insight into freeCodeCamp implemented functionality, and help decide if they suit your requirements.

  • Return a certificate that can be used to sign the user .
    • Generates a challenge creator
      • Called when challenge completes successfully completes .
        • Create a new Submission
          • Get a certificate .
            • Creates a new stripe payment .
              • Generates a challenge update .
                • Middleware for creating a new auth token .
                  • Loads codes from the store .
                    • Creates a new read session user .

                      Get all kandi verified functions for this library.

                      Get all kandi verified functions for this library.

                      freeCodeCamp Key Features

                      freeCodeCamp.org's open-source codebase and curriculum. Learn to code for free.

                      Even though they are logically the same, why am I getting different outputs?

                      copy iconCopydownload iconDownload
                      for (/*...*/) {
                          if (a) {
                              if (b) {
                                  return X;
                              } else {
                                  return Y;
                              }
                          }
                      }
                      
                      for (/*...*/) {
                          if (a && b) {
                              return X;
                          } else {
                              return Y;
                          }
                      }
                      
                      for (/*...*/) {
                          if (a && b) {
                              return X;
                          } else if (a) { // <===
                              return Y;
                          }
                      }
                      
                      for (/*...*/) {
                          if (a) {
                              if (b) {
                                  return X;
                              } else {
                                  return Y;
                              }
                          }
                      }
                      
                      for (/*...*/) {
                          if (a && b) {
                              return X;
                          } else {
                              return Y;
                          }
                      }
                      
                      for (/*...*/) {
                          if (a && b) {
                              return X;
                          } else if (a) { // <===
                              return Y;
                          }
                      }
                      
                      for (/*...*/) {
                          if (a) {
                              if (b) {
                                  return X;
                              } else {
                                  return Y;
                              }
                          }
                      }
                      
                      for (/*...*/) {
                          if (a && b) {
                              return X;
                          } else {
                              return Y;
                          }
                      }
                      
                      for (/*...*/) {
                          if (a && b) {
                              return X;
                          } else if (a) { // <===
                              return Y;
                          }
                      }
                      

                      Dynamic programming code works in javascript but not in python

                      copy iconCopydownload iconDownload
                      target = 5; memo = {5: [5]}
                      target = 10; memo = {5: [5, 5], 10: [10]}
                      target = 15; memo = {5: [5, 5, 10], 10: [10, 5], 15: [10, 5]}
                      target = 20; memo = {5: [5, 5, 10], 10: [10, 5, 5, 10], 15: [10, 5, 5, 10], 20: [10, 5, 5, 10]}
                      
                      import copy
                      def bestsum(targetsum, arr, memo=None):
                          if memo is None:
                              memo = {}
                          if targetsum in memo: return copy.deepcopy(memo[targetsum])
                          if targetsum==0: return []
                          elif targetsum < 0: return None
                          shortest = None 
                          for i in arr:
                              remainder = targetsum-i
                              seq = bestsum(remainder, arr, memo)
                              if seq!=None:
                                  seq.append(i)
                                  if (shortest==None or len(seq)<len(shortest)):
                                      shortest = seq
                          memo[targetsum] = copy.deepcopy(shortest)
                          return shortest
                      
                      print(bestsum(7, [2, 4, 3]))
                      print(bestsum(20, [5, 10]))
                      
                      [3, 4]
                      [10, 10]
                      
                      newlist = oldlist.copy()
                      
                      import copy
                      def bestsum(targetsum, arr, memo=None):
                          if memo is None:
                              memo = {}
                          if targetsum in memo: return copy.deepcopy(memo[targetsum])
                          if targetsum==0: return []
                          elif targetsum < 0: return None
                          shortest = None 
                          for i in arr:
                              remainder = targetsum-i
                              seq = bestsum(remainder, arr, memo)
                              if seq!=None:
                                  seq.append(i)
                                  if (shortest==None or len(seq)<len(shortest)):
                                      shortest = seq
                          memo[targetsum] = copy.deepcopy(shortest)
                          return shortest
                      
                      print(bestsum(7, [2, 4, 3]))
                      print(bestsum(20, [5, 10]))
                      
                      [3, 4]
                      [10, 10]
                      
                      newlist = oldlist.copy()
                      
                      import copy
                      def bestsum(targetsum, arr, memo=None):
                          if memo is None:
                              memo = {}
                          if targetsum in memo: return copy.deepcopy(memo[targetsum])
                          if targetsum==0: return []
                          elif targetsum < 0: return None
                          shortest = None 
                          for i in arr:
                              remainder = targetsum-i
                              seq = bestsum(remainder, arr, memo)
                              if seq!=None:
                                  seq.append(i)
                                  if (shortest==None or len(seq)<len(shortest)):
                                      shortest = seq
                          memo[targetsum] = copy.deepcopy(shortest)
                          return shortest
                      
                      print(bestsum(7, [2, 4, 3]))
                      print(bestsum(20, [5, 10]))
                      
                      [3, 4]
                      [10, 10]
                      
                      newlist = oldlist.copy()
                      

                      Fixing navbar using fixed position or sticky position

                      copy iconCopydownload iconDownload
                      * {
                        box-sizing: border-box;
                      }
                      
                      body {
                        font-family: "Roboto", sans-serif;
                        min-height: 100vh;
                        background-color: #eee;
                        color: black;
                      }
                      
                      .wrapper {
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                      }
                      /* lines I added*/
                      header {
                        position: sticky;
                        top: 0;
                        z-index: 99;
                        background: #eee;
                      }
                      nav {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-around;
                        align-items: center;
                        font-weight: 900;
                        font-size: 1em;
                        padding: 20px 10px;
                        flex-wrap: wrap;
                        border-bottom: 1px solid grey;
                      }
                      
                      ul {
                        flex-grow: 1;
                        max-width: 30%;
                        display: flex;
                        justify-content: space-around;
                        text-decoration: none;
                      }
                      
                      img {
                        display: flex;
                        width: 40vw;
                      }
                      
                      ul li {
                        display: inline;
                        text-decoration: none;
                        display: flex;
                      }
                      
                      .nav-links a {
                        text-decoration: none;
                        color: black;
                      }
                      
                      .hero {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                      }
                      
                      h1 {
                        font-size: 2em;
                        font-weight: 700;
                        padding: 20px;
                      }
                      
                      h2 {
                        font-size: 1.4em;
                        font-weight: 700;
                      }
                      
                      p {
                        font-size: 0.8em;
                        letter-spacing: 0.05em;
                      }
                      
                      input[type="email"] {
                        padding: 5px 10px;
                        margin: 10px 0px;
                        border: solid 1px black;
                        width: 350px;
                      }
                      
                      form {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      }
                      
                      input[type="submit"] {
                        margin: 10px auto;
                        padding: 5px 15px;
                        background-color: #f1c40f;
                        font-weight: 900;
                        border: #eee solid 0px;
                      }
                      
                      .bus-info {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                      }
                      
                      .features {
                        display: flex;
                        align-items: center;
                        justify-content: space-evenly;
                      }
                      
                      .desc {
                        weight: 125px;
                        width: 80vw;
                        padding: 5px;
                      }
                      
                      .icon {
                        color: #c5a00df8;
                        font-size: 2em;
                      }
                      
                      .feat-title {
                      }
                      
                      .features {
                        padding-top: 20px;
                        border: 40px 0px;
                      }
                      
                      .video {
                        margin: auto;
                        padding: 30px 0px;
                      }
                      
                      .tromb-types {
                        display: flex;
                        justify-content: center;
                      }
                      
                      .type {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 20px 50px;
                        margin: 20px 10px;
                        border: solid black 1px;
                      }
                      
                      .title-tromb {
                        font-weight: 700;
                        font-size: 0.8em;
                      }
                      
                      .price {
                        padding: 20px 0;
                      }
                      
                      .tromb-desc {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      }
                      
                      .text {
                        padding-bottom: 10px;
                      }
                      
                      footer {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        margin-bottom: 20px;
                        margin-right: 20px;
                      }
                      
                      .footer-links {
                        display: flex;
                        justify-content: flex-end;
                        align-items: flex-end;
                        max-width: 100%;
                      }
                      
                      .footer-links .footer-link {
                        text-decoration: none;
                        padding: 0px 10px;
                        color: black;
                      }
                      
                      .copyright {
                        max-width: 100%;
                        margin-top: 5px;
                      }
                      
                      @media (max-width: 700px) {
                        header {
                          font-size: 1em;
                        }
                      
                        nav {
                          display: flex;
                          flex-direction: column;
                        }
                      
                        nav > ul {
                          display: flex;
                          flex-wrap: wrap;
                        }
                      
                        .tromb-types {
                          flex-direction: column;
                          justify-content: center;
                          align-items: center;
                        }
                      
                        .type {
                          width: 300px;
                        }
                      
                        .price {
                          padding: 5px 0;
                        }
                      }
                      <div class="wrapper">
                        <header>
                          <nav class="Navbar">
                            <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
                            <ul class="nav-links">
                              <li><a href="#" class="link">Features</a></li>
                              <li><a href="#" class="link">How It Works</a></li>
                              <li><a href="#" class="link">Pricing</a></li>
                            </ul>
                          </nav>
                        </header>
                        <section class="hero">
                          <h1>Handcrafted, home-made masterpieces</h1>
                          <form class="email-form">
                            <div class="email-form">
                              <label for="email"></label>
                              <input type="email" name="email" id="email" placeholder="Enter your email address" required>
                            </div>
                            <div class="button-center">
                              <input class="sub-button" type="submit" value="GET STARTED">
                            </div>
                          </form>
                        </section>
                      
                        <section class="bus-info">
                          <div class="features">
                            <div class="icon"><i class="fas fa-fire"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Premium materials</h2>
                              <p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
                            </div>
                          </div>
                          <div class="features">
                            <div class="icon"><i class="fas fa-truck"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Fast Shipping</h2>
                              <p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
                                not satisfied.</p>
                            </div>
                          </div>
                          <div class="features">
                            <div class="icon"><i class="fa-solid fa-battery-full"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Quality Assurance</h2>
                              <p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
                                instrument.</p>
                            </div>
                          </div>
                        </section>
                      
                        <section class="video">
                          <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
                          </iframe>
                        </section>
                      
                        <section class="tromb-types">
                          <div class="type">
                            <h3 class="title-tromb">TENOR TROMBONE</h3>
                            <h2 class="price">$600</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                      
                          <div class="type">
                            <h3 class="title-tromb">BASS TROMBONE</h3>
                            <h2 class="price">$900</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                      
                          <div class="type">
                            <h3 class="title-tromb">VALVE TROMBONE</h3>
                            <h2 class="price">$1200</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                        </section>
                      
                        <footer>
                          <ul class="footer-links">
                            <li><a href="#" class="footer-link">Privacy</a></li>
                            <li><a href="#" class="footer-link">Terms</a></li>
                            <li><a href="#" class="footer-link">Contacts</a></li>
                          </ul>
                          <p class="copyright">Copyright 2016, Original Trombones</p>
                      
                        </footer>
                      </div>
                      * {
                        box-sizing: border-box;
                      }
                      
                      body {
                        font-family: "Roboto", sans-serif;
                        min-height: 100vh;
                        background-color: #eee;
                        color: black;
                        /* line I added*/
                        padding-top: 10rem;
                      }
                      
                      .wrapper {
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                      }
                      /* lines I added*/
                      header {
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        z-index: 99;
                        background: #eee;
                      }
                      nav {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-around;
                        align-items: center;
                        font-weight: 900;
                        font-size: 1em;
                        padding: 20px 10px;
                        flex-wrap: wrap;
                        border-bottom: 1px solid grey;
                      }
                      
                      ul {
                        flex-grow: 1;
                        max-width: 30%;
                        display: flex;
                        justify-content: space-around;
                        text-decoration: none;
                      }
                      
                      img {
                        display: flex;
                        width: 40vw;
                      }
                      
                      ul li {
                        display: inline;
                        text-decoration: none;
                        display: flex;
                      }
                      
                      .nav-links a {
                        text-decoration: none;
                        color: black;
                      }
                      
                      .hero {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                      }
                      
                      h1 {
                        font-size: 2em;
                        font-weight: 700;
                        padding: 20px;
                      }
                      
                      h2 {
                        font-size: 1.4em;
                        font-weight: 700;
                      }
                      
                      p {
                        font-size: 0.8em;
                        letter-spacing: 0.05em;
                      }
                      
                      input[type="email"] {
                        padding: 5px 10px;
                        margin: 10px 0px;
                        border: solid 1px black;
                        width: 350px;
                      }
                      
                      form {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      }
                      
                      input[type="submit"] {
                        margin: 10px auto;
                        padding: 5px 15px;
                        background-color: #f1c40f;
                        font-weight: 900;
                        border: #eee solid 0px;
                      }
                      
                      .bus-info {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                      }
                      
                      .features {
                        display: flex;
                        align-items: center;
                        justify-content: space-evenly;
                      }
                      
                      .desc {
                        weight: 125px;
                        width: 80vw;
                        padding: 5px;
                      }
                      
                      .icon {
                        color: #c5a00df8;
                        font-size: 2em;
                      }
                      
                      .feat-title {
                      }
                      
                      .features {
                        padding-top: 20px;
                        border: 40px 0px;
                      }
                      
                      .video {
                        margin: auto;
                        padding: 30px 0px;
                      }
                      
                      .tromb-types {
                        display: flex;
                        justify-content: center;
                      }
                      
                      .type {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 20px 50px;
                        margin: 20px 10px;
                        border: solid black 1px;
                      }
                      
                      .title-tromb {
                        font-weight: 700;
                        font-size: 0.8em;
                      }
                      
                      .price {
                        padding: 20px 0;
                      }
                      
                      .tromb-desc {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      }
                      
                      .text {
                        padding-bottom: 10px;
                      }
                      
                      footer {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        margin-bottom: 20px;
                        margin-right: 20px;
                      }
                      
                      .footer-links {
                        display: flex;
                        justify-content: flex-end;
                        align-items: flex-end;
                        max-width: 100%;
                      }
                      
                      .footer-links .footer-link {
                        text-decoration: none;
                        padding: 0px 10px;
                        color: black;
                      }
                      
                      .copyright {
                        max-width: 100%;
                        margin-top: 5px;
                      }
                      
                      @media (max-width: 700px) {
                        header {
                          font-size: 1em;
                        }
                      
                        nav {
                          display: flex;
                          flex-direction: column;
                        }
                      
                        nav > ul {
                          display: flex;
                          flex-wrap: wrap;
                        }
                      
                        .tromb-types {
                          flex-direction: column;
                          justify-content: center;
                          align-items: center;
                        }
                      
                        .type {
                          width: 300px;
                        }
                      
                        .price {
                          padding: 5px 0;
                        }
                      }
                      <div class="wrapper">
                        <header>
                          <nav class="Navbar">
                            <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
                            <ul class="nav-links">
                              <li><a href="#" class="link">Features</a></li>
                              <li><a href="#" class="link">How It Works</a></li>
                              <li><a href="#" class="link">Pricing</a></li>
                            </ul>
                          </nav>
                        </header>
                        <section class="hero">
                          <h1>Handcrafted, home-made masterpieces</h1>
                          <form class="email-form">
                            <div class="email-form">
                              <label for="email"></label>
                              <input type="email" name="email" id="email" placeholder="Enter your email address" required>
                            </div>
                            <div class="button-center">
                              <input class="sub-button" type="submit" value="GET STARTED">
                            </div>
                          </form>
                        </section>
                      
                        <section class="bus-info">
                          <div class="features">
                            <div class="icon"><i class="fas fa-fire"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Premium materials</h2>
                              <p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
                            </div>
                          </div>
                          <div class="features">
                            <div class="icon"><i class="fas fa-truck"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Fast Shipping</h2>
                              <p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
                                not satisfied.</p>
                            </div>
                          </div>
                          <div class="features">
                            <div class="icon"><i class="fa-solid fa-battery-full"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Quality Assurance</h2>
                              <p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
                                instrument.</p>
                            </div>
                          </div>
                        </section>
                      
                        <section class="video">
                          <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
                          </iframe>
                        </section>
                      
                        <section class="tromb-types">
                          <div class="type">
                            <h3 class="title-tromb">TENOR TROMBONE</h3>
                            <h2 class="price">$600</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                      
                          <div class="type">
                            <h3 class="title-tromb">BASS TROMBONE</h3>
                            <h2 class="price">$900</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                      
                          <div class="type">
                            <h3 class="title-tromb">VALVE TROMBONE</h3>
                            <h2 class="price">$1200</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                        </section>
                      
                        <footer>
                          <ul class="footer-links">
                            <li><a href="#" class="footer-link">Privacy</a></li>
                            <li><a href="#" class="footer-link">Terms</a></li>
                            <li><a href="#" class="footer-link">Contacts</a></li>
                          </ul>
                          <p class="copyright">Copyright 2016, Original Trombones</p>
                      
                        </footer>
                      </div>
                      * {
                        box-sizing: border-box;
                      }
                      
                      body {
                        font-family: "Roboto", sans-serif;
                        min-height: 100vh;
                        background-color: #eee;
                        color: black;
                      }
                      
                      .wrapper {
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                      }
                      /* lines I added*/
                      header {
                        position: sticky;
                        top: 0;
                        z-index: 99;
                        background: #eee;
                      }
                      nav {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-around;
                        align-items: center;
                        font-weight: 900;
                        font-size: 1em;
                        padding: 20px 10px;
                        flex-wrap: wrap;
                        border-bottom: 1px solid grey;
                      }
                      
                      ul {
                        flex-grow: 1;
                        max-width: 30%;
                        display: flex;
                        justify-content: space-around;
                        text-decoration: none;
                      }
                      
                      img {
                        display: flex;
                        width: 40vw;
                      }
                      
                      ul li {
                        display: inline;
                        text-decoration: none;
                        display: flex;
                      }
                      
                      .nav-links a {
                        text-decoration: none;
                        color: black;
                      }
                      
                      .hero {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                      }
                      
                      h1 {
                        font-size: 2em;
                        font-weight: 700;
                        padding: 20px;
                      }
                      
                      h2 {
                        font-size: 1.4em;
                        font-weight: 700;
                      }
                      
                      p {
                        font-size: 0.8em;
                        letter-spacing: 0.05em;
                      }
                      
                      input[type="email"] {
                        padding: 5px 10px;
                        margin: 10px 0px;
                        border: solid 1px black;
                        width: 350px;
                      }
                      
                      form {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      }
                      
                      input[type="submit"] {
                        margin: 10px auto;
                        padding: 5px 15px;
                        background-color: #f1c40f;
                        font-weight: 900;
                        border: #eee solid 0px;
                      }
                      
                      .bus-info {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                      }
                      
                      .features {
                        display: flex;
                        align-items: center;
                        justify-content: space-evenly;
                      }
                      
                      .desc {
                        weight: 125px;
                        width: 80vw;
                        padding: 5px;
                      }
                      
                      .icon {
                        color: #c5a00df8;
                        font-size: 2em;
                      }
                      
                      .feat-title {
                      }
                      
                      .features {
                        padding-top: 20px;
                        border: 40px 0px;
                      }
                      
                      .video {
                        margin: auto;
                        padding: 30px 0px;
                      }
                      
                      .tromb-types {
                        display: flex;
                        justify-content: center;
                      }
                      
                      .type {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 20px 50px;
                        margin: 20px 10px;
                        border: solid black 1px;
                      }
                      
                      .title-tromb {
                        font-weight: 700;
                        font-size: 0.8em;
                      }
                      
                      .price {
                        padding: 20px 0;
                      }
                      
                      .tromb-desc {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      }
                      
                      .text {
                        padding-bottom: 10px;
                      }
                      
                      footer {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        margin-bottom: 20px;
                        margin-right: 20px;
                      }
                      
                      .footer-links {
                        display: flex;
                        justify-content: flex-end;
                        align-items: flex-end;
                        max-width: 100%;
                      }
                      
                      .footer-links .footer-link {
                        text-decoration: none;
                        padding: 0px 10px;
                        color: black;
                      }
                      
                      .copyright {
                        max-width: 100%;
                        margin-top: 5px;
                      }
                      
                      @media (max-width: 700px) {
                        header {
                          font-size: 1em;
                        }
                      
                        nav {
                          display: flex;
                          flex-direction: column;
                        }
                      
                        nav > ul {
                          display: flex;
                          flex-wrap: wrap;
                        }
                      
                        .tromb-types {
                          flex-direction: column;
                          justify-content: center;
                          align-items: center;
                        }
                      
                        .type {
                          width: 300px;
                        }
                      
                        .price {
                          padding: 5px 0;
                        }
                      }
                      <div class="wrapper">
                        <header>
                          <nav class="Navbar">
                            <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
                            <ul class="nav-links">
                              <li><a href="#" class="link">Features</a></li>
                              <li><a href="#" class="link">How It Works</a></li>
                              <li><a href="#" class="link">Pricing</a></li>
                            </ul>
                          </nav>
                        </header>
                        <section class="hero">
                          <h1>Handcrafted, home-made masterpieces</h1>
                          <form class="email-form">
                            <div class="email-form">
                              <label for="email"></label>
                              <input type="email" name="email" id="email" placeholder="Enter your email address" required>
                            </div>
                            <div class="button-center">
                              <input class="sub-button" type="submit" value="GET STARTED">
                            </div>
                          </form>
                        </section>
                      
                        <section class="bus-info">
                          <div class="features">
                            <div class="icon"><i class="fas fa-fire"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Premium materials</h2>
                              <p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
                            </div>
                          </div>
                          <div class="features">
                            <div class="icon"><i class="fas fa-truck"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Fast Shipping</h2>
                              <p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
                                not satisfied.</p>
                            </div>
                          </div>
                          <div class="features">
                            <div class="icon"><i class="fa-solid fa-battery-full"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Quality Assurance</h2>
                              <p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
                                instrument.</p>
                            </div>
                          </div>
                        </section>
                      
                        <section class="video">
                          <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
                          </iframe>
                        </section>
                      
                        <section class="tromb-types">
                          <div class="type">
                            <h3 class="title-tromb">TENOR TROMBONE</h3>
                            <h2 class="price">$600</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                      
                          <div class="type">
                            <h3 class="title-tromb">BASS TROMBONE</h3>
                            <h2 class="price">$900</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                      
                          <div class="type">
                            <h3 class="title-tromb">VALVE TROMBONE</h3>
                            <h2 class="price">$1200</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                        </section>
                      
                        <footer>
                          <ul class="footer-links">
                            <li><a href="#" class="footer-link">Privacy</a></li>
                            <li><a href="#" class="footer-link">Terms</a></li>
                            <li><a href="#" class="footer-link">Contacts</a></li>
                          </ul>
                          <p class="copyright">Copyright 2016, Original Trombones</p>
                      
                        </footer>
                      </div>
                      * {
                        box-sizing: border-box;
                      }
                      
                      body {
                        font-family: "Roboto", sans-serif;
                        min-height: 100vh;
                        background-color: #eee;
                        color: black;
                        /* line I added*/
                        padding-top: 10rem;
                      }
                      
                      .wrapper {
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                      }
                      /* lines I added*/
                      header {
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        z-index: 99;
                        background: #eee;
                      }
                      nav {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-around;
                        align-items: center;
                        font-weight: 900;
                        font-size: 1em;
                        padding: 20px 10px;
                        flex-wrap: wrap;
                        border-bottom: 1px solid grey;
                      }
                      
                      ul {
                        flex-grow: 1;
                        max-width: 30%;
                        display: flex;
                        justify-content: space-around;
                        text-decoration: none;
                      }
                      
                      img {
                        display: flex;
                        width: 40vw;
                      }
                      
                      ul li {
                        display: inline;
                        text-decoration: none;
                        display: flex;
                      }
                      
                      .nav-links a {
                        text-decoration: none;
                        color: black;
                      }
                      
                      .hero {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                      }
                      
                      h1 {
                        font-size: 2em;
                        font-weight: 700;
                        padding: 20px;
                      }
                      
                      h2 {
                        font-size: 1.4em;
                        font-weight: 700;
                      }
                      
                      p {
                        font-size: 0.8em;
                        letter-spacing: 0.05em;
                      }
                      
                      input[type="email"] {
                        padding: 5px 10px;
                        margin: 10px 0px;
                        border: solid 1px black;
                        width: 350px;
                      }
                      
                      form {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      }
                      
                      input[type="submit"] {
                        margin: 10px auto;
                        padding: 5px 15px;
                        background-color: #f1c40f;
                        font-weight: 900;
                        border: #eee solid 0px;
                      }
                      
                      .bus-info {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                      }
                      
                      .features {
                        display: flex;
                        align-items: center;
                        justify-content: space-evenly;
                      }
                      
                      .desc {
                        weight: 125px;
                        width: 80vw;
                        padding: 5px;
                      }
                      
                      .icon {
                        color: #c5a00df8;
                        font-size: 2em;
                      }
                      
                      .feat-title {
                      }
                      
                      .features {
                        padding-top: 20px;
                        border: 40px 0px;
                      }
                      
                      .video {
                        margin: auto;
                        padding: 30px 0px;
                      }
                      
                      .tromb-types {
                        display: flex;
                        justify-content: center;
                      }
                      
                      .type {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 20px 50px;
                        margin: 20px 10px;
                        border: solid black 1px;
                      }
                      
                      .title-tromb {
                        font-weight: 700;
                        font-size: 0.8em;
                      }
                      
                      .price {
                        padding: 20px 0;
                      }
                      
                      .tromb-desc {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      }
                      
                      .text {
                        padding-bottom: 10px;
                      }
                      
                      footer {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        margin-bottom: 20px;
                        margin-right: 20px;
                      }
                      
                      .footer-links {
                        display: flex;
                        justify-content: flex-end;
                        align-items: flex-end;
                        max-width: 100%;
                      }
                      
                      .footer-links .footer-link {
                        text-decoration: none;
                        padding: 0px 10px;
                        color: black;
                      }
                      
                      .copyright {
                        max-width: 100%;
                        margin-top: 5px;
                      }
                      
                      @media (max-width: 700px) {
                        header {
                          font-size: 1em;
                        }
                      
                        nav {
                          display: flex;
                          flex-direction: column;
                        }
                      
                        nav > ul {
                          display: flex;
                          flex-wrap: wrap;
                        }
                      
                        .tromb-types {
                          flex-direction: column;
                          justify-content: center;
                          align-items: center;
                        }
                      
                        .type {
                          width: 300px;
                        }
                      
                        .price {
                          padding: 5px 0;
                        }
                      }
                      <div class="wrapper">
                        <header>
                          <nav class="Navbar">
                            <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
                            <ul class="nav-links">
                              <li><a href="#" class="link">Features</a></li>
                              <li><a href="#" class="link">How It Works</a></li>
                              <li><a href="#" class="link">Pricing</a></li>
                            </ul>
                          </nav>
                        </header>
                        <section class="hero">
                          <h1>Handcrafted, home-made masterpieces</h1>
                          <form class="email-form">
                            <div class="email-form">
                              <label for="email"></label>
                              <input type="email" name="email" id="email" placeholder="Enter your email address" required>
                            </div>
                            <div class="button-center">
                              <input class="sub-button" type="submit" value="GET STARTED">
                            </div>
                          </form>
                        </section>
                      
                        <section class="bus-info">
                          <div class="features">
                            <div class="icon"><i class="fas fa-fire"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Premium materials</h2>
                              <p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
                            </div>
                          </div>
                          <div class="features">
                            <div class="icon"><i class="fas fa-truck"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Fast Shipping</h2>
                              <p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
                                not satisfied.</p>
                            </div>
                          </div>
                          <div class="features">
                            <div class="icon"><i class="fa-solid fa-battery-full"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Quality Assurance</h2>
                              <p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
                                instrument.</p>
                            </div>
                          </div>
                        </section>
                      
                        <section class="video">
                          <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
                          </iframe>
                        </section>
                      
                        <section class="tromb-types">
                          <div class="type">
                            <h3 class="title-tromb">TENOR TROMBONE</h3>
                            <h2 class="price">$600</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                      
                          <div class="type">
                            <h3 class="title-tromb">BASS TROMBONE</h3>
                            <h2 class="price">$900</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                      
                          <div class="type">
                            <h3 class="title-tromb">VALVE TROMBONE</h3>
                            <h2 class="price">$1200</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                        </section>
                      
                        <footer>
                          <ul class="footer-links">
                            <li><a href="#" class="footer-link">Privacy</a></li>
                            <li><a href="#" class="footer-link">Terms</a></li>
                            <li><a href="#" class="footer-link">Contacts</a></li>
                          </ul>
                          <p class="copyright">Copyright 2016, Original Trombones</p>
                      
                        </footer>
                      </div>
                      * {
                        box-sizing: border-box;
                      }
                      
                      body {
                        font-family: "Roboto", sans-serif;
                        min-height: 100vh;
                        background-color: #eee;
                        color: black;
                      }
                      
                      .wrapper {
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                      }
                      /* lines I added*/
                      header {
                        position: sticky;
                        top: 0;
                        z-index: 99;
                        background: #eee;
                      }
                      nav {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-around;
                        align-items: center;
                        font-weight: 900;
                        font-size: 1em;
                        padding: 20px 10px;
                        flex-wrap: wrap;
                        border-bottom: 1px solid grey;
                      }
                      
                      ul {
                        flex-grow: 1;
                        max-width: 30%;
                        display: flex;
                        justify-content: space-around;
                        text-decoration: none;
                      }
                      
                      img {
                        display: flex;
                        width: 40vw;
                      }
                      
                      ul li {
                        display: inline;
                        text-decoration: none;
                        display: flex;
                      }
                      
                      .nav-links a {
                        text-decoration: none;
                        color: black;
                      }
                      
                      .hero {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                      }
                      
                      h1 {
                        font-size: 2em;
                        font-weight: 700;
                        padding: 20px;
                      }
                      
                      h2 {
                        font-size: 1.4em;
                        font-weight: 700;
                      }
                      
                      p {
                        font-size: 0.8em;
                        letter-spacing: 0.05em;
                      }
                      
                      input[type="email"] {
                        padding: 5px 10px;
                        margin: 10px 0px;
                        border: solid 1px black;
                        width: 350px;
                      }
                      
                      form {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      }
                      
                      input[type="submit"] {
                        margin: 10px auto;
                        padding: 5px 15px;
                        background-color: #f1c40f;
                        font-weight: 900;
                        border: #eee solid 0px;
                      }
                      
                      .bus-info {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                      }
                      
                      .features {
                        display: flex;
                        align-items: center;
                        justify-content: space-evenly;
                      }
                      
                      .desc {
                        weight: 125px;
                        width: 80vw;
                        padding: 5px;
                      }
                      
                      .icon {
                        color: #c5a00df8;
                        font-size: 2em;
                      }
                      
                      .feat-title {
                      }
                      
                      .features {
                        padding-top: 20px;
                        border: 40px 0px;
                      }
                      
                      .video {
                        margin: auto;
                        padding: 30px 0px;
                      }
                      
                      .tromb-types {
                        display: flex;
                        justify-content: center;
                      }
                      
                      .type {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 20px 50px;
                        margin: 20px 10px;
                        border: solid black 1px;
                      }
                      
                      .title-tromb {
                        font-weight: 700;
                        font-size: 0.8em;
                      }
                      
                      .price {
                        padding: 20px 0;
                      }
                      
                      .tromb-desc {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      }
                      
                      .text {
                        padding-bottom: 10px;
                      }
                      
                      footer {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        margin-bottom: 20px;
                        margin-right: 20px;
                      }
                      
                      .footer-links {
                        display: flex;
                        justify-content: flex-end;
                        align-items: flex-end;
                        max-width: 100%;
                      }
                      
                      .footer-links .footer-link {
                        text-decoration: none;
                        padding: 0px 10px;
                        color: black;
                      }
                      
                      .copyright {
                        max-width: 100%;
                        margin-top: 5px;
                      }
                      
                      @media (max-width: 700px) {
                        header {
                          font-size: 1em;
                        }
                      
                        nav {
                          display: flex;
                          flex-direction: column;
                        }
                      
                        nav > ul {
                          display: flex;
                          flex-wrap: wrap;
                        }
                      
                        .tromb-types {
                          flex-direction: column;
                          justify-content: center;
                          align-items: center;
                        }
                      
                        .type {
                          width: 300px;
                        }
                      
                        .price {
                          padding: 5px 0;
                        }
                      }
                      <div class="wrapper">
                        <header>
                          <nav class="Navbar">
                            <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
                            <ul class="nav-links">
                              <li><a href="#" class="link">Features</a></li>
                              <li><a href="#" class="link">How It Works</a></li>
                              <li><a href="#" class="link">Pricing</a></li>
                            </ul>
                          </nav>
                        </header>
                        <section class="hero">
                          <h1>Handcrafted, home-made masterpieces</h1>
                          <form class="email-form">
                            <div class="email-form">
                              <label for="email"></label>
                              <input type="email" name="email" id="email" placeholder="Enter your email address" required>
                            </div>
                            <div class="button-center">
                              <input class="sub-button" type="submit" value="GET STARTED">
                            </div>
                          </form>
                        </section>
                      
                        <section class="bus-info">
                          <div class="features">
                            <div class="icon"><i class="fas fa-fire"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Premium materials</h2>
                              <p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
                            </div>
                          </div>
                          <div class="features">
                            <div class="icon"><i class="fas fa-truck"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Fast Shipping</h2>
                              <p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
                                not satisfied.</p>
                            </div>
                          </div>
                          <div class="features">
                            <div class="icon"><i class="fa-solid fa-battery-full"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Quality Assurance</h2>
                              <p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
                                instrument.</p>
                            </div>
                          </div>
                        </section>
                      
                        <section class="video">
                          <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
                          </iframe>
                        </section>
                      
                        <section class="tromb-types">
                          <div class="type">
                            <h3 class="title-tromb">TENOR TROMBONE</h3>
                            <h2 class="price">$600</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                      
                          <div class="type">
                            <h3 class="title-tromb">BASS TROMBONE</h3>
                            <h2 class="price">$900</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                      
                          <div class="type">
                            <h3 class="title-tromb">VALVE TROMBONE</h3>
                            <h2 class="price">$1200</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                        </section>
                      
                        <footer>
                          <ul class="footer-links">
                            <li><a href="#" class="footer-link">Privacy</a></li>
                            <li><a href="#" class="footer-link">Terms</a></li>
                            <li><a href="#" class="footer-link">Contacts</a></li>
                          </ul>
                          <p class="copyright">Copyright 2016, Original Trombones</p>
                      
                        </footer>
                      </div>
                      * {
                        box-sizing: border-box;
                      }
                      
                      body {
                        font-family: "Roboto", sans-serif;
                        min-height: 100vh;
                        background-color: #eee;
                        color: black;
                        /* line I added*/
                        padding-top: 10rem;
                      }
                      
                      .wrapper {
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                      }
                      /* lines I added*/
                      header {
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        z-index: 99;
                        background: #eee;
                      }
                      nav {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-around;
                        align-items: center;
                        font-weight: 900;
                        font-size: 1em;
                        padding: 20px 10px;
                        flex-wrap: wrap;
                        border-bottom: 1px solid grey;
                      }
                      
                      ul {
                        flex-grow: 1;
                        max-width: 30%;
                        display: flex;
                        justify-content: space-around;
                        text-decoration: none;
                      }
                      
                      img {
                        display: flex;
                        width: 40vw;
                      }
                      
                      ul li {
                        display: inline;
                        text-decoration: none;
                        display: flex;
                      }
                      
                      .nav-links a {
                        text-decoration: none;
                        color: black;
                      }
                      
                      .hero {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                      }
                      
                      h1 {
                        font-size: 2em;
                        font-weight: 700;
                        padding: 20px;
                      }
                      
                      h2 {
                        font-size: 1.4em;
                        font-weight: 700;
                      }
                      
                      p {
                        font-size: 0.8em;
                        letter-spacing: 0.05em;
                      }
                      
                      input[type="email"] {
                        padding: 5px 10px;
                        margin: 10px 0px;
                        border: solid 1px black;
                        width: 350px;
                      }
                      
                      form {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      }
                      
                      input[type="submit"] {
                        margin: 10px auto;
                        padding: 5px 15px;
                        background-color: #f1c40f;
                        font-weight: 900;
                        border: #eee solid 0px;
                      }
                      
                      .bus-info {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                      }
                      
                      .features {
                        display: flex;
                        align-items: center;
                        justify-content: space-evenly;
                      }
                      
                      .desc {
                        weight: 125px;
                        width: 80vw;
                        padding: 5px;
                      }
                      
                      .icon {
                        color: #c5a00df8;
                        font-size: 2em;
                      }
                      
                      .feat-title {
                      }
                      
                      .features {
                        padding-top: 20px;
                        border: 40px 0px;
                      }
                      
                      .video {
                        margin: auto;
                        padding: 30px 0px;
                      }
                      
                      .tromb-types {
                        display: flex;
                        justify-content: center;
                      }
                      
                      .type {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 20px 50px;
                        margin: 20px 10px;
                        border: solid black 1px;
                      }
                      
                      .title-tromb {
                        font-weight: 700;
                        font-size: 0.8em;
                      }
                      
                      .price {
                        padding: 20px 0;
                      }
                      
                      .tromb-desc {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      }
                      
                      .text {
                        padding-bottom: 10px;
                      }
                      
                      footer {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        margin-bottom: 20px;
                        margin-right: 20px;
                      }
                      
                      .footer-links {
                        display: flex;
                        justify-content: flex-end;
                        align-items: flex-end;
                        max-width: 100%;
                      }
                      
                      .footer-links .footer-link {
                        text-decoration: none;
                        padding: 0px 10px;
                        color: black;
                      }
                      
                      .copyright {
                        max-width: 100%;
                        margin-top: 5px;
                      }
                      
                      @media (max-width: 700px) {
                        header {
                          font-size: 1em;
                        }
                      
                        nav {
                          display: flex;
                          flex-direction: column;
                        }
                      
                        nav > ul {
                          display: flex;
                          flex-wrap: wrap;
                        }
                      
                        .tromb-types {
                          flex-direction: column;
                          justify-content: center;
                          align-items: center;
                        }
                      
                        .type {
                          width: 300px;
                        }
                      
                        .price {
                          padding: 5px 0;
                        }
                      }
                      <div class="wrapper">
                        <header>
                          <nav class="Navbar">
                            <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
                            <ul class="nav-links">
                              <li><a href="#" class="link">Features</a></li>
                              <li><a href="#" class="link">How It Works</a></li>
                              <li><a href="#" class="link">Pricing</a></li>
                            </ul>
                          </nav>
                        </header>
                        <section class="hero">
                          <h1>Handcrafted, home-made masterpieces</h1>
                          <form class="email-form">
                            <div class="email-form">
                              <label for="email"></label>
                              <input type="email" name="email" id="email" placeholder="Enter your email address" required>
                            </div>
                            <div class="button-center">
                              <input class="sub-button" type="submit" value="GET STARTED">
                            </div>
                          </form>
                        </section>
                      
                        <section class="bus-info">
                          <div class="features">
                            <div class="icon"><i class="fas fa-fire"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Premium materials</h2>
                              <p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
                            </div>
                          </div>
                          <div class="features">
                            <div class="icon"><i class="fas fa-truck"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Fast Shipping</h2>
                              <p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
                                not satisfied.</p>
                            </div>
                          </div>
                          <div class="features">
                            <div class="icon"><i class="fa-solid fa-battery-full"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Quality Assurance</h2>
                              <p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
                                instrument.</p>
                            </div>
                          </div>
                        </section>
                      
                        <section class="video">
                          <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
                          </iframe>
                        </section>
                      
                        <section class="tromb-types">
                          <div class="type">
                            <h3 class="title-tromb">TENOR TROMBONE</h3>
                            <h2 class="price">$600</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                      
                          <div class="type">
                            <h3 class="title-tromb">BASS TROMBONE</h3>
                            <h2 class="price">$900</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                      
                          <div class="type">
                            <h3 class="title-tromb">VALVE TROMBONE</h3>
                            <h2 class="price">$1200</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                        </section>
                      
                        <footer>
                          <ul class="footer-links">
                            <li><a href="#" class="footer-link">Privacy</a></li>
                            <li><a href="#" class="footer-link">Terms</a></li>
                            <li><a href="#" class="footer-link">Contacts</a></li>
                          </ul>
                          <p class="copyright">Copyright 2016, Original Trombones</p>
                      
                        </footer>
                      </div>
                      * {
                        box-sizing: border-box;
                      }
                      
                      body {
                        font-family: "Roboto", sans-serif;
                        min-height: 100vh;
                        background-color: #eee;
                        color: black;
                      }
                      
                      .wrapper {
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                      }
                      /* lines I added*/
                      header {
                        position: sticky;
                        top: 0;
                        z-index: 99;
                        background: #eee;
                      }
                      nav {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-around;
                        align-items: center;
                        font-weight: 900;
                        font-size: 1em;
                        padding: 20px 10px;
                        flex-wrap: wrap;
                        border-bottom: 1px solid grey;
                      }
                      
                      ul {
                        flex-grow: 1;
                        max-width: 30%;
                        display: flex;
                        justify-content: space-around;
                        text-decoration: none;
                      }
                      
                      img {
                        display: flex;
                        width: 40vw;
                      }
                      
                      ul li {
                        display: inline;
                        text-decoration: none;
                        display: flex;
                      }
                      
                      .nav-links a {
                        text-decoration: none;
                        color: black;
                      }
                      
                      .hero {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                      }
                      
                      h1 {
                        font-size: 2em;
                        font-weight: 700;
                        padding: 20px;
                      }
                      
                      h2 {
                        font-size: 1.4em;
                        font-weight: 700;
                      }
                      
                      p {
                        font-size: 0.8em;
                        letter-spacing: 0.05em;
                      }
                      
                      input[type="email"] {
                        padding: 5px 10px;
                        margin: 10px 0px;
                        border: solid 1px black;
                        width: 350px;
                      }
                      
                      form {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      }
                      
                      input[type="submit"] {
                        margin: 10px auto;
                        padding: 5px 15px;
                        background-color: #f1c40f;
                        font-weight: 900;
                        border: #eee solid 0px;
                      }
                      
                      .bus-info {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                      }
                      
                      .features {
                        display: flex;
                        align-items: center;
                        justify-content: space-evenly;
                      }
                      
                      .desc {
                        weight: 125px;
                        width: 80vw;
                        padding: 5px;
                      }
                      
                      .icon {
                        color: #c5a00df8;
                        font-size: 2em;
                      }
                      
                      .feat-title {
                      }
                      
                      .features {
                        padding-top: 20px;
                        border: 40px 0px;
                      }
                      
                      .video {
                        margin: auto;
                        padding: 30px 0px;
                      }
                      
                      .tromb-types {
                        display: flex;
                        justify-content: center;
                      }
                      
                      .type {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 20px 50px;
                        margin: 20px 10px;
                        border: solid black 1px;
                      }
                      
                      .title-tromb {
                        font-weight: 700;
                        font-size: 0.8em;
                      }
                      
                      .price {
                        padding: 20px 0;
                      }
                      
                      .tromb-desc {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      }
                      
                      .text {
                        padding-bottom: 10px;
                      }
                      
                      footer {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        margin-bottom: 20px;
                        margin-right: 20px;
                      }
                      
                      .footer-links {
                        display: flex;
                        justify-content: flex-end;
                        align-items: flex-end;
                        max-width: 100%;
                      }
                      
                      .footer-links .footer-link {
                        text-decoration: none;
                        padding: 0px 10px;
                        color: black;
                      }
                      
                      .copyright {
                        max-width: 100%;
                        margin-top: 5px;
                      }
                      
                      @media (max-width: 700px) {
                        header {
                          font-size: 1em;
                        }
                      
                        nav {
                          display: flex;
                          flex-direction: column;
                        }
                      
                        nav > ul {
                          display: flex;
                          flex-wrap: wrap;
                        }
                      
                        .tromb-types {
                          flex-direction: column;
                          justify-content: center;
                          align-items: center;
                        }
                      
                        .type {
                          width: 300px;
                        }
                      
                        .price {
                          padding: 5px 0;
                        }
                      }
                      <div class="wrapper">
                        <header>
                          <nav class="Navbar">
                            <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
                            <ul class="nav-links">
                              <li><a href="#" class="link">Features</a></li>
                              <li><a href="#" class="link">How It Works</a></li>
                              <li><a href="#" class="link">Pricing</a></li>
                            </ul>
                          </nav>
                        </header>
                        <section class="hero">
                          <h1>Handcrafted, home-made masterpieces</h1>
                          <form class="email-form">
                            <div class="email-form">
                              <label for="email"></label>
                              <input type="email" name="email" id="email" placeholder="Enter your email address" required>
                            </div>
                            <div class="button-center">
                              <input class="sub-button" type="submit" value="GET STARTED">
                            </div>
                          </form>
                        </section>
                      
                        <section class="bus-info">
                          <div class="features">
                            <div class="icon"><i class="fas fa-fire"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Premium materials</h2>
                              <p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
                            </div>
                          </div>
                          <div class="features">
                            <div class="icon"><i class="fas fa-truck"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Fast Shipping</h2>
                              <p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
                                not satisfied.</p>
                            </div>
                          </div>
                          <div class="features">
                            <div class="icon"><i class="fa-solid fa-battery-full"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Quality Assurance</h2>
                              <p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
                                instrument.</p>
                            </div>
                          </div>
                        </section>
                      
                        <section class="video">
                          <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
                          </iframe>
                        </section>
                      
                        <section class="tromb-types">
                          <div class="type">
                            <h3 class="title-tromb">TENOR TROMBONE</h3>
                            <h2 class="price">$600</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                      
                          <div class="type">
                            <h3 class="title-tromb">BASS TROMBONE</h3>
                            <h2 class="price">$900</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                      
                          <div class="type">
                            <h3 class="title-tromb">VALVE TROMBONE</h3>
                            <h2 class="price">$1200</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                        </section>
                      
                        <footer>
                          <ul class="footer-links">
                            <li><a href="#" class="footer-link">Privacy</a></li>
                            <li><a href="#" class="footer-link">Terms</a></li>
                            <li><a href="#" class="footer-link">Contacts</a></li>
                          </ul>
                          <p class="copyright">Copyright 2016, Original Trombones</p>
                      
                        </footer>
                      </div>
                      * {
                        box-sizing: border-box;
                      }
                      
                      body {
                        font-family: "Roboto", sans-serif;
                        min-height: 100vh;
                        background-color: #eee;
                        color: black;
                        /* line I added*/
                        padding-top: 10rem;
                      }
                      
                      .wrapper {
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                      }
                      /* lines I added*/
                      header {
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        z-index: 99;
                        background: #eee;
                      }
                      nav {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-around;
                        align-items: center;
                        font-weight: 900;
                        font-size: 1em;
                        padding: 20px 10px;
                        flex-wrap: wrap;
                        border-bottom: 1px solid grey;
                      }
                      
                      ul {
                        flex-grow: 1;
                        max-width: 30%;
                        display: flex;
                        justify-content: space-around;
                        text-decoration: none;
                      }
                      
                      img {
                        display: flex;
                        width: 40vw;
                      }
                      
                      ul li {
                        display: inline;
                        text-decoration: none;
                        display: flex;
                      }
                      
                      .nav-links a {
                        text-decoration: none;
                        color: black;
                      }
                      
                      .hero {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                      }
                      
                      h1 {
                        font-size: 2em;
                        font-weight: 700;
                        padding: 20px;
                      }
                      
                      h2 {
                        font-size: 1.4em;
                        font-weight: 700;
                      }
                      
                      p {
                        font-size: 0.8em;
                        letter-spacing: 0.05em;
                      }
                      
                      input[type="email"] {
                        padding: 5px 10px;
                        margin: 10px 0px;
                        border: solid 1px black;
                        width: 350px;
                      }
                      
                      form {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      }
                      
                      input[type="submit"] {
                        margin: 10px auto;
                        padding: 5px 15px;
                        background-color: #f1c40f;
                        font-weight: 900;
                        border: #eee solid 0px;
                      }
                      
                      .bus-info {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                      }
                      
                      .features {
                        display: flex;
                        align-items: center;
                        justify-content: space-evenly;
                      }
                      
                      .desc {
                        weight: 125px;
                        width: 80vw;
                        padding: 5px;
                      }
                      
                      .icon {
                        color: #c5a00df8;
                        font-size: 2em;
                      }
                      
                      .feat-title {
                      }
                      
                      .features {
                        padding-top: 20px;
                        border: 40px 0px;
                      }
                      
                      .video {
                        margin: auto;
                        padding: 30px 0px;
                      }
                      
                      .tromb-types {
                        display: flex;
                        justify-content: center;
                      }
                      
                      .type {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 20px 50px;
                        margin: 20px 10px;
                        border: solid black 1px;
                      }
                      
                      .title-tromb {
                        font-weight: 700;
                        font-size: 0.8em;
                      }
                      
                      .price {
                        padding: 20px 0;
                      }
                      
                      .tromb-desc {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      }
                      
                      .text {
                        padding-bottom: 10px;
                      }
                      
                      footer {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        margin-bottom: 20px;
                        margin-right: 20px;
                      }
                      
                      .footer-links {
                        display: flex;
                        justify-content: flex-end;
                        align-items: flex-end;
                        max-width: 100%;
                      }
                      
                      .footer-links .footer-link {
                        text-decoration: none;
                        padding: 0px 10px;
                        color: black;
                      }
                      
                      .copyright {
                        max-width: 100%;
                        margin-top: 5px;
                      }
                      
                      @media (max-width: 700px) {
                        header {
                          font-size: 1em;
                        }
                      
                        nav {
                          display: flex;
                          flex-direction: column;
                        }
                      
                        nav > ul {
                          display: flex;
                          flex-wrap: wrap;
                        }
                      
                        .tromb-types {
                          flex-direction: column;
                          justify-content: center;
                          align-items: center;
                        }
                      
                        .type {
                          width: 300px;
                        }
                      
                        .price {
                          padding: 5px 0;
                        }
                      }
                      <div class="wrapper">
                        <header>
                          <nav class="Navbar">
                            <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
                            <ul class="nav-links">
                              <li><a href="#" class="link">Features</a></li>
                              <li><a href="#" class="link">How It Works</a></li>
                              <li><a href="#" class="link">Pricing</a></li>
                            </ul>
                          </nav>
                        </header>
                        <section class="hero">
                          <h1>Handcrafted, home-made masterpieces</h1>
                          <form class="email-form">
                            <div class="email-form">
                              <label for="email"></label>
                              <input type="email" name="email" id="email" placeholder="Enter your email address" required>
                            </div>
                            <div class="button-center">
                              <input class="sub-button" type="submit" value="GET STARTED">
                            </div>
                          </form>
                        </section>
                      
                        <section class="bus-info">
                          <div class="features">
                            <div class="icon"><i class="fas fa-fire"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Premium materials</h2>
                              <p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
                            </div>
                          </div>
                          <div class="features">
                            <div class="icon"><i class="fas fa-truck"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Fast Shipping</h2>
                              <p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
                                not satisfied.</p>
                            </div>
                          </div>
                          <div class="features">
                            <div class="icon"><i class="fa-solid fa-battery-full"></i></div>
                            <div class="desc">
                              <h2 class="feat-title">Quality Assurance</h2>
                              <p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
                                instrument.</p>
                            </div>
                          </div>
                        </section>
                      
                        <section class="video">
                          <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
                          </iframe>
                        </section>
                      
                        <section class="tromb-types">
                          <div class="type">
                            <h3 class="title-tromb">TENOR TROMBONE</h3>
                            <h2 class="price">$600</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                      
                          <div class="type">
                            <h3 class="title-tromb">BASS TROMBONE</h3>
                            <h2 class="price">$900</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                      
                          <div class="type">
                            <h3 class="title-tromb">VALVE TROMBONE</h3>
                            <h2 class="price">$1200</h2>
                            <div class="tromb-desc">
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum.</p>
                              <p class="text">Lorem ipsum dolor.</p>
                              <p class="text">Lorem ipsum.</p>
                            </div>
                            <div class="select-button">
                              <input class="sub-button" type="submit" value="SELECT">
                            </div>
                          </div>
                        </section>
                      
                        <footer>
                          <ul class="footer-links">
                            <li><a href="#" class="footer-link">Privacy</a></li>
                            <li><a href="#" class="footer-link">Terms</a></li>
                            <li><a href="#" class="footer-link">Contacts</a></li>
                          </ul>
                          <p class="copyright">Copyright 2016, Original Trombones</p>
                      
                        </footer>
                      </div>

                      Can't center button within a HTML form using flexbox - code inside

                      copy iconCopydownload iconDownload
                      .button-center { text-align: center}
                      
                      .button-center {
                        display: flex;
                        justify-content: center;
                        /* text-align: center; ~ non-flex solution */
                      }
                      
                      form.email-form {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      } 
                      
                      * {
                        box-sizing: border-box;
                      }
                      
                      body {
                        font-family: "Roboto", sans-serif;
                        min-height: 100vh;
                        background-color: #eee;
                        color: black;
                      }
                      
                      .button-center {
                        display: flex;
                        justify-content: center;
                        /*text-align: center;*/
                      }
                      
                      form.email-form {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      } 
                      
                      nav {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-around;
                        align-items: center;
                        font-weight: 900;
                        font-size: 1em;
                        padding: 20px 10px;
                        flex-wrap: wrap;
                        border-bottom: 1px solid grey;
                        position: sticky;
                      }
                      
                      ul {
                        flex-grow: 1;
                        max-width: 30%;
                        display: flex;
                        justify-content: space-around;
                        text-decoration: none;
                      }
                      
                      img {
                        display: flex;
                        width: 40vw;
                      }
                      
                      ul li {
                        display: inline;
                        text-decoration: none;
                        display: flex;
                      }
                      
                      .nav-links a {
                        text-decoration: none;
                        color: black;
                      }
                      
                      .hero {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                      }
                      
                      h1 {
                        font-size: 2em;
                        font-weight: 700;
                        padding: 20px;
                      }
                      
                      input[type="email"] {
                        padding: 5px 10px;
                        margin: 10px 0px;
                        border: solid 1px black;
                        width: 350px;
                      }
                      
                      input[type="submit"] {}
                      
                      @media (max-width: 700px) {
                        header {
                          font-size: 1em;
                        }
                        nav {
                          display: flex;
                          flex-direction: column;
                        }
                        ul {
                          display: flex;
                          flex-wrap: wrap;
                        }
                      }
                      <html>
                      
                      <body>
                        <header>
                          <nav class="Navbar">
                            <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
                            <ul class="nav-links">
                              <li><a href="#" class="link">Features</a></li>
                              <li><a href="#" class="link">How It Works</a></li>
                              <li><a href="#" class="link">Pricing</a></li>
                            </ul>
                          </nav>
                        </header>
                        <section class="hero">
                          <h1>Handcrafted, home-made masterpieces</h1>
                          <form class="email-form">
                            <div class="email-form">
                              <label for="email"></label>
                              <input type="email" name="email" id="email" placeholder="Enter your email address" required>
                            </div>
                            <div class="button-center">
                              <input class="sub-button" type="submit" value="GET STARTED">
                            </div>
                          </form>
                        </section>
                      </body>
                      
                      </html>
                      .button-center {
                        display: flex;
                        justify-content: center;
                        /* text-align: center; ~ non-flex solution */
                      }
                      
                      form.email-form {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      } 
                      
                      * {
                        box-sizing: border-box;
                      }
                      
                      body {
                        font-family: "Roboto", sans-serif;
                        min-height: 100vh;
                        background-color: #eee;
                        color: black;
                      }
                      
                      .button-center {
                        display: flex;
                        justify-content: center;
                        /*text-align: center;*/
                      }
                      
                      form.email-form {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      } 
                      
                      nav {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-around;
                        align-items: center;
                        font-weight: 900;
                        font-size: 1em;
                        padding: 20px 10px;
                        flex-wrap: wrap;
                        border-bottom: 1px solid grey;
                        position: sticky;
                      }
                      
                      ul {
                        flex-grow: 1;
                        max-width: 30%;
                        display: flex;
                        justify-content: space-around;
                        text-decoration: none;
                      }
                      
                      img {
                        display: flex;
                        width: 40vw;
                      }
                      
                      ul li {
                        display: inline;
                        text-decoration: none;
                        display: flex;
                      }
                      
                      .nav-links a {
                        text-decoration: none;
                        color: black;
                      }
                      
                      .hero {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                      }
                      
                      h1 {
                        font-size: 2em;
                        font-weight: 700;
                        padding: 20px;
                      }
                      
                      input[type="email"] {
                        padding: 5px 10px;
                        margin: 10px 0px;
                        border: solid 1px black;
                        width: 350px;
                      }
                      
                      input[type="submit"] {}
                      
                      @media (max-width: 700px) {
                        header {
                          font-size: 1em;
                        }
                        nav {
                          display: flex;
                          flex-direction: column;
                        }
                        ul {
                          display: flex;
                          flex-wrap: wrap;
                        }
                      }
                      <html>
                      
                      <body>
                        <header>
                          <nav class="Navbar">
                            <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
                            <ul class="nav-links">
                              <li><a href="#" class="link">Features</a></li>
                              <li><a href="#" class="link">How It Works</a></li>
                              <li><a href="#" class="link">Pricing</a></li>
                            </ul>
                          </nav>
                        </header>
                        <section class="hero">
                          <h1>Handcrafted, home-made masterpieces</h1>
                          <form class="email-form">
                            <div class="email-form">
                              <label for="email"></label>
                              <input type="email" name="email" id="email" placeholder="Enter your email address" required>
                            </div>
                            <div class="button-center">
                              <input class="sub-button" type="submit" value="GET STARTED">
                            </div>
                          </form>
                        </section>
                      </body>
                      
                      </html>
                      .button-center {
                        display: flex;
                        justify-content: center;
                        /* text-align: center; ~ non-flex solution */
                      }
                      
                      form.email-form {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      } 
                      
                      * {
                        box-sizing: border-box;
                      }
                      
                      body {
                        font-family: "Roboto", sans-serif;
                        min-height: 100vh;
                        background-color: #eee;
                        color: black;
                      }
                      
                      .button-center {
                        display: flex;
                        justify-content: center;
                        /*text-align: center;*/
                      }
                      
                      form.email-form {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                      } 
                      
                      nav {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-around;
                        align-items: center;
                        font-weight: 900;
                        font-size: 1em;
                        padding: 20px 10px;
                        flex-wrap: wrap;
                        border-bottom: 1px solid grey;
                        position: sticky;
                      }
                      
                      ul {
                        flex-grow: 1;
                        max-width: 30%;
                        display: flex;
                        justify-content: space-around;
                        text-decoration: none;
                      }
                      
                      img {
                        display: flex;
                        width: 40vw;
                      }
                      
                      ul li {
                        display: inline;
                        text-decoration: none;
                        display: flex;
                      }
                      
                      .nav-links a {
                        text-decoration: none;
                        color: black;
                      }
                      
                      .hero {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                      }
                      
                      h1 {
                        font-size: 2em;
                        font-weight: 700;
                        padding: 20px;
                      }
                      
                      input[type="email"] {
                        padding: 5px 10px;
                        margin: 10px 0px;
                        border: solid 1px black;
                        width: 350px;
                      }
                      
                      input[type="submit"] {}
                      
                      @media (max-width: 700px) {
                        header {
                          font-size: 1em;
                        }
                        nav {
                          display: flex;
                          flex-direction: column;
                        }
                        ul {
                          display: flex;
                          flex-wrap: wrap;
                        }
                      }
                      <html>
                      
                      <body>
                        <header>
                          <nav class="Navbar">
                            <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
                            <ul class="nav-links">
                              <li><a href="#" class="link">Features</a></li>
                              <li><a href="#" class="link">How It Works</a></li>
                              <li><a href="#" class="link">Pricing</a></li>
                            </ul>
                          </nav>
                        </header>
                        <section class="hero">
                          <h1>Handcrafted, home-made masterpieces</h1>
                          <form class="email-form">
                            <div class="email-form">
                              <label for="email"></label>
                              <input type="email" name="email" id="email" placeholder="Enter your email address" required>
                            </div>
                            <div class="button-center">
                              <input class="sub-button" type="submit" value="GET STARTED">
                            </div>
                          </form>
                        </section>
                      </body>
                      
                      </html>

                      Did Google Sheets stop allowing json access?

                      copy iconCopydownload iconDownload
                      var url = 'https://spreadsheets.google.com/feeds/list/' +
                                 spreadsheet_id + '/' + tab_ordinal + '/public/values?alt=json';
                      ($.getJSON(url, 'callback=?')).success(function(data) {
                        // ...
                      };
                      
                      var url = 'https://sheets.googleapis.com/v4/spreadsheets/' +
                                 spreadsheet_id + '/values/' + tab_name +
                                 '?alt=json&key=' + api_key;
                      ($.getJSON(url, 'callback=?')).success(function(data) {
                        // ...
                      };
                      
                      var url = 'https://spreadsheets.google.com/feeds/list/' +
                                 spreadsheet_id + '/' + tab_ordinal + '/public/values?alt=json';
                      ($.getJSON(url, 'callback=?')).success(function(data) {
                        // ...
                      };
                      
                      var url = 'https://sheets.googleapis.com/v4/spreadsheets/' +
                                 spreadsheet_id + '/values/' + tab_name +
                                 '?alt=json&key=' + api_key;
                      ($.getJSON(url, 'callback=?')).success(function(data) {
                        // ...
                      };
                      
                      var url = 'https://docs.google.com/spreadsheets/d/'+id+'/gviz/tq?tqx=out:json&tq&gid='+gid;
                      
                      var id = '______your_speadsheet_id________';
                      var gid = '0';
                      var url = 'https://docs.google.com/spreadsheets/d/'+id+'/gviz/tq?tqx=out:json&tq&gid='+gid;
                      fetch(url)
                        .then(response => response.text())
                        .then(data => document.getElementById("json").innerHTML=myItems(data.substring(47).slice(0, -2))  
                        );
                      function myItems(jsonString){
                        var json = JSON.parse(jsonString);
                        var table = '<table><tr>'
                        json.table.cols.forEach(colonne => table += '<th>' + colonne.label + '</th>')
                        table += '</tr>'
                        json.table.rows.forEach(ligne => {
                          table += '<tr>'
                          ligne.c.forEach(cellule => {
                              try{var valeur = cellule.f ? cellule.f : cellule.v}
                              catch(e){var valeur = ''}
                              table += '<td>' + valeur + '</td>'
                            }
                          )
                          table += '</tr>'
                          }
                        )
                        table += '</table>'
                        return table
                      }
                      
                      var url = 'https://docs.google.com/spreadsheets/d/'+id+'/gviz/tq?tqx=out:json&tq&gid='+gid;
                      
                      var id = '______your_speadsheet_id________';
                      var gid = '0';
                      var url = 'https://docs.google.com/spreadsheets/d/'+id+'/gviz/tq?tqx=out:json&tq&gid='+gid;
                      fetch(url)
                        .then(response => response.text())
                        .then(data => document.getElementById("json").innerHTML=myItems(data.substring(47).slice(0, -2))  
                        );
                      function myItems(jsonString){
                        var json = JSON.parse(jsonString);
                        var table = '<table><tr>'
                        json.table.cols.forEach(colonne => table += '<th>' + colonne.label + '</th>')
                        table += '</tr>'
                        json.table.rows.forEach(ligne => {
                          table += '<tr>'
                          ligne.c.forEach(cellule => {
                              try{var valeur = cellule.f ? cellule.f : cellule.v}
                              catch(e){var valeur = ''}
                              table += '<td>' + valeur + '</td>'
                            }
                          )
                          table += '</tr>'
                          }
                        )
                        table += '</table>'
                        return table
                      }
                      
                      https://docs.google.com/spreadsheets/d/{spreadsheetId}/gviz/tq
                      
                      google.visualization.Query.setResponse({json});
                      
                      https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{sheetName}?alt=json&key={theKey}
                      
                      
                      https://docs.google.com/spreadsheets/d/{spreadsheetId}/gviz/tq
                      
                      google.visualization.Query.setResponse({json});
                      
                      https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{sheetName}?alt=json&key={theKey}
                      
                      
                      https://docs.google.com/spreadsheets/d/{spreadsheetId}/gviz/tq
                      
                      google.visualization.Query.setResponse({json});
                      
                      https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{sheetName}?alt=json&key={theKey}
                      
                      

                      Is there a way to change the background color of a parent element when a radio button is clicked without jQuery?

                      copy iconCopydownload iconDownload
                      const App = () => {
                        const [chosenOne, setChosenOne] = React.useState();
                        const list = ["Alec Baldwin", "Bruce Willis", "Dwayne Johnson", "Jamie Fox"];
                        
                        return (
                          <div>
                            {list.map((person, i) => (
                              <label key={i} htmlFor={person} data-chosen={chosenOne === person}>
                                <input type="radio" name="options" id={person} value={person} className="check-btn" onChange={(e) => setChosenOne(e.target.value)}/>
                                <span className="text-inner">{person}</span>
                              </label>
                            ))}
                          </div>
                        )
                      }
                      .check-btn {
                        opacity: 0;
                        position: relative;
                        top: 2px;
                      }
                      
                      label {
                        border-radius: 10px;
                        font-family: Inter;
                        font-style: normal;
                        font-weight: 600;
                        font-size: 12px;
                        line-height: 12px;
                        text-align: center;
                        width: 100%;
                        transition: 0.3s ease;
                      
                        background: #f5f7fb;
                        border: 0.794239px solid #4d5b9e;
                        box-sizing: border-box;
                        border-radius: 7.94239px;
                      
                        padding-top: 5px;
                        padding-bottom: 5px;
                        padding: 5px 10px 5px 10px;
                      }
                      
                      label:hover, label[data-chosen="true"] {
                        background-color: #d6dbf5;
                        cursor: pointer;
                      }
                      
                      .text-inner {
                        position: relative;
                        right: 10px;
                      }
                      
                      label + label {
                        margin-left: .5rem;
                      }
                      const App = () => {
                        const [chosenOne, setChosenOne] = React.useState();
                        const list = ["Alec Baldwin", "Bruce Willis", "Dwayne Johnson", "Jamie Fox"];
                        
                        return (
                          <div>
                            {list.map((person, i) => (
                              <label key={i} htmlFor={person} data-chosen={chosenOne === person}>
                                <input type="radio" name="options" id={person} value={person} className="check-btn" onChange={(e) => setChosenOne(e.target.value)}/>
                                <span className="text-inner">{person}</span>
                              </label>
                            ))}
                          </div>
                        )
                      }
                      .check-btn {
                        opacity: 0;
                        position: relative;
                        top: 2px;
                      }
                      
                      label {
                        border-radius: 10px;
                        font-family: Inter;
                        font-style: normal;
                        font-weight: 600;
                        font-size: 12px;
                        line-height: 12px;
                        text-align: center;
                        width: 100%;
                        transition: 0.3s ease;
                      
                        background: #f5f7fb;
                        border: 0.794239px solid #4d5b9e;
                        box-sizing: border-box;
                        border-radius: 7.94239px;
                      
                        padding-top: 5px;
                        padding-bottom: 5px;
                        padding: 5px 10px 5px 10px;
                      }
                      
                      label:hover, label[data-chosen="true"] {
                        background-color: #d6dbf5;
                        cursor: pointer;
                      }
                      
                      .text-inner {
                        position: relative;
                        right: 10px;
                      }
                      
                      label + label {
                        margin-left: .5rem;
                      }

                      Is it possible to deploy a non-master branch to Github Pages?

                      copy iconCopydownload iconDownload
                      git checkout <branch-name>
                      npm run build
                      npm run deploy
                      

                      Firestore: Could not reach Cloud Firestore backend. Connection failed 1 times

                      copy iconCopydownload iconDownload
                      service cloud.firestore {
                        match /databases/{database}/documents {
                          match /{document=**} {
                            allow read, write: if true;
                          }
                        }
                      }
                      
                      service cloud.firestore {
                        match /databases/{database}/documents {
                          match /{document=**} {
                            allow read, write: if request.auth != null;
                          }
                        }
                      }
                      
                      service cloud.firestore {
                        match /databases/{database}/documents {
                          match /users/{document=**} {
                            allow read, write: if request.auth != null;
                          }
                        }
                      }
                      
                      service cloud.firestore {
                        match /databases/{database}/documents {
                          match /{document=**} {
                            allow read, write: if true;
                          }
                        }
                      }
                      
                      service cloud.firestore {
                        match /databases/{database}/documents {
                          match /{document=**} {
                            allow read, write: if request.auth != null;
                          }
                        }
                      }
                      
                      service cloud.firestore {
                        match /databases/{database}/documents {
                          match /users/{document=**} {
                            allow read, write: if request.auth != null;
                          }
                        }
                      }
                      
                      service cloud.firestore {
                        match /databases/{database}/documents {
                          match /{document=**} {
                            allow read, write: if true;
                          }
                        }
                      }
                      
                      service cloud.firestore {
                        match /databases/{database}/documents {
                          match /{document=**} {
                            allow read, write: if request.auth != null;
                          }
                        }
                      }
                      
                      service cloud.firestore {
                        match /databases/{database}/documents {
                          match /users/{document=**} {
                            allow read, write: if request.auth != null;
                          }
                        }
                      }
                      

                      Why is there a double quote at the beginning of the my result?

                      copy iconCopydownload iconDownload
                      for (let i=0; i<str.length; i++)
                      
                      ["A", "r", "e", "n", "'", "t", " ", "b", "o", "n", "f", "i", "r", "e", "s", " ", "f", "u", "n", "!", "?", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]
                      
                        function binaryAgent(str) {
                          let binaryArr = str.split(" ");
                          let decimalArr = [];
                          let textArr = [];
                          let joinTextArr;
                          for (let i=0; i<binaryArr.length; i++){
                            // convert binary to decimal use parseInt(value, radix)
                            decimalArr.push(parseInt(binaryArr[i], 2));
                            decimalArr = decimalArr.filter( value => !Number.isNaN(value) );
                            // convert decimal to text
                            textArr.push(String.fromCharCode(decimalArr[i]))
                            // join to be a string
                          }
                          joinTextArr = textArr.join("")
                      
                          return joinTextArr
                      }
                      
                      for (let i=0; i<str.length; i++)
                      
                      ["A", "r", "e", "n", "'", "t", " ", "b", "o", "n", "f", "i", "r", "e", "s", " ", "f", "u", "n", "!", "?", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]
                      
                        function binaryAgent(str) {
                          let binaryArr = str.split(" ");
                          let decimalArr = [];
                          let textArr = [];
                          let joinTextArr;
                          for (let i=0; i<binaryArr.length; i++){
                            // convert binary to decimal use parseInt(value, radix)
                            decimalArr.push(parseInt(binaryArr[i], 2));
                            decimalArr = decimalArr.filter( value => !Number.isNaN(value) );
                            // convert decimal to text
                            textArr.push(String.fromCharCode(decimalArr[i]))
                            // join to be a string
                          }
                          joinTextArr = textArr.join("")
                      
                          return joinTextArr
                      }
                      
                      for (let i=0; i<str.length; i++)
                      
                      ["A", "r", "e", "n", "'", "t", " ", "b", "o", "n", "f", "i", "r", "e", "s", " ", "f", "u", "n", "!", "?", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]
                      
                        function binaryAgent(str) {
                          let binaryArr = str.split(" ");
                          let decimalArr = [];
                          let textArr = [];
                          let joinTextArr;
                          for (let i=0; i<binaryArr.length; i++){
                            // convert binary to decimal use parseInt(value, radix)
                            decimalArr.push(parseInt(binaryArr[i], 2));
                            decimalArr = decimalArr.filter( value => !Number.isNaN(value) );
                            // convert decimal to text
                            textArr.push(String.fromCharCode(decimalArr[i]))
                            // join to be a string
                          }
                          joinTextArr = textArr.join("")
                      
                          return joinTextArr
                      }
                      

                      printing formatted list items on the same line in python

                      copy iconCopydownload iconDownload
                      def fmt(lst):
                          op1, sign, op2 = zip(*map(str.split, lst))
                          line1  = "\t".join([f"{op:>5}" for op in op1])
                          line2  = "\t".join([f"{s:<1}{op:>4}" for s, op in zip(sign, op2)])
                          line3  = "-----\t"*len(lst)
                          print("\n".join([line1, line2, line3])
                      
                      fmt(["32 + 698", "3801 - 2", "45 + 43", "123 + 49"])
                      
                         32    3801      45     123
                      + 698   -   2   +  43   +  49
                      -----   -----   -----   -----   
                      
                      def fmt(lst):
                          op1, sign, op2 = zip(*map(str.split, lst))
                          line1  = "\t".join([f"{op:>5}" for op in op1])
                          line2  = "\t".join([f"{s:<1}{op:>4}" for s, op in zip(sign, op2)])
                          line3  = "-----\t"*len(lst)
                          print("\n".join([line1, line2, line3])
                      
                      fmt(["32 + 698", "3801 - 2", "45 + 43", "123 + 49"])
                      
                         32    3801      45     123
                      + 698   -   2   +  43   +  49
                      -----   -----   -----   -----   
                      
                      def aa(problem) :
                          new_list = list()
                          for i in problem[:] :
                              problem.remove(i)
                              p = i.split()
                              new_list.append(p)
                          print(new_list)
                          for l in new_list :
                              l1 = '{:>5}'.format(l[:][0])
                              print(l1,end='   ')
                          print('')
                          for l in new_list:
                              l2 = '{:<1}{:>4}'.format(l[:][1],l[:][2])
                              print(l2,end='   ')
                          print('')
                          for l in new_list:
                              print('-----',end='   ')
                      
                          return
                      
                      aa(["32 + 698", "3801 - 2", "45 + 43", "123 + 49"])
                      
                         32    3801      45     123
                      + 698   -   2   +  43   +  49
                      -----   -----   -----   -----   %
                      
                      def aa(problem) :
                          new_list = list()
                          for i in problem[:] :
                              problem.remove(i)
                              p = i.split()
                              new_list.append(p)
                          print(new_list)
                          for l in new_list :
                              l1 = '{:>5}'.format(l[:][0])
                              print(l1,end='   ')
                          print('')
                          for l in new_list:
                              l2 = '{:<1}{:>4}'.format(l[:][1],l[:][2])
                              print(l2,end='   ')
                          print('')
                          for l in new_list:
                              print('-----',end='   ')
                      
                          return
                      
                      aa(["32 + 698", "3801 - 2", "45 + 43", "123 + 49"])
                      
                         32    3801      45     123
                      + 698   -   2   +  43   +  49
                      -----   -----   -----   -----   %
                      
                      def aa(problem) :
                          new_list = list()
                          for i in problem[:] :
                              problem.remove(i)
                              p = i.split()
                              new_list.append(p)
                          print(new_list)
                          for l in new_list :
                              l1 = '{:>5}'.format(l[:][0])
                              print(l1,end='   ')
                          print('')
                          for l in new_list:
                              l2 = '{:<1}{:>4}'.format(l[:][1],l[:][2])
                              print(l2,end='   ')
                          print('')
                          for l in new_list:
                              print('-----',end='   ')
                      
                          return
                      
                      aa(["32 + 698", "3801 - 2", "45 + 43", "123 + 49"])
                      
                         32    3801      45     123
                      + 698   -   2   +  43   +  49
                      -----   -----   -----   -----   %
                      
                      def arithmetic_arranger(equations):
                          # Parse to list of lists, e.g.:
                          #   [['32', '+', '698'], ['3801', '-', '2'], ['45', '+', '43'], ['123', '+', '49']]
                          parsed = [equation.split() for equation in equations]
                      
                          # For each sublist, determine the widest string and build a list of those widths, e.g.:
                          #   [3, 4, 2, 3]
                          widths = [len(max(items,key=len)) for items in parsed]
                      
                          # zip() matches each width with each parsed sublist.
                          # Print the first operands right-justified with appropriate widths.
                          print('   '.join([f'  {a:>{w}}' for w,(a,op,b) in zip(widths,parsed)]))
                      
                          # Print the operator and the second operand.
                          print('   '.join([f'{op} {b:>{w}}' for w,(a,op,b) in zip(widths,parsed)]))
                      
                          # Print the dashed lines under each equation.
                          print('   '.join(['-'*(w+2) for w in widths]))
                      
                      arithmetic_arranger(["32 + 698", "3801 - 2", "45 + 43", "123 + 49"])
                      
                         32     3801     45     123
                      + 698   -    2   + 43   +  49
                      -----   ------   ----   -----
                      
                      def arithmetic_arranger(equations):
                          # Parse to list of lists, e.g.:
                          #   [['32', '+', '698'], ['3801', '-', '2'], ['45', '+', '43'], ['123', '+', '49']]
                          parsed = [equation.split() for equation in equations]
                      
                          # For each sublist, determine the widest string and build a list of those widths, e.g.:
                          #   [3, 4, 2, 3]
                          widths = [len(max(items,key=len)) for items in parsed]
                      
                          # zip() matches each width with each parsed sublist.
                          # Print the first operands right-justified with appropriate widths.
                          print('   '.join([f'  {a:>{w}}' for w,(a,op,b) in zip(widths,parsed)]))
                      
                          # Print the operator and the second operand.
                          print('   '.join([f'{op} {b:>{w}}' for w,(a,op,b) in zip(widths,parsed)]))
                      
                          # Print the dashed lines under each equation.
                          print('   '.join(['-'*(w+2) for w in widths]))
                      
                      arithmetic_arranger(["32 + 698", "3801 - 2", "45 + 43", "123 + 49"])
                      
                         32     3801     45     123
                      + 698   -    2   + 43   +  49
                      -----   ------   ----   -----
                      

                      Community Discussions

                      Trending Discussions on freeCodeCamp
                      • Even though they are logically the same, why am I getting different outputs?
                      • Dynamic programming code works in javascript but not in python
                      • 'rafce' React.js shortcut not working in VSCode
                      • Fixing navbar using fixed position or sticky position
                      • Can't center button within a HTML form using flexbox - code inside
                      • Did Google Sheets stop allowing json access?
                      • Is there a way to change the background color of a parent element when a radio button is clicked without jQuery?
                      • Is it possible to deploy a non-master branch to Github Pages?
                      • Hover underline not showing
                      • Firestore: Could not reach Cloud Firestore backend. Connection failed 1 times
                      Trending Discussions on freeCodeCamp

                      QUESTION

                      Even though they are logically the same, why am I getting different outputs?

                      Asked 2022-Apr-02 at 10:08

                      It's my first time asking a question here, so I apologize if the question has been repeated earlier.

                      This is my official solution for freeCodeCamp JS problem:

                      const contacts = [
                        {
                          firstName: "Akira",
                          lastName: "Laine",
                          number: "0543236543",
                          likes: ["Pizza", "Coding", "Brownie Points"],
                        },
                        {
                          firstName: "Harry",
                          lastName: "Potter",
                          number: "0994372684",
                          likes: ["Hogwarts", "Magic", "Hagrid"],
                        },
                        {
                          firstName: "Sherlock",
                          lastName: "Holmes",
                          number: "0487345643",
                          likes: ["Intriguing Cases", "Violin"],
                        },
                        {
                          firstName: "Kristian",
                          lastName: "Vos",
                          number: "unknown",
                          likes: ["JavaScript", "Gaming", "Foxes"],
                        },
                      ];
                      
                      
                      function lookUpProfile(name, prop) {
                      
                        for(let i = 0; i<contacts.length;i++){
                          if(contacts[i].firstName == name && contacts[i].hasOwnProperty(prop)){
                              return contacts[i][prop];
                            }
                            else {
                              return "No such property"
                            } 
                          }
                        return "No such contact";
                      }
                      
                      console.log(lookUpProfile("Kristian", "lastName")); //Output: No such property
                      

                      And this is the official solution with changes in the 'nested-if' loop:

                      function lookUpProfile(name, prop) {
                      
                        for(let i = 0; i<contacts.length;i++){
                          if(contacts[i].firstName == name){
                            if(contacts[i].hasOwnProperty(prop)){
                              return contacts[i][prop];
                            }
                            else {
                              return "No such property"
                            } 
                          }
                        }
                        return "No such contact";
                      }
                      
                      console.log(lookUpProfile("Kristian", "lastName")); //Output: Vos
                      

                      Why am I getting different solutions even if the logic behind nested-if in the official solution is similar to mine?

                      ANSWER

                      Answered 2022-Apr-02 at 10:08

                      They aren't logically the same.

                      Theirs is this:

                      for (/*...*/) {
                          if (a) {
                              if (b) {
                                  return X;
                              } else {
                                  return Y;
                              }
                          }
                      }
                      

                      Notice that if a is not true, neither return happens, and the loop continues with the next iteration.

                      But yours is:

                      for (/*...*/) {
                          if (a && b) {
                              return X;
                          } else {
                              return Y;
                          }
                      }
                      

                      It returns even when a is false, never moving on to the next loop iteration.

                      If you wanted to combine the outer test with the inner ones, it would be:

                      for (/*...*/) {
                          if (a && b) {
                              return X;
                          } else if (a) { // <===
                              return Y;
                          }
                      }
                      

                      But that's not as clear as the original, and ends up testing a twice unnecessarily.

                      Source https://stackoverflow.com/questions/71716579

                      Community Discussions, Code Snippets contain sources that include Stack Exchange Network

                      Vulnerabilities

                      No vulnerabilities reported

                      Install freeCodeCamp

                      You can download it from GitHub.

                      Support

                      If you think you've found a bug, first read the how to report a bug article and follow its instructions. If you're confident it's a new bug and have confirmed that someone else is facing the same issue, go ahead and create a new GitHub issue. Be sure to include as much information as possible so we can reproduce the bug.

                      DOWNLOAD this Library from

                      Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
                      over 430 million Knowledge Items
                      Find more libraries
                      Reuse Solution Kits and Libraries Curated by Popular Use Cases
                      Explore Kits

                      Save this library and start creating your kit

                      Share this Page

                      share link
                      Reuse Pre-built Kits with freeCodeCamp
                      Consider Popular Learning Libraries
                      Try Top Libraries by freeCodeCamp
                      Compare Learning Libraries with Highest Support
                      Compare Learning Libraries with Highest Quality
                      Compare Learning Libraries with Highest Security
                      Compare Learning Libraries with Permissive License
                      Compare Learning Libraries with Highest Reuse
                      Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
                      over 430 million Knowledge Items
                      Find more libraries
                      Reuse Solution Kits and Libraries Curated by Popular Use Cases
                      Explore Kits

                      Save this library and start creating your kit

                      • © 2022 Open Weaver Inc.