Coursera-Projects-Introduction-to-HTML-CSS-JavaScript-/index.html at main · lMedeirosl/Coursera-Projects-Introduction-to-HTML-CSS-JavaScript- · 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html>
  <head>
    <!-- This is your page title that appears on the browser window or tab -->
    <title>Unit Conversions</title>
  </head>
  <body>
    <section id="home">
        <!-- This is the main heading -->
        <header><b>Unit Conversions</b></header>
        <nav>
            <!-- Button for redirecting users to the temperature section -->
            <a href="#temperature"><button>Temperature</button></a>
            <!-- Button for redirecting users to the weight section -->
            <a href="#weight"><button>Weight</button></a>
            <!-- Button for redirecting users to the distance section -->
            <a href="#distance"><button>Distance</button></a>
        </nav>
    </section>

    <div id="all-conversion-sections">
        <!-- This will have the conversion sections for Temperature, Weight, and Distance -->

        <section id="temperature">
            <!-- Temperature conversion section -->
            <div id="tmp">
                <figure>
                    <img src="https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBMDeveloperSkillsNetwork-CD0101EN-SkillsNetwork/labs/Theia%20Labs/02%20-%20HTML5%20Elements/images/thermo.png" width="200px"/>
                    <figcaption>Celsius to Fahrenheit Conversion</figcaption>
                </figure>

                <article>
                    <!-- This contains the specific elements for temperature conversion -->
                    <fieldset>
                        <legend>Temperature</legend>
                        <!-- Label for Temperature input -->
                        <label for="celsius">Celsius</label> <br/>

                        <input type="number" id="celsius"> <br/>


                        <!-- The conversion button -->
                        <button id="temperature"> Convert </button> <br/>


                        <!-- Label for Temperature output -->
                        <input type="number" id="fahrenheit"> <br/>

                        <label for="fahrenheit">Fahrenheit</label>
                    </fieldset>
                </article>

                <aside>
                    To convert celsius to fahrenheit yourself, use this formula replacing the `C` with your temperature in celsius: (C × 9/5) + 32
                </aside>
            </div>
        </section>
        <section id="weight">
            <!-- Weight conversion section -->
            <div id="wgt">
                <figure>
                    <img src="https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBMDeveloperSkillsNetwork-CD0101EN-SkillsNetwork/labs/Theia%20Labs/02%20-%20HTML5%20Elements/images/weight.png" width="200px"/>
                    <figcaption>Kilogram to Pound Conversion</figcaption>
                </figure>

                <article>
                    <!-- This contains the specific elements for weight conversion -->
                    <fieldset>
                        <legend>Weight</legend>
                        <!-- Label for Weight input -->
                        <label for="kilo">Kilograms</label> <br/>

                        <input type="number" id="kilo"> <br/>

                        <!-- The conversion button -->
                        <button id="weight"> Convert </button> <br/>

                        <!-- Label for Weight output -->
                        <input type="number" id="pounds"> <br/>

                        <label for="pounds">Pounds</label>
                    </fieldset>
                </article>

                <aside>
                    To convert kilograms to pounds yourself, use this formula replacing the `kg` with your weight in kilograms: kg x 2.205
                </aside>
            </div>
        </section>
        <section id="distance">
            <!-- Distance conversion section -->
            <div id="dst">
                <figure>
                    <img src="https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBMDeveloperSkillsNetwork-CD0101EN-SkillsNetwork/labs/Theia%20Labs/02%20-%20HTML5%20Elements/images/speedo.png" width="200px"/>
                    <figcaption>Kilometer to Mile Conversion</figcaption>
                </figure>

                <article>
                    <!-- This contains the specific elements for distance conversion -->
                    <fieldset>
                        <legend>Distance</legend>
                        <!-- Label for Distance input -->
                        <label for="km">Kilometers</label> <br/>

                        <input type="number" id="km"> <br/>

                        <!-- The conversion button -->
                        <button id="distance"> Convert </button> <br/>

                        <!-- Label for Distance output -->
                        <input type="number" id="miles"> <br/>

                        <label for="miles">Miles</label>
                    </fieldset>
                </article>

                <aside>
                    To convert kilometers to miles yourself, use this formula replacing the `km` with your distance in kilometers: km &divide; 1.609
                </aside>
            </div>
       </section>
    </div>
  </body>
</html>
With this, the code for the HTML5 elements is complete.
You will learn to add some styling and actionable scripts to this page in the later part of the course.

Congratulations! You’ve successfully completed this lab
Author(s)
Samaah Sarang
Other Contributor(s)
K Sundararajan
Michelle Saltoun
© IBM Corporation. All rights reserved.