Weather app (#10)

* feat: base class added and api * feat: async method/conversions * feat: added styling and ui * feat: added some colors * feat: project complete
2025-07-17 06:40:36 -04:00 · 2024-01-22 20:59:19 -05:00 · 2024-01-22 20:59:19 -05:00 · 4d2291815a
commit 4d2291815a
parent 8cc79da6d9
13 changed files with 5771 additions and 0 deletions
--- a/weather/src/style.css
+++ b/weather/src/style.css
@ -0,0 +1,159 @@
+:root {
+    --dark-color: hsla(146, 14%, 10%, 0.897);
+    --lgiht-color: hsla(160, 6%, 90%, 0.89);
+    --light-color: hsl(0 0% 90%);
+    --interface-color: rgba(235, 236, 236, 0.726);
+    --font-size: 18px;
+
+    --report-box-shadow: 0px 1px 1px hsl(0deg 0% 0% / 0.075),
+        0px 2px 2px hsl(0deg 0% 0% / 0.075), 0px 4px 4px hsl(0deg 0% 0% / 0.075),
+        0px 8px 8px hsl(0deg 0% 0% / 0.075),
+        0px 16px 16px hsl(0deg 0% 0% / 0.075),
+        0px 32px 32px hsl(0deg 0% 0% / 0.075);
+
+    --title-box-shadow: 0px 2px 2px hsl(0deg 0% 0% / 0.1),
+        0px 4px 4px hsl(0deg 0% 0% / 0.1), 0px 8px 8px hsl(0deg 0% 0% / 0.1);
+}
+
+html,
+body {
+    padding: 0;
+    margin: 0;
+    font-size: var(--font-size);
+    font-family: 'Inter', sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+    font-variation-settings: 'slnt' 0;
+    background-color: var(--interface-color);
+    height: 100vh;
+}
+
+button {
+    border-radius: 0.2rem;
+}
+
+.title {
+    font-size: 3rem;
+    font-weight: 800;
+    text-align: center;
+    margin: 0;
+    background-color: var(--dark-color);
+    color: hsl(146, 30%, 90%);
+    font-family: 'Indie Flower', cursive;
+    box-shadow: var(--title-box-shadow);
+}
+
+.form {
+    display: flex;
+    gap: 10px;
+    padding: 20px;
+    margin: 20px 0;
+}
+
+.form-input {
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+    align-items: center;
+}
+
+.form button {
+    align-self: baseline;
+    flex: 1;
+    height: 42px;
+}
+
+.form-input input {
+    padding: 10px;
+    font-size: 1rem;
+    margin-bottom: 5px;
+    color: var(--dark-color);
+    border: 1px;
+    box-shadow:
+        inset 0 2px 2px hsla(0, 0%, 0%, 0.2),
+        0 2px 0 hsla(0, 0%, 100%, 0.15);
+}
+
+.form-input input:focus {
+    outline: none;
+}
+
+.form-input span {
+    color: hsla(0, 79%, 54%, 0.829);
+    margin-left: 5px;
+}
+
+.form-input span {
+    font-size: 0.8rem;
+}
+
+.btn {
+    font-size: 0.8rem;
+    padding: 10px;
+    background-color: hsl(61.8, 85%, 66.7%);
+    box-shadow:
+        inset 0 1px 0 var(--light-color),
+        0 1px 3px hsla(0, 0%, 0%, 0.2);
+}
+
+.btn:hover {
+    background-color: hsl(62.1, 85%, 78.6%);
+}
+
+.weather-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.report-container {
+    display: none;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+    justify-items: center;
+    align-items: center;
+    padding: 50px;
+    box-shadow: var(--report-box-shadow);
+    border-radius: 1rem;
+    background-color: var(--light-color);
+}
+
+.show-report {
+    display: grid;
+}
+
+.city {
+    grid-column: 1 / span 3;
+}
+
+.temp {
+    grid-column: 1 / span 1;
+    grid-row: 2 / span 1;
+    font-size: 4rem;
+    font-weight: 900;
+}
+
+.icon-img {
+    grid-column: 2 / span 2;
+    grid-row: 2;
+}
+
+/* .conditions { */
+/*     grid-column: 3 / span 1; */
+/*     grid-row: 2 / span 1; */
+/* } */
+.conditions-desc {
+    grid-column: 2 / span 2;
+    grid-row: 3 / span 1;
+    color: hsl(0 0% 30%);
+    align-self: start;
+}
+
+.temp-details-container {
+    grid-row: 3 / span 1;
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+    color: hsl(0 0% 30%);
+}