HTML, CSS, and JavaScript

Getting Started

  1. create an account for = https://codesandbox.io/

  2. create a new HTML+CSS project

  3. add an index.js file

HTML Boilerplate (explained)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MUS1331</title>
    <link rel="stylesheet" href="styles.css" />
    <script defer src="index.js"></script>
  </head>
  <body>
    <p id='dog'>This is a paragraph.</p>
  </body>
</html>

Understanding HTML, CSS, and JavaScript

style.css

p {
  font-size: 2em;
  color: green;
}

font size explained

index.js Example 1 (popup box)

alert("Hello World!");

index.js Example 2 (changing content of a paragraph)

var p = document.getElementById('dog');
p.addEventListener('click', function(event) {
  p.innerHTML = 'You clicked it!';
});

index.js Example 3 (guessing a number between 1 and 10)

function myFunction() {
  let text;
  let randomNumber = Math.floor(Math.random() * 10) + 1;

  let person = prompt("Please enter your name:", "Harry Potter");

  let guess = prompt(
    "Hello " + person + " guess a number between 1 and 10:", "7");

  if (guess == randomNumber) {
    text = "Congratulations " + person + "! Your guess is correct!";
  } else {
    text = "Nope, " + person + ". The number was " + randomNumber;
  }

  document.getElementById("dog").innerHTML = text;
}

Great Resource

PreviousFinal ExamNextCopyright & Licensing

Last updated

Was this helpful?