first commit

alagrin · May 30, 2018 · f77e328 · f77e328
commit f77e328
Show file tree

Hide file tree

Showing 17 changed files with 3,000 additions and 0 deletions.
diff --git a/README.md b/README.md
diff --git a/package.json b/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "code-challenge",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "moment": "^2.22.1",
+    "prop-types": "^15.6.1",
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0",
+    "react-scripts": "1.1.4"
+  },
+  "scripts": {
+    "start": "PORT=8080 react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      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>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "Code Challenge",
+  "name": "Code Challenge for Oracle",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,26 @@
+html {
+  height: 100%;
+  background-image: linear-gradient(to bottom, #4A90E2,#183968);
+  background-repeat: space;
+  padding-left: 200px;
+}
+
+.App {
+  text-align: center;
+  font-family: 'Open Sans';
+  margin: 200px 200px;
+  border-radius: 8px;
+  opacity: 0.8;
+}
+
+.App.card{
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+}
+
+.card {
+  width: 500px;
+}
+
+#descrip {
+  margin-bottom: -3px;
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,113 @@
+import React, { Component } from 'react';
+import OpenWeather from './util/Openweather';
+import SearchBar from './components/SearchBar/SearchBar';
+import Forecast from './components/Forecast/Forecast';
+import moment from 'moment';
+import './App.css';
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentWeather: [],
+      currentTemp: '',
+      isCityEntered: false,
+      fiveDays: [],
+      error: ''
+    };
+  }
+
+  capitalize(str) {
+    str = str.split(" ");
+    for (var i = 0, x = str.length; i < x; i++) {
+        str[i] = str[i][0].toUpperCase() + str[i].substr(1);
+      }
+    return str.join(" ");
+  }
+
+  onSearch = (searchTerm) => {
+
+   OpenWeather.fetchCurrentData(searchTerm).then(data => {
+     if (data.main) {
+      let currentTemp = Math.floor(data.main.temp);
+      let humidity = data.main.humidity;
+      // let countryCode = data.sys.country.split().join("").toLowerCase();
+      let info = data.weather.map(text => {
+        return(
+          <div id="current-info" key={text['id']}>
+            <p id="descrip">{this.capitalize(text['description'])}</p>
+            <p>{humidity}% Humidity</p>
+          </div>
+        );
+      });
+      this.setState({
+        currentWeather: info,
+        currentTemp: currentTemp,
+        isCityEntered: true,
+        error: false
+      });
+    } else {
+      this.setState({
+        currentWeather: null,
+        isCityEntered: false,
+        error: 'Invalid City Name'
+      });
+    }
+  });
+
+   OpenWeather.fetchFiveDays(searchTerm).then(data => {
+    if (data.list) {
+     let weatherList = data.list;
+     let fiveDayForecast = [];
+
+     for (let i = 0; i < weatherList.length; i += 8) {
+       let date = moment.unix(weatherList[i].dt).format("MMM DD");
+       let maxTemp = Math.floor(weatherList[i].main.temp_max);
+       let minTemp = Math.floor(weatherList[i].main.temp_min);
+       let iconCode = weatherList[i].weather[0].icon;
+       //Unable to access actual values due to API
+       fiveDayForecast.push([date, iconCode, maxTemp, minTemp]);
+     }
+     this.setState({
+       fiveDays: fiveDayForecast
+      });
+    }
+  });
+}
+
+  clearData = () => {
+    this.setState({
+      isCityEntered:false,
+      error: ''
+    });
+    document.getElementById("searchbar").reset();
+  }
+
+  render() {
+    const isCityEntered = this.state.isCityEntered;
+
+    const displayForecast = isCityEntered ? (
+      <Forecast 
+        currentTemp={this.state.currentTemp}
+        city={this.state.city}
+        currentWeather={this.state.currentWeather}
+        fiveDays={this.state.fiveDays}
+      />
+    ) : (
+      <div>Your forecast awaits...</div>
+    );
+
+    return (
+            <div className="App card">
+              <SearchBar 
+                onSearch={this.onSearch}
+                clearData={this.clearData}
+              />
+              {this.state.error && <div>{this.state.error}</div>}
+              {displayForecast}
+            </div>   
+    );
+  }
+}
+
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/src/components/Forecast/Forecast.css b/src/components/Forecast/Forecast.css
@@ -0,0 +1,61 @@
+.current {
+    display: flex;
+    align-items: center;
+    background-color: #4A90E2;
+    color: white;
+    flex-wrap: wrap;
+}
+
+#temp {
+    color: white;
+    margin: 0 20px;
+    padding-left: 30px;
+    font-size: 8rem;
+    font-weight: lighter;
+}
+
+.fivedays {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 20px;
+}
+
+.single {
+    flex: 1;
+    justify-content: space-between;
+    border-right: 1px solid rgb(164, 163, 163);
+}
+
+.fivedays .single:last-child {
+    border-right: none;
+}
+
+.single p {
+    color: grey;
+    font-weight: 500;
+}
+
+#highTemp {
+    color: darkslategrey;
+    font-weight: 900;
+}
+
+#lowTemp {
+    color: darkslategrey;
+    font-weight: 100;
+    font-size: 0.8rem;
+}
+
+.details>h1 {
+    color: white;
+}
+
+#temp > span {
+    font-size: 30%;
+    position: relative;
+    bottom: 60px;
+}
+
+.hide {
+    display: none;
+}
diff --git a/src/components/Forecast/Forecast.jsx b/src/components/Forecast/Forecast.jsx
@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import './Forecast.css';
+//change to functional component w/ props arg?
+class Forecast extends Component {
+
+    renderFiveDayForecast = () => {
+      return this.props.fiveDays.map((day) => {
+        return(
+          <div key={day[0]} className="single">
+            <p>{day[0]}</p>
+            <img src={`http://openweathermap.org/img/w/${day[1]}.png`} alt="icon"/>
+            <p id="highTemp">{day[2]}</p>
+            <p id="lowTemp">{day[3]}</p>
+        </div>
+        );
+      });
+    }
+
+    render() {
+        return (
+            <div className="forecast">
+                <div className="current content">
+                  <div id="temp">{this.props.currentTemp}<span>&deg;</span><span>F</span></div>
+                  <div className="details">
+                    {this.props.currentWeather}
+                  </div>
+                </div>
+                <div className="fivedays">
+                  {this.renderFiveDayForecast()}
+                </div>
+              </div>
+        );
+    }
+}
+
+export default Forecast;
diff --git a/src/components/SearchBar/SearchBar.css b/src/components/SearchBar/SearchBar.css
@@ -0,0 +1,34 @@
+#searchbar {
+    display: flex;
+    flex-direction: row;
+    padding-left: 1rem;
+    background-color: #4A90E2;
+    opacity: 0.9;
+    border-radius: 8px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+#userinput {
+    flex: 1;
+    border-width: 0px;
+    background-color: transparent;
+    color: white;
+    font-size: 1.5rem;
+    padding: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom: 1px solid rgb(123, 122, 122);
+}
+
+#searchicon {
+    zoom: 0.7;
+    color: rgb(58, 56, 56);
+    padding: 1rem;
+}
+
+#clearfield {
+    zoom: 0.7;
+    padding: 1rem;
+    cursor: pointer;
+}