├── .env.local.template
├── .gitignore
├── .github
    ├── CODEOWNERS
    ├── PULL_REQUEST_TEMPLATE.md
    ├── workflows
    │   └── main.yml
    └── ISSUE_TEMPLATE.md
├── vite.config.js
├── src
    ├── components
    │   ├── Loader.jsx
    │   ├── Description.css
    │   ├── Loader.css
    │   ├── Description.jsx
    │   ├── WeatherData.jsx
    │   ├── LocationToCoordinates.jsx
    │   ├── WeatherForm.css
    │   ├── WeatherForm.jsx
    │   ├── WeatherCard.css
    │   ├── WeahterDescript.jsx
    │   ├── useApiRequests.jsx
    │   ├── PromptToLocation.jsx
    │   └── WeatherCard.jsx
    ├── main.jsx
    ├── App.css
    ├── index.css
    ├── App.jsx
    └── assets
    │   └── react.svg
├── index.html
├── .eslintrc.cjs
├── CONTRIBUTING.md
├── NOTICE
├── package.json
├── .devcontainer
    └── devcontainer.json
├── .vscode
    └── settings.json
├── public
    └── vite.svg
├── README.md
└── LICENSE


/.env.local.template:
--------------------------------------------------------------------------------
1 | VITE_OPENAI=[Your OpenAI API Key]
2 | VITE_OWM=[Your Open Weather Map API Key]


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | dist
3 | node_modules
4 | .tmp
5 | npm-debug.log
6 | .env.local
7 | .env


--------------------------------------------------------------------------------
/.github/CODEOWNERS:
--------------------------------------------------------------------------------
1 | # Codeowners for these exercise files:
2 | # * (asterisk) deotes "all files and folders"
3 | # Example: * @producer @instructor
4 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | <!-- This repository *does not* accept pull requests (PRs). All pull requests will be closed. See CONTRIBUTING.md for further details. -->
2 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react-swc'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/src/components/Loader.jsx:
--------------------------------------------------------------------------------
 1 | import "./Loader.css";
 2 | 
 3 | function Loader() {
 4 |   return (
 5 |     <div className="loader">
 6 |       <p>Loading...</p>
 7 |     </div>
 8 |   );
 9 | }
10 | 
11 | export default Loader;
12 | 


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App.jsx'
 4 | import './index.css'
 5 | 
 6 | ReactDOM.createRoot(document.getElementById('root')).render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/src/components/Description.css:
--------------------------------------------------------------------------------
 1 | .description__divider {
 2 |   display: grid;
 3 |   grid-template-rows: 1fr;
 4 |   grid-template-columns: 1fr;
 5 |   padding: 0.6rem 1.6rem;
 6 |   border: 3px solid currentColor;
 7 |   border-radius: 1rem;
 8 | }
 9 | 
10 | .description__text {
11 |   grid-row: 1/-1;
12 |   grid-column: 1/-1;
13 |   font-size: 1.3rem;
14 | }


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: Copy To Branches
 2 | on:
 3 |   workflow_dispatch:
 4 | jobs:
 5 |   copy-to-branches:
 6 |     runs-on: ubuntu-latest
 7 |     steps:
 8 |       - uses: actions/checkout@v2
 9 |         with:
10 |           fetch-depth: 0
11 |       - name: Copy To Branches Action
12 |         uses: planetoftheweb/copy-to-branches@v1.2
13 |         env:
14 |           key: main
15 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + React</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.jsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: { browser: true, es2020: true },
 3 |   extends: [
 4 |     'eslint:recommended',
 5 |     'plugin:react/recommended',
 6 |     'plugin:react/jsx-runtime',
 7 |     'plugin:react-hooks/recommended',
 8 |   ],
 9 |   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
10 |   settings: { react: { version: '18.2' } },
11 |   plugins: ['react-refresh'],
12 |   rules: {
13 |     'react-refresh/only-export-components': 'warn',
14 |   },
15 | }
16 | 


--------------------------------------------------------------------------------
/src/components/Loader.css:
--------------------------------------------------------------------------------
 1 | .loader {
 2 |   grid-row: 1/-1;
 3 |   grid-column: 1/-1;
 4 |   background: hsl(0, 0%, 95%);
 5 |   display: flex;
 6 |   justify-content: center;
 7 |   align-items: center;
 8 |   z-index: 1;
 9 | }
