priyez / childJS

Welcome to open source project ChildJS🧒! It's a fun way for kids to learn coding. We use a simple language as emoji syntax called babyLanguage, which is like JavaScript but easier. ChildJS helps kids understand programming in a playful and easy way.

Table of Contents

1. Introduction
2. Project Overview
3. Key Features
4. Getting Started
5. Syntax and Usage
6. Contributing

Introduction:

Welcome to ChildJS🧒, an open-source project aimed at introducing children to the world of programming through a simplified and playful JavaScript-like language called babyLanguage. ChildJS provides a fun and engaging platform for children to learn programming concepts in a friendly and intuitive way.

Project Overview:

ChildJS is designed to be a beginner-friendly environment where children can explore programming concepts using simple syntax and familiar emojis. The project focuses on creating a learning playground that encourages creativity, experimentation, and problem-solving skills.

Key Features:

Features of ChildJS Playground:

1. 💻 Interactive Environment:

   • Create an interactive playground environment for children to write and execute babyLanguage code in real-time.
   • Provide a user-friendly interface with syntax highlighting and error handling to enhance the coding experience.

2. 🎨 Visual Editor:

   • Incorporate a canvas-based whiteboard interface, allowing children to visualize their code execution dynamically.
   • Support hand-drawn-like style elements to make coding feel more creative and engaging.

3. 🌓 Dark Mode:

   • Implement a dark mode option to cater to different preferences and ensure accessibility in various lighting conditions.

4. 🏗️ Customization:

   • Allow customization of the playground interface, including themes, fonts, and editor settings, to suit individual preferences.

5. 📷 Image Support:

   • Integrate image support to enable children to upload and manipulate images within their projects, fostering creativity.

6. 😀 Shape Libraries:

   • Provide a library of pre-defined shapes and symbols for easy drag-and-drop usage, enhancing visual representation in projects.

7. 👅 Localization (i18n):

   • Support multiple languages to make the playground accessible to children from diverse linguistic backgrounds.

8. 🖼️ Export Options:

   • Enable export functionality to save projects as PNG, SVG, or clipboard-compatible formats, allowing children to share their creations easily.

9. 💾 Open Format:

   • Save projects in an open format .childjs to ensure compatibility across platforms and facilitate collaboration.

10. ⚒️ Wide Range of Tools:

    • Offer a variety of drawing tools such as rectangle, circle, arrow, line, free-draw, and eraser for creating diverse projects.

11. ➡️ Arrow-Binding & Labeled Arrows:

    • Implement arrow-binding and labeled arrows functionality to enhance visual communication and clarity in projects.

12. 🔙 Undo / Redo:

    • Provide undo and redo capabilities to allow children to experiment freely without fear of making mistakes.

13. 🔍 Zoom and Panning:

    • Support zoom and panning features to enable children to navigate and explore their projects easily, even on larger canvases.

Getting Started:

To start using ChildJS, follow these steps:

1. 🌐 Visit the ChildJS repository on GitHub: Link to Repository
2. 📥 Clone or download the repository to your local machine.
3. 📂 Open the project directory and explore the documentation to understand how to use the babyLanguage syntax and interact with the playground.
4. 🚀 Launch the interactive playground and start writing and executing babyLanguage code.

Syntax and Usage:

ChildJS uses a simple and intuitive syntax inspired by JavaScript, with emojis representing programming concepts.

• 🍼 Variables: Declare variables using emojis e.g., 🍼 varName = value;
• 💻 Output: Display messages using emojis e.g., 💻 display "Hello, World!";
• 🔤 Input: Take input and assign it to variables using emojis e.g., 🔤 varName = input;
• ➕➖✖️➗ Arithmetic Operations: Perform basic arithmetic operations using emojis e.g., ➕ varName = num1 + num2;
• 🔍🔎 Conditional Statements: Use emojis for if-else statements e.g., 🔍 if condition then
• 🔁 Loops: Create loops using emojis e.g., 🔁 loop numTimes times

Here's an example of highlighting syntax for ChildJS🧒:

// Variables
🍼 varName = value;   // Declare a variable with value

// Output
💻 display "message";   // Display a message

// Input
🔤 varName = input;   // Take input and assign to variable

// Arithmetic Operations
➕ varName = num1 + num2;   // Addition
➖ varName = num1 - num2;   // Subtraction
✖️ varName = num1 * num2;   // Multiplication
➗ varName = num1 / num2;   // Division

// Conditional Statements
🔍 if condition then
      // code block
   🔚
🔎 else
      // code block
   🔚

// Loops
🔁 loop numTimes times
      // code block
   🔚

// Comments
📝 // This is a comment

Contributing:

• Any contributions you make are greatly appreciated.
• Check out our contribution guidelines for more information.

Project Contributors 🌟

Thanks a lot for spending your time helping ChildJS🧒 grow. Thanks a lot! Keep rocking 🎉