title: Magic 8 ball in HTML
body: <p>I am thinking of making a "magic 8 ball" kind of website. I would like a version of the following code that looks more like <a href="https://askhelixfossil.com/" rel="nofollow">the helix fossil website</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var answers = [ 
    'Maybe.', 'Certainly not.', 'I hope so.', 'Not in your wildest dreams.',
    'There is a good chance.', 'Quite likely.', 'I think so.', 'I hope not.',
    'I hope so.', 'Never!', 'Fuhgeddaboudit.', 'Ahaha! Really?!?', 'Pfft.',
    'Sorry, bucko.', 'Hell, yes.', 'Hell to the no.', 'The future is bleak.',
    'The future is uncertain.', 'I would rather not say.', 'Who cares?',
    'Possibly.', 'Never, ever, ever.', 'There is a small chance.', 'Yes!'];
  
  document.getElementById('answerButton').onclick = function () { 
    var answer = answers[Math.floor(Math.random() * answers.length)];
    document.getElementById('answerContainer').innerHTML = answer;
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>p, input, button { 
    font-family: sans-serif;
    font-size: 15px;
  } 
  input { 
    width: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt; How can I help you today? &lt;/p&gt;
  
  &lt;input type="text" placeholder="enter a question"&gt;&lt;/input&gt;
  
  &lt;button id="answerButton"&gt; Answer me &lt;/button&gt;
  
  &lt;p id="answerContainer"&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also, when I put this into the "insert code" feature in Weebly, it keeps showing the raw code above the elements. Any way I could clean this up or should I just use a different website creator?</p>
  
  <p>I know nothing about CSS.</p>