10 | 
11 | .loader p {
12 |   font-size: 3rem;
13 |   font-weight: 200;
14 |   animation: blink 0.6s infinite;
15 | }
16 | 
17 | @keyframes blink {
18 |   0% {
19 |     opacity: 0.3;
20 |   }
21 |   50% {
22 |     opacity: 1;
23 |   }
24 |   100% {
25 |     opacity: 0.3;
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | #root {
 2 |   margin: 4rem;
 3 | }
 4 | 
 5 | .container {
 6 |   width: 100%;
 7 |   height: 100%;
 8 |   display: grid;
 9 |   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
10 |   gap: 4rem;
11 | }
12 | 
13 | .header {
14 |   box-sizing: border-box;
15 |   display: flex;
16 |   flex-direction: column;
17 |   width: 100%;
18 |   height: 100%;
19 |   padding: 2rem;
20 |   border-radius: 1rem;
21 |   background: hsl(0, 0%, 95%);
22 | }
23 | 
24 | .page-title {
25 |   font-size: 4rem;
26 |   font-weight: 100;
27 |   margin: 1rem 0 2rem;
28 |   text-align: center;
29 | }
30 | 
31 | .main-content {
32 |   width: 100%;
33 | }
34 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | 
2 | Contribution Agreement
3 | ======================
4 | 
5 | This repository does not accept pull requests (PRs). All pull requests will be closed.
6 | 
7 | However, if any contributions (through pull requests, issues, feedback or otherwise) are provided, as a contributor, you represent that the code you submit is your original work or that of your employer (in which case you represent you have the right to bind your employer). By submitting code (or otherwise providing feedback), you (and, if applicable, your employer) are licensing the submitted code (and/or feedback) to LinkedIn and the open source community subject to the BSD 2-Clause license.
8 | 


--------------------------------------------------------------------------------
/NOTICE:
--------------------------------------------------------------------------------
 1 | Copyright 2023 LinkedIn Corporation
 2 | All Rights Reserved.
 3 | 
 4 | Licensed under the LinkedIn Learning Exercise File License (the "License").
 5 | See LICENSE in the project root for license information.
 6 | 
 7 | Please note, this project may automatically load third party code from external 
 8 | repositories (for example, NPM modules, Composer packages, or other dependencies). 
 9 | If so, such third party code may be subject to other license terms than as set 
10 | forth above. In addition, such third party code may also depend on and load 
11 | multiple tiers of dependencies. Please review the applicable licenses of the 
12 | additional dependencies.
13 | 


--------------------------------------------------------------------------------
/src/components/Description.jsx:
--------------------------------------------------------------------------------
 1 | import PropTypes from "prop-types";
 2 | import "./Description.css";
 3 | import Loader from "./Loader";
 4 | 
 5 | const Description = ({ isLoading, weatherDescription }) => {
 6 |   return (
 7 |     <div className="description">
 8 |       <h2 className="description__title">Description</h2>
 9 |       <div className="description__divider">
10 |         {isLoading && <Loader />}
11 |         <p className="description__text">{weatherDescription}</p>
12 |       </div>
13 |     </div>
14 |   );
15 | };
16 | Description.defaultProps = {
17 |   weatherDescription: "Waiting for location data.",
18 | };
19 | 
20 | Description.propTypes = {
21 |   weatherDescription: PropTypes.string,
22 | };
23 | 
24 | export default Description;
25 | 


--------------------------------------------------------------------------------
/src/components/WeatherData.jsx:
--------------------------------------------------------------------------------
 1 | import PropTypes from "prop-types";
 2 | 
 3 | // Fetch weather data from OpenWeatherMap API.
 4 | const WeatherData = async (locationData) => {
 5 |   try {
 6 |     const response = await fetch(
 7 |       `https://api.openweathermap.org/data/2.5/weather?lat=${
 8 |         locationData[0].lat
 9 |       }&lon=${locationData[0].lon}&APPID=${import.meta.env.VITE_OWM}`
10 |     );
11 |     const weatherData = await response.json();
12 |     return weatherData;
13 |   } catch (error) {
14 |     console.error("Error:", error);
15 |     return await Promise.reject("Unable to fetch weather data.");
16 |   }
17 | };
18 | 
19 | WeatherData.propTypes = {
20 |   locationData: PropTypes.string.isRequired,
21 | };
22 | 
23 | export default WeatherData;
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "weatherchat",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite --host",
 8 |     "build": "vite build",
 9 |     "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "react": "^18.2.0",
14 |     "react-dom": "^18.2.0"
15 |   },
16 |   "devDependencies": {
17 |     "@types/react": "^18.0.37",
18 |     "@types/react-dom": "^18.0.11",
19 |     "@vitejs/plugin-react-swc": "^3.0.0",
20 |     "eslint": "^8.38.0",
21 |     "eslint-plugin-react": "^7.32.2",
22 |     "eslint-plugin-react-hooks": "^4.6.0",
23 |     "eslint-plugin-react-refresh": "^0.3.4",
24 |     "vite": "^4.3.9"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/components/LocationToCoordinates.jsx:
--------------------------------------------------------------------------------
 1 | import PropTypes from "prop-types";
 2 | 
 3 | // Fetch location data from OpenWeatherMap API.
 4 | const LocationToCoordinates = async (locationString) => {
 5 |   try {
 6 |     const response = await fetch(
 7 |       `https://api.openweathermap.org/geo/1.0/direct?q=${locationString}&limit=1&APPID=${
 8 |         import.meta.env.VITE_OWM
 9 |       }`
10 |     );
11 |     const locationData = await response.json();
12 |     if (locationData.length === 0) {
13 |       throw new Error("No location by that name. Try again.");
14 |     }
15 |     return locationData;
16 |   } catch (error) {
17 |     console.error("Error:", error);
18 |     return await Promise.reject(error);
19 |   }
20 | };
21 | 
22 | LocationToCoordinates.propTypes = {
23 |   location: PropTypes.string.isRequired,
24 | };
25 | 
26 | export default LocationToCoordinates;
27 | 


--------------------------------------------------------------------------------
/.devcontainer/devcontainer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extensions": [
 3 |     "GitHub.github-vscode-theme",
 4 |     "esbenp.prettier-vscode",
 5 |     "dbaeumer.vscode-eslint",
 6 |     "ritwickdey.LiveServer",
 7 |     "stylelint.vscode-stylelint"
 8 |     // Additional Extensions Here
 9 |   ],
10 |   "onCreateCommand": "echo PS1='\"$ \"' >> ~/.bashrc", //Set Terminal Prompt to $
11 |   "postAttachCommand": "git pull --all",
12 | 
13 |   // Trigger actions on ports. More info: https://containers.dev/implementors/json_reference/#port-attributes
14 |   "portsAttributes": {
15 |     "5173": {
16 |       "label": "Vite port"
17 |       // "onAutoForward": "openBrowser"
18 |     }
19 |   },
20 |   // Use 'forwardPorts' to make a list of ports inside the container available locally.
21 |   "forwardPorts": [5173]
22 | }
23 | 
24 | // DevContainer Reference: https://code.visualstudio.com/docs/remote/devcontainerjson-reference
25 | 


--------------------------------------------------------------------------------
/src/components/WeatherForm.css:
--------------------------------------------------------------------------------
 1 | .locationform {
 2 |   display: flex;
 3 |   flex-direction: column;
 4 |   align-items: center;
 5 |   margin-top: 20px;
 6 |   height: 100%;
 7 |   justify-content: space-evenly;
 8 |   margin-block-start: 0;
 9 | }
