Skip to content

Instantly share code, notes, and snippets.

View geekelo's full-sized avatar
👩‍💻
Embracing the potential for new opportunities

Eloghene Otiede geekelo

👩‍💻
Embracing the potential for new opportunities
View GitHub Profile
@geekelo
geekelo / styleAutofill.css
Created June 7, 2024 17:30
Style input autofill
input[type="search"]:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
background-color: rgb(13, 12, 0) !important;
@geekelo
geekelo / hidedateicon.css
Last active May 29, 2024 03:30
How to hide default date icon
/* Hide the default date picker icon in Chrome, Safari, and Edge */
input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
position: absolute;
left: 0; /* Ensures the calendar still shows up */
width: 100%;
height: 100%;
cursor: pointer;
}
@geekelo
geekelo / production.rb
Last active May 1, 2024 11:00
Steps to Deploy ROR on render
require "active_support/core_ext/integer/time"
Rails.application.configure do
# Settings specified here will take precedence over those in config/application.rb.
# Code is not reloaded between requests.
config.enable_reloading = false
# Eager load code on boot. This eager loads most of Rails and
# your application in memory, allowing both threaded web servers
@geekelo
geekelo / btn-img-logo-transition-anmation.css
Created April 30, 2024 08:15
btn-img-logo-transition-anmation in css
/* ALL BUTTONS HOVER STYLES AND TRANSITIONS */
.workBtns,
.formBtn {
transition-property: background-color, color;
transition-duration: 0.4s;
transition-delay: 0.1s, 0.2s;
}
.workBtns:hover,
.formBtn:hover {
@geekelo
geekelo / slideright-border-effect.css
Created April 30, 2024 08:13
Snippet to display border buttom sliding from left toright
.nav-links {
text-decoration: none;
color: grey;
margin: 1rem 1.5rem;
font-size: 1.1rem;
font-weight: bold;
position: relative; /* Ensure proper positioning of pseudo-element */
}
.nav-links::before {
@geekelo
geekelo / promiseinuseeffect.js
Created January 15, 2024 01:07
Using promise.all in dispatching & checking results
useEffect(() => {
const fetchData = async () => {
try {
// Use Promise.allSettled to ensure that all promises are settled,
// regardless of success or failure.
const results = await Promise.allSettled([
dispatch(displayCertificates()),
dispatch(displayStudents()),
dispatch(displayPersonnel()),
]);
@geekelo
geekelo / loadmore_loadless.js
Created January 4, 2024 07:51
Load More | Load Less Algorithm (React.js)
const personnels = useSelector((state) => state.display_personnel.value);
const [itemsToShow, setItemsToShow] = useState(12);
// HANDLE PAGINATION
const handleLoadMore = (e) => {
e.preventDefault();
setItemsToShow(itemsToShow + 12);
};
const handleLoadLess = (e) => {
@geekelo
geekelo / date.js
Created January 3, 2024 19:54
Date Formatter
function formatDate(inputDate) {
const months = [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
];
const [year, month, day] = inputDate.split('-');
const monthAbbreviation = months[parseInt(month, 10) - 1];
return `${parseInt(day, 10)} ${monthAbbreviation}, ${year}`;
@geekelo
geekelo / animated-gradient.css
Created January 3, 2024 03:40
Animated Gradient
.gradient-background {
background: linear-gradient(67deg,#d2ffda,#94c894,#174217);
background-size: 180% 180%;
animation: gradient-animation 12s ease infinite;
}
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
@geekelo
geekelo / example1.css
Last active January 2, 2024 09:18
Styling Checkboxes
input[type=checkbox] {
position: relative;
border: 2px solid #000;
border-radius: 2px;
background: none;
cursor: pointer;
line-height: 0;
margin: 0 .6em 0 0;
outline: 0;
padding: 0 !important;