Coding an Advent Calendar: Day 14

This year, I decided to create an Advent Calendar website in HTML5, CSS3, and JavaScript. My hopes for the site are to showcase some of my frontend development abilities as well as make something fun, functional, and reusable.

Day 14

Individual Post Styles

As I mentioned yesterday, I wanted to only show one WordPress post at a time when any package is clicked on. So, that’s what I set about doing today (as the Featured Image above shows). There are a few things I still need to take care of however:

1. IF the Gift clicked on doe NOT (yet) have a Post for that date, show some kind of “Coming Soon” message.
2. The Posts need to either be in a Carousel that mirrors the Gift carousel, OR they need to be dynamically loaded by the WP REST API and React based on the ID number (date) of the Gift clicked on.
3. The “prev” and “next” buttons need some style corrections (like text-alignment and z-index to place them OVER the Post border) as well as functionality.
4. Ideally, if a user clicks “prev” or “next”, the Post background (dark blue) would remain unchanged, and only the Posts would slide left or right (as a carousel).

Codepen Collection

I was still having trouble with my Gift carousel being off by a few pixels each time the carousel rotated, and then I tried to make the Gifts scale when hovered over:

Oops. What happened?

Well, I decided that since I started having THIS problem with scaling the Gifts AND I was already having trouble with getting the carousel to display and function properly, I probably had an error in my code somewhere that I was overlooking. Therefore, I decided to start breaking apart all the various pieces and components of this project to take a closer look at each of them individually.

It turns out the scale problem was happening because I didn’t have some kind of <div class="gift-wrapper"> surrounding my Gifts. So scale was scaling the CSS image from the center of itself (and thus pushing it out of the center of the page), rather than from the center of the wrapper which would allow it to remain centered in the page. Here’s what it looks like now with a <div class="gift-wrapper">:

In addition to the Gift Component, I also extracted out the Countdown Clock, and the individual Blog Post Component into separate Codepens and added them to a Collection:

1. Gift Component
2. Countdown Clock Component
3. Post Component

From here, it allows me to continue working on the individual Components for the site even from my Windows computer. And once these pieces are perfected, I can then compile them all back together again as a “real” website.

React-ify All the Things!

So, since I’ve now separated out all the Components of the project, I decided it would be a great time to convert my existing HTML into true React Components. Now, the only HTML I have sitting in the Codepens above are:

<div id="react-component-name"></div>

All the markup is now handled entirely by React. And now, I feel like I’m ready to continue with Ray Villalobos’ Course: Building a Web Interface with React.js to learn better how I can get these various Component pieces to interact with each other better.

Side note: One additional thing I learned while working with these React Components is that: in order for jQuery (or any other JavaScript) to work and interact with these Components, React must be allowed to BUILD the Components on the page FIRST – before any other JavaScript functions are declared. Otherwise, jQuery will attempt to bind a "click" function (for example) on a tag that has not yet been created.

Work Completed (to date)

• December 14, 2016
  • More individual styling of REST Posts
  • Break apart the project into Component pieces & create a Codepen Collection
  • Convert all the old HTML into real React Components
• December 13, 2016
  • Add JS handlers for “Today”
  • Better styling of REST Posts
  • Begin Building a Web Interface with React.js (Lynda.com)
• December 12, 2016
  • Storybook on Windows (FAIL)
  • Continue styling <Tag> Components
  • Begin responsive styles
• December 11, 2016
  • Begin separating out CSS per Component
  • Attempt to load in static files & Sass
  • Begin coding a Tag for the Gifts
• December 10, 2016
  • Finish Lynda.com videos
  • Get all React Components working in Storybook
  • Begin creating a Christmas Scene
• December 9, 2016
  • Learn and use Create-React-App
  • Learn and use Storybook for developing React Components in isolation
  • Update npm and node and figure out my git process between Windows and Mac
• December 8, 2016
  • Use React and Babel via CDN to get it working “locally”
  • Install React developer Tools for Chrome
  • Create very basic React.js pages to learn it
• December 7, 2016
  • Pull post data with the WP REST API in WordPress core!!
  • Write structural code for the React Component to be rendered
  • Install and setup BabelJS to compile the React code
• December 6, 2016
  • Add README.md
  • Add a GitHub Issue to hold usable images
  • Add LICENSE
• December 5, 2016
  • Create a GitHub repository and full site files for easier management
  • Setup Grunt.js to compile my Sass into CSS
  • Begin blogging about the process
• December 4, 2016
  • Countdown clock (JS Date class & jQuery Easing) with SVGs
  • Dynamic text output for Year based on the current date
  • CSS only slider (off by 5px each slide)
• December 3, 2016
  • CSS bow & ribbon
  • Footer with FontAwesome presents
  • Hover, active, and “Christmas Day” styles for footer presents
• December 2, 2016
  • React.js + Axios.js initial code structure
  • Color palette
  • CSS → Sass
• December 1, 2016
  • Let it snow
  • Typography choices
  • CSS presents (first design)
  • Design notes menu