10 | 
11 | .locationform__elements {
12 |   display: flex;
13 |   flex-direction: column;
14 |   align-items: center;
15 |   margin-bottom: 10px;
16 | }
17 | 
18 | .locationform__elements label {
19 |   font-size: 1.2rem;
20 |   margin-bottom: 5px;
21 | }
22 | 
23 | .locationform__elements input[type="text"] {
24 |   padding: 1rem;
25 |   border-radius: 0.5rem;
26 |   border: 1px solid #ccc;
27 |   margin-block: 0.5rem 1rem;
28 |   font-size: 1.2rem;
29 | }
30 | 
31 | .locationform__elements input[type="submit"] {
32 |   padding: 0.8rem 1.4rem;
33 |   font-size: 1.2rem;
34 |   border-radius: 5px;
35 |   border: none;
36 |   background-color: #0077ff;
37 |   color: #fff;
38 |   cursor: pointer;
39 | }
40 | 
41 | .error {
42 |   color: red;
43 |   margin-top: 10px;
44 | }
45 | 
46 | .instructions {
47 |   font-size: 0.8rem;
48 |   margin-top: 10px;
49 | }
50 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "editor.bracketPairColorization.enabled": true,
 3 |   "editor.cursorBlinking": "solid",
 4 |   "editor.fontFamily": "ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace",
 5 |   "editor.fontLigatures": false,
 6 |   "editor.fontSize": 22,
 7 |   "editor.formatOnPaste": true,
 8 |   "editor.formatOnSave": true,
 9 |   "editor.defaultFormatter": "esbenp.prettier-vscode",
10 |   "editor.lineNumbers": "on",
11 |   "editor.matchBrackets": "always",
12 |   "editor.minimap.enabled": false,
13 |   "editor.smoothScrolling": true,
14 |   "editor.tabSize": 2,
15 |   "editor.useTabStops": true,
16 |   "emmet.triggerExpansionOnTab": true,
17 |   "explorer.openEditors.visible": 0,
18 |   "files.autoSave": "afterDelay",
19 |   "screencastMode.onlyKeyboardShortcuts": true,
20 |   "terminal.integrated.fontSize": 18,
21 |   "workbench.activityBar.visible": true,
22 |   "workbench.colorTheme": "Visual Studio Dark",
23 |   "workbench.fontAliasing": "antialiased",
24 |   "workbench.statusBar.visible": true
25 | }
26 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 | BEFORE POSTING YOUR ISSUE:
 3 | - These comments won't show up when you submit the issue.
 4 | - Please use the sections below to provide information about the issue.
 5 | - Be specific: Add as much detail as possible.
 6 | -->
 7 | 
 8 | ## Issue Overview
 9 | <!-- A brief overview of the issue --->
10 | 
11 | ## Describe your environment
12 | <!-- Provide details about your environment: what editor, browser, and other software you are using and any other specifics to your setup -->
13 | 
14 | ## Steps to Reproduce
15 | <!-- Provide an unambiguous set of steps to reproduce this bug. Include code to reproduce, if relevant. Include a live link if available. -->
16 | 1.
17 | 2.
18 | 3.
19 | 4.
20 | 
21 | ## Expected Behavior
22 | <!-- What behavior did you expect? -->
23 | 
24 | ## Current Behavior
25 | <!-- What happened instead of the expected behavior? Describe the difference. -->
26 | 
27 | ## Possible Solution
28 | <!-- Optional: Do you have a fix or a suggestion on how to fix the issue? -->
29 | 
30 | ## Screenshots / Video
31 | <!-- Optional: Add any screenshots or video of the issue if available. -->
32 | 
33 | ## Related Issues
34 | <!-- List related issues -->
35 | 


--------------------------------------------------------------------------------
/src/components/WeatherForm.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import PropTypes from "prop-types";
 3 | import "./WeatherForm.css";
 4 | 
 5 | function WeatherForm({ onSubmit }) {
 6 |   const [inputLocation, setInputLocation] = useState("");
 7 | 
 8 |   const handleSubmit = (e) => {
 9 |     e.preventDefault();
10 |     onSubmit(inputLocation);
11 |   };
12 | 
13 |   return (
14 |     <form className="locationform" onSubmit={handleSubmit}>
15 |       <div className="locationform__elements">
16 |         <label htmlFor="location">Enter location:</label>
17 |         <input
18 |           id="location"
19 |           type="text"
20 |           value={inputLocation}
21 |           onChange={(e) => setInputLocation(e.target.value)}
22 |           placeholder="City,state code (if USA),country code"
23 |         />
24 |         <input type="submit" value="Submit" />
25 |       </div>
26 |       <p className="instructions">
27 |         For USA, enter &quot;city,two-letter state code,US&quot; eg
28 |         &quot;Oskaloosa,IA,US&quot;. For every other country, enter
29 |         &quot;city,two-letter country code&quot; eg. &quot;Lillehammer,NO&quot;.
30 |       </p>
31 |     </form>
32 |   );
33 | }
34 | 
35 | WeatherForm.propTypes = {
36 |   onSubmit: PropTypes.func,
37 | };
38 | 
39 | export default WeatherForm;
40 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/WeatherCard.css:
--------------------------------------------------------------------------------
 1 | .weathercard {
 2 |   display: grid;
 3 |   grid-template-rows: 1fr;
 4 |   grid-template-columns: 1fr;
 5 |   padding: 1rem;
 6 |   border: 3px solid currentColor;
 7 |   border-radius: 1rem;
 8 | }
 9 | 
