The latest articles on DEV Community by Mohamed Safouan Besrour (@besrourms). https://dev.to/besrourms https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F889815%2Fa3f83445-fde3-4f07-b368-4cb38d0b89cd.jpeg https://dev.to/besrourms en Mohamed Safouan Besrour Sun, 17 Jul 2022 14:48:29 +0000 https://dev.to/besrourms/get-the-zodiac-sign-for-a-date-in-javascript-4d81 https://dev.to/besrourms/get-the-zodiac-sign-for-a-date-in-javascript-4d81 <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frz447ewdw3cjx9kw21aw.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frz447ewdw3cjx9kw21aw.jpg" alt="Get the Zodiac Sign for a date in JavaScript&lt;br&gt; "></a><br> I created this little library to provide a zodiac sign &amp; chinese zodiac sign depending on a birthday using The Intl.DateTimeFormat object.</p> <p>You can install the library via jsDeliver CDN<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://cdn.jsdelivr.net/gh/besrourms/zodiacsigns@latest/index.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span> </code></pre> </div> <h3> Getting a zodiac sign from a date </h3> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Return 'Sagittarius: The Archer'</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="k">new</span> <span class="nc">ZodiacSign</span><span class="p">(</span><span class="dl">'</span><span class="s1">1991-11-30</span><span class="dl">'</span><span class="p">).</span><span class="nx">sign</span><span class="p">)</span> </code></pre> </div> <h3> Getting a chinese zodiac sign from a date </h3> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Return 'Fire Rat'</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="k">new</span> <span class="nc">ZodiacSign</span><span class="p">(</span><span class="dl">'</span><span class="s1">1 Feb 1997 00:12:00 GMT</span><span class="dl">'</span><span class="p">).</span><span class="nx">chinese</span><span class="p">)</span> </code></pre> </div> <h3> Getting a sign with translation </h3> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="c1">// Overload the default language (format xx)</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="k">new</span> <span class="nc">ZodiacSign</span><span class="p">(</span><span class="dl">'</span><span class="s1">1 Feb 1997 00:12:00 GMT</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">ar</span><span class="dl">'</span><span class="p">).</span><span class="nx">chinese</span><span class="p">);</span> </code></pre> </div> <h2> Translation </h2> <p>For the moment, the only available languages are English, French, Spanish and Arabic.<br> Fell free to participate to the translation in any other language.</p> <h3> Available languages </h3> <ul> <li>English (en)</li> <li>French (fr)</li> <li>Spanish (es)</li> <li>Arabic (ar)</li> </ul> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/BesrourMS" rel="noopener noreferrer"> BesrourMS </a> / <a href="https://github.com/BesrourMS/ZodiacSigns" rel="noopener noreferrer"> ZodiacSigns </a> </h2> <h3> Get the Zodiac Sign / Chinese Zodiac Sign for a date in JavaScript </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <p><a href="https://github.com/besrourms/ZodiacSigns/blob/main/LICENSE" rel="noopener noreferrer"><img src="https://camo.githubusercontent.com/28f4d479bf0a9b033b3a3b95ab2adc343da448a025b01aefdc0fbc7f0e169eb8/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d677265656e2e737667" alt="License: MIT"></a> <a href="https://www.jsdelivr.com/package/gh/besrourms/ZodiacSigns" rel="nofollow noopener noreferrer"><img src="https://camo.githubusercontent.com/141d925d3cef878b8f7385cab232ad31c77d839dcc6cd2c09a3061fb1e6de684/68747470733a2f2f646174612e6a7364656c6976722e636f6d2f76312f7061636b6167652f67682f626573726f75726d732f5a6f646961635369676e732f6261646765" alt=""></a> <a href="https://jsr.io/@besrourms/zodiacsigns" rel="nofollow noopener noreferrer"><img src="https://camo.githubusercontent.com/2484c22725d13d1296c194cc456052aec03cbae8837232171f6f9c95c70a005e/68747470733a2f2f6a73722e696f2f6261646765732f40626573726f75726d732f7a6f646961637369676e73" alt="JSR"></a></p> <div class="markdown-heading"> <h1 class="heading-element">Zodiac Signs / Chinese Zodiac Signs</h1> </div> <p>Provides a zodiac sign &amp; chinese zodiac sign depending a birthday</p> <div class="markdown-heading"> <h2 class="heading-element">Installation</h2> </div> <div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">https://cdn.jsdelivr.net/gh/besrourms/zodiacsigns@latest/index.min.js</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span></pre> </div> <div class="markdown-heading"> <h2 class="heading-element">Examples</h2> </div> <div class="markdown-heading"> <h3 class="heading-element">Getting a zodiac sign from a date</h3> </div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-c">// Return 'Sagittarius: The Archer'</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-k">new</span> <span class="pl-v">ZodiacSign</span><span class="pl-kos">(</span><span class="pl-s">'1991-11-30'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">sign</span><span class="pl-kos">)</span></pre> </div> <div class="markdown-heading"> <h3 class="heading-element">Getting a chinese zodiac sign from a date</h3> </div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-c">// Return {"sign": "Rat", "element": "Fire", "yinyang": "Yang"}</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-k">new</span> <span class="pl-v">ZodiacSign</span><span class="pl-kos">(</span><span class="pl-s">'1 Feb 1997 00:12:00 GMT'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">chinese</span><span class="pl-kos">)</span></pre> </div> <div class="markdown-heading"> <h3 class="heading-element">Getting a sign with translation</h3> </div> <div class="highlight highlight-source-js notranslate position-relative overflow-auto js-code-highlight"> <pre><span class="pl-c">// Overload the default language (format xx)</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-k">new</span> <span class="pl-v">ZodiacSign</span><span class="pl-kos">(</span><span class="pl-s">'1 Feb 1997 00:12:00 GMT'</span><span class="pl-kos">,</span> <span class="pl-s">'ar'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">chinese</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre> </div> <div class="markdown-heading"> <h2 class="heading-element">Translation</h2> </div> <p>Fell free to participate to the translation in any language.</p> <div class="markdown-heading"> <h3 class="heading-element">Available languages</h3> </div> <ul> <li>English (en) – English</li> <li>French (fr) – Français</li> <li>Spanish (es) – Español</li> <li>Arabic (ar) – العربية</li> <li>Ukrainian (ua) – Українська</li> <li>Chinese…</li> </ul> </div> <br> </div> <br> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/BesrourMS/ZodiacSigns" rel="noopener noreferrer">View on GitHub</a></div> <br> </div> <br> javascript zodiacsign chineseanimals chineseelements