Accueil Explorer Aide
Connexion
pavelefimen95
/
homeworkreactjs
Suivre 1
Voter 0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

test

Pavel il y a 7 ans
Parent
a7c17a73cf
commit
e6ca7f008b
21 fichiers modifiés avec 12104 ajouts et 0 suppressions
Vue séparée Afficher les stats Diff
  1. 2 0
      hw1/Weather/js/index.js
  2. 21 0
      hw2/createReactTable/.gitignore
  3. 2229 0
      hw2/createReactTable/README.md
  4. 9332 0
      hw2/createReactTable/package-lock.json
  5. 16 0
      hw2/createReactTable/package.json
  6. BIN
      hw2/createReactTable/public/favicon.ico
  7. 41 0
      hw2/createReactTable/public/index.html
  8. 15 0
      hw2/createReactTable/public/manifest.json
  9. 8 0
      hw2/createReactTable/src/App.test.js
  10. 28 0
      hw2/createReactTable/src/Table1.js
  11. 33 0
      hw2/createReactTable/src/Table2.js
  12. 22 0
      hw2/createReactTable/src/css/Table1-style.css
  13. 22 0
      hw2/createReactTable/src/css/Table2-style.css
  14. 5 0
      hw2/createReactTable/src/css/index.css
  15. 6 0
      hw2/createReactTable/src/data.js
  16. 14 0
      hw2/createReactTable/src/index.js
  17. 108 0
      hw2/createReactTable/src/registerServiceWorker.js
  18. 50 0
      hw2/weatherGenerator/files/css/normalize.min.css
  19. 50 0
      hw2/weatherGenerator/files/css/styles.css
  20. 18 0
      hw2/weatherGenerator/files/index.html
  21. 84 0
      hw2/weatherGenerator/files/js/index.js

+ 2 - 0
hw1/Weather/js/index.js
Voir le fichier 

@@ -37,6 +37,8 @@ get('https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/c
 
       select.appendChild(option);
 
   }
 
   select.onchange = function(e){
 
+      console.log(this.value)
 
+      console.log(document.getElementById("main").value)
 
       var select = document.createElement("select");
 
       for (var i = 0; i < object[this.value].length; i++) {
 
           var option = document.createElement("option")

+ 21 - 0
hw2/createReactTable/.gitignore
Voir le fichier 

@@ -0,0 +1,21 @@
 
+# See https://help.github.com/ignore-files/ for more about ignoring files.
 
+
 
+# dependencies
 
+/node_modules
 
+
 
+# testing
 
+/coverage
 
+
 
+# production
 
+/build
 
+
 
+# misc
 
+.DS_Store
 
+.env.local
 
+.env.development.local
 
+.env.test.local
 
+.env.production.local
 
+
 
+npm-debug.log*
 
+yarn-debug.log*
 
+yarn-error.log*

Fichier diff supprimé car celui-ci est trop grand
+ 2229 - 0
hw2/createReactTable/README.md


Fichier diff supprimé car celui-ci est trop grand
+ 9332 - 0
hw2/createReactTable/package-lock.json


+ 16 - 0
hw2/createReactTable/package.json
Voir le fichier 

@@ -0,0 +1,16 @@
 
+{
 
+  "name": "hw2",
 
+  "version": "0.1.0",
 
+  "private": true,
 
+  "dependencies": {
 
+    "react": "^16.2.0",
 
+    "react-dom": "^16.2.0",
 
+    "react-scripts": "1.0.17"
 
+  },
 
+  "scripts": {
 
+    "start": "react-scripts start",
 
+    "build": "react-scripts build",
 
+    "test": "react-scripts test --env=jsdom",
 
+    "eject": "react-scripts eject"
 
+  }
 
+}

BIN
hw2/createReactTable/public/favicon.ico
Voir le fichier


+ 41 - 0
hw2/createReactTable/public/index.html
Voir le fichier 

@@ -0,0 +1,41 @@
 
+<!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="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 
+    <!--
 
+      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="root1"></div>
 
+    <div id="root2"></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>

+ 15 - 0
hw2/createReactTable/public/manifest.json
Voir le fichier 

@@ -0,0 +1,15 @@
 
+{
 
+  "short_name": "React App",
 
+  "name": "Create React App Sample",
 
+  "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"
 
+}

+ 8 - 0
hw2/createReactTable/src/App.test.js
Voir le fichier 

@@ -0,0 +1,8 @@
 
+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);
 
+});

+ 28 - 0
hw2/createReactTable/src/Table1.js
Voir le fichier 

@@ -0,0 +1,28 @@
 
+import React, { Component } from 'react';
 
+import ReactDOM from 'react-dom';
 
+import Data from './data.js';
 
+import './css/Table1-style.css';
 
+
 
+function createReactTable(data,root1){
 
+  class Table1 extends Component {
 
+    render() {
 
+      return React.createElement('table',{className:'Table1'},
 
+         React.createElement('tbody',null,
 
+           data.map((item,i)=>{
 
+             return React.createElement('tr',{key:i},
 
+               data.map((item2,i2)=>{
 
+                 return React.createElement('td',{key:i2},data[i][i2])
 
+               })
 
+             );
 
+           })
 
+         )
 
+       )
 
+
 
+    }
 
+  }
 
+  ReactDOM.render(
 
+    <Table1/>,
 
+    root1
 
+  )
 
+}
 
+createReactTable(Data, document.getElementById('root1'));

+ 33 - 0
hw2/createReactTable/src/Table2.js
Voir le fichier 

@@ -0,0 +1,33 @@
 
+import React, { Component } from 'react';
 
+import ReactDOM from 'react-dom';
 
+import Data from './data.js';
 
+import './css/Table2-style.css';
 
+
 
+function createReactTable(data,root1){
 
+  class Table2 extends Component {
 
+    render() {
 
+      return(
 
+          <table className='Table2'>
 
+            <tbody>
 
+              {
 
+                Data.map((item,i)=>{
 
+                  return <tr key={i}>
 
+                    {
 
+                      Data.map((item,i2)=>{
 
+                        return <td key={i2}>{Data[i][i2]}</td>
 
+                      })
 
+                    }
 
+                  </tr>
 
+                })
 
+              }
 
+            </tbody>
 
+          </table>
 
+      )
 
+    }
 
+  }
 
+  ReactDOM.render(
 
+    <Table2/>,
 
+    root1
 
+  )
 
+}
 
+createReactTable(Data, document.getElementById('root2'));

+ 22 - 0
hw2/createReactTable/src/css/Table1-style.css
Voir le fichier 

@@ -0,0 +1,22 @@
 
+table.Table1 {
 
+  border-collapse: collapse;
 
+  margin: 30px;
 
+  display: block;
 
+}
 
+
 
+table.Table1 tr:nth-child(2n+1){
 
+  background-color: #F1F1F1;
 
+
 
+}
 
+
 
+table.Table1 tr:nth-child(1){
 
+  background-color: #555555;
 
+  color: #fff;
 
+}
 
+
 
+table.Table1 td{
 
+  width: 100px;
 
+  padding: 10px;
 
+  border: 1px solid #D4D4D4;
 
+  text-align: center;
 
+}

+ 22 - 0
hw2/createReactTable/src/css/Table2-style.css
Voir le fichier 

@@ -0,0 +1,22 @@
 
+table.Table2 {
 
+  border-collapse: collapse;
 
+  margin: 30px;
 
+  display: block;
 
+}
 
+
 
+table.Table2 tr:nth-child(2n+1){
 
+  background-color: #F1F1F1;
 
+
 
+}
 
+
 
+table.Table2 tr:nth-child(1){
 
+  background-color: #555555;
 
+  color: #fff;
 
+}
 
+
 
+table.Table2 td{
 
+  width: 100px;
 
+  padding: 10px;
 
+  border: 1px solid #D4D4D4;
 
+  text-align: center;
 
+}

+ 5 - 0
hw2/createReactTable/src/css/index.css
Voir le fichier 

@@ -0,0 +1,5 @@
 
+body {
 
+  margin: 0;
 
+  padding: 0;
 
+  font-family: sans-serif;
 
+}

+ 6 - 0
hw2/createReactTable/src/data.js
Voir le fichier 

@@ -0,0 +1,6 @@
 
+export default [
 
+  ['lorem ipsum','lorem ipsum','lorem ipsum','lorem ipsum'],
 
+  ['lorem ipsum','lorem ipsum','lorem ipsum','lorem ipsum'],
 
+  ['lorem ipsum','lorem ipsum','lorem ipsum','lorem ipsum'],
 
+  ['lorem ipsum','lorem ipsum','lorem ipsum','lorem ipsum'],
 
+];

+ 14 - 0
hw2/createReactTable/src/index.js
Voir le fichier 

@@ -0,0 +1,14 @@
 
+import React from 'react';
 
+import ReactDOM from 'react-dom';
 
+import './css/index.css';
 
+import Table1 from './Table1'
 
+import Table2 from './Table2';
 
+import registerServiceWorker from './registerServiceWorker';
 
+
 
+// ReactDOM.render(
 
+//     <div>
 
+//
 
+//       <Table2/>
 
+//     </div>
 
+//   , document.getElementById('root'));
 
+registerServiceWorker();

+ 108 - 0
hw2/createReactTable/src/registerServiceWorker.js
Voir le fichier 

@@ -0,0 +1,108 @@
 
+// In production, we register a service worker to serve assets from local cache.
 
+
 
+// This lets the app load faster on subsequent visits in production, and gives
 
+// it offline capabilities. However, it also means that developers (and users)
 
+// will only see deployed updates on the "N+1" visit to a page, since previously
 
+// cached resources are updated in the background.
 
+
 
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
 
+// This link also includes instructions on opting out of this behavior.
 
+
 
+const isLocalhost = Boolean(
 
+  window.location.hostname === 'localhost' ||
 
+    // [::1] is the IPv6 localhost address.
 
+    window.location.hostname === '[::1]' ||
 
+    // 127.0.0.1/8 is considered localhost for IPv4.
 
+    window.location.hostname.match(
 
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 
+    )
 
+);
 
+
 
+export default function register() {
 
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 
+    // The URL constructor is available in all browsers that support SW.
 
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
 
+    if (publicUrl.origin !== window.location.origin) {
 
+      // Our service worker won't work if PUBLIC_URL is on a different origin
 
+      // from what our page is served on. This might happen if a CDN is used to
 
+      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
 
+      return;
 
+    }
 
+
 
+    window.addEventListener('load', () => {
 
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 
+
 
+      if (isLocalhost) {
 
+        // This is running on localhost. Lets check if a service worker still exists or not.
 
+        checkValidServiceWorker(swUrl);
 
+      } else {
 
+        // Is not local host. Just register service worker
 
+        registerValidSW(swUrl);
 
+      }
 
+    });
 
+  }
 
+}
 
+
 
+function registerValidSW(swUrl) {
 
+  navigator.serviceWorker
 
+    .register(swUrl)
 
+    .then(registration => {
 
+      registration.onupdatefound = () => {
 
+        const installingWorker = registration.installing;
 
+        installingWorker.onstatechange = () => {
 
+          if (installingWorker.state === 'installed') {
 
+            if (navigator.serviceWorker.controller) {
 
+              // At this point, the old content will have been purged and
 
+              // the fresh content will have been added to the cache.
 
+              // It's the perfect time to display a "New content is
 
+              // available; please refresh." message in your web app.
 
+              console.log('New content is available; please refresh.');
 
+            } else {
 
+              // At this point, everything has been precached.
 
+              // It's the perfect time to display a
 
+              // "Content is cached for offline use." message.
 
+              console.log('Content is cached for offline use.');
 
+            }
 
+          }
 
+        };
 
+      };
 
+    })
 
+    .catch(error => {
 
+      console.error('Error during service worker registration:', error);
 
+    });
 
+}
 
+
 
+function checkValidServiceWorker(swUrl) {
 
+  // Check if the service worker can be found. If it can't reload the page.
 
+  fetch(swUrl)
 
+    .then(response => {
 
+      // Ensure service worker exists, and that we really are getting a JS file.
 
+      if (
 
+        response.status === 404 ||
 
+        response.headers.get('content-type').indexOf('javascript') === -1
 
+      ) {
 
+        // No service worker found. Probably a different app. Reload the page.
 
+        navigator.serviceWorker.ready.then(registration => {
 
+          registration.unregister().then(() => {
 
+            window.location.reload();
 
+          });
 
+        });
 
+      } else {
 
+        // Service worker found. Proceed as normal.
 
+        registerValidSW(swUrl);
 
+      }
 
+    })
 
+    .catch(() => {
 
+      console.log(
 
+        'No internet connection found. App is running in offline mode.'
 
+      );
 
+    });
 
+}
 
+
 
+export function unregister() {
 
+  if ('serviceWorker' in navigator) {
 
+    navigator.serviceWorker.ready.then(registration => {
 
+      registration.unregister();
 
+    });
 
+  }
 
+}

+ 50 - 0
hw2/weatherGenerator/files/css/normalize.min.css
Voir le fichier 

@@ -0,0 +1,50 @@
 
+/*! normalize.css v1.0.1 | MIT License | git.io/normalize */
 
+article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
 
+audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
 
+audio:not([controls]){display:none;height:0}
 
+[hidden]{display:none}
 
+html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
 
+html,button,input,select,textarea{font-family:sans-serif}
 
+body{margin:0}
 
+a:focus{outline:thin dotted}
 
+a:active,a:hover{outline:0}
 
+h1{font-size:2em;margin:.67em 0}
 
+h2{font-size:1.5em;margin:.83em 0}
 
+h3{font-size:1.17em;margin:1em 0}
 
+h4{font-size:1em;margin:1.33em 0}
 
+h5{font-size:.83em;margin:1.67em 0}
 
+h6{font-size:.75em;margin:2.33em 0}
 
+abbr[title]{border-bottom:1px dotted}
 
+b,strong{font-weight:bold}
 
+blockquote{margin:1em 40px}
 
+dfn{font-style:italic}
 
+mark{background:#ff0;color:#000}
 
+p,pre{margin:1em 0}
 
+code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}
 
+pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}
 
+q{quotes:none}
 
+q:before,q:after{content:'';content:none}
 
+small{font-size:80%}
 
+sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
 
+sup{top:-0.5em}
 
+sub{bottom:-0.25em}
 
+dl,menu,ol,ul{margin:1em 0}
 
+dd{margin:0 0 0 40px}
 
+menu,ol,ul{padding:0 0 0 40px}
 
+nav ul,nav ol{list-style:none;list-style-image:none}
 
+img{border:0;-ms-interpolation-mode:bicubic}
 
+svg:not(:root){overflow:hidden}
 
+figure{margin:0}
 
+form{margin:0}
 
+fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
 
+legend{border:0;padding:0;white-space:normal;*margin-left:-7px}
 
+button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
 
+button,input{line-height:normal}
 
+button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}
 
+button[disabled],input[disabled]{cursor:default}
 
+input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}
 
+input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
 
+input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
 
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
 
+textarea{overflow:auto;vertical-align:top}
 
+table{border-collapse:collapse;border-spacing:0}

+ 50 - 0
hw2/weatherGenerator/files/css/styles.css
Voir le fichier 

@@ -0,0 +1,50 @@
 
+.weather {
 
+  background: #d6eeff;
 
+  display: inline-block;
 
+  text-align: center;
 
+  width: 100%;
 
+  border-bottom-left-radius: 15px;
 
+  border-bottom-right-radius: 15px;
 
+  border: 1px solid #e8e8e8;
 
+  margin-bottom: 20px;
 
+}
 
+.selects select{
 
+  display: block;
 
+  width: 100%;
 
+  height: 50px;
 
+  font-size: 20px;
 
+  border: 1px solid #e8e8e8;
 
+  padding: 10px;
 
+}
 
+
 
+.selects select:first-child {
 
+  border-top-left-radius: 15px;
 
+  border-top-right-radius: 15px;
 
+  margin-top: 40px;
 
+}
 
+.forecast {
 
+
 
+  width: 37%;
 
+  margin: 0 auto;
 
+  font-size: 20px;
 
+
 
+}
 
+
 
+body {
 
+  font-family: arial, sans-serif;
 
+  line-height: 30px;
 
+  margin: 0;
 
+  padding: 0;
 
+}
 
+
 
+body * {
 
+  box-sizing: border-box;
 
+  outline: none;
 
+}
 
+
 
+.forecast img {
 
+  width: 70px;
 
+  margin-bottom: 15px;
 
+  margin-top: 10px;
 
+
 
+}

+ 18 - 0
hw2/weatherGenerator/files/index.html
Voir le fichier 

@@ -0,0 +1,18 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<title>Document</title>
 
+	<link rel="stylesheet" href="css/normalize.min.css">
 
+	<link rel="stylesheet" href="css/styles.css">
 
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
 
+</head>
 
+<body>
 
+	<div class="forecast">
 
+		<div class="selects"></div>
 
+		<div class="weather"></div>
 
+	</div>
 
+
 
+	<script src="js/index.js"></script>
 
+</body>
 
+</html>

+ 84 - 0
hw2/weatherGenerator/files/js/index.js
Voir le fichier 

@@ -0,0 +1,84 @@
 
+var selects = document.querySelector('.selects');
 
+var weatherDiv = document.querySelector('.weather');
 
+
 
+function get(url){
 
+  return new Promise(function(resolve,reject){
 
+    var xhr = new XMLHttpRequest();
 
+    xhr.open('GET',url,true);
 
+    xhr.onload = function(){
 
+      if(xhr.status == 200){
 
+        resolve(JSON.parse(xhr.responseText));
 
+      }
 
+      else{
 
+        reject(xhr.statusText);
 
+      }
 
+    }
 
+    xhr.onerror = function(){
 
+      reject('not found');
 
+    }
 
+    xhr.send();
 
+  });
 
+}
 
+function show(obj){
 
+  var weather = obj.query.results.channel.item.description;
 
+  var resWeather = weather.replace(/href|CDATA|[\!]|[\[]|[\]]/g,"");
 
+  var resWeather2 = resWeather.slice(1,resWeather.length - 1);
 
+  var resWeather3 = resWeather2.replace(/Full Forecast at Yahoo Weather/g,"");
 
+  var resWeather4 = resWeather3.slice(0,resWeather3.length - 28);
 
+  weatherDiv.innerHTML = resWeather4;
 
+}
 
+
 
+function* myGenerator(){
 
+  var object = yield get('https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities.json');
 
+  var keys = Object.keys(object);
 
+  var select = document.createElement("select");
 
+  for (var i = 0; i < keys.length; i++) {
 
+      var option = document.createElement("option");
 
+      option.innerHTML = keys[i];
 
+      option.value = keys[i];
 
+      select.appendChild(option);
 
+  }
 
+  select.onchange = function(){
 
+    var g1 = select1();
 
+    g1.next();
 
+  }
 
+   function* select1(e){
 
+      var select = document.createElement("select");
 
+      for (var i = 0; i < object[this.value].length; i++) {
 
+          var option = document.createElement("option")
 
+          option.innerHTML = object[this.value][i];
 
+          select.appendChild(option);
 
+      }
 
+      if(selects.children.length > 1){
 
+          selects.replaceChild(select, document.getElementById("main").nextElementSibling);
 
+      }
 
+      else
 
+          selects.appendChild(select);
 
+          debugger;
 
+        var obj = yield get("https://query.yahooapis.com/v1/public/yql?" + 'q=' + encodeURIComponent("select * from weather.forecast where woeid in (select woeid from geo.places(1) where text=\'" + select.value + "\') and u='c'") + '&format=json');
 
+        show(obj);
 
+      select2.onchange = function(){
 
+        var g2 = select1();
 
+        g2.next();
 
+      }
 
+      function* select2(){
 
+        var obj = yield get("https://query.yahooapis.com/v1/public/yql?" + 'q=' + encodeURIComponent("select * from weather.forecast where woeid in (select woeid from geo.places(1) where text=\'" + this.value + "\') and u='c'") + '&format=json');
 
+        show(obj);
 
+      }
 
+  }
 
+  selects.appendChild(select);
 
+  select.id = "main"
 
+}
 
+
 
+function run(g){
 
+  var iter = g();
 
+  function next(result){
 
+      console.log(iter.next(result))
 
+      let {value, done} = iter.next(result)
 
+      if (typeof value === 'object' && 'then' in value){
 
+          value.then(next,(e) => iter.throw(e))
 
+      }
 
+  }
 
+  next();
 
+}
 
+run(myGenerator);