Creating a Clock with Amazon Q Developer and p5.js

As part of the 2024 Generative AI Festival Challenge, I embarked on an exciting project to create a functional clock using JavaScript, with no prior coding experience in this language. Thanks to Amazon Q Developer and the p5.js library, I was able to accomplish this task in under 10 minutes! In this blog post, I'll share my journey, the resources I used, and how Amazon Q Developer made this process incredibly smooth and efficient.

Getting Started: Learning About Amazon Q Developer

Before diving into the project, I found it essential to understand the tool I'd be working with. I watched two informative Twitch videos that provided valuable insights into Amazon Q Developer:

These videos, featuring Darko Mesaro and Rohini Gaonkar, offered a detailed explanation and hands-on demonstration of Amazon Q Developer. I highly recommend these resources for anyone new to this tool.

Setting Up the Development Environment

To get started, I made sure I had the following tools installed:

Visual Studio Code
Amazon Q Extension for VS Code
Live Preview extension for VS Code (for real-time code preview)

I created a new folder called "Gen AI" to house my project files.

Discovering p5.js

Through the Twitch videos, I learned about p5.js, a JavaScript library perfect for beginners learning to code and create visual art. It's free, open-source, and supported by an inclusive community – ideal for my clock project!

Creating the Clock: Leveraging Amazon Q Developer

With my environment set up, I opened Amazon Q and entered the following prompt:

I need to create a clock. share a p5.js code.

Amazingly, Amazon Q provided me with a complete sketch.js file containing the necessary code to create a clock, along with a detailed explanation of how the code works. Here's a breakdown of the key components:

The setup() function creates a canvas and sets the angle mode to degrees.
The draw() function, which runs continuously, calculates the current time and updates the clock display.
The code draws the clock face and hands using various p5.js functions like arc(), line(), and ellipse().

Implementing the HTML File

To bring my clock to life, I needed an HTML file to house the JavaScript code. Once again, I turned to Amazon Q Developer with the prompt:

To implement JS file, share the HTML file

Amazon Q provided me with a complete HTML template that included:

The necessary meta tags and title
A link to the p5.js library via CDN
CSS to center the clock on the page
A script tag to include my sketch.js file

Seeing the Results

With both my sketch.js and index.html files ready, I used the Live Preview extension in VS Code to see my clock in action. To my delight, it worked perfectly, displaying the correct time!

Reflection

This project was an eye-opening experience that showcased the power of AI-assisted coding. With Amazon Q Developer, I was able to create a functional and visually appealing clock in JavaScript, despite having no prior experience with the language. The entire process, from learning about the tools to seeing my clock tick, took less than 10 minutes.

Amazon Q Developer proved to be an invaluable resource, providing not just code snippets, but complete, working solutions along with explanations. This approach allowed me to learn while doing, making the coding process both educational and enjoyable.

Conclusion

For beginners looking to dip their toes into coding or experienced developers wanting to explore new libraries quickly, Amazon Q Developer is a game-changer. It removes many of the initial barriers to getting started with a new project, allowing you to focus on understanding and customizing the code to your needs.

My journey from a JavaScript novice to creating a working clock in minutes is a testament to the potential of AI-assisted development tools. I'm excited to explore more projects and see what else I can create with the help of Amazon Q Developer!

This blog post was created as part of the 2024 Generative AI Festival Challenge.

Site Terms, Privacy, and more.