From 706e4c72f5ad8629a81312dbc110f133bbe9b021 Mon Sep 17 00:00:00 2001 From: julien Date: Tue, 30 Dec 2025 10:56:57 +0100 Subject: [PATCH] "Updates" --- Divers/Calendar using JavaScript.md | 65 +++++++++++++++++++++++ Divers/Laidout.md | 13 +++++ Divers/Loïc GENTIL (infos hébergement).md | 22 ++++++++ Divers/carrd (corinne).md | 7 +++ Turing Pi/ssh_authorized_keys.md | 14 +++++ 5 files changed, 121 insertions(+) create mode 100644 Divers/Calendar using JavaScript.md create mode 100644 Divers/Laidout.md create mode 100644 Divers/Loïc GENTIL (infos hébergement).md create mode 100644 Divers/carrd (corinne).md create mode 100644 Turing Pi/ssh_authorized_keys.md diff --git a/Divers/Calendar using JavaScript.md b/Divers/Calendar using JavaScript.md new file mode 100644 index 0000000..acc9213 --- /dev/null +++ b/Divers/Calendar using JavaScript.md @@ -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` ``` <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Calendar</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href= "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"> </head> <body> <div class="calendar-container"> <header class="calendar-header"> <p class="calendar-current-date"></p> <div class="calendar-navigation"> <span id="calendar-prev" class="material-symbols-rounded"> chevron_left </span> <span id="calendar-next" class="material-symbols-rounded"> chevron_right </span> </div> </header> <div class="calendar-body"> <ul class="calendar-weekdays"> <li>Sun</li> <li>Mon</li> <li>Tue</li> <li>Wed</li> <li>Thu</li> <li>Fri</li> <li>Sat</li> </ul> <ul class="calendar-dates"></ul> </div> </div> <script src="script.js"></script> </body> </html> ``` ` +CSS` ``` * { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; } body { display: flex; background: #ef62da; min-height: 100vh; padding: 0 10px; align-items: center; justify-content: center; } .calendar-container { background: #fff; width: 450px; border-radius: 10px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12); } .calendar-container header { display: flex; align-items: center; padding: 25px 30px 10px; justify-content: space-between; } header .calendar-navigation { display: flex; } header .calendar-navigation span { height: 38px; width: 38px; margin: 0 1px; cursor: pointer; text-align: center; line-height: 38px; border-radius: 50%; user-select: none; color: #aeabab; font-size: 1.9rem; } .calendar-navigation span:last-child { margin-right: -10px; } header .calendar-navigation span:hover { background: #f2f2f2; } header .calendar-current-date { font-weight: 500; font-size: 1.45rem; } .calendar-body { padding: 20px; } .calendar-body ul { list-style: none; flex-wrap: wrap; display: flex; text-align: center; } .calendar-body .calendar-dates { margin-bottom: 20px; } .calendar-body li { width: calc(100% / 7); font-size: 1.07rem; color: #414141; } .calendar-body .calendar-weekdays li { cursor: default; font-weight: 500; } .calendar-body .calendar-dates li { margin-top: 30px; position: relative; z-index: 1; cursor: pointer; } .calendar-dates li.inactive { color: #aaa; } .calendar-dates li.active { color: #fff; } .calendar-dates li::before { position: absolute; content: ""; z-index: -1; top: 50%; left: 50%; width: 40px; height: 40px; border-radius: 50%; transform: translate(-50%, -50%); } .calendar-dates li.active::before { background: #6332c5; } .calendar-dates li:not(.active):hover::before { background: #e4e1e1; } ``` ` +JavaScript`` ``` let date = new Date(); let year = date.getFullYear(); let month = date.getMonth(); const day = document.querySelector(".calendar-dates"); const currdate = document .querySelector(".calendar-current-date"); const prenexIcons = document .querySelectorAll(".calendar-navigation span"); // Array of month names const months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; // Function to generate the calendar const manipulate = () => { // Get the first day of the month let dayone = new Date(year, month, 1).getDay(); // Get the last date of the month let lastdate = new Date(year, month + 1, 0).getDate(); // Get the day of the last date of the month let dayend = new Date(year, month, lastdate).getDay(); // Get the last date of the previous month let monthlastdate = new Date(year, month, 0).getDate(); // Variable to store the generated calendar HTML let lit = ""; // Loop to add the last dates of the previous month for (let i = dayone; i > 0; i--) { lit += `<li class="inactive">${monthlastdate - i + 1}</li>`; } // Loop to add the dates of the current month for (let i = 1; i <= lastdate; i++) { // Check if the current date is today let isToday = i === date.getDate() && month === new Date().getMonth() && year === new Date().getFullYear() ? "active" : ""; lit += `<li class="${isToday}">${i}</li>`; } // Loop to add the first dates of the next month for (let i = dayend; i < 6; i++) { lit += `<li class="inactive">${i - dayend + 1}</li>` } // Update the text of the current date element // with the formatted current month and year currdate.innerText = `${months[month]} ${year}`; // update the HTML of the dates element // with the generated calendar day.innerHTML = lit; } manipulate(); // Attach a click event listener to each icon prenexIcons.forEach(icon => { // When an icon is clicked icon.addEventListener("click", () => { // Check if the icon is "calendar-prev" // or "calendar-next" month = icon.id === "calendar-prev" ? month - 1 : month + 1; // Check if the month is out of range if (month < 0 || month > 11) { // Set the date to the first day of the // month with the new year date = new Date(year, month, new Date().getDate()); // Set the year to the new year year = date.getFullYear(); // Set the month to the new month month = date.getMonth(); } else { // Set the date to the current date date = new Date(); } // Call the manipulate function to // update the calendar display manipulate(); }); }); ``` `` + +****Output:**** + +![a1](How%20to%20Design%20a%20Simple%20Calendar%20using%20JavaScript%20-%20GeeksforGeeks/a1.gif) + +How to Design a Simple Calendar using JavaScript? diff --git a/Divers/Laidout.md b/Divers/Laidout.md new file mode 100644 index 0000000..a438168 --- /dev/null +++ b/Divers/Laidout.md @@ -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 +``` \ No newline at end of file diff --git a/Divers/Loïc GENTIL (infos hébergement).md b/Divers/Loïc GENTIL (infos hébergement).md new file mode 100644 index 0000000..d27956f --- /dev/null +++ b/Divers/Loïc GENTIL (infos hébergement).md @@ -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) \ No newline at end of file diff --git a/Divers/carrd (corinne).md b/Divers/carrd (corinne).md new file mode 100644 index 0000000..e3b8312 --- /dev/null +++ b/Divers/carrd (corinne).md @@ -0,0 +1,7 @@ +carrd (corinne) +======================== +> + +clg35760@gmail.com / chuck-cargo-poker + +> \ No newline at end of file diff --git a/Turing Pi/ssh_authorized_keys.md b/Turing Pi/ssh_authorized_keys.md new file mode 100644 index 0000000..5d40155 --- /dev/null +++ b/Turing Pi/ssh_authorized_keys.md @@ -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 +```