HTML for Gadgets, lesson 8 of 9

Project: My Smart Room Control Panel

beginner6 min readFull course

Introduction

Time to build the real thing: one page that shows your room's temperature and humidity, switches the light and the fan, and dims the light. Every tag you need, you've already learned.

Plan it first

Draw your panel on paper before you code:

  1. Title: "My Smart Room" (lesson 2).
  2. Readings: temperature and humidity, as %TEMPERATURE% and %HUMIDITY% (lesson 5).
  3. Light: ON and OFF buttons (lesson 4), plus a dimmer slider (lesson 7).
  4. Fan: ON and OFF buttons.
  5. Refresh link to get new readings.
  6. Make it fit the phone (lesson 3) and look good (lesson 6).
Project: My Smart Room Control Panel | Electronics Simplified