Commit b48e7cf8 authored by LAFORÊT Nicolas's avatar LAFORÊT Nicolas 🐇
Browse files

PWA application & 📝 README

parent eb8dbeef
REACT_APP_API_KEY=ea1e6033f2c30a0e6663de1736e13682
\ No newline at end of file
# PWA TP Noté - Laforêt Nicolas
> Live at: [http://awake-steel.surge.sh/](http://awake-steel.surge.sh/)
## App
![Application screenshot](./assets/app.png)
## Lighthouse
![Lighthouse screenshot](./assets/lighthouse.png)
\ No newline at end of file
......@@ -21,7 +21,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>PWA TP - Laforet Nicolas</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
......
{
"short_name": "PWA TP",
"name": "PWA TP Noté - Laforet",
"name": "PWA TP Noté - Laforet Nicolas",
"icons": [
{
"src": "favicon.ico",
......
import React from 'react';
/*
Pour rendre l'application production-ready,
il faut mettre l'API key dans un fichier .env à la racine du projet,
ce qui est fait ici.
*/
import React, { useEffect, useState } from 'react';
import './App.css';
function App() {
const [state, setState] = useState({
name: 'Strasbourg',
weather: [{ main: 'Nuageux', description: 'nuageux', icon: '04n' }],
main: {
temp: 25,
feels_like: 20,
}
});
useEffect(() => {
fetch(`http://api.openweathermap.org/data/2.5/weather?q=${state.name}&APPID=${process.env.REACT_APP_API_KEY}&units=metric&lang=fr`)
.then(res => res.json())
.then(data => setState({
name: data.name,
weather: data.weather,
main: data.main
}));
}, [state.name])
return (
<div className="flex justify-center">
<div className="text-white">
<div className="w-128 max-w-lg font-sans overflow-hidden bg-gray-900 shadow-lg" >
<div className="flex items-center justify-between px-6 py-8"><div className="flex items-center">
<div>
<div className="text-6xl font-semibold">8°C</div>
<div>Feels like 2°C</div>
<div className="flex items-center justify-between px-6 py-8">
<div className="flex items-center">
<div>
<div className="text-6xl font-semibold">{state.main.temp}°C</div>
<div>Feels like {state.main.feels_like}°C</div>
</div>
<div className="mx-5">
<div className="font-semibold capitalize">{state.weather.length ? state.weather[0].description : 'Not available'}</div>
<div>{state.name}</div>
</div>
</div>
<div className="mx-5">
<div className="font-semibold">Cloudy</div>
<div>Toronto, Canada</div>
<div>
{
state.weather.length &&
<img alt={`${state.weather[0].description} icon`} src={`http://openweathermap.org/img/wn/${state.weather[0].icon}@2x.png`} />
}
</div>
</div>
<div>ICON</div>
</div>
<div className="text-sm bg-gray-800 overflow-hidden"> {[1, 2, 3, 4, 5].map((value, index) => (
<div className="flex items-center px-6 py-4" // className:bg-gray-700={index % 2}
<div key={index} className="flex items-center px-6 py-4" // className:bg-gray-700={index % 2}
>
<div className="w-1/6 text-lg text-gray-200">DOW : {value}</div>
<div className="flex items-center w-2/3 px-4">
......
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
......@@ -15,7 +15,7 @@ ReactDOM.render(
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
serviceWorkerRegistration.unregister();
serviceWorkerRegistration.register();
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
......
Supports Markdown
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