smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-26 14:20:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: added some colors

Browse source
This commit is contained in:
Mike 2024-01-21 00:22:26 -05:00
parent 1f27ae6045
commit a1973d1d55
3 changed files with 17 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
weather/src/components/website.js
View file

@ -15,7 +15,7 @@ class MainWebsite {
const title = document.createElement('h1'); const title = document.createElement('h1');
title.classList.add('title'); title.classList.add('title');
title.textContent = 'Weather'; title.textContent = 'How is it outside?';
// Add form to container // Add form to container
this.container.append(title, this.weatherDiv); this.container.append(title, this.weatherDiv);
@ -184,7 +184,6 @@ class MainWebsite {
// convert the F and C temps // convert the F and C temps
weatherReportData.convertTemp('C'); weatherReportData.convertTemp('C');
weatherReportData.convertTemp('F'); weatherReportData.convertTemp('F');
console.table(weatherReportData);
reportUpdater.updateReportText(this.reportCity, weatherReportData.city); reportUpdater.updateReportText(this.reportCity, weatherReportData.city);
reportUpdater.updateReportText( reportUpdater.updateReportText(

2
weather/src/index.js
View file

@ -17,7 +17,7 @@ function fonts() {
let style = document.createElement('link'); let style = document.createElement('link');
style.rel = 'stylesheet'; style.rel = 'stylesheet';
style.href = style.href =
'https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'; 'https://fonts.googleapis.com/css2?family=Indie+Flower&family=Inter:wght@100..900&display=swap';
document.head.appendChild(fontLink); document.head.appendChild(fontLink);
document.head.appendChild(fontLinkTwo); document.head.appendChild(fontLinkTwo);

20
weather/src/style.css
View file

@ -1,5 +1,7 @@
:root { :root {
--dark-color: #000; --dark-color: hsla(146, 14%, 10%, 0.897);
--lgiht-color: hsla(160, 6%, 90%, 0.89);
--interface-color: rgba(235, 236, 236, 0.726);
--font-size: 18px; --font-size: 18px;
} }
@ -10,9 +12,11 @@ body {
font-size: var(--font-size); font-size: var(--font-size);
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
font-optical-sizing: auto; font-optical-sizing: auto;
font-weight: <weight>; font-weight: 400;
font-style: normal; font-style: normal;
font-variation-settings: 'slnt' 0; font-variation-settings: 'slnt' 0;
background-color: var(--interface-color);
height: 100vh;
} }
.title { .title {
@ -20,6 +24,9 @@ body {
font-weight: 800; font-weight: 800;
text-align: center; text-align: center;
margin: 0; margin: 0;
background-color: var(--dark-color);
color: var(--lgiht-color);
font-family: 'Indie Flower', cursive;
} }
.form { .form {
@ -33,12 +40,13 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: auto; margin: auto;
align-items: center;
} }
.form button { .form button {
align-self: baseline; align-self: baseline;
flex: 1; flex: 1;
height: 41px; height: 46px;
} }
.form-input input { .form-input input {
@ -48,7 +56,7 @@ body {
} }
.form-input span { .form-input span {
color: red; color: hsla(0, 79%, 54%, 0.829);
margin-left: 5px; margin-left: 5px;
} }
@ -65,11 +73,13 @@ body {
.report-container { .report-container {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 20px;
justify-items: center;
align-items: center;
} }
.city { .city {
grid-column: 1 / span 3; grid-column: 1 / span 3;
place-self: center;
} }
.temp { .temp {