local computer

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

README.md

@@ -1,6 +1,11 @@
 # Dashboard Widgets
+My Dashboard Widgets
 
-<a href="https://app.netlify.com/start/deploy?repository=https://github.com/ewuweblab/dashboard-widgets/"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify"></a>
+## Sources
+Green colors: https://html-color.codes/green
+Fonts: https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fira+Sans:wght@300;400;600&display=swap
+Layout: https://cssgrid-generator.netlify.app/
+Icon: https://www.flaticon.com/free-icon/forest_2913483?term=forest&page=1&position=1&page=1&position=1&related_id=2913483&origin=search
 
 ## What Is This?
 The concept of a Dashboard appears nearly everywhere. Most obvious are car dashboards with displays of speed, mileage, and navigation. Less obvious examples are: the FaceBook banner with notifications, informational displays in lobbies, and “widgets” on iOS and Android. A portion of a larger display is a widget.
@@ -15,5 +20,3 @@ The concept of a Dashboard appears nearly everywhere. Most obvious are car dashb
 * Dashboards convey information in real-time — without prompting
 * Apply concepts from Web Design 1 and 2 with APIs from Web 3
 
-## Citations
-List your sources here

css/styles.css

@@ -1,68 +1,108 @@
 /* Grid */
+
 .layout {
-  /* Set your own grid   */
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: 400px;
-  grid-column-gap: 1em;
-}
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    grid-column-gap: 1em;
+    grid-row-gap: 1em;
+    font-family: 'Fira Sans', sans-serif;
+    text-align: center;
+
+    }
+
+    .time { grid-area: 1 / 1 / 2 / 2; }
+    .date { grid-area: 1 / 2 / 2 / 3; }
+    .weather { grid-area: 2 / 1 / 3 / 3; }
+
 
 /* Widgets */
 section {
-  background: lightgray;
-  padding: 1em;
-
-  /* Relative Parent. Absolute Child */
+  background: #a3c1ad;
   position: relative;
+  margin: 1em;
+  padding: .5em;
+  color: #1c352d;
+
 }
 
-/* Time */
-.time {
+h1 {
+  font-family: 'Bebas Neue', cursive;
+  font-size: 7em;
+  color: whitesmoke;
 }
+h2 {
+  font-size: 3em;
+
+}
+
+/* Time */
 
 .hours {
+  font-size: 10em;
+  font-weight: 600;
+  padding: .12em;
 }
 
 .minutes {
+  font-size: 10em;
+  font-weight: 600;
 }
 
 .seconds {
+  font-size: 3em;
+  font-weight: 200;
+  padding: .1em;
 }
 
 .amOrPM {
-
+  font-size: 3em;
+  font-family: 'Fira Sans', sans-serif;
+  font-weight: 400;
+  color: whitesmoke;
 }
 
 /* Date */
-.date {
-
-}
 
 .month {
+  font-size: 4.5em;
+  font-weight: 600;
 }
 
 .dayOfMonth {
+  font-size: 4.5em;
+  font-weight: 600;
+  padding: .1em;
+
 }
 
 .year {
+  font-size: 2.5em;
+  font-weight: 200;
+
 }
 
 .dayOfWeek {
+  font-size: 3em;
+  color: whitesmoke;
 }
 
 /* Weather */
-.weather {
-
-}
 
 .city {
+  font-size: 4.5em;
+  font-weight: 600;
 
 }
 
 .temp {
+  font-size: 7em;
+  font-weight: 400;
 
 }
 
-.weather img {
-
+p { 
+  font-size: 2.5em;
+  font-weight: 200;
 }
+

index.html

@@ -4,58 +4,73 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dsh</title>
+    <title>Dashboard Widget</title>
 
-    <!-- Favicons -->
-    <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
-    <link rel="manifest" href="favicons/site.webmanifest">
+        <!-- Favicons -->
+        <link rel="shortcut icon" type="image/png" href="favicon/favicon.png">
 
     <!-- Normalize CSS Base -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
     <!-- My Styles -->
     <link rel="stylesheet" href="css/styles.css">
+
     <!-- My Scripts -->
     <script defer src="js/time.js"></script>
     <script defer src="js/date.js"></script>
     <script defer src="js/weather.js"></script>
 
+
+    <!-- Fonts -->
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fira+Sans:wght@300;400;600&display=swap');
+      </style>
+
+
 </head>
 <body>
 
   <main class="layout">
 
     <!-- Time -->
     <section class="time">
+      <h2>🕗</h2>
       <h1>Time</h1>
       <time>
-        <data class="hours">HH</data> :
-        <data class="minutes">MM</data> :
+        <data class="hours">HH</data>
+        <data class="minutes">MM</data> 
         <data class="seconds">SS</data>
         <data class="amOrPM">AM/PM</data>
       </time>
     </section>
 
     <!--  Date -->
     <section class="date">
+      <h2>📅</h2>
      <h1>Date</h1>
     <time>
+    </h3><data class="dayOfWeek">SMTWTFS</data></time><h3>
       <data class="month">Month</data>
-      <data class="dayOfMonth">00</data>,
-      <data class="year">0000</data> -
-      <data class="dayOfWeek">SMTWTFS</data>
+      <data class="dayOfMonth">00</data>
+      <data class="year">0000</data> 
+
     </time>
     </section>
 
     <!-- Weather -->
     <section class="weather">
-    <!--
-      <h1>Weather</h1>
-      <data value="" class="city">City</data>
-      <data value="" class="temp">Temp</data>
-      <img src="https://via.placeholder.com/150" alt="Placeholder">
-     -->
+      <!--
+    <h2>🌧️</h2>
+    <h1>Weather</h1>
+    <data value="${data.name}" class="city">${data.name}</data>
+    <data value="${data.main.temp}" class="temp">${data.main.temp}&#8457;</data>
+
+  <p>rain:
+    <data value="${data.main.rain}" class="rain">${data.main.humidity}</data>
+    %</p>
+  `;
+   -->
+
+
     </section>
 
   </main>  

js/weather.js

@@ -1,7 +1,7 @@
 // API key. Replace with your API key
-const APIKEY = 'f2f85762267ef18d0df71e18ec9f3737';
+const APIKEY = '4566e879fa06c08d441c5de71a0b579e';
 // City
-const city = 'Spokane';
+const city = 'Forks';
 // Units for Farenheit
 const units = 'imperial';
 
@@ -21,13 +21,21 @@ fetch(url)
 
   // Template to output
   const template = `
+  <h2>🌧️</h2>
     <h1>Weather</h1>
-    <data value="${data.name}" class="city">${data.name}</data>
+    <h4><data value="${data.name}" class="city">${data.name}</data></h4>
     <data value="${data.main.temp}" class="temp">${data.main.temp}&#8457;</data>
-    <img src="http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" alt="Placeholder">
+
+  <p>rain:
+    <data value="${data.main.rain}" class="p">${data.main.humidity}</data>%</p>
   `;
 
+
   // Insert dynamic template to container
   weatherContainer.insertAdjacentHTML("afterbegin", template);
 
 });
+
+
+
+