Color-changing-background

Background that changes color at intervals

Table of contents

• Overview
  • The challenge
  • Video
  • Links
• My process
  • Built with
  • Thoughts & Troubles
  • What I learned and used
  • Continued development
  • Useful resources
• Author

Overview

The challenge

It should:

• Background should change color once start button is clicked and stop on button click
• Animation should continue

Video

InShot_20230328_150556878.mp4

Links

• Solution URL: [/~https://github.com/f-lajoc/Color-changing-background]
• Live Site URL: [https://f-lajoc.github.io/Color-changing-background/]

My process

Built with

• Css Animaion
• Bootstrap
• Flexbox
• JavaScript

Thoughts & Troubles

• If there is a possible way to put the changing color in light bulb like making it contained within the bulb only and not the background

• i wanted to make the start button also the stop button instead of using two different buttons but i couldn't find my way around it, it's probably due to the loop timeout set in my Js file

What I learned and used

• I used getElementByTagName, and for this, the index have to be specified, I'll need to practice using it to build memory muscle of it

• first time using setTimeout function, i haven't fully grasped it yet

• first time using CSS animation ~ keyframes which i need to learn more about

-I used bootstrap css for my Button

From the knowledge I have now, i used some JavaScript I've learnt like

• variable declaration
• function
• array
• conditional statement
• fetching DOM
• JavaScript style

Continued development

I should learn some CSS part I'm yet to master side by side with JavaScript

• Flex
• Grid
• Transition
• Animation
• Responsiveness
• bootstrap

Useful resources

• [https://youtu.be/4nCH8EA55js]- CSS Animation
• [https://www.google.com]- Random search when I thought of how i want the page to look like

Author

• Twitter - @lajoc__
• Instagram - @lajoc_devs
• Codepen - @lajoc__