Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Forum Contest: Toggle Switch

EDIT: This contest has ended! Congratulations to Thomas Kimura for his winning entry! Our next contest on building an Android clock app is up!

Hi everyone,

It's time for a new Treehouse Forum contest! First, watch this video to learn more:

After you've watched the video, please read the details below carefully. We're looking forward to your entries!

How to Enter:
Create your toggle switch entry as a "pen" on Codepen.io, then post the link to your pen as an answer to this post.

Due Date:
All entries must be submitted by April 27th at 11:45pm ET. Here's a timezone chart so you can see what time that is for your locale.

Prize:
The entries will be judged by Treehouse teachers based on both design and code. One winner will receive a free month of Treehouse Gold on us! We'll announce the winner on April 28th and reveal the next contest.

[sorry I posted this as a comment instead of an answer. I've fixed that below, but I can't delete this comment. Oops!] Here is my first entry to a forum contest. Ever. I see it as a possible toggle switch for turning on and off privacy settings (ie. lock a file or make it public).

Guil: Would it be acceptable to use radio buttons instead of a set check boxes (assuming that one can style radio buttons in the same fashion ... maybe I should try that)? Or is using check boxes and the hurdles involved in getting all of the logic to work properly a part of the challenge? It would behaviorally be a better fit using radio buttons in that (a) only one radio button will be selected at any one time and (b) if I click on a switch a second time, it does not uncheck it.

43 Answers

Where's the winner of last week announced?

Anxiously waiting for the results from the previous contest. Wish I win that previous contest, am on a free trial, broke and worst enough, I think its about to get done.

My first lines of code after taking Treehouse courses. http://codepen.io/pavoldemjanic/pen/KicbD

Nice, I'm about to attempt this contest myself as my first one as well! :)

Very beautiful!

Simple, clear, beautiful. The transition is nice and smooth.

Red and green is clear unless one is colour-blind. I think that the vertical positioning (up is on) is enough. More contrast or a symbol (i.e. an X or a square) would muck it up without making it much clearer.

For this code pen, It would be cool if all the sizes were relative to lets say an outer container that could be resized and all elements would be resized based on the container. You could do it with SASS. It's a cool toggle and if things like the fill and outline of the button and slider were changeable that would also be cool. Maybe if I can get some free time I will fork your pen.

Thanks for your replies and thoughts!

This was pretty fun. Here's mine! I decided to add a bit more detail to the animation. Here is an updated version.

Very Nice!

Very nice man, great work!

Super Rad.

Smooth. It is difficult to see the switch, but the LED on or off is clear.

Looking premium man!

Yep, very nice and subtle. the colors and size can easily be changed to customize for use which is a huge plus in this type of contest! I want to play with it some more but I sized and customized it under just a few minutes. http://codepen.io/httpJunkie/pen/EuyHt

Thanks guys! Ya I noticed the dark version was a bit difficult to see. Thats why I decided to add the second switch.

Good job, I thought yours was the best too! Just seems like a lot of thought went into the code.

In my opinion it was also the best one. Congrats!

This is the first time i have ever entered anything like this , hope that it is up to standard! :) FULL = http://codepen.io/gonzozo5/full/kqDxG CODE = http://codepen.io/gonzozo5/pen/kqDxG/

Kind Regards, Louis

Red and green is enough contrast for me, but for the colour-blind, this may not be the case. You may want to add a symbol of some sort or switch to a vertical positioning (i.e. up is on, right?).

Thought I would share this tool. Might be useful for others.

I just tweeted this tool, nice find!

thanks thomas, nice tool! good luck everybody, unfortunately I'm still too new to show off my work :)

Here is my first entry to a forum contest. Ever. I see it as a possible toggle switch for turning on and off privacy settings (ie. lock a file or make it public).

I'm glad you reposted this so that we could comment; I love this one.

I paused for a second before i realized that the CodePen website wasn't locked to me. This was not what I was expecting. Now jealous that I didn't go outside the box. Very creative; very memorable.

Red and green is clear. Open and closed lock is clear. The transition is really smooth.

