20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Horoscope - Find out your Destiny!
2 | A simple Horoscope App that will tell you your Astral sign and give you a brief description. Give it a try
3 |
4 | **Link to project:** http://kordellatimer.github.io/Horoscope
5 |
6 | ## How It's Made:
7 |
8 | **Tech used:** HTML, CSS, JavaScript
9 |
10 | I kept the HTML and CSS simple. I and put an input for the user to type their desired birthdate, and a span to show the response to the user after they click the submit button. Then I added a event listener to button, so when the user clicks, it will take the date the user typed in the input and go through an if statement. Depending on the date, it will return the correct sign and description.
11 |
12 | ## Lessons Learned:
13 |
14 | I learned more about if-statements. You can do a lot in the condition and as long as it is true, it will perform the action. Expanding my limits on what I could build.
15 |
16 | ## Examples:
17 | Take a look at these couple examples that I have in my own portfolio:
18 |
19 | **Calculator-JQuery:** http://kordellatimer.github.io/JQuery-Calculator
20 |
21 | **Lottery-App:** https://kordellatimer.github.io/Lottery-App
22 |
--------------------------------------------------------------------------------
/css/reset.css:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | html, body, div, span, applet, object, iframe,
7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 | a, abbr, acronym, address, big, cite, code,
9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | margin: 0;
20 | padding: 0;
21 | border: 0;
22 | font-size: 100%;
23 | font: inherit;
24 | vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 | display: block;
30 | }
31 | body {
32 | line-height: 1;
33 | }
34 | ol, ul {
35 | list-style: none;
36 | }
37 | blockquote, q {
38 | quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | content: '';
43 | content: none;
44 | }
45 | table {
46 | border-collapse: collapse;
47 | border-spacing: 0;
48 | }
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | /******************************************
2 | /* SETUP
3 | /*******************************************/
4 |
5 | /* Box Model Hack */
6 | * {
7 | -moz-box-sizing: border-box; /* Firexfox */
8 | -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
9 | box-sizing: border-box; /* IE */
10 | }
11 |
12 | /* Clear fix hack */
13 | .clearfix:after {
14 | content: ".";
15 | display: block;
16 | clear: both;
17 | visibility: hidden;
18 | line-height: 0;
19 | height: 0;
20 | }
21 |
22 | .clear {
23 | clear: both;
24 | }
25 |
26 | .alignright {
27 | float: right;
28 | padding: 0 0 10px 10px; /* note the padding around a right floated image */
29 | }
30 |
31 | .alignleft {
32 | float: left;
33 | padding: 0 10px 10px 0; /* note the padding around a left floated image */
34 | }
35 |
36 | /******************************************
37 | /* BASE STYLES
38 | /*******************************************/
39 |
40 | body {
41 | color: #000;
42 | font-size: 12px;
43 | line-height: 1.4;
44 | font-family: Helvetica, Arial, sans-serif;
45 | }
46 |
47 |
48 | /******************************************
49 | /* LAYOUT
50 | /*******************************************/
51 |
52 | /* Center the container */
53 | #container {
54 | width: 960px;
55 | margin: auto;
56 | }
57 |
58 | header {
59 |
60 | }
61 |
62 | footer {
63 |
64 |
65 | }
66 |
67 | /*basic border declaration*/
68 |
69 | /*height:
70 | width: 100%;
71 | border: 1px solid black;
72 | margin:0% 0% 0% 0%;*/
73 |
74 |
75 | /******************************************
76 | /* ADDITIONAL STYLES
77 | /*******************************************/
78 |
--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | // When the user clicks a button, run the horoscope function
2 |
3 | document.getElementsByTagName('button')[0].onclick = horoscope;
4 |
5 | function horoscope(){
6 | var month = (document.getElementById("input1").value).toLowerCase();
7 | var day = document.getElementById("input2").value;
8 | day = parseFloat(day)
9 |
10 | if(month == "january" && day >= 20 || month == "february" && day <=19){
11 | displayCompleteMessage("AQUIRIS: Aquarius-born are shy and quiet , but on the other hand they can be eccentric and energetic. However, in both cases, they are deep thinkers and highly intellectual people who love helping others. They are able to see without prejudice, on both sides, which makes them people who can easily solve problems.")
12 | }
13 | else if (month == "february" && day >= 20 || month == "march" && day <=19){
14 | displayCompleteMessage("PISCES: Pisces are very friendly, so they often find themselves in a company of very different people. Pisces are selfless, they are always willing to help others, without hoping to get anything back.")
15 | }
16 | else if (month == "march" && day >= 20 || month == "april" && day <=19){
17 | displayCompleteMessage("ARIES: As the first sign in the zodiac, the presence of Aries always marks the beginning of something energetic and turbulent. They are continuously looking for dynamic, speed and competition, always being the first in everything - from work to social gatherings. ")
18 | }
19 | else if (month == "april" && day >= 20 || month == "may" && day <=19){
20 | displayCompleteMessage("TAURUS: Practical and well-grounded, Taurus is the sign that harvests the fruits of labor. They feel the need to always be surrounded by love and beauty, turned to the material world, hedonism, and physical pleasures. People born with their Sun in Taurus are sensual and tactile, considering touch and taste the most important of all senses. Stable and conservative, this is one of the most reliable signs of the zodiac, ready to endure and stick to their choices until they reach the point of personal satisfaction.")
21 | }
22 | else if (month == "may" && day >= 20 || month == "june" && day <=19){
23 | displayCompleteMessage("GEMINI: Expressive and quick-witted, Gemini represents two different personalities in one and you will never be sure which one you will face. They are sociable, communicative and ready for fun, with a tendency to suddenly get serious, thoughtful and restless. They are fascinated with the world itself, extremely curious, with a constant feeling that there is not enough time to experience everything they want to see.")
24 | }
25 | else if (month == "june" && day >= 20 || month == "july" && day <=19){
26 | displayCompleteMessage("CANCER: Deeply intuitive and sentimental, Cancer can be one of the most challenging zodiac signs to get to know. They are very emotional and sensitive, and care deeply about matters of the family and their home. Cancer is sympathetic and attached to people they keep close. Those born with their Sun in Cancer are very loyal and able to empathize with other people's pain and suffering.")
27 | }
28 | else if (month == "july" && day >= 20 || month == "august" && day <=19){
29 | displayCompleteMessage("LEO: People born under the sign of Leo are natural born leaders. They are dramatic, creative, self-confident, dominant and extremely difficult to resist, able to achieve anything they want to in any area of life they commit to. Leo often has many friends for they are generous and loyal. Self-confident and attractive, this is a Sun sign capable of uniting different groups of people and leading them as one towards a shared cause, and their healthy sense of humor makes collaboration with other people even easier.")
30 | }
31 | else if (month == "august" && day >= 20 || month == "september" && day <=19){
32 | displayCompleteMessage("VIRGO: Virgos are always paying attention to the smallest details and their deep sense of humanity makes them one of the most careful signs of the zodiac. Their methodical approach to life ensures that nothing is left to chance, and although they are often tender, their heart might be closed for the outer world. This is a sign often misunderstood, not because they lack the ability to express, but because they won’t accept their feelings as valid, true, or even relevant when opposed to reason. The symbolism behind the name speaks well of their nature, born with a feeling they are experiencing everything for the first time.")
33 | }
34 | else if (month == "september" && day >= 20 || month == "october" && day <=19){
35 | displayCompleteMessage("LIBRA: People born under the sign of Libra are peaceful, fair, and they hate being alone. Partnership is very important for them, as their mirror and someone giving them the ability to be the mirror themselves. These individuals are fascinated by balance and symmetry, they are in a constant chase for justice and equality, realizing through life that the only thing that should be truly important to themselves in their own inner core of personality. This is someone ready to do nearly anything to avoid conflict, keeping the peace whenever possible")
36 | }
37 | else if (month == "october" && day >= 20 || month == "november" && day <=19){
38 | displayCompleteMessage("SCORPIO: Scorpio-born are passionate and assertive people. They are determined and decisive, and will research until they find out the truth. Scorpio is a great leader, always aware of the situation and also features prominently in resourcefulness.")
39 | }
40 | else if (month == "november" && day >= 20 || month == "december" && day <=19){
41 | displayCompleteMessage("SAGITTARIUS: Curious and energetic, Sagittarius is one of the biggest travelers among all zodiac signs. Their open mind and philosophical view motivates them to wander around the world in search of the meaning of life.")
42 | }
43 | else if (month == "december" && day >= 20 || month == "january" && day <=19){
44 | displayCompleteMessage("CAPRICORN: Capricorn is a sign that represents time and responsibility, and its representatives are traditional and often very serious by nature. These individuals possess an inner state of independence that enables significant progress both in their personal and professional lives. They are masters of self-control and have the ability to lead the way, make solid and realistic plans, and manage many people who work for them at any time. They will learn from their mistakes and get to the top based solely on their experience and expertise.")
45 | }
46 | else {
47 | window.alert("Please make sure that the Month is spelled correctly and correct date!")
48 | }
49 |
50 | }
51 | function displayCompleteMessage(msg){
52 | document.getElementsByTagName("p")[0].innerHTML=msg;
53 | }
54 |
--------------------------------------------------------------------------------
/css/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */
2 |
3 | /* ==========================================================================
4 | HTML5 display definitions
5 | ========================================================================== */
6 |
7 | /*
8 | * Corrects `block` display not defined in IE6/7/8/9 & FF3.
9 | */
10 |
11 | article,
12 | aside,
13 | details,
14 | figcaption,
15 | figure,
16 | footer,
17 | header,
18 | hgroup,
19 | nav,
20 | section,
21 | summary {
22 | display: block;
23 | }
24 |
25 | /*
26 | * Corrects `inline-block` display not defined in IE6/7/8/9 & FF3.
27 | */
28 |
29 | audio,
30 | canvas,
31 | video {
32 | display: inline-block;
33 | *display: inline;
34 | *zoom: 1;
35 | }
36 |
37 | /*
38 | * Prevents modern browsers from displaying `audio` without controls.
39 | * Remove excess height in iOS5 devices.
40 | */
41 |
42 | audio:not([controls]) {
43 | display: none;
44 | height: 0;
45 | }
46 |
47 | /*
48 | * Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4.
49 | * Known issue: no IE6 support.
50 | */
51 |
52 | [hidden] {
53 | display: none;
54 | }
55 |
56 | /* ==========================================================================
57 | Base
58 | ========================================================================== */
59 |
60 | /*
61 | * 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using
62 | * `em` units.
63 | * 2. Prevents iOS text size adjust after orientation change, without disabling
64 | * user zoom.
65 | */
66 |
67 | html {
68 | font-size: 100%; /* 1 */
69 | -webkit-text-size-adjust: 100%; /* 2 */
70 | -ms-text-size-adjust: 100%; /* 2 */
71 | }
72 |
73 | /*
74 | * Addresses `font-family` inconsistency between `textarea` and other form
75 | * elements.
76 | */
77 |
78 | html,
79 | button,
80 | input,
81 | select,
82 | textarea {
83 | font-family: sans-serif;
84 | }
85 |
86 | /*
87 | * Addresses margins handled incorrectly in IE6/7.
88 | */
89 |
90 | body {
91 | margin: 0;
92 | }
93 |
94 | /* ==========================================================================
95 | Links
96 | ========================================================================== */
97 |
98 | /*
99 | * Addresses `outline` inconsistency between Chrome and other browsers.
100 | */
101 |
102 | a:focus {
103 | outline: thin dotted;
104 | }
105 |
106 | /*
107 | * Improves readability when focused and also mouse hovered in all browsers.
108 | * people.opera.com/patrickl/experiments/keyboard/test
109 | */
110 |
111 | a:active,
112 | a:hover {
113 | outline: 0;
114 | }
115 |
116 | /* ==========================================================================
117 | Typography
118 | ========================================================================== */
119 |
120 | /*
121 | * Addresses font sizes and margins set differently in IE6/7.
122 | * Addresses font sizes within `section` and `article` in FF4+, Chrome, S5.
123 | */
124 |
125 | h1 {
126 | font-size: 2em;
127 | margin: 0.67em 0;
128 | }
129 |
130 | h2 {
131 | font-size: 1.5em;
132 | margin: 0.83em 0;
133 | }
134 |
135 | h3 {
136 | font-size: 1.17em;
137 | margin: 1em 0;
138 | }
139 |
140 | h4 {
141 | font-size: 1em;
142 | margin: 1.33em 0;
143 | }
144 |
145 | h5 {
146 | font-size: 0.83em;
147 | margin: 1.67em 0;
148 | }
149 |
150 | h6 {
151 | font-size: 0.75em;
152 | margin: 2.33em 0;
153 | }
154 |
155 | /*
156 | * Addresses styling not present in IE7/8/9, S5, Chrome.
157 | */
158 |
159 | abbr[title] {
160 | border-bottom: 1px dotted;
161 | }
162 |
163 | /*
164 | * Addresses style set to `bolder` in FF3+, S4/5, Chrome.
165 | */
166 |
167 | b,
168 | strong {
169 | font-weight: bold;
170 | }
171 |
172 | blockquote {
173 | margin: 1em 40px;
174 | }
175 |
176 | /*
177 | * Addresses styling not present in S5, Chrome.
178 | */
179 |
180 | dfn {
181 | font-style: italic;
182 | }
183 |
184 | /*
185 | * Addresses styling not present in IE6/7/8/9.
186 | */
187 |
188 | mark {
189 | background: #ff0;
190 | color: #000;
191 | }
192 |
193 | /*
194 | * Addresses margins set differently in IE6/7.
195 | */
196 |
197 | p,
198 | pre {
199 | margin: 1em 0;
200 | }
201 |
202 | /*
203 | * Corrects font family set oddly in IE6, S4/5, Chrome.
204 | * en.wikipedia.org/wiki/User:Davidgothberg/Test59
205 | */
206 |
207 | code,
208 | kbd,
209 | pre,
210 | samp {
211 | font-family: monospace, serif;
212 | _font-family: 'courier new', monospace;
213 | font-size: 1em;
214 | }
215 |
216 | /*
217 | * Improves readability of pre-formatted text in all browsers.
218 | */
219 |
220 | pre {
221 | white-space: pre;
222 | white-space: pre-wrap;
223 | word-wrap: break-word;
224 | }
225 |
226 | /*
227 | * Addresses CSS quotes not supported in IE6/7.
228 | */
229 |
230 | q {
231 | quotes: none;
232 | }
233 |
234 | /*
235 | * Addresses `quotes` property not supported in S4.
236 | */
237 |
238 | q:before,
239 | q:after {
240 | content: '';
241 | content: none;
242 | }
243 |
244 | small {
245 | font-size: 75%;
246 | }
247 |
248 | /*
249 | * Prevents `sub` and `sup` affecting `line-height` in all browsers.
250 | * gist.github.com/413930
251 | */
252 |
253 | sub,
254 | sup {
255 | font-size: 75%;
256 | line-height: 0;
257 | position: relative;
258 | vertical-align: baseline;
259 | }
260 |
261 | sup {
262 | top: -0.5em;
263 | }
264 |
265 | sub {
266 | bottom: -0.25em;
267 | }
268 |
269 | /* ==========================================================================
270 | Lists
271 | ========================================================================== */
272 |
273 | /*
274 | * Addresses margins set differently in IE6/7.
275 | */
276 |
277 | dl,
278 | menu,
279 | ol,
280 | ul {
281 | margin: 1em 0;
282 | }
283 |
284 | dd {
285 | margin: 0 0 0 40px;
286 | }
287 |
288 | /*
289 | * Addresses paddings set differently in IE6/7.
290 | */
291 |
292 | menu,
293 | ol,
294 | ul {
295 | padding: 0 0 0 40px;
296 | }
297 |
298 | /*
299 | * Corrects list images handled incorrectly in IE7.
300 | */
301 |
302 | nav ul,
303 | nav ol {
304 | list-style: none;
305 | list-style-image: none;
306 | }
307 |
308 | /* ==========================================================================
309 | Embedded content
310 | ========================================================================== */
311 |
312 | /*
313 | * 1. Removes border when inside `a` element in IE6/7/8/9, FF3.
314 | * 2. Improves image quality when scaled in IE7.
315 | * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
316 | */
317 |
318 | img {
319 | border: 0; /* 1 */
320 | -ms-interpolation-mode: bicubic; /* 2 */
321 | }
322 |
323 | /*
324 | * Corrects overflow displayed oddly in IE9.
325 | */
326 |
327 | svg:not(:root) {
328 | overflow: hidden;
329 | }
330 |
331 | /* ==========================================================================
332 | Figures
333 | ========================================================================== */
334 |
335 | /*
336 | * Addresses margin not present in IE6/7/8/9, S5, O11.
337 | */
338 |
339 | figure {
340 | margin: 0;
341 | }
342 |
343 | /* ==========================================================================
344 | Forms
345 | ========================================================================== */
346 |
347 | /*
348 | * Corrects margin displayed oddly in IE6/7.
349 | */
350 |
351 | form {
352 | margin: 0;
353 | }
354 |
355 | /*
356 | * Define consistent border, margin, and padding.
357 | */
358 |
359 | fieldset {
360 | border: 1px solid #c0c0c0;
361 | margin: 0 2px;
362 | padding: 0.35em 0.625em 0.75em;
363 | }
364 |
365 | /*
366 | * 1. Corrects color not being inherited in IE6/7/8/9.
367 | * 2. Corrects text not wrapping in FF3.
368 | * 3. Corrects alignment displayed oddly in IE6/7.
369 | */
370 |
371 | legend {
372 | border: 0; /* 1 */
373 | padding: 0;
374 | white-space: normal; /* 2 */
375 | *margin-left: -7px; /* 3 */
376 | }
377 |
378 | /*
379 | * 1. Corrects font size not being inherited in all browsers.
380 | * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome.
381 | * 3. Improves appearance and consistency in all browsers.
382 | */
383 |
384 | button,
385 | input,
386 | select,
387 | textarea {
388 | font-size: 100%; /* 1 */
389 | margin: 0; /* 2 */
390 | vertical-align: baseline; /* 3 */
391 | *vertical-align: middle; /* 3 */
392 | }
393 |
394 | /*
395 | * Addresses FF3/4 setting `line-height` on `input` using `!important` in the
396 | * UA stylesheet.
397 | */
398 |
399 | button,
400 | input {
401 | line-height: normal;
402 | }
403 |
404 | /*
405 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
406 | * and `video` controls.
407 | * 2. Corrects inability to style clickable `input` types in iOS.
408 | * 3. Improves usability and consistency of cursor style between image-type
409 | * `input` and others.
410 | * 4. Removes inner spacing in IE7 without affecting normal text inputs.
411 | * Known issue: inner spacing remains in IE6.
412 | */
413 |
414 | button,
415 | html input[type="button"], /* 1 */
416 | input[type="reset"],
417 | input[type="submit"] {
418 | -webkit-appearance: button; /* 2 */
419 | cursor: pointer; /* 3 */
420 | *overflow: visible; /* 4 */
421 | }
422 |
423 | /*
424 | * Re-set default cursor for disabled elements.
425 | */
426 |
427 | button[disabled],
428 | input[disabled] {
429 | cursor: default;
430 | }
431 |
432 | /*
433 | * 1. Addresses box sizing set to content-box in IE8/9.
434 | * 2. Removes excess padding in IE8/9.
435 | * 3. Removes excess padding in IE7.
436 | * Known issue: excess padding remains in IE6.
437 | */
438 |
439 | input[type="checkbox"],
440 | input[type="radio"] {
441 | box-sizing: border-box; /* 1 */
442 | padding: 0; /* 2 */
443 | *height: 13px; /* 3 */
444 | *width: 13px; /* 3 */
445 | }
446 |
447 | /*
448 | * 1. Addresses `appearance` set to `searchfield` in S5, Chrome.
449 | * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz`
450 | * to future-proof).
451 | */
452 |
453 | input[type="search"] {
454 | -webkit-appearance: textfield; /* 1 */
455 | -moz-box-sizing: content-box;
456 | -webkit-box-sizing: content-box; /* 2 */
457 | box-sizing: content-box;
458 | }
459 |
460 | /*
461 | * Removes inner padding and search cancel button in S5, Chrome on OS X.
462 | */
463 |
464 | input[type="search"]::-webkit-search-cancel-button,
465 | input[type="search"]::-webkit-search-decoration {
466 | -webkit-appearance: none;
467 | }
468 |
469 | /*
470 | * Removes inner padding and border in FF3+.
471 | */
472 |
473 | button::-moz-focus-inner,
474 | input::-moz-focus-inner {
475 | border: 0;
476 | padding: 0;
477 | }
478 |
479 | /*
480 | * 1. Removes default vertical scrollbar in IE6/7/8/9.
481 | * 2. Improves readability and alignment in all browsers.
482 | */
483 |
484 | textarea {
485 | overflow: auto; /* 1 */
486 | vertical-align: top; /* 2 */
487 | }
488 |
489 | /* ==========================================================================
490 | Tables
491 | ========================================================================== */
492 |
493 | /*
494 | * Remove most spacing between table cells.
495 | */
496 |
497 | table {
498 | border-collapse: collapse;
499 | border-spacing: 0;
500 | }
--------------------------------------------------------------------------------