Child-Friendly Calculator Tutorial
Budget / Salary$10–30
TypeFreelance project
LocationRemote
Posted1 hour ago
I’m putting together a simple web-based calculator so a 15-year-old can both use it and read through the source code to learn how HTML, CSS, and JavaScript work together. The functionality should stay at basic arithmetic only—addition, subtraction, multiplication, and division—so the logic stays approachable.
Visual style
Please keep the interface minimalist and clean. Think plenty of white space, rounded buttons, clear typography, and a subtle touch of color for active states. Animations should be gentle and purely functional, not flashy.
Code & learning focus
Every major section of the markup, style, and script needs concise inline explanations that call out the key concepts being used (e.g., “This flexbox container centers the keypad”, “This function uses querySelector to grab the display element”). The tone of the comments should be friendly and encouraging, written as if speaking directly to a curious teenager. No need for step-by-step breakdowns or long external links—just clear, concept-oriented explanations.
Tools & constraints
• Pure HTML5, vanilla CSS3, and plain JavaScript—no frameworks or build tools.
• Keep filenames and structure conventional: index.html, style.css, script.js.
• Make the code highly readable: consistent indentation, semantic tags, and logical variable naming.
• Ensure the layout is responsive so it stays neat on phones, tablets, and desktops.
Deliverables
• Complete, well-commented source files (HTML, CSS, JS).
• A brief README that explains how to open the project in a browser and lists the main concepts covered.
• Screenshot of the final UI on desktop and mobile breakpoints.
Acceptance
I’ll consider the job complete when I can:
1. Open index.html locally and see a clean, responsive calculator.
2. Perform the four basic operations without errors.
3. Read through the code and find clear explanations of the HTML structure, CSS styling choices, and JavaScript logic.
If you have any clarifying questions before starting, let me know—otherwise I’m eager to see your approach.
Visual style
Please keep the interface minimalist and clean. Think plenty of white space, rounded buttons, clear typography, and a subtle touch of color for active states. Animations should be gentle and purely functional, not flashy.
Code & learning focus
Every major section of the markup, style, and script needs concise inline explanations that call out the key concepts being used (e.g., “This flexbox container centers the keypad”, “This function uses querySelector to grab the display element”). The tone of the comments should be friendly and encouraging, written as if speaking directly to a curious teenager. No need for step-by-step breakdowns or long external links—just clear, concept-oriented explanations.
Tools & constraints
• Pure HTML5, vanilla CSS3, and plain JavaScript—no frameworks or build tools.
• Keep filenames and structure conventional: index.html, style.css, script.js.
• Make the code highly readable: consistent indentation, semantic tags, and logical variable naming.
• Ensure the layout is responsive so it stays neat on phones, tablets, and desktops.
Deliverables
• Complete, well-commented source files (HTML, CSS, JS).
• A brief README that explains how to open the project in a browser and lists the main concepts covered.
• Screenshot of the final UI on desktop and mobile breakpoints.
Acceptance
I’ll consider the job complete when I can:
1. Open index.html locally and see a clean, responsive calculator.
2. Perform the four basic operations without errors.
3. Read through the code and find clear explanations of the HTML structure, CSS styling choices, and JavaScript logic.
If you have any clarifying questions before starting, let me know—otherwise I’m eager to see your approach.
Apply on Freelancer →
Project sourced from Freelancer.com. Applications happen directly on the original platform — we never collect your data.