@foreach (var forecast in Model.Forecast)
{
var displayHours = new Dictionary
- {
- [7] = "Morning",
+ {
+ [7] = "Morning",
[14] = "Afternoon",
[19] = "Evening",
[23] = "Night"
};
var hourForecasts = forecast.HourForecasts
- .Join(displayHours, f => f.Time.Value.Hour, d => d.Key, (f, d) => new
+ .Join(displayHours, f => f.Time.Value.Hour, d => d.Key, (f, d) => new
{
TimeOfDay = d.Value,
Forecast = f
})
.ToList();
+
+
@forecast.Date.FriendlyDate()
+
+
-
@forecast.Summary.ConditionName
+
@forecast.Summary.ConditionName
@forecast.Summary.HighTemp / @forecast.Summary.LowTemp
-
+
@foreach (var hourForecast in hourForecasts)
{
diff --git a/WeatherDashboard.Web/Views/_ViewImports.cshtml b/WeatherDashboard.Web/Views/_ViewImports.cshtml
index f3042c6..55ae8e7 100644
--- a/WeatherDashboard.Web/Views/_ViewImports.cshtml
+++ b/WeatherDashboard.Web/Views/_ViewImports.cshtml
@@ -1,3 +1,4 @@
@using WeatherDashboard
@using WeatherDashboard.Web
+@using WeatherDashboard.Extensions
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
diff --git a/WeatherDashboard.Web/wwwroot/css/site.css b/WeatherDashboard.Web/wwwroot/css/site.css
index f8b4e4a..9b83402 100644
--- a/WeatherDashboard.Web/wwwroot/css/site.css
+++ b/WeatherDashboard.Web/wwwroot/css/site.css
@@ -20,7 +20,7 @@ html {
body {
font-family: 'Montserrat', sans-serif;
color: #444;
- margin: 20px 10px;
+ margin: 10px;
background-color: floralwhite;
}
@@ -32,32 +32,59 @@ body {
.degrees {
font-size: 50px;
position: absolute;
- margin: 20px 0 0 10px;
+ margin: 10px 0 0 10px;
opacity: .6;
+ line-height: 50px;
+}
+
+.current-conditions {
+ margin-top: 20px;
+ margin-bottom: 20px;
}
.current-temperature {
font-size: 100px;
font-weight: 500;
+ line-height: 100px;
}
-.detailed-conditions {
+.current-details {
+ text-align: right;
+ font-size: 14px;
+ margin-top: 10px;
+ opacity: 0.8;
}
- .detailed-conditions .day-summary {
- font-size: 30px;
+.forecast-details {
+}
+
+ .forecast-details .day-name {
+ font-size: 17px;
+ opacity: 0.4;
}
- .detailed-conditions .day-summary .col:last-of-type {
+ .forecast-details .day-name:not(:first-of-type) {
+ margin-top: 15px;
+ }
+
+ .forecast-details .day-summary {
+ font-size: 30px;
+ line-height: 30px;
+ margin-bottom: 10px;
+ }
+
+ .forecast-details .day-summary .col:last-of-type {
text-align: right;
}
- .detailed-conditions .day-detail {
+ .forecast-details .day-detail {
font-size: 13px;
- opacity: 0.5;
+ opacity: 0.7;
}
- .detailed-conditions .day-detail .col:last-of-type {
+
+
+ .forecast-details .day-detail .col:last-of-type {
text-align: right;
font-weight: bold;
}
diff --git a/WeatherDashboard/DayForecast.cs b/WeatherDashboard/DayForecast.cs
index dd0ec34..0f2e3a4 100644
--- a/WeatherDashboard/DayForecast.cs
+++ b/WeatherDashboard/DayForecast.cs
@@ -4,6 +4,8 @@ namespace WeatherDashboard
{
public class DayForecast
{
+ public DateTime Date { get; set; }
+
[JsonProperty("day")]
public ForecastSummary Summary { get; set; }
diff --git a/WeatherDashboard/Extensions/DateExtensions.cs b/WeatherDashboard/Extensions/DateExtensions.cs
new file mode 100644
index 0000000..e603b91
--- /dev/null
+++ b/WeatherDashboard/Extensions/DateExtensions.cs
@@ -0,0 +1,17 @@
+namespace WeatherDashboard.Extensions
+{
+ public static class DateExtensions
+ {
+ public static string FriendlyDate(this DateTime date)
+ {
+ var format = date.Year < DateTime.Now.Year
+ ? "dddd, M/d/yy"
+ : "dddd, M/d";
+
+ return date.Date == DateTime.Now.Date ? "Today"
+ : date.Date == DateTime.Now.AddDays(-1).Date ? "Yesterday"
+ : date.Date == DateTime.Now.AddDays(1).Date ? "Tomorrow"
+ : date.ToString(format);
+ }
+ }
+}