Skip to content
Snippets Groups Projects
Commit fe97f456 authored by francoisdillinger's avatar francoisdillinger
Browse files

styled forecasts and created svg components

parent f5ab7aae
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/SvgDayTemp.js 0 → 100644
+ 30
− 0
View file @ fe97f456
import * as React from "react";
const SvgDayTemp = (props) => {
return(
<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" xmlSpace="preserve" style={{fillRule:"evenodd", clipRule:"evenodd", strokeLinecap:"round", strokeLinejoin:"round"}}>
<g transform="matrix(2.57801,0,0,2.57801,-68.0147,-453.02)">
<g transform="matrix(54.1785,0,0,54.1785,182.463,369.702)">
</g>
<text x="69.447px" y="369.702px" style={{fontFamily:"'Sanchez-Regular', 'Sanchez '", fontSize:"54.178px"}}>{props.dayTemp}<tspan x="136.141px " y="369.702px ">°</tspan>F</text>
</g>
<g transform="matrix(7.24492,0,0,7.24492,24.1626,-52.5182)">
<circle cx="32" cy="32" r="10.5" style={{fill:"url(#_Linear1)", stroke:"rgb(248,175,24)", strokeWidth:"0.5px"}}/>
</g>
<g transform="matrix(7.24492,0,0,7.24492,24.1626,-52.5182)">
<path d="M32,15.71L32,9.5M32,54.5L32,48.29M43.52,20.48L47.91,16.09M16.09,47.91L20.48,43.52M20.48,20.52L16.09,16.13M47.91,47.91L43.52,43.52M15.71,32L9.5,32M54.5,32L48.29,32" style={{fill:"none", fillRule:"nonzero", stroke:"rgb(251,191,36)", strokeWidth:"3px", strokeLinecap:"round"}}>
<animateTransform attributeName="transform" dur="45s" values="0 32 32; 360 32 32" repeatCount="indefinite" type="rotate"/>
</path>
</g>
<defs>
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(10.5,18.18,-18.18,10.5,26.75,22.91)">
<stop offset="0" style={{stopColor:"rgb(251,191,36)", stopOpacity:1}}/>
<stop offset="0.45" style={{stopColor:"rgb(251,191,36)", stopOpacity:1}}/>
<stop offset="1" style={{stopColor:"rgb(245,158,11)", stopOpacity:1}}/>
</linearGradient>
</defs>
</svg>
);
}
export default SvgDayTemp;
\ No newline at end of file
frontend/src/forecastCollection.js
+ 5
− 5
View file @ fe97f456
import * as React from "react";
import { useState, useEffect} from 'react';
import SvgNightTemp from './svgNightTemp';
import SvgNightTemp from "./SvgNightTemp";
import SvgDayTemp from "./SvgDayTemp";
const ForecastCollection = (props) => {
const [forecast, setForecast] = useState(null);
......@@ -31,9 +31,9 @@ const ForecastCollection = (props) => {
<div className="forecast-days">
{forecast.list.map((day, index) => (
<div key={index} className="forecasted-day">
<p>{new Date(day.dt * 1000).toLocaleDateString('en-US', { weekday: 'long' })}</p>
<p style={{fontFamily:"'Sans-Mateo-Medium', 'Sanchez '", fontSize:'1.5em'}}>{new Date(day.dt * 1000).toLocaleDateString('en-US', { weekday: 'long' })}</p>
<img src={`${process.env.PUBLIC_URL}/weatherIconsFill/${day.weather[0].icon}.svg`} alt="weather icon" />
<p>{day.weather[0].main}</p>
<p style={{fontFamily:"'Sans-Mateo-Regular', 'Sanchez '", fontSize:'1.5em'}}>{day.weather[0].main}</p>
{/* <img src={`${process.env.PUBLIC_URL}/weatherIconsFill/time-morning.svg`} alt="weather icon" />
<p>{day.temp.morn.toFixed(0)}&deg;F</p> */}
{/* <img src={`${process.env.PUBLIC_URL}/weatherIconsFill/time-afternoon.svg`} alt="weather icon" /> */}
......@@ -42,7 +42,7 @@ const ForecastCollection = (props) => {
{/* <p>{day.temp.eve.toFixed(0)}&deg;F</p> */}
{/* <img src={`${process.env.PUBLIC_URL}/weatherIconsFill/time-night-2.svg`} alt="weather icon" />
<p>{day.temp.night.toFixed(0)}&deg;F</p> */}
<SvgNightTemp nightTemp={day.temp.night.toFixed(0)}/>
<SvgDayTemp dayTemp={day.temp.day.toFixed(0)}/>
<SvgNightTemp nightTemp={day.temp.night.toFixed(0)}/>
</div>
......
frontend/src/svgNightTemp.js
+ 12
− 5
View file @ fe97f456
......@@ -10,16 +10,21 @@ const SvgNightTemp = (props) => {
</text>
</g>
<g transform="matrix(1.54711,0,0,1.54711,-184.903,-159.875)">
<path d="M282.8,162.8L307.8,156.4C308.414,156.257 309.061,156.447 309.5,156.9L327.8,174.9C328.135,175.221 328.581,175.4 329.045,175.4C330.032,175.4 330.845,174.587 330.845,173.6C330.845,173.465 330.83,173.331 330.8,173.2L324.4,148.2C324.257,147.586 324.447,146.939 324.9,146.5L342.9,128.1C343.243,127.762 343.436,127.3 343.436,126.818C343.436,125.831 342.624,125.018 341.636,125.018C341.454,125.018 341.274,125.046 341.1,125.1L316.2,131.6C315.586,131.743 314.939,131.553 314.5,131.1L296.1,113.1C295.765,112.779 295.319,112.6 294.855,112.6C293.868,112.6 293.055,113.413 293.055,114.4C293.055,114.535 293.07,114.669 293.1,114.8L299.6,139.8C299.743,140.414 299.553,141.061 299.1,141.5L281.1,159.8C280.779,160.135 280.6,160.581 280.6,161.045C280.6,162.032 281.413,162.845 282.4,162.845C282.535,162.845 282.669,162.83 282.8,162.8Z" fill="url(#_Linear1)" fillRule="nonzero" stroke="rgb(252,211,77)" strokeWidth="2"/>
<path d="M282.8,162.8L307.8,156.4C308.414,156.257 309.061,156.447 309.5,156.9L327.8,174.9C328.135,175.221 328.581,175.4 329.045,175.4C330.032,175.4 330.845,174.587 330.845,173.6C330.845,173.465 330.83,173.331 330.8,173.2L324.4,148.2C324.257,147.586 324.447,146.939 324.9,146.5L342.9,128.1C343.243,127.762 343.436,127.3 343.436,126.818C343.436,125.831 342.624,125.018 341.636,125.018C341.454,125.018 341.274,125.046 341.1,125.1L316.2,131.6C315.586,131.743 314.939,131.553 314.5,131.1L296.1,113.1C295.765,112.779 295.319,112.6 294.855,112.6C293.868,112.6 293.055,113.413 293.055,114.4C293.055,114.535 293.07,114.669 293.1,114.8L299.6,139.8C299.743,140.414 299.553,141.061 299.1,141.5L281.1,159.8C280.779,160.135 280.6,160.581 280.6,161.045C280.6,162.032 281.413,162.845 282.4,162.845C282.535,162.845 282.669,162.83 282.8,162.8Z" fill="url(#_Linear1)" fillRule="nonzero" stroke="rgb(252,211,77)" strokeWidth="2">
<animate attributeName="opacity" values="1; 0; 1" dur="3s" repeatCount="indefinite"/>
</path>
</g>
<g transform="matrix(1.54711,0,0,1.54711,-184.903,-159.875)">
<path d="M285.4,193.4L297.4,205.7C297.679,205.992 297.792,206.407 297.7,206.8L293.4,223.4C293.364,223.516 293.346,223.636 293.346,223.757C293.346,224.416 293.887,224.957 294.546,224.957C294.867,224.957 295.175,224.829 295.4,224.6L307.7,212.6C307.992,212.321 308.407,212.208 308.8,212.3L325.4,216.6C325.516,216.636 325.636,216.654 325.757,216.654C326.416,216.654 326.957,216.113 326.957,215.454C326.957,215.133 326.829,214.825 326.6,214.6L314.6,202.3C314.321,202.008 314.208,201.593 314.3,201.2L318.6,184.6C318.636,184.484 318.654,184.364 318.654,184.243C318.654,183.584 318.113,183.043 317.454,183.043C317.133,183.043 316.825,183.171 316.6,183.4L304.3,195.4C304.008,195.679 303.593,195.792 303.2,195.7L286.5,191.4C286.426,191.386 286.35,191.379 286.275,191.379C285.617,191.379 285.075,191.92 285.075,192.579C285.075,192.884 285.191,193.178 285.4,193.4Z" fill="url(#_Linear2)" fillRule="nonzero" stroke="rgb(252,211,77)" strokeWidth="2" />
<path d="M285.4,193.4L297.4,205.7C297.679,205.992 297.792,206.407 297.7,206.8L293.4,223.4C293.364,223.516 293.346,223.636 293.346,223.757C293.346,224.416 293.887,224.957 294.546,224.957C294.867,224.957 295.175,224.829 295.4,224.6L307.7,212.6C307.992,212.321 308.407,212.208 308.8,212.3L325.4,216.6C325.516,216.636 325.636,216.654 325.757,216.654C326.416,216.654 326.957,216.113 326.957,215.454C326.957,215.133 326.829,214.825 326.6,214.6L314.6,202.3C314.321,202.008 314.208,201.593 314.3,201.2L318.6,184.6C318.636,184.484 318.654,184.364 318.654,184.243C318.654,183.584 318.113,183.043 317.454,183.043C317.133,183.043 316.825,183.171 316.6,183.4L304.3,195.4C304.008,195.679 303.593,195.792 303.2,195.7L286.5,191.4C286.426,191.386 286.35,191.379 286.275,191.379C285.617,191.379 285.075,191.92 285.075,192.579C285.075,192.884 285.191,193.178 285.4,193.4Z" fill="url(#_Linear2)" fillRule="nonzero" stroke="rgb(252,211,77)" strokeWidth="2">
<animate attributeName="opacity" values="0; 1; 0" dur="4s" repeatCount="indefinite"/>
</path>
</g>
<g transform="matrix(1.54711,0,0,1.54711,-184.903,-159.875)">
<path
d="M337.3,223.7L362.1,230.7C362.713,230.845 363.207,231.301 363.4,231.9L370.3,256.7C370.551,257.422 371.236,257.908 372,257.908C372.764,257.908 373.449,257.422 373.7,256.7L380.7,231.9C380.845,231.287 381.301,230.793 381.9,230.6L406.7,223.7C407.422,223.449 407.908,222.764 407.908,222C407.908,221.236 407.422,220.551 406.7,220.3L381.9,213.3C381.287,213.155 380.793,212.699 380.6,212.1L373.7,187.3C373.449,186.578 372.764,186.092 372,186.092C371.236,186.092 370.551,186.578 370.3,187.3L363.3,212.1C363.155,212.713 362.699,213.207 362.1,213.4L337.3,220.3C336.578,220.551 336.092,221.236 336.092,222C336.092,222.764 336.578,223.449 337.3,223.7Z"
style={{ fill: 'url(#_Linear3)', fillRule: 'nonzero', stroke: 'rgb(252,211,77)', strokeWidth: '2px' }}
/>
style={{ fill: 'url(#_Linear3)', fillRule: 'nonzero', stroke: 'rgb(252,211,77)', strokeWidth: '2px' }}>
<animate attributeName="opacity" values="1; 0; 1" dur="4s" repeatCount="indefinite"/>
</path>
</g>
<g id="e" transform="matrix(1.54711,0,0,1.54711,62.2641,56.3496)">
<path d="M179.7,120.2C127.659,120.475 84.583,77.94 84.2,25.9C84.212,17.9 85.254,9.934 87.3,2.2C39.423,7.175 2.55,47.866 2.3,96C2.683,148.04 45.759,190.575 97.8,190.3C142.3,190.3 179.6,160.3 190.2,119.7C186.713,120.087 183.208,120.287 179.7,120.3"
......@@ -28,7 +33,9 @@ const SvgNightTemp = (props) => {
fillRule: "nonzero",
stroke: "rgb(114,185,213)",
strokeWidth: "4.5px",
}} />
}} >
<animateTransform attributeName="transform" type="rotate" values="-5 32 32; 15 32 32; -5 32 32" dur="10s" repeatCount="indefinite"/>
</path>
</g>
<defs>
<linearGradient
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment