The KIRUPA orange logo! A stylized orange made to look like a glass of orange juice! Tutorials Books Videos Forums

Change the theme! Search!
Rambo ftw!

Customize Theme


Color

Background


Done

Table of Contents

Strobe Light Generator

by kirupa   |    filed under Coding Exercises

Conventional wisdom is that lighting should be tasteful and a backdrop to the real things that one wants to do. Strobe lights scoff at conventional wisdom with every lumen that they exhibit. In this coding exercise, your task will be to create a strobe light generator similar to the one below:

When the page loads, this generic strobe light will continuosly change to a random color. Seems straightforward, right?

Onwards!

The Strobe Light

Now, you can totally create the actual strobe light visual yourself. If you want to save time and be consistent with what I did, feel free to use the following SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
  <path fill="#DD2E44"
    d="M34.16 28.812L31.244 2.678C31.074 1.153 29.785 0 28.251 0H7.664C6.119 0 4.825 1.168 4.667 2.704l-2.67 26.108H34.16z" />
  <circle fill="#BE1931" cx="18.069" cy="14" r="9.366" />
  <path fill="#99AAB5" d="M35.521 29.18H.479L0 34c0 2 2 2 2 2h32s2 0 2-2l-.479-4.82z" />
  <path fill="#CCD6DD"
    d="M35.594 29.912l-.073-.732C35.38 28.442 34.751 28 34 28H2c-.751 0-1.38.442-1.521 1.18l-.073.732h35.188z" />
  <path fill="#EC9DAD"
    d="M29.647 13.63l-7.668-1.248 4.539-6.308c.107-.148.091-.354-.039-.484-.131-.129-.336-.146-.484-.039l-6.309 4.538-1.247-7.667c-.029-.181-.187-.314-.37-.314s-.341.133-.37.314l-1.248 7.667-6.308-4.538c-.149-.107-.353-.09-.484.039-.13.131-.146.335-.039.484l4.538 6.308L6.49 13.63c-.181.029-.314.186-.314.37s.133.341.314.37l7.668 1.248-4.538 6.308c-.107.149-.091.354.039.484.131.129.335.146.484.039l6.308-4.538 1.248 7.667c.029.182.187.314.37.314s.341-.134.37-.314l1.247-7.667 6.308 4.538c.148.106.354.09.484-.039.13-.131.146-.335.039-.484l-4.538-6.308 7.668-1.248c.182-.029.314-.187.314-.37s-.132-.341-.314-.37z" />
</svg>

This SVG is part of Twitter's awesome Twemoji set.

Starting Point

Now, the easiest way to get started is to fork the following Codepen pen and start making your modifications:

See the Pen Coding Exercises Start by Kirupa Chinnathambi (@kirupa) on CodePen.

You may want to open the pen in a new window if you want more space to work.

If you prefer developing locally in your favorite code editor (like Visual Studio Code), create a new HTML document and copy/paste the following boilerplate/starting content into it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coding Exercises Start</title>
</head>
<body>
  <script>
    
  </script>
</body>
</html>

The HTML you see here is just the bare minimum content needed to help us get our web page up and running. The rest of the content is what you will add entirely on your own!

Hint: Some Learning Resources

The following tutorial may provide some helpful tips and techniques to help you with this exercise: Using CSS Custom Properties (Variables) with JS, Generating Random Colors, Animating with requestAnimationFrame

Getting Your Badge

Once you have completed this challenge, you have earned the awesome bragworthy privilege of adding the following badge to your collection:

To claim it, head over to the forums and respond in the Strobe Light Generator topic. Be sure to include a link to your solution or insert a copy of your HTML/CSS/JS in the body of the message:

Once you have created your topic, Kirupa will give you a virtual high-five and ensure this badge is added to your list of assigned badges.

Stuck? Need Help?

We want to make this a fun learning activity. If you are stuck and need help, please ask on the forums. Please explain your problem in detail and one of the many helpful forum members will help you out.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!

The KIRUPA Newsletter

Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 - delivered weekly to over a bazillion subscribers!

SUBSCRIBE NOW

Serving you freshly baked content since 1998!
Killer icons by Dark Project Studios

Twitter Youtube Facebook Pinterest Instagram Github