Delmar/bikinibottom
3
1 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

"Updates"

Browse Source
This commit is contained in:
julien committed 2025-12-30 10:56:57 +01:00
1 parent 633a73efc4
commit 706e4c72f5
5 files changed
+121
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Divers/Calendar using JavaScript.md
+65
View File
@@ -0,0 +1,65 @@
Calendar using JavaScript
========================
> ## Excerpt
> We will Create a calendar using HTML, CSS, and JavaScript that displays the current month and year, and allows the user to navigate to previous and next months. Also, it allows the user to jump to a specific month and year. The calendar should also highlight the current date.Prerequisites: HTMLCSSJavaScript The
---
# How to Design a Simple Calendar using JavaScript ?
Last Updated : 25 Sep, 2024
Summarize
Comments
Improve
Suggest changes
13 Likes
Like
Save
Share
Report
[![News](How%20to%20Design%20a%20Simple%20Calendar%20using%20JavaScript%20-%20GeeksforGeeks/Google-news.svg) Follow](https://news.google.com/publications/CAAqBwgKMLTrzwsw44bnAw?hl=en-IN&gl=IN&ceid=IN%3Aen)
We will Create a calendar using HTML, CSS, and JavaScript that displays the current month and year, and allows the user to navigate to previous and next months. Also, it allows the user to jump to a specific month and year. The calendar should also highlight the current date.
### ****Prerequisites:****
- [HTML](https://www.geeksforgeeks.org/html/)
- [CSS](https://www.geeksforgeeks.org/css/)
- [JavaScript](https://www.geeksforgeeks.org/javascript/)
The task at hand is to create a webpage that displays a calendar. The calendar should have the functionality to navigate to the previous and next months. The calendar should also be able to display the current date in a different color.
## ****Approach:****
- Create an HTML structure for the calendar using a table and appropriate list elements.
- Create JavaScript variables to keep track of the current month and year, as well as elements to display the current month and year on the page.
- Use JavaScript to create a function to display the current month’s calendar. This function should take in the current month and year as arguments and use them to determine the number of days in the current month, and the first day of the month, and fill in the appropriate number of days in the calendar.
- Create JavaScript functions to navigate to the next and previous months.
- Use JavaScript to add event listeners to the appropriate elements (next and previous buttons) to call the appropriate navigation functions when clicked.
****Implementation:**** Below is the implementation of the above approach:
- ****index.html:**** This file contains the skeleton of calendar
- ****styles.css:**** This file contains CSS to improve the look of the calendar
- ****script.js:**** This file contains the code to make the calendar dynamic
****Example:**** Here is the implementation of the above-explained steps.
HTML` ``` <span></span><span class="cp">&lt;!DOCTYPE html&gt;</span> <span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span> <span class="na">dir</span><span class="o">=</span><span class="s">"ltr"</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Calendar<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"styles.css"</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span> <span class="s">"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"calendar-container"</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">header</span> <span class="na">class</span><span class="o">=</span><span class="s">"calendar-header"</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"calendar-current-date"</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"calendar-navigation"</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">id</span><span class="o">=</span><span class="s">"calendar-prev"</span> <span class="na">class</span><span class="o">=</span><span class="s">"material-symbols-rounded"</span><span class="p">&gt;</span> chevron_left <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">span</span> <span class="na">id</span><span class="o">=</span><span class="s">"calendar-next"</span> <span class="na">class</span><span class="o">=</span><span class="s">"material-symbols-rounded"</span><span class="p">&gt;</span> chevron_right <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span> <span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"calendar-body"</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"calendar-weekdays"</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Sun<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Mon<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Tue<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Wed<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Thu<span class="p">&lt;/</span><span clLine truncated
CSS` ``` <span></span><span class="o">*</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span> <span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span> <span class="w"> </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="s1">'Poppins'</span><span class="p">,</span><span class="w"> </span><span class="kc">sans-serif</span><span class="p">;</span> <span class="p">}</span> <span class="nt">body</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">flex</span><span class="p">;</span> <span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#ef62da</span><span class="p">;</span> <span class="w"> </span><span class="k">min-height</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">vh</span><span class="p">;</span> <span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="p">;</span> <span class="w"> </span><span class="k">align-items</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span> <span class="w"> </span><span class="k">justify-content</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span> <span class="p">}</span> <span class="p">.</span><span class="nc">calendar-container</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="mh">#fff</span><span class="p">;</span> <span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">450</span><span class="kt">px</span><span class="p">;</span> <span class="w"> </span><span class="k">border-radius</span><span class="p">:</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="p">;</span> <span class="w"> </span><span class="k">box-shadow</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="w"> </span><span class="mi">40</span><span class="kt">px</span><span class="w"> </span><span class="nb">rgba</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0.12</span><span class="p">);</span> <span class="p">}</span> <span class="p">.</span><span class="nc">calendar-container</span><span class="w"> </span><span class="nt">header</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">flex</span><span class="p">;</span> <span class="w"> </span><span class="k">align-items</span><span class="p">:</span><span class="w"> </span><span class="kc">center</span><span class="p">;</span> <span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">25</span><span class="kt">px</span><span class="w"> </span><span class="mi">30</span><span class="kt">px</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="p">;</span> <span class="w"> </span><span class="k">justify-content</span><span class="p">:</span><span class="w"> </span><span class="kc">space-between</span><span class="p">;</span> <span class="p">}</span> <span class="nt">header</span><span class="w"> </span><span class="p">.</span><span class="nc">calendar-navigation</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="w"> </span><span class="kc">flex</span><span class="p">;</span> <span class="p">}</span> <span class="nt">header</span><span class="w"> </span><span class="p">.</span><span class="nc">calendar-navigation</span><span class="w"> </span><span class="nt">span</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">height</span><span class="p">:</span><span class="w"> </span><span class="mi">38</span><span class="kt">px</span><span class="p">;</span> <span class="w"> </span><span class="k">width</span><spLine truncated
JavaScript`` ``` <span></span><span class="kd">let</span><span class="w"> </span><span class="nx">date</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">();</span> <span class="kd">let</span><span class="w"> </span><span class="nx">year</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">date</span><span class="p">.</span><span class="nx">getFullYear</span><span class="p">();</span> <span class="kd">let</span><span class="w"> </span><span class="nx">month</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">date</span><span class="p">.</span><span class="nx">getMonth</span><span class="p">();</span> <span class="kd">const</span><span class="w"> </span><span class="nx">day</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">".calendar-dates"</span><span class="p">);</span> <span class="kd">const</span><span class="w"> </span><span class="nx">currdate</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span> <span class="w"> </span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">".calendar-current-date"</span><span class="p">);</span> <span class="kd">const</span><span class="w"> </span><span class="nx">prenexIcons</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span> <span class="w"> </span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s2">".calendar-navigation span"</span><span class="p">);</span> <span class="c1">// Array of month names</span> <span class="kd">const</span><span class="w"> </span><span class="nx">months</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="s2">"January"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"February"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"March"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"April"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"May"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"June"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"July"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"August"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"September"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"October"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"November"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"December"</span> <span class="p">];</span> <span class="c1">// Function to generate the calendar</span> <span class="kd">const</span><span class="w"> </span><span class="nx">manipulate</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c1">// Get the first day of the month</span> <span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">dayone</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">(</span><span class="nx">year</span><span class="p">,</span><span class="w"> </span><span class="nx">month</span><span class="p">,</span><span class="w"> </span><span class="mf">1</span><span class="p">).</span><span class="nx">getDay</span><span class="p">();</span> <span class="w"> </span><span class="c1">// Get the last date of the month</span> <span class="w"> </span><span class="kd">let</span><span class="w"> </span><span class="nx">lastdate</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">(</span><span class="nx">year</span><span class="p">,</span><span class="w"> </span><span class="nx">month</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span><span class="w"> </span><span class="mf">0</span><span class="p">).</span><span class="nx">getDate</span><span class="p">();</span> <span class="w"> </span><span class="c1">// Get the day of the last date of the month</span> <span class="w"> </span><span class="kLine truncated
****Output:****
![a1](How%20to%20Design%20a%20Simple%20Calendar%20using%20JavaScript%20-%20GeeksforGeeks/a1.gif)
How to Design a Simple Calendar using JavaScript?
Divers/Laidout.md
+13
View File
@@ -0,0 +1,13 @@
Laidout
========================
### Install from source
```bash
sudo pacman -S git gcc-multilib pkg-config libpng12 readline libx11 libxext libxi libxft libcups imlib2 fontconfig freetype2 openssl graphicsmagick mesa glu ftgl
yaourt -S makedepend
svn checkout svn://svn.code.sf.net/p/laidout/code/trunk laidout-svn
cd laidout-svn
git clone http://github.com/tomlechner/laxkit.git laxkit
```
Divers/Loïc GENTIL (infos hébergement).md
+22
View File
@@ -0,0 +1,22 @@
Loïc GENTIL (infos hébergement)
========================
| Service | Login | Password |
| :---- | ----- | :---: |
| **Google** | loic.gentil.kine@gmail.com | YnVoU\#PcA4DPWgh |
| **Clé d’authentification (TOTP)** | agxc b4io nto7 pyqo 4x2e we3d ek46 2j5t | |
| **Google Analytics** [https://www.google.com/webmasters/tools/dashboard?hl=en\&authuser=0\&siteUrl=http://loicgentil.fr/](https://www.google.com/webmasters/tools/dashboard?hl=en&authuser=0&siteUrl=http://loicgentil.fr/) | UA-87786839-1 | |
| **Os2Switch** [https://cpanel.loicgentil.fr](https://cpanel.loicgentil.fr) | loicgentil | o%ke3EFnigdccL |
| \--\> Lune 1 | sc1loicgenti | e\#aoSF@dy2wZi2 |
| \--\> Lune 2 | sc2loicgenti | gV\!wXH^Bhl3\&P& |
| \--\> Lune 3 | sc3loicgenti | wPexaZ5f\#wXhsq |
| \--\> Lune 4 | sc4loicgenti | bECzpTU$^zv2NA |
| **FTP** [ftp.loicgentil.fr](http://ftp.loicgentil.fr) | loicgentil | SdMTp39\*4gyX5\! |
| **Fabform** [https://fabform.io](https://fabform.io) | loicgentil@loicgentil.fr | 7\!q2h$^3FTB7vH |
| **OpenStreetMap** [https://www.openstreetmap.org](https://www.openstreetmap.org) [https://umap.openstreetmap.fr/fr/map/loic-gentil\_1123879](https://umap.openstreetmap.fr/fr/map/loic-gentil_1123879) | loicgentil@loicgentil.fr | 7\!q2h$^3FTB7vH |
| **Maptiler** [https://www.maptiler.com](https://www.maptiler.com) | loicgentil@loicgentil.fr | 7\!q2h$^3FTB7vH |
| Vimeo [https://vimeo.com](https://vimeo.com) | loicgentil@loicgentil.fr | 7\!q2h$^3FTB7vH |
| **Wordpress** [https://wordpress.com/fr/](https://wordpress.com/fr/) | loicgentil@loicgentil.fr | YnVoU\#PcA4DPWgh |
[Google Search Console](https://search.google.com/search-console?resource_id=https%3A%2F%2Floicgentil.fr%2F&hl=en)
[https://freesitemapgenerator.com/](https://freesitemapgenerator.com/) ([loic.gentil.kine@gmail.com](mailto:loic.gentil.kine@gmail.com) / osteopathe)
Divers/carrd (corinne).md
+7
View File
@@ -0,0 +1,7 @@
carrd (corinne)
========================
> <https://carrd.co/dashboard>
clg35760@gmail.com / chuck-cargo-poker
> <https://clg354.carrd.co>
Turing Pi/ssh_authorized_keys.md
+14
View File
@@ -0,0 +1,14 @@
```bash
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIBLk24u7FT8PhAdM8EVUFGlOi0hle4CW8L284E1foUhS julien@julien-pc
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIE6wr+DUbcfVTltoWT6gbPRY3geUYNhgN7/CLcMaMu0B eliot@toile-win
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIKmttayKqj6Z290hMCc97v4dMZTSUz4lYgXR0NtcRr8U delmar@thinkpad
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIC/ZRSzTgEBh+NbLKKxjW5F0Gj/j7GJylnMnGlf96Wpy pleb@bob
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIIbDwpvEZ+pvVSBQryt6tGNQ25+z1P2UJO45cPHmDkj0 pleb@carlo
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIKL7A0xvHSfmWo+LUHdWWb03a5NXN1IlbLS5iSHxs3zw pleb@sandy
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIFHgj5whXrhaK3feCmvHvNTZp3zpJmyD2a7ooh13Fj91 pleb@gary
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAII9USnPFJx/PbV+KnlTN4o3f4SwiuHCWaAlE8aKcY4Ne pleb@sheldon
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIMfd7PrJ50jHrG6yjIJ5u7jKTyXi9mPn8/oa+HNAVNsf pleb@krabs
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIJtrn0Oj2IstMwzheIZcJGBA8RNWTyNtksaK2LhvjNul pleb@bernie
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIJ+kB6/xx0HmTT6NDt0H3+bHs7aFzXSqCiJcLCbqzp5E pleb@patrick
ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAICEQyj/qu5P/SFOK6V3p/BXZ4qCXisJfEWFev2IINpqx root@nextcloud-aio-borgbackup
```