Here is mine a round button with a clicking animation. Check it out!

I love the rounded button. Nice animation.

I'm not sure if green/red will have enough contrast for colour-blind people, and there is no other means of distinguishing between on and off.

I added some functionality so that it is more clear.

That's fantastic. Love it!

Really smooth though, love it.

Cool!!!

Here's a simple, flat, toggle switch. I used a checkbox, a label, and some before / after pseudo elements.

Pen: http://codepen.io/joshsanger/pen/Juxtd Full Screen: http://codepen.io/joshsanger/full/Juxtd/

Simple and elegant. Clear. Well executed animation.

When you click on Mike the Frog's toggle, his friend comes out of the water. The movement animations cycle at 50 seconds.

Mike the Frogger Toggle

Code

Very cool!

Great animation!!! Without knowing about this contest, it wasn't obvious that this was a switch. However, if is a creative use of a switch, and everyone loves (Mike the Frog)ger.

very fun

Hello all! This is my switch. http://cdpn.io/jCnDH I hope the you enjoy!

Really great job making that look like an actual wall switch dimmer!

This is a great switch. Good use of shadows.

First entry. Hit a few hiccups, but It works as intended, even a little audio :)

Code

&

Full Screen

Nice, I think the sound should be preloaded, and played first before te animation.You could shop each sound in four parts, and preplay half of sound when it starts and the other half when it's done.

Great all around switch: Clear design. I love the sound and I love the fact that the lights turn on. Good use of colour.

Thanks John Coffin!

Jesus Alcaras Thanks for the advice, I'll look into optimizing it this week. I agree though there is something with the flick that is just a little off.

I tried to recreate the iOS7 switches: Fullscreen

Does anyone know if I can submit two entries?

I just tweaked my entry a bit: Fullscreen on Codepen

I like the label on the original one (i.e.what the switch is for). On both, I like the fact that we have contrast between on and off that the colour-blind can distinguish. Well executed all around.

Thanks John!

Hey guys, here is my entry Code & Full Page :)

Really good animation. I'm not sure if there is enough contrast between on and off with the LEDs, but one can tell that it is pressed in (and this is on ... right?).

yes its on when its pressed in. I should work more on the design :p thanks

Thanks Guil.

Almost didn't enter this one, but I'm glad I did. You learn so much by doing things like this. Huge shoutout to Thomas Kimura for helping me solve a problem with my css selectors and elements! Code | Full Page

My browser is at 1680 width and the left side is cut off, but when I resize to around 1440 it looks great! Would wrapping your drawings in a div container help? I want to know for myself so I can improve my own work.

Thanks Ashlynn Pai! I will try that and let you know :)

Hey Justin, I was looking at the wrong monitor settings on my dual monitor setup, so I think it actually looks perfect at around 1680 and gets cut off on my 1920 resolution. Hope I didn't mess you up.

Sweet! I love that turning the lights "off" reveals something.

Kool! I wish to participate >< :)

Toggle based on Flat UI kit from DesignModo - http://codepen.io/hiisi13/full/Jfywk

This is my favorite so far

Really nice!!!

Very nice.

Hi everybody! Here are my Switch and its code.

Waouh.. so nice

That brought a big smile to my day. Nicely executed, clear, and who doesn't like an homage to our favorite mushroom man?

Oh man, I love this!

Hi, just for fun :-)), maybe a little bit to complex..- .http://codepen.io/mycombot/pen/efIgD - http://codepen.io/mycombot/full/efIgD -

This is really well done. It wouldn't be too complex given the right context. Red and green may be a problem for the colour-blind, but the flashing (when off) and the fact that it clicks down (when on) make it clear for all.

I hope it's ok if I submit a second one: Fullscreen on Codepen

This is so small (although this is not a bad thing). The details are what makes this real: It looks like a switch that I can find in my home. I also like the "inspiration" tag at the bottom.

pretty amazing jacob, liked it alot!

Thanks guys!

Tada! Here's my Fullscreen and Codepen.

What worked, what didn't work, and what needs improvement?

So cool! I need to learn from your js code.

Thanks. I'd suggest not learning exclusively from my js code. I'm still learning.

Heres my entry Full screen and w/ code.

Nice.

I really like the fact that the function of the switch is included on the switch. It is really easy to distinguish between a switch that is on and a switch that is off. Really well done.

Slick work on the gradients.

Is it possible to access the body tag from say a checked input or a hovered div?

I think the only way this could be done is with some javascript.

Here's my start, probably not my final entry.

I wanted to point out that I've noted how the CSS can be changed so that just the switch itself is clickable or so that the entire area of the switch will cause the toggle. It's an easy change.

I've also noted all the CSS if someone else wants to tweak it so it's easy to see what does what. There's two examples, one that's simplified and one that's really ugly to show all the styling that can be done.

Toggle Example Code

Toggle Example Full Screen

Nice. You may want to add cursor: pointer to your switches so the mouse changes to a pointer.

Really well done. I think the part that I liked the best was that I could click anywhere and it would toggle the switch. It is a small detail, but it makes it really easy to use. I also like the fact that the contrast between on and off is great on both.

I hope you're talking about mine! And if so, thanks!

Next steps are to make it not so ugly and add target browser support. It's a little quirky on touchscreen.

It's also easy to position on the screen using the checkbox class only since it's all within its own div, but I want it to be easy to resize, too.

Hopefully, I can get those changes made by the 27th!

Chris: Indeed I was talking about yours. It appears I hit the wrong "comment" link. Sorry.

here's mine code

Karen: Sorry for the comment mix up. I'm having trouble with my aim.

Well executed. The transition is really smooth.

I've mentioned this for a number of people, but I'll repeat it: The usage of red and green is AWESOME for 99.999999% of the people. The is a reason that mostly everyone has used this (and should use it) as a means of distinguishing on and off. It is something that is almost universally understood.

An issue can come about for colour-blind people if it is the ONLY means of distinguishing on and off. If you look at the other entries, some people have used other means of adding more contrast to distinguish on and off: A symbol or symbols, a solid shape vs an outline, a vertical orientation, and a higher degree of contrast (that is obvious in b&W) are some of the devices used.

Just uploaded my pen here http://cdpn.io/EBkJy!

Win or not. It was worth the journey! Love the forum contests for sure!

Really nicely done. I believe that the LED is lit when it is on (and green) and that this adds a little extra contrast between on and off. I also like the tribute at the bottom (I wimped out and put it in the comments of my code ... not exactly giving credit where credit is due).

I agree that the form contests are worth the journey, even for novices such as myself. We learn by doing, and without a focus, we don't really know how well we have absorbed the material. I now know that I would like to review the CSS Foundations and take it sloooooooooowly trying stuff out along the way. I zipped through it assuming that I could always look stuff up, but I'm paying the price now: I can't look for something if I don't know that it exists.

Thank you John!

Hah ha. Yeah the designer that created the UI switches has an amazing set of work.

I really think it's a good idea for front end developers to use actual designs from dribble - unless you are really good at design yourself - and try to make those come to life.

Really nice!

Thanks Kirk!

I will try to take my design from dribble next time. It might be nice to focus on the "making those come to life" part of it.

Hi everyone!

Here is my version: Toggle Switch

I used Craig Buckler method from sitePoint! This little exercise was a great way to practice a little bit the :before and :after pseudo selectors. My favorite bit of this method is the using of the :empty selector which we can turn off the this code in IE 8 and below.

Thanks for the exercise! I'm waiting for the next! :)

I was expecting a "Footer" to appear when I turned it on. No matter.

The switch itself is awesome. I would suggest higher contrast between the red and the green (with the green brighter) so that if the page was displayed in B&W (or viewed by a red/green colour-blind person), one could distinguish on and off.

Hi John!

Because it was a micro example, I did't feel the need to create it to more complate.

The bigger contrast is a really great idea, it never come to my mind! Thank you! :)

Here is mine! Full Page and Code

This is probably my favorite so far. I like the minimal use of CSS to achieve the desired effect.

