JS-exercises-variables/variables.html at main · RobTheTeacher/JS-exercises-variables · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<html lang="en">

<head>
  <title>JS Exercises</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./styles/style.css">
  <script src="./js/variables.js" async></script>
</head>

<body>
  <header>
    <h1>Variables by</h1>
  </header>

  <div>
    <h3>Exercise 1</h3>
    <p>My name is <span id="first-name"></span></p>
    <p>I was born in <span id="birth-year"></span></p>
    <p>In 2045 I will be <span id="future-age"></span></p>
  </div>

  <div>
    <h3>Exercise 2 - Data Types</h3>
    <p>'firstName' is a <span id="first-name-type"></span></p>
    <p>'birthYear' is a <span id="birth-year-type"></span></p>
    <p>'futureAge' is a <span id="future-age-type"></span></p>
    <p>'firstNameBirthYear' is a <span id="name-birth-year-type"></span></p>
  </div>

  <div>
    <h3>Exercise 3 - JS Oddity</h3>
    <p>What will happen if we add numbers strings to numbers and numbers to strings?</p>
    <p>Initialise the 'numbersFirst' variable to birthYear + FUTURE_YEAR + firstName</p>
    <p>Then initialise the 'stringFirst' variable to firstName + birthYear + FUTURE_YEAR</p>
    <p>Numbers First: <span id="numbers-first"></span></p>
    <p>String First: <span id="string-first"></span></p>
    <p>Why is this happening?</p>
  </div>

  <div>
    <h3>Exercise 4</h3>
    <p>I like coffee. I drink 3 cups a day</p>
    <p>How many coffees do I drink in 5 days? <span id="five-days"></span></p>
    <p>How many coffees do I drink in 30 days? <span id="thirty-days"></span></p>
    <p>How many coffees do I drink in one year? <span id="one-year"></span></p>
    <p>How many coffees do I drink in 5 years? <span id="five-years"></span></p>
  </div>

  <div>
    <h3>Exercise 5</h3>
    <p>Coffee costs 42:- each</p>
    <p>How much do I spend on coffee in 5 days? <span id="five-days-cost"></span></p>
    <p>How much do I spend on coffee in 30 days? <span id="thirty-days-cost"></span></p>
    <p>How much do I spend on coffee in one year? <span id="one-year-cost"></span></p>
    <p>How much do I spend on coffee in 5 years? <span id="five-year-cost"></span></p>
  </div>

  <div>
    <h3>Exercise 6</h3>
    <p>Coffee costs 42:- each now, but after 2 years it costs 52:-</p>
    <p>How much do I spend on coffee in 5 years? <span id="five-year-cost-inflation"></span></p>
  </div>

  <div>
    <h3>Exercise 7</h3>
    <p>How many coffees will I drink by today's date in 2045.
      <span>Remove this text and display the answer here using JS only. Don't touch this text in html</span>
    </p>
  </div>

  <div>
    <h3>Exercise 8</h3>
    <p>And what will it cost, assuming the price stays at 52:- after the first 2 years? <span id ="total-cost"></span><p>
  </div>
</body>
</html>