We wanted to help girls to get a sneak peak into basic programming concepts through card (or any visual!) making, which we noticed that a lot of our female friends love.

What it does

InstaCard is a "programming language" with a realtime editor that allows users to create an html file through fairly simple syntax and organization. Like a real programming language, it allows both function calling and variable assignment; in fact, its syntax is very similar to Python but is designed for creating HTML visual components. By having this syntax, it allows first time programmers to 'program' a html file while not facing complexity and annoyance in syntax and higher level knowledge in HTML and Javascript. Any change made in the coding area of the real time editor is reflected instantly on the results area on the same window.

How we built it

We first built a realtime HTML editor to test if our idea is manageable within the short amount of time, and then we moved into designing the language and parsing the 'code' into HTML for it to display on the browser instantly. Finally, we worked on displaying documentation for the language so that the users know exactly what can be done here through coding.

Challenges we ran into

We spent a lot of time on the organization of frames and parsing the code, and we were not able to fully implement the functionality to export the file written due to Javascript security issues.

Accomplishments that we're proud of

We are proud of the fact that the code parsing portion and the real time editor work seamlessly with each other.

What we learned

Parsing, Creating a real time editor

What's next for InstaCard

More functions implemented for more flexibility, Expanded documentation, Better UI

Built With

Share this project: