Daily UI Challenge – Itinerary

Daily UI Challenge – Itinerary


I stuck with Pug, SCSS, and JS for the itinerary challenge because I’m really starting to like this combo. There’s so much left for me to learn here so I’m not quite ready to switch it up. There’s nothing too special about the Pug code here, but I did try a few fun things with the SCSS and JS. When I was thinking of how I wanted this to be designed, I knew I wanted borders to appear when you hover over the various days. I had no clue how to implement this, but after some searching I found a pen that had some code for that. I was able to bring most of it over and change some of it to get the hover borders (mostly) working. Some other things I really wanted to do for this design were the split diagonal background and the slide animation when you click on one of the days. I was able to accomplish the background with some -webkit-linear-gradient styling and the slide animation by playing with the margins in jQuery’s animate function. The final thing I wanted to accomplish was changing the schedule for each day. I made this work by creating variables that held the html text for each day’s schedule. Then, when you click on one of the days, I simply set the innerHTML to the schedule for the day that was clicked. This is my favorite pen I’ve created so far and hopefully they’ll keep getting better!

Click the PUG, SCSS, or JS tabs to see my code for this challenge.


Itinerary by Andrea Long (@andrealong) on CodePen

1

Tags:
, ,
No Comments

Post A Comment