Flip the Switch

Inspiration

Flip the Switch was inspired by the lack of knowledge in saving energy. It was built specifically to allow young children to understand the effects of keeping your lights on, and exactly how much energy/money is wasted.

What it does

Flip the Switch is an interactive website that provides a user knowledge about saving energy through turning off lights. It keeps the user engaged through fluid animations and zero load times between sections.

How I built it

The website is built using HTML, CSS, Javascript, JQuery, and Animate.css. JQuery, which is a Javascript library, was used in order to hide and display elements, along with apply animations. Animate.css is a CSS library which provides animations that I then applied to each element, using JQuery, based on whether it was being displayed or hidden.

Challenges I ran into

One major challenge I ran into was keeping everything centered on the page. I eventually just made a CSS class that allowed me to center most elements, however a few behaved differently.

Another challenge I faced was utilizing external libraries such as Animate.css. At first, it was a big confusing to apply properly to my page, but through reading over the documentation, I was able to overcome this challenge.

Accomplishments that I'm proud of

I'm proud of utilizing JQuery in an effective manner, as I typically only use vanilla JavaScript. I'm also proud of the way the website itself looks, and I think the simple color scheme adds onto the interactive part of the website. Furthermore, I'm proud of adding little details to the website that add on to the user experience, such as a lightswitch sound effect when you turn off the lights.

What I learned

I learned more about JQuery, Animate.css, and building websites that fit on all screen sizes.

What's next for Flip the Switch

I would like to add more sections to Flip the Switch. I would also like to add the ability to allow a user to put in any input and create a graph based on that custom input.

Built With

• animate.css
• css
• html
• javascript
• jquery