├── screenshots
└── screenshot.png
├── README.md
├── index.html
├── LICENSE
├── script.js
└── style.css
/screenshots/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dexif/YourLife/HEAD/screenshots/screenshot.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Your Life Graph generator
2 | ========
3 |
4 | You can try it on: http://spitsyn.net/yourlife
5 |
6 | 
7 |
8 | Concept from: http://youtube.com/watch?v=xPPCzryZK44
9 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Your Life?
7 |
8 |
9 |
10 |
11 | 
12 | Your life?
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 Evgenij Spitsyn
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | function redraw(){
4 |
5 | var life_block = document.querySelector('#life');
6 | life_block.innerHTML = '';
7 | var now = new Date();
8 | var matches = window.location.hash.match(/#(\d{4})\.(\d{1,2})\.(\d{1,2})/);
9 | if(matches && matches.length > 0) {
10 | console.log(matches);
11 | var birth_year = parseInt(matches[1], 10);
12 | var birth_month = parseInt(matches[2], 10);
13 | var birth_day = parseInt(matches[3], 10);
14 | } else {
15 | var birth_year = prompt('What year were you born in?', 1980);
16 | var birth_month = prompt('What month(number) were you born in?', 1);
17 | var birth_day = prompt('What day were you born in?', 1);
18 | }
19 |
20 | if (birth_year > 1900 && birth_year < now.getFullYear()) {
21 | } else {
22 | alert('Wrong year!');
23 | return;
24 | }
25 |
26 |
27 | if (birth_month > 0 && birth_month < 13) {
28 | } else {
29 | alert('Wrong month!');
30 | return;
31 | }
32 |
33 |
34 | if (birth_day > 0 && birth_day < 32) {
35 | } else {
36 | alert('Wrong day!');
37 | return;
38 | }
39 |
40 | var birthdate = Date.UTC(birth_year, birth_month, birth_day);
41 | var today = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
42 | var weeks = (today - birthdate) / (1000 * 60 * 60 * 24 * 7);
43 |
44 | var week_of_life = 0;
45 | var div, week, year_number, week_class, title;
46 | for (var i = 0; i <= 80; i++) {
47 | div = document.createElement('div');
48 | div.setAttribute('id', 'year_' + i);
49 | div.setAttribute('class', 'year');
50 | year_number = document.createElement('div');
51 | year_number.setAttribute('class', 'year_number');
52 | year_number.innerHTML = i;
53 | div.appendChild(year_number);
54 | for (var j = 1; j <= 52; j++) {
55 | week_of_life++;
56 | title = '';
57 | week = document.createElement('div');
58 | week.setAttribute('id', 'week_' + week_of_life);
59 |
60 | week_class = 'week week_of_year_' + j;
61 | if (week_of_life <= weeks) {
62 | week_class += ' ended';
63 | }
64 | if (week_of_life == Math.ceil(weeks)) {
65 | week_class += ' current';
66 | }
67 | week.setAttribute('title', title + week_of_life + ' week of life and ' + j + ' week of ' + i + ' year.');
68 | week.setAttribute('class', week_class);
69 | div.appendChild(week);
70 | }
71 | life_block.appendChild(div);
72 | }
73 | }
74 | document.addEventListener('DOMContentLoaded', function() {
75 | redraw();
76 | window.onhashchange = redraw;
77 | });
78 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
2 | html,
3 | body,
4 | div,
5 | span,
6 | applet,
7 | object,
8 | iframe,
9 | h1,
10 | h2,
11 | h3,
12 | h4,
13 | h5,
14 | h6,
15 | p,
16 | blockquote,
17 | pre,
18 | a,
19 | abbr,
20 | acronym,
21 | address,
22 | big,
23 | cite,
24 | code,
25 | del,
26 | dfn,
27 | em,
28 | img,
29 | ins,
30 | kbd,
31 | q,
32 | s,
33 | samp,
34 | small,
35 | strike,
36 | strong,
37 | sub,
38 | sup,
39 | tt,
40 | var,
41 | b,
42 | u,
43 | i,
44 | center,
45 | dl,
46 | dt,
47 | dd,
48 | ol,
49 | ul,
50 | li,
51 | fieldset,
52 | form,
53 | label,
54 | legend,
55 | table,
56 | caption,
57 | tbody,
58 | tfoot,
59 | thead,
60 | tr,
61 | th,
62 | td,
63 | article,
64 | aside,
65 | canvas,
66 | details,
67 | embed,
68 | figure,
69 | figcaption,
70 | footer,
71 | header,
72 | hgroup,
73 | menu,
74 | nav,
75 | output,
76 | ruby,
77 | section,
78 | summary,
79 | time,
80 | mark,
81 | audio,
82 | video
83 | {
84 | font: inherit;
85 | font-size: 100%;
86 |
87 | margin: 0;
88 | padding: 0;
89 |
90 | vertical-align: baseline;
91 |
92 | border: 0;
93 | }
94 |
95 | article,
96 | aside,
97 | details,
98 | figcaption,
99 | figure,
100 | footer,
101 | header,
102 | hgroup,
103 | menu,
104 | nav,
105 | section
106 | {
107 | display: block;
108 | }
109 |
110 | body
111 | {
112 | line-height: 1;
113 | }
114 |
115 | ol,
116 | ul
117 | {
118 | list-style: none;
119 | }
120 |
121 | blockquote,
122 | q
123 | {
124 | quotes: none;
125 | }blockquote:before,
126 | blockquote:after,
127 | q:before,
128 | q:after
129 | {
130 | content: none;
131 | }
132 |
133 | table
134 | {
135 | border-spacing: 0;
136 | border-collapse: collapse;
137 | }
138 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
139 |
140 |
141 | body
142 | {
143 | -webkit-user-select: none; /* Chrome all / Safari all */
144 | -moz-user-select: none; /* Firefox all */
145 | -ms-user-select: none; /* IE 10+ */
146 | user-select: none;
147 |
148 | background: #fff;
149 | /* No support for these yet, use at own risk */
150 |
151 | -o-user-select: none;
152 | -webkit-print-color-adjust: exact;
153 | }
154 | .title
155 | {
156 | font-size: 25px;
157 |
158 | margin: 0 auto;
159 |
160 | text-align: center;
161 | }
162 | #life,
163 | .header,
164 | .copyright
165 | {
166 | width: 600px;
167 | margin: 0 auto;
168 | }
169 | .header
170 | {
171 | padding-left: 14px;
172 | }
173 | .copyright, a {
174 | color:#aaa;
175 | text-align: center;
176 | }
177 |
178 | #life div
179 | {
180 | font-size: 10px;
181 | line-height: 10px;
182 |
183 | margin: 0;
184 | padding: 0;
185 |
186 | vertical-align: top;
187 | }
188 | #life div.year:hover
189 | {
190 | background: #ddd;
191 | }
192 | #life div.year_number
193 | {
194 | display: inline-block;
195 |
196 | width: 15px;
197 | margin-right: 5px;
198 |
199 | text-align: right;
200 |
201 | color: #ccc;
202 | }
203 |
204 | #life div:nth-child(5n+1) div.year_number
205 | {
206 | font-weight: bolder;
207 |
208 | color: #000;
209 | }
210 |
211 | #life div.week
212 | {
213 | display: inline-block;
214 |
215 | width: 7px;
216 | height: 7px;
217 | margin: 1px;
218 |
219 | border: 1px solid #888;
220 | background: #fff;
221 | }
222 | #life div.ended
223 | {
224 | background: #ccc;
225 | }
226 | #life div.current
227 | {
228 | background: #f00;
229 | box-shadow: 0 0 3px #f00;
230 | }
231 |
232 | @media print {
233 | #life div.week
234 | {
235 | background: #fff;
236 | }
237 | #life div.ended
238 | {
239 | background: #ccc;
240 | }
241 | #life div.current
242 | {
243 | background: #f00;
244 | }
245 | .print-hidden {
246 | display:none;
247 | }
248 | }
--------------------------------------------------------------------------------