10 | .weathercard__data {
11 |   grid-row: 1/-1;
12 |   grid-column: 1/-1;
13 | }
14 | 
15 | .weathercard__meta {
16 |   display: flex;
17 |   justify-content: space-around;
18 |   padding: 2rem 0 1rem;
19 |   font-size: 1.2rem;
20 | }
21 | 
22 | .weathercard__temp {
23 |   display: flex;
24 |   padding: 3rem;
25 |   justify-content: center;
26 |   font-size: 8rem;
27 | }
28 | 
29 | .weathercard__wind {
30 |   display: grid;
31 |   justify-content: center;
32 |   align-items: center;
33 |   padding-block-end: 2rem;
34 | }
35 | 
36 | .weathercard__wind::before {
37 |   grid-column: 1;
38 |   grid-row: 1;
39 |   content: "";
40 |   display: block;
41 |   margin: 1rem;
42 |   height: 4.5rem;
43 |   width: 4.5rem;
44 |   border-radius: 50%;
45 |   border: 6px solid currentColor;
46 | }
47 | 
48 | .weathercard__wind-speed {
49 |   grid-column: 1;
50 |   grid-row: 1;
51 |   display: flex;
52 |   flex-direction: column;
53 |   justify-content: center;
54 |   align-items: center;
55 |   width: 100%;
56 | }
57 | 
58 | .weathercard__wind-dir {
59 |   grid-column: 1;
60 |   grid-row: 1;
61 | }
62 | 
63 | .weathercard__wind-dir::before {
64 |   content: "◀";
65 |   display: block;
66 |   font-size: 2rem;
67 |   width: 7.4rem;
68 |   line-height: 1rem;
69 | }
70 | 


--------------------------------------------------------------------------------
/src/components/WeahterDescript.jsx:
--------------------------------------------------------------------------------
 1 | import PropTypes from "prop-types";
 2 | 
 3 | const WeatherDescript = (prompt, weatherData) => {
 4 |   const url = "https://api.openai.com/v1/chat/completions";
 5 | 
 6 |   const sysMsg = `In a conversational professional tone, answer the [Question] based on the [Weather Data]. 
 7 | 
 8 | - Provide an opinion about what the weather feels like. 
 9 | - Provide temperature in either Celsius or Fahrenheit, whichever is more appropriate. 
10 | - Never display the temperature in Kelvin. 
11 | - Provide a recommendation on how to prepare and what to wear (e.g. bring an umbrella, wear a wind breaker, a warm jacket, etc.)`;
12 | 
13 |   const newPrompt = `Question: ${prompt}. Weather Data: ${JSON.stringify(
14 |     weatherData
15 |   )}`;
16 | 
17 |   const data = {
18 |     model: "gpt-4-0613",
19 |     messages: [
20 |       { role: "system", content: sysMsg },
21 |       { role: "user", content: newPrompt },
22 |     ],
23 |   };
24 | 
25 |   const params = {
26 |     headers: {
27 |       Authorization: `Bearer ${import.meta.env.VITE_OPENAI}`,
28 |       "Content-Type": "application/json",
29 |     },
30 |     body: JSON.stringify(data),
31 |     method: "POST",
32 |   };
33 | 
34 |   return fetch(url, params)
35 |     .then((response) => response.json())
36 |     .then((data) => {
37 |       return data.choices[0].message.content
38 |     })
39 |     .catch((error) => {
40 |       console.log("Error:", error);
41 |       return Promise.reject(
42 |         "Unable to fetch weather description."
43 |       );
44 |     });
45 | };
46 | 
47 | WeatherDescript.propTypes = {
48 |   prompt: PropTypes.string.isRequired,
49 | };
50 | 
51 | export default WeatherDescript;
52 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 3 |     Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 4 |   line-height: 1.5;
 5 |   font-weight: 400;
 6 | 
 7 |   color-scheme: light dark;
 8 |   color: rgba(255, 255, 255, 0.87);
 9 |   background-color: #242424;
