Archive of: JavaScript

• We meet again slider

  May 6, 2021

  I used to swap product images, links, and more out of an e-commerce website’s slider/carousle multiple times a week. So I’m fairly familiar with how they normally work and are built. Almost all of them I’ve encountered had some JavaScript built-in to make them work, but today I built my first version mostly free of JavaScript. It’s really only used to switch it into and out of fullscreen mode. It also doesn’t change slides on its own. I think that’s alright, as this will probably not be used in such a way. It may not be too tough to add a bit to make it automatically change slides though. I also need to make sure I don’t bother displaying the fullscreen toggle button for browsers that don’t support it, or change how it works.

  100daysofcode, CSS, HTML, JavaScript, carousel

• Learning About Regular Expressions

  May 4, 2021

  Regular expressions seemed a bit difficult in the past, but I think I have a better handle on them after doing a course on Treehouse about regular expressions in JavaScript. Form validation is the first thing that comes to mind, but there are lots of uses I’m not aware of yet.

  100daysofcode, CSS, HTML, JavaScript, regular expressions

• 100 Days of Code - Week 12

  May 3, 2021

  The past week’s posts were mostly tweaks/iterations and practice, but I spent some time learning more about a handy Flexbox solution…

  100daysofcode, CSS, HTML, JavaScript

• CSS Grid Fidget Toy

  May 1, 2021

  I started today’s post off trying to find a way to rotate a grid of divs and try to find a way to make some of those divs stand upright within the rotated grid. That was a bit too difficult, and may not possible in the way I was hoping. So I ended up making this. I’m not sure what it is, but I tried using some JavaScript from my lightbox in another way.

  100daysofcode, HTML, CSS, JavaScript

• Additional tweaks to my lightbox

  April 28, 2021

  I wanted to improve the transition for the lightbox and try out using backdrop-filter with it to see how it might look. I think I have a solid starting point to use this within my website for photo gallery pages, but I’ll have to see how things look and feel once I give it a try.

  100daysofcode, CSS, HTML, JavaScript

• Tiny tweaks to my Lightbox script

  April 27, 2021

  After yesterday’s small success, I wanted to try and improve the display of the lightbox for smaller screens or mobile devices. The image was not staying within the viewport yesterday, and the page was still scrollable. I wanted to disable scrolling while the lightbox is visible.

  100daysofcode, HTML, CSS, JavaScript

• 100 Days of Code - Week 11

  April 27, 2021

  Last week’s code posts were a lot of fun.

  100daysofcode, CSS, HTML, JavaScript

• Vanilla JS Lightbox Challenge

  April 26, 2021

  Are lightboxes tricky to build? My experience leads me to think yes. I’ve managed to put something together that works as long as I know the number of imgs and URLs to reference. I need to learn how to attach a click event to each a element that can trigger the lightbox. Just typing this out gives me an idea… HUZZAH! I figured it out. It’s not perfect, but I’m so dang happy that came to me.

  100daysofcode, CSS, JS, JavaScript

• Send words into The Void

  April 22, 2021

  Today’s post is a bit silly, but it was therapeutic to make. I think Dave Rupert mentioned something like this on one of the episodes of ShopTalk Show. I haven’t worked with the textarea element in a while, so this helped refresh my memory of the various attribute of the element. The animation could be improved, but I think it had a strong enough effect for a basic version of this.

  100daysofcode, CSS, HTML, JavaScript, textarea

• Simple transition using clip-path

  April 20, 2021

  I know I did another clip-path post yesterday, but this popped into my head as I was transferring old Animal Crossing screenshots of a micro-SD card. It’s a simple and pretty effective transition. What would be neat is to try and only have the full-color image load when the mouse is within a certain distance from the low-quality version. That would be tricky on a touchscreen, but a different presentation or a change of the button text may be all I would need.

  100daysofcode, CSS, HTML, JavaScript