Create a Light Blub using ChatGPT

 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Light Bulb</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #121212; /* dark background */
    }
    #container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #lightbulb {
      font-size: 200px;
      color: #ccc;
      transition: color 0.5s;
    }
    #switch {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="container">
    <i class="material-icons lightbulb-off" id="lightbulb">lightbulb_outline</i>
    <div id="switch" class="switch">
      <label>
        Off
        <input type="checkbox" id="toggle">
        <span class="lever"></span>
        On
      </label>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
    const lightbulb = document.getElementById('lightbulb');
    const toggleSwitch = document.getElementById('toggle');

    toggleSwitch.addEventListener('change', function() {
      if (toggleSwitch.checked) {
        lightbulb.style.color = '#ffeb3b'; // yellow when on
        lightbulb.classList.remove('lightbulb-off');
        lightbulb.classList.add('lightbulb-on');
        lightbulb.textContent = 'lightbulb'; // change icon to filled bulb
      } else {
        lightbulb.style.color = '#ccc'; // gray when off
        lightbulb.classList.remove('lightbulb-on');
        lightbulb.classList.add('lightbulb-off');
        lightbulb.textContent = 'lightbulb_outline'; // change icon back to outline bulb
      }
    });
  </script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Exploring Various Types of Buttons in Android Studio: A Beginner's Guide

Are you new to Android Studio and wondering about the different types of buttons you can use in your app? Look no further! In this beginner's guide, we'll explore the various types of buttons available in Android Studio, from basic to more advanced options. Buttons are a fundamental element of any user interface, allowing users to interact with your app in meaningful ways. Understanding the different types of buttons and how to use them effectively can greatly enhance the usability and aesthetics of your app. We'll delve into the classic "Button" widget, versatile "ImageButton" for images as buttons, "ToggleButton" for switch-like functionality, "CheckBox" and "RadioButton" for selection, and more. By the end of this guide, you'll have a solid understanding of when and how to use each type of button in your Android app development journey. Let's dive in and explore the world of buttons in Android Studio together! You...
Read more

Kotlin Chat Application Development Explained

Image
Are you eager to create your very own chatbot using Kotlin? Look no further! In this comprehensive guide, we'll walk through the process of building a chat application from scratch. By the end of this tutorial, you'll have a fully functional chatbot ready to interact with users. Introduction Chatbots have become an integral part of modern communication, from customer service to personal assistants. With Kotlin, Google's preferred language for Android development, you can create powerful and efficient chat applications. In this tutorial, we'll leverage Kotlin's concise syntax and robust features to develop a chatbot that can engage in conversations with users. Setting Up the Project To begin, let's set up our Android project in Android Studio. Create a new project and choose Kotlin as the programming language. Once the project is set up, we'll start by designing the user interface using XML layout files. Designing the User Interface Our chat application will ...
Read more