<h1>Let's go to carnival!</h1>

<div>
  <img src="https://some-image.com" />
</div>

<ul id="carnival-list">
  <li class="clothes">Hat</li>
  <li class="clothes">Jacket</li>
  <li class="clothes">Pants</li>
  <li class="food-and-beverages">Hot-Dog</li>
  <li class="food-and-beverages">Hot Wine</li>
</ul>

h1 {
  color: blue;
}

h1 {
  color: blue;
}

.bar-name {
  font-size: 20px;
}

#bar-list {
  text-align: center;
}

li.place {
  ...
}

li, .place {
  ...
}

const activity = "dancing";

const ticketCost = 40;

100 > 50 // true

1 > 2 // false

1 === 1 // true

1 === "1" // false

true && true // true

true && false // false

true || true // true

true || false // true

const allCostumesCost = 40 * 5; // 200

const hotelBillPerPerson = 100 / 5; // 20

const restFromTicket = 100 - 40; // 60

const carnivalTotal = 40 + 20; // 60

let costumes = [
  'wonder-woman',
  'bart-simpson',
  'astronaut'
];

costumes.forEach((costume, i) => {
  console.log(costume, i)
});
// wonder-woman 0
// bart-simpson 1
// astronaut 2

if (style === 'mainstream' && destination === 'Germany') {
  partyIn('Munich');
} else if (style === 'authentic' && destination === 'Germany') {
  partyIn('Rottweil');
} else {
  partyIn('Vienna');
}

const locations = ["munich", "rottweil", "vienna"];

const partyGoer = {
  name: "Lisa Oberhauer",
  age: 31,
  favouritePlace: "Rottweil",
};

const name = partyGoer.name; // Lisa Oberhauer

function getPartyDays(totalBudget, costPerDay) {
  return totalBudget / costPerDay;
}

getPartyDays(200, 50); // 4

<button id="shuffle-button">
  SHUFFLE COSTUME
</button>

const placeElements = document.getElementsByClassName("place");

const buttonElement = document.getElementById("shuffle-button");

<ul>
  <li class="place">Munich</li>
  <li class="place">Vienna</li>
</ul>