Archive of: 2021

• Working with toggles, cat photos, and classList

  May 16, 2021

  I’ve had a bit of success implementing a button that toggles the automatic switching of images, and I’ve added the ability to click on a photo to feature it. Just five days left until I hit 100 days straight of these types of posts. I’m going to try and take a bit more time to sort out what I do for the remaining five days.

  100daysofcode, CSS, HTML, JavaScript

• Cat gallery tweaks

  May 15, 2021

  Today’s version of the cat gallery does not move photos around and automatically switches out the photo every five seconds. I’ve disabled clicking on photos to change the featured photo until I can add the improved version to my script.

  100daysofcode, CSS, HTML, JavaScript

• Iterating through cats and JavaScript

  May 14, 2021

  The automatic switching of featured photos has been added and it appears to work well even after clicking on an image. I hadn’t check the last two versions of this post in Safari and I’ve applied my CSS fixes to this version. Next I’m going to improve how this works and make sure the layout and order of images is maintained as the images are swapped in and out of the featured area. Adding functionality to start and stop the timer will also be added in the final version. This has been fun and I’m looking forward to adding this to my site.

  100daysofcode, CSS, HTML, JavaScript

• Randomizing cat photos in a grid

  May 13, 2021

  Today I’ve added some randomization to set a random image as the featured image and added the functionality of switching out the photos whenever you click on one. I’m excited to get to work setting up the timer to rotate them in and out of the featured spot.

  100daysofcode, CSS, HTML, JavaScript, grid

• Practice with grid and cat photos

  May 12, 2021

  I’d like to build some sort of image slideshow that shows a group of images and then rotates a random image into the largest element within the group at a preset interval. This is the starting point. I think it would be interesting to build in different grid layouts, based on aspect ration and more, and allow the viewer to customize it. I’ll tackle the customization and fancy stuff once I finally get it working.

  100daysofcode, CSS, HTML

• 100 Days of Code - Week 13

  May 11, 2021

  Lots of posts about sliders (or carousels) this past week.

  100daysofcode, CSS, HTML, JavaScript

• Learning to build a better slider part four

  May 11, 2021

  The buttons now work to some degree, but I’m trying to sort out an odd issue with the previous button not working properly. The controls now show up only if JavaScript is enabled, which is pretty neat. I still have a bunch to do to finish this up. I may take a break from it for a couple of days and come back to it later.

  100daysofcode, CSS, HTML, JavaScript

• Learning to build a better slider part three

  May 10, 2021

  Didn’t get much further today after noticing that I goofed up on my JavaScript from yesterday. I think the lazy loading works properly now, but I’m still trying to troubleshoot an issue with the SVG within the img’s src. Gotta try again tomorrow.

  100daysofcode, CSS, HTML, JavaScript

• Learning to build a better slider part two

  May 9, 2021

  Today I’ve gotten through the process of converting the slides into flex objects, implementing a form of lazy loading for images, provided a no JavaScript fallback, and I’ve started working on adding buttons and their functionality. While typing out the scripts that Heydon provides, I noticed that he does not make use of semi-colons. This really threw me off for a bit, but it works just fine. I need to learn more about how essential they are. At the moment, I like using them because it helps me be certain that a line of JS has a finishing point. There’s always more to learn!

  100daysofcode, CSS, HTML, JavaScript

• Learning to build a better slider

  May 8, 2021

  Today I started working my way through the slider portion of Heydon Pickering’s book, Inclusive Components. It’s been a good read so far and I’m working through all of it by building a modified version of his example code as I go. I’ve had to double check things quite a bit because of his CSS selector usage (it’s good, I’m just not used to the combinations he uses). I’ll work on it more tomorrow, and by the time I’m done with this I’ll feel much better about the accessibility of the sliders/carousels I build in the future.

  100daysofcode, CSS, HTML, JavaScript, slider, carousel