Weather application data structures and design Relevant files are script.ts, WeatherData.ts, index.html.

I made a simple weather 5-day forecast application using mainly TypeScript. I was wondering how I can improve my code since I originally wanted to use a data structure that I created called a "WeatherData" to store my information about the weather for each day of the week.

GitHub project

WeatherData data structure

export class WeatherData {
    date: string;
    city: string;
    country: string;
    temperature: number;
    minTemperature: number;
    maxTemperature: number;
    weather: any;
    weatherIcon: any;
}


TypeScript file concerns

The main concerns I have about the TypeScript files (script.ts, WeatherData.ts) is the fact that halfway through making my project, I realized that I didn't actually need to use a WeatherData data structure. This led to me passing in WeatherData variables in functions as well as returning WeatherData variables from functions that don't actually need to return it.


Is there a more object-oriented way I should be approaching my script.ts class in order to use data structures?
Will using a WeatherData data structure be better?
How can I format my code (maybe different classes?) such that all the functions aren't all clumped together?


HTML file concerns

First time ever making a front-end UI using HTML and I don't know what areas I should refactor. I noticed I have a lot of repeated element tags such as:



&lt;h4 id="wordDay0"&gt;Day 0&lt;/h4&gt;
&lt;h4 id="monthDay0"&gt;month-day 0&lt;/h4&gt;
&lt;h4 id="forecast0"&gt;Forecast&lt;/h4&gt;
&lt;img src="" id="icon0" alt="" height="60" width="60"&gt;
&lt;h1 id="currentTemp0"&gt;Current&lt;/h1&gt;
&lt;h4 id="maxTemp0"&gt;Max&lt;/h4&gt;
&lt;h4 id="minTemp0"&gt;Min&lt;/h4&gt; 


I have 5 of these (one for each day).

Screenshot of what the UI looks like:




What type of suggestions are there to making my UI look better? I was thinking of making the jumbotron element a different color.
About the HTML

You shouldn’t use heading elements (h1-h6) like that. These elements give the heading for the section they create. Don’t use them for the name in simple name-value items, nor for stand-alone content (where no other content in the section exists).

You could represent each day as a section:



&lt;section&gt;&lt;!-- day 1 --&gt;&lt;/section&gt;
&lt;section&gt;&lt;!-- day 2 --&gt;&lt;/section&gt;
&lt;section&gt;&lt;!-- day 3 --&gt;&lt;/section&gt;
&lt;section&gt;&lt;!-- day 4 --&gt;&lt;/section&gt;
&lt;section&gt;&lt;!-- day 5 --&gt;&lt;/section&gt;


A section should ideally have a heading (and it’s the only one needed in this case). I think it makes the most sense to use the day+date as heading. The time element can be used to mark up the date in a machine-readable way. The abbr element can be used to give the full name of the day.

&lt;h2&gt;&lt;abbr title="Sunday"&gt;Sun&lt;/abbr&gt; &lt;time datetime="2017-12-31"&gt;Dec. 31&lt;/time&gt;&lt;/h2&gt;


The forecast can be given in a p. As the img seems to convey the same content, it’s correct to keep the alt attribute empty.

&lt;p&gt;clear sky&lt;/p&gt;
&lt;img src="clear-sky.png" alt="" height="60" width="60"&gt;


While you could use a list for the temperatures, I think three p elements are sufficient in this simple case.

&lt;p&gt;14 °C&lt;/p&gt;
&lt;p&gt;High: 20 °C&lt;/p&gt;
&lt;p&gt;Low: 6 °C&lt;/p&gt;


When using a label for the first temperature, too, I would go with a dl element instead:

&lt;dl&gt;
  &lt;dt&gt;Current&lt;/dt&gt; &lt;dd&gt;14 °C&lt;/dd&gt;
  &lt;dt&gt;High&lt;/dt&gt; &lt;dd&gt;20 °C&lt;/dd&gt;
  &lt;dt&gt;Low&lt;/dt&gt; &lt;dd&gt;6 °C&lt;/dd&gt;
&lt;/dl&gt;




So, an entry for a day could look like this:

&lt;section&gt;
  &lt;h2&gt;&lt;abbr title="Sunday"&gt;Sun&lt;/abbr&gt; &lt;time datetime="2017-12-31"&gt;Dec. 31&lt;/time&gt;&lt;/h2&gt;
  &lt;p&gt;clear sky&lt;/p&gt;
  &lt;img src="clear-sky.png" alt="" height="60" width="60"&gt;
  &lt;p&gt;14 °C&lt;/p&gt;
  &lt;p&gt;High: 20 °C&lt;/p&gt;
  &lt;p&gt;Low: 6 °C&lt;/p&gt;
&lt;/section&gt;


or with dl:

&lt;section&gt;
  &lt;h2&gt;&lt;abbr title="Sunday"&gt;Sun&lt;/abbr&gt; &lt;time datetime="2017-12-31"&gt;Dec. 31&lt;/time&gt;&lt;/h2&gt;
  &lt;p&gt;clear sky&lt;/p&gt;
  &lt;img src="clear-sky.png" alt="" height="60" width="60"&gt;
  &lt;dl&gt;
    &lt;dt&gt;Current&lt;/dt&gt; &lt;dd&gt;14 °C&lt;/dd&gt;
    &lt;dt&gt;High&lt;/dt&gt; &lt;dd&gt;20 °C&lt;/dd&gt;
    &lt;dt&gt;Low&lt;/dt&gt; &lt;dd&gt;6 °C&lt;/dd&gt;
  &lt;/dl&gt;
&lt;/section&gt;