Cursos Empresas Blog Live Conf Eventos Precios

0:0061:08

Fixeando bugs y agregando el mapa

#PlatziChallenge: Crea tu Portafolio como Web Developer

Clase 16 / 22

Ver clases

Fixeando bugs y agregando el mapa

#PlatziChallenge: Crea tu Portafolio como Web Developer

Clase 16 de 22

Clase 16 / 22

Fixeando bugs y agregando el mapa

#PlatziChallenge: Crea tu Portafolio como Web Developer

Clase 16 / 22

Ver clases

Comentarios

Juan Diaz#3783444
Repo
Ivan Castellanos#3871266
profee, ya vino su peor estudiante xd

Web: https://ivantdev.github.io/weather-app/ Repo: https://github.com/ivantdev/weather-app Inspiración:
- https://dribbble.com/shots/17097005-Weather-Forecast-App-Concept
- https://dribbble.com/shots/15292603-Weather-Conceptual-App-Design
Me iba costando un poco lo de ubicar en el mapa con la localización del usuario, me dio muchos problemas la API de getCurrentPosition. Agregar que en iOS cuando no tienes conexión HTTPS te rechaza de una lo de pedir localización. Para evitar que se cargaran datos por defecto (definidos por mi) usé una API para obtener la latitud y longitod en base a la IP del usuario.

Así se ve el Light mode

Dark mode

Julian Franco#3803232

Código con date

useCurrentDay

export const getCurrentDay = (dayNumber) => {
	const today = new Date();
    if(dayNumber){
        const tomorrow = new Date(today);
        tomorrow.setDate(tomorrow.getDate() + dayNumber);
        return tomorrow
    }
	return today;
};

ListDay

<ul className={style.daily}>
			{weather.daily.map((day, index) => (
				<Day key={day.dt} {...day} index={index} />
			))}
		</ul>

Day

const date = getCurrentDay(index + 1);

	return (
		<li className={style.day}>
			<h3>{temp.max}</h3>
			<img src='' alt='image'></img>
			<h4>{weather[0].main}</h4>
			<p>{date.toDateString()}</p>
		</li>
	);

Comentarios

Juan Diaz#3783444

Repo

Ivan Castellanos#3871266

profee, ya vino su peor estudiante xd

Web: https://ivantdev.github.io/weather-app/ Repo: https://github.com/ivantdev/weather-app Inspiración:

Me iba costando un poco lo de ubicar en el mapa con la localización del usuario, me dio muchos problemas la API de getCurrentPosition. Agregar que en iOS cuando no tienes conexión HTTPS te rechaza de una lo de pedir localización. Para evitar que se cargaran datos por defecto (definidos por mi) usé una API para obtener la latitud y longitod en base a la IP del usuario.

Así se ve el Light mode

Dark mode

Julian Franco#3803232

Código con date

useCurrentDay

export const getCurrentDay = (dayNumber) => {
	const today = new Date();
    if(dayNumber){
        const tomorrow = new Date(today);
        tomorrow.setDate(tomorrow.getDate() + dayNumber);
        return tomorrow
    }
	return today;
};

ListDay

<ul className={style.daily}>
			{weather.daily.map((day, index) => (
				<Day key={day.dt} {...day} index={index} />
			))}
		</ul>

Day

const date = getCurrentDay(index + 1);

	return (
		<li className={style.day}>
			<h3>{temp.max}</h3>
			<img src='' alt='image'></img>
			<h4>{weather[0].main}</h4>
			<p>{date.toDateString()}</p>
		</li>
	);

export const getCurrentDay = (dayNumber) => {
	const today = new Date();
    if(dayNumber){
        const tomorrow = new Date(today);
        tomorrow.setDate(tomorrow.getDate() + dayNumber);
        return tomorrow
    }
	return today;
};

const date = getCurrentDay(index + 1);

	return (
		<li className={style.day}>
			<h3>{temp.max}</h3>
			<img src='' alt='image'></img>
			<h4>{weather[0].main}</h4>
			<p>{date.toDateString()}</p>
		</li>
	);

Comentarios (3)3 comentarios

Juan Diaz

Hace 4 años

Misael Gomez

dirección de react leaflet https://react-leaflet.js.org/

Ivan Castellanos

Leonardo de los angeles Espinoza Hernandez

Cómo que peor estudiante? 😱

Si tus proyectos están quedando increíbles, te tomaste lo de llevarlos al siguiente nivel muy enserió 💪🏻🔥

sigue así!

Julian Franco

Fixeando bugs y agregando el mapa

Fixeando bugs y agregando el mapa

Fixeando bugs y agregando el mapa

Progreso del curso

Fase 1: HTML y CSS

Fase 2: JavaScript

Fase 3: React.js

Comentarios

Repo

Fixeando bugs y agregando el mapa

Fixeando bugs y agregando el mapa

Comentarios

Repo