I think I might fork this and tweak around with it a bit. I tried to go with a DRY approach with mine in order to be able to resuse the selector properties I've already defined so that I can use the button over and over and just reskin as needed.

I think your approach definitely moves in that same direction where I could easily re-class /re-ID and create all new buttons without rewriting the CSS to much.

Nice job!

BTW - updated mine, too: http://codepen.io/GhostRed/pen/exfzs

The full button area, but no more is now clickable (overlapped a bit before), it can easily be resized and reskinned now, and the selectors are class/ID-independent (the DRY approach I was referring to).

Martha: I love it. This reminds me off an power switch for an speaker (and a high-end speaker at that). It is very obvious which is on and which is off.

Here is my entry:

full page and with code

It's been fun testing out all of the submissions! Great job everyone!

Is the red square on? Otherwise, this is nicely done.

I really like the affects during the transition.

Well here's mine. Didn't have a whole lot of time so it's not as detailed as i'd like. p.s sorry if it look's like i copied some one (or have a similar idea) I had only looked at 3 entry's before i started .

Looks good to me. I like the fact that the switch turns something on.

PS Just noticed the Easter Egg. Nice affects on the light bulb.

Thank You :)

Here my code & fullpage.

That looks awesome!!!

Thanks john!!

Hello Everyone,

Another fun contest ! I spent a lot of time battling with perspective settings and cross browser issues, but i end up with something pretty close to what I had in mind : FullScreen. It should be compatible with Webkit browsers and Firefox and support various desktop screen sizes.

Good luck to you !

Well executed animation. It has a slot machine feel. I really like the fact that the label changes. I've never noticed that before, but it is quite affective.

Hello everyone,

this is my first forum contest entrance :)

I probablly got caried away a little bit but the example emphesizes the use of SVG's, foreignObjects inside them and :checked pseudo-selector to build a neat no-JS clothing picker prototype. The use of CSS is a little more subtle but at the end I DIY implemented the rendering order using just :hover, display: none and display: initial which is nice I think. Note that SVGs don't support z-index or rendering order rearrangement (yet). One migh use <use> element but there is a chance the solution does not work. This is what happened in my case.

The girl in the prototype is a button, a checkbox, and if you click the jersey tank top or short denim shorts the click gets caught by a label element.

I came across some problems which are described in the description on codepen.io .

Hope you like it.

codepen.io: http://codepen.io/jaka_dirnbek/pen/fvImi full screen: http://codepen.io/jaka_dirnbek/full/fvImi

Great job !! Really clever.

Ya this is really neat!

My second toggle switch design, for fun =) Fullpage& Code

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hey everyone,

Wow, this was a tough one to judge! I was glad to see some first-timers submit entries, and the way you encouraged and helped each other was amazing! Now on to the announcement...

Congrats to Thomas Kimura on his winning entry! It was a close one, but Thomas’s elegant design and impressive details in the motion of the switch is what made it our top choice.

Nice work, everyone, I hope you had fun. Check out this week's contest on building an Android clock app!

Guil

Thanks a lot Guil Hernandez!

Awesome switch, Thomas. Congrats! Very nice recreation of the iOS 7 styling!

Guil, any chance we could get some feedback on our code? I'd love the input and I'm sure others would, too!

Congratulations Thomas, the markup is really clean. To react to Chris's idea, that would probably be extremely tedious for the instructor to review every single code, but I certainly wouldn't mind it either. Maybe something like "the most common errors", or "things to avoid" would work.

Like Rémi said, just common feedback would be great. I could hardly expect them to reply to everyone!

But a general list of what works well, suggestions and what definitely NOT t

Like Rémi said, just common feedback would be great. I could hardly expect them to reply to everyone!

But a general list of what works well, suggestions and what definitely NOT to do would be very helpful from a learning standpoint.

Congrats Thomas! Good job!

Wow... I misread the submission date. I'm super bummed now. Anyway, here's my submission. Fullscreen

Nice work Chris. Just showed it some love on code pen. Good stuff!

Thank you.