This is the digital version of the CSS-only analog clock we built last time. It’s fully functioning, settable .. all done with CSS Custom Properties and the calc() function and no JavaScript of course.

To get started with the project, have a look at the CSS-only Analog Clock first.

All you need is HTML and CSS

https://www.amazon.co.uk/dp/B08ZQ3NSYF/ref=sr_1_1
https://www.amazon.com/All-you-need-HTML-CSS/dp/B08ZQ3NSYF/ref=sr_1_2

There are many other examples in the book pushing the limits of HTML and CSS including interactive carousels, accordions, calculating, counting, advanced input validation, state management, dismissible modal windows, and reacting to mouse and…


Let’s build a fully-functioning, settable analog clock with CSS Custom Properties and the calc() function. Next week, we will convert it to a digital clock .. all this with no JavaScript 😱

All you need is HTML and CSS

https://www.amazon.co.uk/dp/B08ZQ3NSYF/ref=sr_1_1
https://www.amazon.com/All-you-need-HTML-CSS/dp/B08ZQ3NSYF/ref=sr_1_2

There are many other examples in the book pushing the limits of HTML and CSS including interactive carousels, accordions, calculating, counting, advanced input validation, state management, dismissible modal windows, and reacting to mouse and keyboard inputs. There’s even a fully working star rating widget!

Demo of both of the clocks

You…


Let’s build a simple, no-JavaScript carousel you can swipe on both mobile and desktop. We will even add deep-linking to individual slides from buttons or unique URLs!

All you need is HTML and CSS

https://www.amazon.co.uk/dp/B08ZQ3NSYF/ref=sr_1_1
https://www.amazon.com/All-you-need-HTML-CSS/dp/B08ZQ3NSYF/ref=sr_1_2

There are many other examples in the book pushing the limits of HTML and CSS including interactive carousels, accordions, calculating, counting, advanced input validation, state management, dismissible modal windows, and reacting to mouse and keyboard inputs. There’s even an animated pure CSS clock (analogue and digital) and a fully working star rating widget!

Linking with the anchor element


What if I told you it’s possible to program real-world electric components with React? Yes, that’s right! You can get electric sensors to update a React component’s state and switch circuits on and off based on state and props.

All this with React Hooks!

Why?

My ultimate goal was to be able to use React’s most powerful features on real-world electric circuits: components, states, props, life-cycle methods, hooks, JSX.

You could even use…


Link and jump to different sections of your webpage with animated page scroll and without using a single line of JavaScript!

All you need is HTML and CSS

https://www.amazon.co.uk/dp/B08ZQ3NSYF/ref=sr_1_1
https://www.amazon.com/All-you-need-HTML-CSS/dp/B08ZQ3NSYF/ref=sr_1_2

There are many other examples in the book pushing the limits of HTML and CSS including interactive carousels, accordions, calculating, counting, advanced input validation, state management, dismissible modal windows, and reacting to mouse and keyboard inputs. There’s even an animated pure CSS clock (analogue and digital) and a fully working star rating widget!

The humble anchor element


I think I covered most of the buzzwords in that title. Maybe I could squeeze in “Smart” and “Lasers” to make it complete!

To be fair, most of the services used in this project are existing AWS services and the actual work I did was to make all these services work together.

It’s probably worth having a look at the finished project to put all this in context:

I think the end result is pretty impressive … there’s definitely a lot going on in this project so let’s try and break it down into smaller pieces. That is actually…


In this series of posts, (after a brief introduction in Part 1) you will learn how to build a circuit with an LED light and the Arduino UNO and switch it on and off from JavaScript inside the Node.js environment (go to Part 2). Next, we will look at electronic sensors and how to measure temperature and light (this post).

You can buy an extended printed version of all these posts on Amazon for only $4.95 / £4.95:
Introduction to JavaScript Electronics on Amazon.com
Introduction to JavaScript Electronics on Amazon.co.uk

Otherwise, you can download a free PDF on www.webondevices.com

If…


In this series of posts, (after a brief introduction in Part 1) you will learn how to build a circuit with an LED light and the Arduino UNO and switch it on and off from JavaScript inside the Node.js environment (this post). Next, we will look at electronic sensors and how to measure temperature and light (go to Part 3).

You can buy an extended printed version of all these posts on Amazon for only $4.95 / £4.95:
Introduction to JavaScript Electronics on Amazon.com
Introduction to JavaScript Electronics on Amazon.co.uk

Otherwise, you can download a free PDF on www.webondevices.com

If…


In this series of posts, (after a brief introduction in Part 1) you will learn how to build a circuit with an LED light and the Arduino UNO and switch it on and off from JavaScript inside the Node.js environment (go to Part 2). Next, we will look at electronic sensors and how to measure temperature and light (go to Part 3).

You can buy an extended printed version of all these posts on Amazon for only $4.95 / £4.95:
Introduction to JavaScript Electronics on Amazon.com
Introduction to JavaScript Electronics on Amazon.co.uk

Otherwise, you can download a free PDF on…


In the finished application the real-world electronic sensors update the React component’s state as soon as they receive new readings. Then in the render function the LED component, using the newly updated state, works out whether it needs to switch on or off.

This is the second article in a series about Standardising IoT projects. In the first part I tried to apply the principle of separation of concerns from web development to IoT projects by inventing a new XML based markup language.

In the second part we take a completely different approach and use React.

My goal was to…

Mate Marschalko

Senior Front-end Web Developer, Creative Technologist with over 12 years experience. Loves pushing the limits of HTML and CSS.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store