Once Upon A Huh? 2 | Update #3


Fairy Godmother Cinderella GIF - FairyGodmother Cinderella Magic - Discover  & Share GIFs


I didn’t do a lot

But I have been struggling quite a bit with the coding even though I know it is supposed to be easier than whatever I have currently done but I guess I just ain’t smart enough yet-

But here is Update #3 nevertheless! Or was it #2?

For this week, I made the following changes to my original Midterm project code:

  1. Change the background from plain white to Gradient Pastel Pink to Grey, which happens upon scroll.
  2. Change the music to the fluffy music I have intended to use.
  3. Amended some of the alignment for the text.
  4. Change Feather icon to disappear after clicking instead of remaining, since I changed the story to a full page scroll rather than a click-to-advance-to-next-section-while-hiding-previous-section method.
  5. Bolded the options, to make it more obvious that you are supposed to click on it.
  6. Make a timer appear upon revelation of the options for the urgent choices, failure of which to do so will advance a fourth option instead.


However, I faced quite a few issues that I have no idea how to fix…

  1. I made my timer and options fade away after an option is chosen, or after the fourth option appears. However, I realized this made the rest of the options and timers disappear completely, probably because of the id or class I have called in my code. Still not sure how to resolve this though… I don’t want to have to make a separate javascript timer for each timer I use because I’m pretty sure there’s an easier way to do it…
  2. For the gradient scroll, I hope for the grey to happen only at the ending parts but because I don’t know the exact length of my story, I can’t do that. But I am quite happy with the current gradient because when you scroll up, the gradient stays.
  3. I haven’t put in a third option.
  4. I am only 1/3 through my narrative but I think things will be faster once I nail down the coding.
  5. Still having some alignment issues between each interactive element with regards to the spacing. I know it has something to do with the display: none or display: block but it didn’t seem to work but I hope I can fix it soon….

And sooo I will be continuing to work on my project. 🙂 Hopefully I can fix all the coding issues by next week (W11), and then finish the narrative by the following week (W12) and have the finished website by Week 13.



Mood right now:

Exploding Disney Princesses - Album on Imgur