Start programming with Claude.ai

Ai is here to stay and one of the best things you can do is play with it beyond asking for chocolate chip cookie recipes or asking what the boil on your leg is. We here at ataary, young and old, have started trying to program with Ai. One of the easiest tools to start with is Claude.ai from Anthropic, they have powerful models, but as a company have a stronger stance on safety and guardrails on the future of AI, so it makes it a much better tool for educational environments.

Giving a good initial prompt explaining your level of experience is one of the best ways to get started. For today’s example we used:

Can you program a simple html calculator? I am a complete noob and will need you to walk me through this step by step.

Which is not much, but does give a clear outcome (the program and programming language desired), and clear explanation of the guidance needed (I am a noob (novice) and want step by step instructions). It can be done on a phone but admittedly something with a keyboard and mouse is a little more approachable since you will need to be making a files and folders through the process. If any of this sounds foreign the benefit is you can ask for more help or clarification anywhere along the way.

With just an afternoon Yv was able to make BunnyRunner, a simple side scroller for pc web browsers, and had no prior experience.

We will post a video example and the full example chat below, but dive in, try something fun.

Can you program a simple html calculator? I am a complete noob and will need you to walk me through this step by step.

I’ll help you create a simple calculator using HTML, CSS, and JavaScript. I’ll break it down step by step and explain each part.

calculatorDownload

Let me explain the main components of this calculator:

  1. Structure:
  • The calculator is built using HTML for structure
  • CSS for styling
  • JavaScript for functionality
  1. Key Features:
  • Number buttons (0-9)
  • Basic operators (+, -, *, /)
  • Clear button (C)
  • Backspace button (←)
  • Decimal point (.)
  • Parentheses for complex calculations
  • Error handling for invalid expressions
  1. The main components explained:

HTML Structure:

  • We create a container div with class “calculator”
  • Inside it, we have an input field for display
  • Buttons are organized in a grid layout

CSS Styling:

  • The calculator has a clean, modern design
  • Buttons are arranged in a grid using CSS Grid
  • Different colors for different types of buttons (operators, equals, clear)
  • Hover effects for better user interaction

JavaScript Functions:

  • appendToDisplay(value): Adds numbers and operators to the display
  • clearDisplay(): Clears all input
  • calculate(): Evaluates the expression and shows the result
  • backspace(): Removes the last entered character

Would you like me to explain any specific part in more detail?

How do I actually use this now. Where do I put the files?

Let me help you get this calculator running on your computer. Since all the code (HTML, CSS, and JavaScript) is combined into a single file, it’s very simple to set up:

  1. Create a new file:
  • Open any text editor (like Notepad, TextEdit, VS Code, or any code editor)
  • Create a new file
  • Save it with the name calculator.html (make sure it has the .html extension)
  • Copy and paste all the code from above into this file
  • Save the file
  1. Run the calculator:
  • Simply double-click the calculator.html file
  • It will open in your default web browser
  • That’s it! You can start using the calculator

Alternative Method (if you want to keep it organized):

  1. Create a folder called calculator anywhere on your computer
  2. Save the calculator.html file inside this folder
  3. Double-click to open it in your browser

Common places to save it:

  • Windows: Documents folder or Desktop
  • Mac: Documents folder or Desktop
  • Linux: Home directory or Desktop

To make changes:

  1. Edit the file using your text editor
  2. Save the changes
  3. Refresh your browser to see the updates

Would you like me to explain how to make any specific modifications to the calculator?

Related Posts