Atom-live-server leaving weird data at the bottom of page


#1

After installing atom-live-server and clicking start atom liver server, this shows up on the HTML file i was editing. The live refresh functions as it should.

I tried to open the HTML doc without the package and the weird bug dosen’t show up there.


#2

Please share the contents of your HTML file.


#3
<!DOCTYPE html>
<html>

<head>
  <meta name="veiwport" content="width=device width, initial-scale=1.0">
  <meta name="author" content="Yousof Mersal">
 <title>Google</title>
  <link href="./style/images/googleg_lodp.ico" rel="icon">
  <link href="./style/style.css" type="text/css" rel="stylesheet">
</head>

<body>

  <nav id="header">
    <!--Top right corner with link to Gmail and Images and apps and a sign in-->
    <ul>
      <li class="top-right-navigation" id="sign-in"><button>Sign in</button></li>
      <li class="top-right-navigation"><a href="https://www.google.com/intl/en/options/"><img src="./style/images/apps.png" alt="Google apps" title="Google apps" id="grid"></a></li>
      <li class="top-right-navigation" id="images"><a href="https://www.google.com/imghp?hl=en&tab=wi&authuser=0">Images</a></li>
      <li class="top-right-navigation" id="gmail"><a href="https://mail.google.com/mail/?tab=wm">Gmail</a></li>
</ul>
  </nav>


  <!--Actually the search field-->
      <div class="content" id="main">
    <img src="./style/images/googlelogo_color_272x92dp.png" class="logo">
    <form action="/search" method="get" name="search" id="search-form" class="search">
      <div class="sb-wrap" id="sb-wrap">
        <input type="text" id="search-bar" name="search" title="search" class="search" autofocus="autofocus">
    <input type="image" id="vocal-search" src="./style/images/mic.png" name="vocal-search" class="vocal-search" title="Search by voice">
  </div>
  <div class="form-buttons" id="form-buttons">
    <input type="submit" form="search-form" id="google-search"class="search" name="google-search-button" value="Google Search">
     <input type="submit" form="seach-form" id="im-feeling-lucky" class="search" name="im-feeling-lucky" value="I'm Feeling Lucky">
      </div>
    </form>
    <div id="lang">Google offered in: <a href="#" id="Dansk" class="lang">Dansk</a> <a href="#" id="Føroyskt" class="lang">Føroyskt</a>
    </div>
      </div>
 <nav id="footer">
   <ul>
     <!--Bottom Links -->
     <li class="bottom-left"><a href="https://www.google.com/intl/en_dk/ads/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1" id="advertising">Advertising</a></li>
     <li class="bottom-left"><a href="https://www.google.com/services/?subid=ww-ww-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpbfooter&fg=1" id="buisness">Buisness</a></li>
     <li class="bottom-left"><a href="https://www.google.com/intl/en_dk/about/?utm_source=google.com&utm_medium=referral&utm_campaign=hp-footer&fg=1" id="about">About</a></li>
     <li class="bottom-right"><a href="https://www.google.com/intl/en_dk/policies/privacy/?fg=1" id="privacy">Privacy</a></li>
     <li class="bottom-right"><a href="https://www.google.com/intl/en_dk/policies/terms/?fg=1" id="terms">Terms</a></li>
     <li class="bottom-right"><a href="https://www.google.com/preferences?hl=en" id="settings">Settings</a></li>
    </ul>
  </nav>
</body>

</html>

I’m learning to code, so i’m doing “The Odin Project” i had an assignment to replicate the google homepage. If you need it i can even send the CSS. I could not find a way to attach the file itself tho so i just copy pasted everything into here. Please excuess the super messy code, i had trouble getting it into the post, thanks for taking a look at my problem :slight_smile:.


#4

The JavaScript at the bottom is just the code that live-server injects into pages to allow it to reload them, and it shouldn’t be printed to the page itself. I don’t see anything that seems like it would cause an error like this, and since the reload works, the bug might just be cosmetic. I’ve used browsersync myself, but its Atom package hasn’t been maintained for two years, so maybe that’s not the most newbie-friendly option.


#5

All-right, thanks for the help! I’ll try out browsersync and see if i can make it work, if not i’ll just live with the cosmetic bug since it’s functioning.

Thanks for your help and have a wonderful day. @DamnedScholar


#6

1st meta under head tag:
Is: content="width=device width…
Should be: content="width=device-width…

The hyphen is missing. Could be throwing it off?

Best wishes!


#7

Corrected the missing hyphen but didn’t help.

-Joe


#8

viewport is also misspelled, but I doubt that it’s causing the problem.

This error looks more severe to me:

Error: No space between attributes.

At line 34, column 63

"google-search"class=“search”

The W3C HTML Validator is still a reliable tool to find such errors, but within an editor using a linter is much more convenient.

Related: