- commit
- 71a13de1a4f1b72cb08589bbd95040e5777229b7
- parent
- 3c442fd3221d716ff1c830aad6c4ef6d55e83b24
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2019-02-04 15:55
mv js/css to separate files
Diffstat
| M | index.html | 115 | ++----------------------------------------------------------- |
| A | script.js | 36 | ++++++++++++++++++++++++++++++++++++ |
| C | index.html -> style.css | 215 | +++++++++++++++++++++---------------------------------------- |
3 files changed, 111 insertions, 255 deletions
diff --git a/index.html b/index.html
@@ -2,81 +2,7 @@ 2 2 <html lang="en"> 3 3 <head> 4 4 <title>Github stats</title>5 -1 <style>6 -1 * {7 -1 box-sizing: border-box;8 -1 }9 -110 -1 html {11 -1 background-color: #f2f2f2;12 -1 }13 -114 -1 @media (min-width: 30em) {15 -1 html {16 -1 margin: 2em;17 -1 }18 -1 body {19 -1 box-shadow: 0 0 5em rgba(0,0,0,0.2);20 -1 }21 -1 }22 -123 -1 body {24 -1 max-width: 30em;25 -1 padding: 1em;26 -1 margin: 0 auto;27 -1 color: #333;28 -1 line-height: 1.4;29 -1 background-color: #fff;30 -1 }31 -132 -1 form {33 -1 margin: 2em 0;34 -1 }35 -136 -1 h1 {37 -1 margin-top: 0;38 -1 line-height: 1.2;39 -1 border-bottom: 0.2em solid #26c;40 -1 }41 -142 -1 label {43 -1 display: block;44 -1 margin-bottom: 0.5em;45 -1 }46 -147 -1 input,48 -1 button {49 -1 display: block;50 -1 width: 100%;51 -1 font-size: inherit;52 -1 border-radius: 0.3em;53 -1 }54 -155 -1 input {56 -1 padding: 0.3em 0.5em;57 -1 border: 1px solid silver;58 -1 }59 -1 input[readonly] {60 -1 background-color: #f2f2f2;61 -1 }62 -163 -1 button {64 -1 font-weight: bold;65 -1 padding: 0.5em;66 -1 background-color: #26c;67 -1 color: #fff;68 -1 border: 0;69 -1 cursor: pointer;70 -1 }71 -1 button:hover,72 -1 button:focus {73 -1 background-color: #15b;74 -1 }75 -1 button:disabled {76 -1 opacity: 0.5;77 -1 cursor: progress;78 -1 }79 -1 </style>-1 5 <link rel="stylesheet" href="style.css"> 80 6 </head> 81 7 <body> 82 8 <h1>Github statistics</h1> @@ -100,43 +26,6 @@ 100 26 <input name="issues" readonly /> 101 27 </label> 102 28103 -1 <script>104 -1 var setValue = function(name, value) {105 -1 document.getElementsByName(name)[0].value = value;106 -1 };107 -1108 -1 var setBusy = function(busy) {109 -1 document.querySelector('button').disabled = busy;110 -1 };111 -1112 -1 var getDuration = function(x) {113 -1 var created_at = (new Date(x.created_at)).getTime();114 -1 var closed_at = (new Date(x.closed_at)).getTime();115 -1 return (closed_at - created_at) / 1000 / 60 / 60 / 24;116 -1 };117 -1118 -1 var getAverage = function(data) {119 -1 var duration = data.reduce((a, b) => a + getDuration(b), 0);120 -1 return duration / data.length;121 -1 };122 -1123 -1 var search = new URLSearchParams(location.search);124 -1 var repo = search.get('repo');125 -1 if (repo) {126 -1 setValue('repo', repo);127 -1 setBusy(true);128 -1 fetch(`https://api.github.com/repos/${repo}/issues?per_page=100&state=closed`)129 -1 .then(r => r.json())130 -1 .then(data => {131 -1 setBusy(false);132 -1133 -1 var pulls = data.filter(x => x.pull_request);134 -1 setValue('pulls', getAverage(pulls))135 -1136 -1 var issues = data.filter(x => !x.pull_request);137 -1 setValue('issues', getAverage(issues))138 -1 });139 -1 }140 -1 </script>-1 29 <script src="script.js"></script> 141 30 </body> 142 31 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,36 @@
-1 1 var setValue = function(name, value) {
-1 2 document.getElementsByName(name)[0].value = value;
-1 3 };
-1 4
-1 5 var setBusy = function(busy) {
-1 6 document.querySelector('button').disabled = busy;
-1 7 };
-1 8
-1 9 var getDuration = function(x) {
-1 10 var created_at = (new Date(x.created_at)).getTime();
-1 11 var closed_at = (new Date(x.closed_at)).getTime();
-1 12 return (closed_at - created_at) / 1000 / 60 / 60 / 24;
-1 13 };
-1 14
-1 15 var getAverage = function(data) {
-1 16 var duration = data.reduce((a, b) => a + getDuration(b), 0);
-1 17 return duration / data.length;
-1 18 };
-1 19
-1 20 var search = new URLSearchParams(location.search);
-1 21 var repo = search.get('repo');
-1 22 if (repo) {
-1 23 setValue('repo', repo);
-1 24 setBusy(true);
-1 25 fetch(`https://api.github.com/repos/${repo}/issues?per_page=100&state=closed`)
-1 26 .then(r => r.json())
-1 27 .then(data => {
-1 28 setBusy(false);
-1 29
-1 30 var pulls = data.filter(x => x.pull_request);
-1 31 setValue('pulls', getAverage(pulls))
-1 32
-1 33 var issues = data.filter(x => !x.pull_request);
-1 34 setValue('issues', getAverage(issues))
-1 35 });
-1 36 }
diff --git a/index.html b/style.css
@@ -1,142 +1,73 @@1 -1 <!DOCTYPE html>2 -1 <html lang="en">3 -1 <head>4 -1 <title>Github stats</title>5 -1 <style>6 -1 * {7 -1 box-sizing: border-box;8 -1 }9 -110 -1 html {11 -1 background-color: #f2f2f2;12 -1 }13 -114 -1 @media (min-width: 30em) {15 -1 html {16 -1 margin: 2em;17 -1 }18 -1 body {19 -1 box-shadow: 0 0 5em rgba(0,0,0,0.2);20 -1 }21 -1 }22 -123 -1 body {24 -1 max-width: 30em;25 -1 padding: 1em;26 -1 margin: 0 auto;27 -1 color: #333;28 -1 line-height: 1.4;29 -1 background-color: #fff;30 -1 }31 -132 -1 form {33 -1 margin: 2em 0;34 -1 }35 -136 -1 h1 {37 -1 margin-top: 0;38 -1 line-height: 1.2;39 -1 border-bottom: 0.2em solid #26c;40 -1 }41 -142 -1 label {43 -1 display: block;44 -1 margin-bottom: 0.5em;45 -1 }46 -147 -1 input,48 -1 button {49 -1 display: block;50 -1 width: 100%;51 -1 font-size: inherit;52 -1 border-radius: 0.3em;53 -1 }54 -155 -1 input {56 -1 padding: 0.3em 0.5em;57 -1 border: 1px solid silver;58 -1 }59 -1 input[readonly] {60 -1 background-color: #f2f2f2;61 -1 }62 -163 -1 button {64 -1 font-weight: bold;65 -1 padding: 0.5em;66 -1 background-color: #26c;67 -1 color: #fff;68 -1 border: 0;69 -1 cursor: pointer;70 -1 }71 -1 button:hover,72 -1 button:focus {73 -1 background-color: #15b;74 -1 }75 -1 button:disabled {76 -1 opacity: 0.5;77 -1 cursor: progress;78 -1 }79 -1 </style>80 -1 </head>81 -1 <body>82 -1 <h1>Github statistics</h1>83 -184 -1 <p>Please enter the name of a repository to fetch the stats.</p>85 -186 -1 <form>87 -1 <label>88 -1 Repository89 -1 <input name="repo" placeholder="jquery/jquery" required autofocus />90 -1 </label>91 -1 <button>Get stats!</button>92 -1 </form>93 -194 -1 <label>95 -1 Average days for pull requests96 -1 <input name="pulls" readonly />97 -1 </label>98 -1 <label>99 -1 Average days for issues100 -1 <input name="issues" readonly />101 -1 </label>102 -1103 -1 <script>104 -1 var setValue = function(name, value) {105 -1 document.getElementsByName(name)[0].value = value;106 -1 };107 -1108 -1 var setBusy = function(busy) {109 -1 document.querySelector('button').disabled = busy;110 -1 };111 -1112 -1 var getDuration = function(x) {113 -1 var created_at = (new Date(x.created_at)).getTime();114 -1 var closed_at = (new Date(x.closed_at)).getTime();115 -1 return (closed_at - created_at) / 1000 / 60 / 60 / 24;116 -1 };117 -1118 -1 var getAverage = function(data) {119 -1 var duration = data.reduce((a, b) => a + getDuration(b), 0);120 -1 return duration / data.length;121 -1 };122 -1123 -1 var search = new URLSearchParams(location.search);124 -1 var repo = search.get('repo');125 -1 if (repo) {126 -1 setValue('repo', repo);127 -1 setBusy(true);128 -1 fetch(`https://api.github.com/repos/${repo}/issues?per_page=100&state=closed`)129 -1 .then(r => r.json())130 -1 .then(data => {131 -1 setBusy(false);132 -1133 -1 var pulls = data.filter(x => x.pull_request);134 -1 setValue('pulls', getAverage(pulls))135 -1136 -1 var issues = data.filter(x => !x.pull_request);137 -1 setValue('issues', getAverage(issues))138 -1 });139 -1 }140 -1 </script>141 -1 </body>142 -1 </html>-1 1 * { -1 2 box-sizing: border-box; -1 3 } -1 4 -1 5 html { -1 6 background-color: #f2f2f2; -1 7 } -1 8 -1 9 @media (min-width: 30em) { -1 10 html { -1 11 margin: 2em; -1 12 } -1 13 body { -1 14 box-shadow: 0 0 5em rgba(0,0,0,0.2); -1 15 } -1 16 } -1 17 -1 18 body { -1 19 max-width: 30em; -1 20 padding: 1em; -1 21 margin: 0 auto; -1 22 color: #333; -1 23 line-height: 1.4; -1 24 background-color: #fff; -1 25 } -1 26 -1 27 form { -1 28 margin: 2em 0; -1 29 } -1 30 -1 31 h1 { -1 32 margin-top: 0; -1 33 line-height: 1.2; -1 34 border-bottom: 0.2em solid #26c; -1 35 } -1 36 -1 37 label { -1 38 display: block; -1 39 margin-bottom: 0.5em; -1 40 } -1 41 -1 42 input, -1 43 button { -1 44 display: block; -1 45 width: 100%; -1 46 font-size: inherit; -1 47 border-radius: 0.3em; -1 48 } -1 49 -1 50 input { -1 51 padding: 0.3em 0.5em; -1 52 border: 1px solid silver; -1 53 } -1 54 input[readonly] { -1 55 background-color: #f2f2f2; -1 56 } -1 57 -1 58 button { -1 59 font-weight: bold; -1 60 padding: 0.5em; -1 61 background-color: #26c; -1 62 color: #fff; -1 63 border: 0; -1 64 cursor: pointer; -1 65 } -1 66 button:hover, -1 67 button:focus { -1 68 background-color: #15b; -1 69 } -1 70 button:disabled { -1 71 opacity: 0.5; -1 72 cursor: progress; -1 73 }