10 | 
11 |   font-synthesis: none;
12 |   text-rendering: optimizeLegibility;
13 |   -webkit-font-smoothing: antialiased;
14 |   -moz-osx-font-smoothing: grayscale;
15 |   -webkit-text-size-adjust: 100%;
16 | 
17 |   /* Custom properties */
18 |   --background-color: white;
19 |   --color: black;
20 |   --link-color: inherit;
21 |   --contrast-color: black;
22 | }
23 | 
24 | /* Text meant only for screen readers. */
25 | .screen-reader-text {
26 |   border: 0;
27 |   clip: rect(1px, 1px, 1px, 1px);
28 |   clip-path: inset(50%);
29 |   height: 1px;
30 |   margin: -1px;
31 |   overflow: hidden;
32 |   padding: 0;
33 |   position: absolute;
34 |   width: 1px;
35 |   word-wrap: normal !important;
36 | }
37 | 
38 | a {
39 |   font-weight: 500;
40 |   color: var(--link-color);
41 |   text-decoration: inherit;
42 | }
43 | 
44 | h1 {
45 |   font-size: 3.2em;
46 |   line-height: 1.1;
47 | }
48 | 
49 | button {
50 |   border-radius: 8px;
51 |   border: 1px solid transparent;
52 |   padding: 0.6em 1.2em;
53 |   font-size: 1em;
54 |   font-weight: 500;
55 |   font-family: inherit;
56 |   background-color: #1a1a1a;
57 |   cursor: pointer;
58 |   transition: border-color 0.25s;
59 | }
60 | button:hover {
61 |   border-color: currentColor;
62 | }
63 | button:focus,
64 | button:focus-visible {
65 |   outline: 4px auto -webkit-focus-ring-color;
66 | }
67 | 
68 | @media (prefers-color-scheme: light) {
69 |   :root {
70 |     color: #213547;
71 |     background-color: #ffffff;
72 |   }
73 | 
74 |   button {
75 |     background-color: #ebebeb;
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/src/components/useApiRequests.jsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react";
 2 | import PropTypes from "prop-types";
 3 | import LocationToCoordinates from "./LocationToCoordinates";
 4 | import WeatherData from "./WeatherData";
 5 | import PromptToLocation from "./PromptToLocation";
 6 | import WeatherDescript from "./WeahterDescript";
 7 | 
 8 | const useApiRequests = (prompt) => {
 9 |   const [error, setError] = useState(null);
10 |   const [promptData, setPromptData] = useState({});
11 |   const [locationData, setLocationData] = useState([]);
12 |   const [weatherData, setWeatherData] = useState({});
13 |   const [weatherDescription, setWeatherDescription] = useState(null);
14 | 
15 |   // Fetch location and weather data from API.
16 |   useEffect(() => {
17 |     const fetchData = async () => {
18 |       if (!prompt) return; // return if prompt is null or undefined
19 | 
20 |       try {
21 |         const promptDataRes = await PromptToLocation(prompt);
22 |         setPromptData(promptDataRes);
23 | 
24 |         const locationDataRes = await LocationToCoordinates(
25 |           promptDataRes.locationString
26 |         );
27 |         setLocationData(locationDataRes);
28 | 
29 |         const weatherDataRes = await WeatherData(locationDataRes);
30 |         setWeatherData(weatherDataRes);
31 | 
32 |         const weatherDescriptRes = await WeatherDescript(
33 |           prompt,
34 |           weatherDataRes
35 |         );
36 |         setWeatherDescription(weatherDescriptRes);
37 |       } catch (error) {
38 |         setError(error);
39 |         console.error("Error:", error);
40 |       }
41 |     };
42 | 
43 |     fetchData();
44 |   }, [prompt]); // run effect when `prompt` changes
45 | 
46 |   return { error, promptData, locationData, weatherData, weatherDescription };
47 | };
48 | 
49 | useApiRequests.propTypes = {
50 |   prompt: PropTypes.string.isRequired,
51 | };
52 | 
53 | export default useApiRequests;
54 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import "./App.css";
 3 | import useApiRequests from "./components/useApiRequests";
 4 | import WeatherForm from "./components/WeatherForm";
 5 | import WeatherCard from "./components/WeatherCard";
 6 | import Description from "./components/Description";
 7 | 
 8 | function App() {
 9 |   const [prompt, setPrompt] = useState("");
10 |   const [units, setUnits] = useState("metric");
11 |   const [weatherDataLoading, setWeatherDataLoading] = useState(false);
12 |   const [weatherDescriptLoading, setWeatherDescriptLoading] = useState(false);
13 |   const [errorMsg, setErrorMsg] = useState("");
14 | 
15 |   // Custom hook to handle API requests. Fires when prompt changes.
16 |   const { error, promptData, locationData, weatherData, weatherDescription } =
17 |     useApiRequests(prompt);
18 | 
19 |   // Set error message if error is returned from API request.
20 |   useEffect(() => {
21 |     if (error) {
22 |       setErrorMsg(error);
23 |       setWeatherDataLoading(false);
24 |     }
25 |   }, [error]);
26 | 
27 |   // Set weatherDataLoading to false when weatherData is returned from API request.
28 |   useEffect(() => {
29 |     if (weatherData) {
30 |       setWeatherDataLoading(false);
31 |     }
32 |   }, [weatherData]);
33 | 
34 |   useEffect(() => {
35 |     if (weatherDescription) {
36 |       setWeatherDescriptLoading(false);
37 |     }
38 |   }, [weatherDescription]);
39 | 
40 |   useEffect(() => {
41 |     if (promptData && promptData.units) {
42 |       setUnits(promptData.units);
43 |     }
44 |   }, [promptData]);
45 | 
46 |   // Handle form submission. Set prompt to user input.
47 |   const handleSubmit = (newPrompt) => {
48 |     setErrorMsg("");
49 |     setWeatherDataLoading(true);
50 |     setWeatherDescriptLoading(true);
51 |     setPrompt(newPrompt);
52 |   };
53 | 
54 |   return (
55 |     <div className="container">
56 |       <header className="header">
57 |         <h1 className="page-title">Current Weather</h1>
58 |         <WeatherForm onSubmit={handleSubmit} />
59 |         {error && <p className="error">{errorMsg.message}</p>}
60 |         {weatherDescription ? (
61 |           <Description
62 |             isLoading={weatherDescriptLoading}
63 |             weatherDescription={weatherDescription}
64 |           />
65 |         ) : (
66 |           <Description isLoading={weatherDescriptLoading} />
67 |         )}
68 |       </header>
69 |       <main className="main-content">
70 |         {weatherData.name && !errorMsg ? (
71 |           <WeatherCard
72 |             isLoading={weatherDataLoading}
73 |             data={weatherData}
74 |             units={units}
75 |             country={promptData.country}
76 |             USstate={locationData[0].state}
77 |             setUnits={setUnits}
78 |           />
79 |         ) : (
80 |           <WeatherCard isLoading={weatherDataLoading} setUnits={setUnits} />
81 |         )}
82 |       </main>
83 |     </div>
84 |   );
85 | }
86 | 
87 | export default App;
88 | 


--------------------------------------------------------------------------------
/src/components/PromptToLocation.jsx:
--------------------------------------------------------------------------------
  1 | import PropTypes from "prop-types";
  2 | 
  3 | const PromptToLocation = (prompt) => {
  4 |   const url = "https://api.openai.com/v1/chat/completions";
  5 | 
  6 |   const data = {
  7 |     model: "gpt-3.5-turbo-0613",
  8 |     messages: [{ role: "user", content: prompt }],
  9 |     functions: [
 10 |       {
 11 |         name: "displayData",
 12 |         description: "Get the current weather in a given location.",
 13 |         parameters: {
 14 |           type: "object",
 15 |           properties: {
 16 |             country: {
 17 |               type: "string",
 18 |               description: "Country name.",
 19 |             },
 20 |             countryCode: {
 21 |               type: "string",
 22 |               description: "Country code. Use ISO-3166",
 23 |             },
 24 |             USstate: {
 25 |               type: "string",
 26 |               description: "Full state name.",
 27 |             },
 28 |             state: {
 29 |               type: "string",
 30 |               description: "Two-letter state code.",
 31 |             },
 32 |             city: {
 33 |               type: "string",
 34 |               description: "City name.",
 35 |             },
 36 |             unit: {
 37 |               type: "string",
 38 |               description: "location unit: metric or imperial.",
 39 |             },
 40 |           },
 41 |           required: [
 42 |             "countryCode",
 43 |             "country",
 44 |             "USstate",
 45 |             "state",
 46 |             "city",
 47 |             "unit",
 48 |           ],
 49 |         },
 50 |       },
 51 |     ],
 52 |     function_call: "auto",
 53 |   };
 54 | 
 55 |   const params = {
 56 |     headers: {
 57 |       Authorization: `Bearer ${import.meta.env.VITE_OPENAI}`,
 58 |       "Content-Type": "application/json",
 59 |     },
 60 |     body: JSON.stringify(data),
 61 |     method: "POST",
 62 |   };
 63 | 
 64 |   return fetch(url, params)
 65 |     .then((response) => response.json())
 66 |     .then((data) => {
 67 |       const promptRes = JSON.parse(
 68 |         data.choices[0].message.function_call.arguments
 69 |       );
 70 |       console.log(promptRes);
 71 | 
 72 |       const locationString = () => {
 73 |         if (promptRes.countryCode === "US") {
 74 |           return `${promptRes.city},${promptRes.state},${promptRes.country}`;
 75 |         } else {
 76 |           return `${promptRes.city},${promptRes.country}`;
 77 |         }
 78 |       };
 79 | 
 80 |       const promptData = {
 81 |         locationString: locationString(),
 82 |         units: promptRes.unit,
 83 |         country: promptRes.country,
 84 |         USstate: promptRes.USstate
 85 |       }
 86 | 
 87 |       return promptData;
 88 |     })
 89 |     .catch((error) => {
 90 |       console.log("Error:", error);
 91 |       return Promise.reject(
 92 |         "Unable to identify a location from your question. Please try again."
 93 |       );
 94 |     });
 95 | };
 96 | 
 97 | PromptToLocation.propTypes = {
 98 |   prompt: PropTypes.string.isRequired,
 99 | };
100 | 
101 | export default PromptToLocation;
102 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Build a JavaScript AI App with React and the OpenAI API
 2 | This is the repository for the LinkedIn Learning course Build a JavaScript AI App with React and the OpenAI API. The full course is available from [LinkedIn Learning][lil-course-url].
 3 | 
 4 | ![Build a JavaScript AI App with React and the OpenAI API][lil-thumbnail-url] 
 5 | 
 6 | In this course, learn how to integrate the OpenAI API into a JavaScript-based web app. Join instructor Morten Rand-Hendriksen as he takes a React-based weather app, adds  a heavy dose of AI, and creates an interactive experience that knows what location you want weather information from, explains the weather data in simple language, and even suggests what to wear. Through this project-based course, Morten teaches you about API integration, user-based authentication, storing user tokens in a ServiceWorker, task-based API configuration, and sending and receiving requests to the API.
 7 | 
 8 | ## Instructions
 9 | This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage, or you can add `/tree/BRANCH_NAME` to the URL to go to the branch you want to access.
10 | 
11 | ## Branches
12 | The branches are structured to correspond to the videos in the course. The naming convention is `CHAPTER#_MOVIE#`. As an example, the branch named `02_03` corresponds to the second chapter and the third video in that chapter. 
13 | Some branches will have a beginning and an end state. These are marked with the letters `b` for "beginning" and `e` for "end". The `b` branch contains the code as it is at the beginning of the movie. The `e` branch contains the code as it is at the end of the movie. The `main` branch holds the final state of the code when in the course.
14 | 
15 | When switching from one exercise files branch to the next after making changes to the files, you may get a message like this:
16 | 
17 |     error: Your local changes to the following files would be overwritten by checkout:        [files]
18 |     Please commit your changes or stash them before you switch branches.
19 |     Aborting
20 | 
21 | To resolve this issue:
22 | 	
23 |     Add changes to git using this command: git add .
24 | 	Commit changes using this command: git commit -m "some message"
25 | 
26 | ## Installing
27 | 1. To use these exercise files, you must have the following installed:
28 | 	- Node.js
29 | 2. Clone this repository into your local machine using the terminal (Mac), CMD (Windows), or a GUI tool like SourceTree.
30 | 3. In terminal, run `npm install` to install all dependencies.
31 | 4. In terminal, run `npm run dev` to start the Vite dev server.
32 | 5. In terminal, type `o` to open the site in your browser.
33 | 6. In terminal, type `q` to stop the Vite dev server.
34 | 
35 | 
36 | 
37 | ### Instructor
38 | 
39 | Morten Rand-Hendriksen 
40 |                             
41 | Developer and Senior Staff Instructor
42 | 
43 |                             
44 | 
45 | Check out my other courses on [LinkedIn Learning](https://www.linkedin.com/learning/instructors/morten-rand-hendriksen).
46 | 
47 | [lil-course-url]: https://www.linkedin.com/learning/build-a-javascript-ai-app-with-react-and-the-openai-api?dApp=59033956&leis=LAA
48 | [lil-thumbnail-url]: https://media.licdn.com/dms/image/D560DAQGwwpM5Oem1Pw/learning-public-crop_288_512/0/1694808958256?e=2147483647&v=beta&t=8aOT86V8OE20qAcH8cwG-lc1LhmHB6fCRC0q4hmoVfk
49 | _See the readme file in the main branch for updated instructions and information._
50 | 
51 | 


--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/src/components/WeatherCard.jsx:
--------------------------------------------------------------------------------
  1 | import PropTypes from "prop-types";
  2 | import "./WeatherCard.css";
  3 | import Loader from "./Loader";
  4 | 
  5 | // Translate temperature from Kelvin to Celsius or Fahrenheit.
  6 | const tempTranslator = (temp, unit) => {
  7 |   const allTemps = {
  8 |     k: {
  9 |       value: temp,
 10 |       unit: "°k",
 11 |     },
 12 |     c: {
 13 |       value: temp - 273,
 14 |       unit: "°C",
 15 |     },
 16 |     f: {
 17 |       value: 1.8 * (temp - 273) + 32,
 18 |       unit: "°F",
 19 |     },
 20 |   };
 21 |   if (unit === "metric") {
 22 |     return allTemps.c;
 23 |   } else if (unit === "imperial") {
 24 |     return allTemps.f;
 25 |   } else {
 26 |     return allTemps.k;
 27 |   }
 28 | };
 29 | 
 30 | // Translate wind speed from meters per second to feet per second.
 31 | const speedTranslator = (speed, units) => {
 32 |   const allSpeeds = {
 33 |     metric: {
 34 |       value: speed,
 35 |       unit: "m/s",
 36 |     },
 37 |     imperial: {
 38 |       value: speed * 3.281,
 39 |       unit: "ft/s",
 40 |     },
 41 |   };
 42 |   if (units === "metric") {
 43 |     return allSpeeds.metric;
 44 |   } else if (units === "imperial") {
 45 |     return allSpeeds.imperial;
 46 |   } else {
 47 |     return allSpeeds.metric;
 48 |   }
 49 | };
 50 | 
 51 | const WeatherCard = ({
 52 |   isLoading,
 53 |   data,
 54 |   units,
 55 |   country,
 56 |   USstate,
 57 |   setUnits,
 58 | }) => {
 59 |   // Display state if country is US.
 60 |   const stateDisplay = () => {
 61 |     if (data.sys.country === "US") {
 62 |       return `, ${USstate}`;
 63 |     } else {
 64 |       return "";
 65 |     }
 66 |   };
 67 | 
 68 |   // Handle unit change.
 69 |   const handleUnitChange = () => {
 70 |     if (units === "metric") {
 71 |       setUnits("imperial");
 72 |     } else {
 73 |       setUnits("metric");
 74 |     }
 75 |   };
 76 | 
 77 |   // Set wind direction.
 78 |   const windDirStyle = {
 79 |     transform: `rotate(${data.wind.deg + 90}deg)`,
 80 |   };
 81 | 
 82 |   return (
 83 |     <article className="weathercard">
 84 |       {isLoading && <Loader />}
 85 |       <div className="weathercard__data">
 86 |         <div className="weathercard__meta">
 87 |           <div className="weathercard__meta-location">{`${
 88 |             data.name
 89 |           }${stateDisplay()}, ${country}`}</div>
 90 |         </div>
 91 |         <div className="weathercard__temp">
 92 |           <span className="temp">
 93 |             {tempTranslator(data.main.temp, units).value.toFixed(1)}
 94 |           </span>
 95 |           <span className="tempunit">
 96 |             {tempTranslator(data.main.temp, units).unit}
 97 |           </span>
 98 |         </div>
 99 |         <div className="weathercard__wind">
100 |           <div className="weathercard__wind-speed">
101 |             <span className="speed">
102 |               {speedTranslator(data.wind.speed, units).value.toFixed(1)}
103 |             </span>
104 |             <span className="windunit">
105 |               {speedTranslator(data.wind.speed, units).unit}
106 |             </span>
107 |           </div>
108 |           <div className="weathercard__wind-dir" style={windDirStyle}>
109 |             <span className="screen-reader-text">${data.wind.deg}</span>
110 |           </div>
111 |         </div>
112 |         <button id="units" onClick={handleUnitChange}>
113 |           Change units
114 |         </button>
115 |       </div>
116 |     </article>
117 |   );
118 | };
119 | 
120 | // default props
121 | WeatherCard.defaultProps = {
122 |   data: {
123 |     name: "--",
124 |     sys: {
125 |       country: "--",
126 |     },
127 |     main: {
128 |       temp: 273,
129 |     },
130 |     wind: {
131 |       speed: 0,
132 |       deg: 0,
133 |     },
134 |   },
135 |   units: "metric",
136 |   setUnits: () => {},
137 | };
138 | 
139 | // props validation
140 | WeatherCard.propTypes = {
141 |   isLoading: PropTypes.bool,
142 |   data: PropTypes.shape({
143 |     name: PropTypes.string,
144 |     sys: PropTypes.shape({
145 |       country: PropTypes.string,
146 |     }),
147 |     main: PropTypes.shape({
148 |       temp: PropTypes.number,
149 |     }),
150 |     wind: PropTypes.shape({
151 |       speed: PropTypes.number,
152 |       deg: PropTypes.number,
153 |     }),
154 |   }),
155 |   units: PropTypes.string,
156 |   country: PropTypes.string,
157 |   USstate: PropTypes.string,
158 |   setUnits: PropTypes.func,
159 | };
160 | 
161 | export default WeatherCard;
162 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 | LinkedIn Learning Exercise Files License Agreement
  2 | ==================================================
  3 | 
  4 | This License Agreement (the "Agreement") is a binding legal agreement
  5 | between you (as an individual or entity, as applicable) and LinkedIn
  6 | Corporation (“LinkedIn”). By downloading or using the LinkedIn Learning
  7 | exercise files in this repository (“Licensed Materials”), you agree to
  8 | be bound by the terms of this Agreement. If you do not agree to these
  9 | terms, do not download or use the Licensed Materials. 
 10 | 
 11 | 1. License.
 12 | - a. Subject to the terms of this Agreement, LinkedIn hereby grants LinkedIn
 13 | members during their LinkedIn Learning subscription a non-exclusive,
 14 | non-transferable copyright license, for internal use only, to 1) make a
 15 | reasonable number of copies of the Licensed Materials, and 2) make
 16 | derivative works of the Licensed Materials for the sole purpose of
 17 | practicing skills taught in LinkedIn Learning courses.
 18 | - b. Distribution. Unless otherwise noted in the Licensed Materials, subject
 19 | to the terms of this Agreement, LinkedIn hereby grants LinkedIn members
 20 | with a LinkedIn Learning subscription a non-exclusive, non-transferable
 21 | copyright license to distribute the Licensed Materials, except the
 22 | Licensed Materials may not be included in any product or service (or
 23 | otherwise used) to instruct or educate others.
 24 | 
 25 | 2. Restrictions and Intellectual Property. 
 26 | - a. You may not to use, modify, copy, make derivative works of, publish,
 27 | distribute, rent, lease, sell, sublicense, assign or otherwise transfer the
 28 | Licensed Materials, except as expressly set forth above in Section 1. 
 29 | - b. Linkedin (and its licensors) retains its intellectual property rights
 30 | in the Licensed Materials. Except as expressly set forth in Section 1,
 31 | LinkedIn grants no licenses.
 32 | - c. You indemnify LinkedIn and its licensors and affiliates for i) any
 33 | alleged infringement or misappropriation of any intellectual property rights
 34 | of any third party based on modifications you make to the Licensed Materials,
 35 | ii) any claims arising from your use or distribution of all or part of the
 36 | Licensed Materials and iii) a breach of this Agreement. You will defend, hold
 37 | harmless, and indemnify LinkedIn and its affiliates (and our and their
 38 | respective employees, shareholders, and directors) from any claim or action
 39 | brought by a third party, including all damages, liabilities, costs and
 40 | expenses, including reasonable attorneys’ fees, to the extent resulting from,
 41 | alleged to have resulted from, or in connection with: (a) your breach of your
 42 | obligations herein; or (b) your use or distribution of any Licensed Materials.
 43 | 
 44 | 3. Open source. This code may include open source software, which may be
 45 | subject to other license terms as provided in the files. 
 46 |  
 47 | 4. Warranty Disclaimer. LINKEDIN PROVIDES THE LICENSED MATERIALS ON AN “AS IS”
 48 | AND “AS AVAILABLE” BASIS. LINKEDIN MAKES NO REPRESENTATION OR WARRANTY,
 49 | WHETHER EXPRESS OR IMPLIED, ABOUT THE LICENSED MATERIALS, INCLUDING ANY
 50 | REPRESENTATION THAT THE LICENSED MATERIALS WILL BE FREE OF ERRORS, BUGS OR
 51 | INTERRUPTIONS, OR THAT THE LICENSED MATERIALS ARE ACCURATE, COMPLETE OR
 52 | OTHERWISE VALID. TO THE FULLEST EXTENT PERMITTED BY LAW, LINKEDIN AND ITS
 53 | AFFILIATES DISCLAIM ANY IMPLIED OR STATUTORY WARRANTY OR CONDITION, INCLUDING
 54 | ANY IMPLIED WARRANTY OR CONDITION OF MERCHANTABILITY OR FITNESS FOR A
 55 | PARTICULAR PURPOSE, AVAILABILITY, SECURITY, TITLE AND/OR NON-INFRINGEMENT.
 56 | YOUR USE OF THE LICENSED MATERIALS IS AT YOUR OWN DISCRETION AND RISK, AND
 57 | YOU WILL BE SOLELY RESPONSIBLE FOR ANY DAMAGE THAT RESULTS FROM USE OF THE
 58 | LICENSED MATERIALS TO YOUR COMPUTER SYSTEM OR LOSS OF DATA.  NO ADVICE OR
 59 | INFORMATION, WHETHER ORAL OR WRITTEN, OBTAINED BY YOU FROM US OR THROUGH OR
 60 | FROM THE LICENSED MATERIALS WILL CREATE ANY WARRANTY OR CONDITION NOT
 61 | EXPRESSLY STATED IN THESE TERMS.
 62 | 
 63 | 5. Limitation of Liability. LINKEDIN SHALL NOT BE LIABLE FOR ANY INDIRECT,
 64 | INCIDENTAL, SPECIAL, PUNITIVE, CONSEQUENTIAL OR EXEMPLARY DAMAGES, INCLUDING
 65 | BUT NOT LIMITED TO, DAMAGES FOR LOSS OF PROFITS, GOODWILL, USE, DATA OR OTHER
 66 | INTANGIBLE LOSSES . IN NO EVENT WILL LINKEDIN'S AGGREGATE LIABILITY TO YOU
 67 | EXCEED $100. THIS LIMITATION OF LIABILITY SHALL:
 68 | - i. APPLY REGARDLESS OF WHETHER (A) YOU BASE YOUR CLAIM ON CONTRACT, TORT,
 69 | STATUTE, OR ANY OTHER LEGAL THEORY, (B) WE KNEW OR SHOULD HAVE KNOWN ABOUT
 70 | THE POSSIBILITY OF SUCH DAMAGES, OR (C) THE LIMITED REMEDIES PROVIDED IN THIS
 71 | SECTION FAIL OF THEIR ESSENTIAL PURPOSE; AND
 72 | - ii. NOT APPLY TO ANY DAMAGE THAT LINKEDIN MAY CAUSE YOU INTENTIONALLY OR
 73 | KNOWINGLY IN VIOLATION OF THESE TERMS OR APPLICABLE LAW, OR AS OTHERWISE
 74 | MANDATED BY APPLICABLE LAW THAT CANNOT BE DISCLAIMED IN THESE TERMS.
 75 | 
 76 | 6. Termination. This Agreement automatically terminates upon your breach of
 77 | this Agreement or termination of your LinkedIn Learning subscription. On
 78 | termination, all licenses granted under this Agreement will terminate
 79 | immediately and you will delete the Licensed Materials. Sections 2-7 of this
 80 | Agreement survive any termination of this Agreement. LinkedIn may discontinue
 81 | the availability of some or all of the Licensed Materials at any time for any
 82 | reason.
 83 | 
 84 | 7. Miscellaneous. This Agreement will be governed by and construed in
 85 | accordance with the laws of the State of California without regard to conflict
 86 | of laws principles. The exclusive forum for any disputes arising out of or
 87 | relating to this Agreement shall be an appropriate federal or state court
 88 | sitting in the County of Santa Clara, State of California. If LinkedIn does
 89 | not act to enforce a breach of this Agreement, that does not mean that
 90 | LinkedIn has waived its right to enforce this Agreement. The Agreement does
 91 | not create a partnership, agency relationship, or joint venture between the
 92 | parties.  Neither party has the power or authority to bind the other or to
 93 | create any obligation or responsibility on behalf of the other. You may not,
 94 | without LinkedIn’s prior written consent, assign or delegate any rights or
 95 | obligations under these terms, including in connection with a change of
 96 | control. Any purported assignment and delegation shall be ineffective. The
 97 | Agreement shall bind and inure to the benefit of the parties, their respective
 98 | successors and permitted assigns. If any provision of the Agreement is
 99 | unenforceable, that provision will be modified to render it enforceable to the
100 | extent possible to give effect to the parties’ intentions and the remaining
101 | provisions will not be affected. This Agreement is the only agreement between
102 | you and LinkedIn regarding the Licensed Materials, and supersedes all prior
103 | agreements relating to the Licensed Materials.  
104 | 
105 | Last Updated: March 2019
106 | 


--------------------------------------------------------------------------------