Inspiration

As a part-time English teacher, I see the frustration some students face when it comes to reading. The spark in their eyes dims when faced with another long chapter, and the joy of getting lost in a story seems distant. I know the power of a good book, the way it can transport you to another world and ignite your imagination. That's why I created Accompl: a fun and engaging webapp that aims to rekindle the love of reading in young learners.

What it does

Accompl features a user-friendly interface specifically designed for young readers. This interface utilizes a bright and colorful design with large, clearly labeled buttons. By eliminating complex menus and small text, Accompl prioritizes ease of navigation and accessibility for young users.

Furthermore, Accompl recognizes that developing strong spelling skills may still be in progress for young readers. To address this, the platform allows users to express their favorite scenes from books through drawings. This eliminates the need for extensive writing and allows users to focus on capturing their favorite elements of the story visually.

How we built it

Accompl's engaging interface prioritizes accessibility for young readers. Built with HTML and CSS, the website leverages clear HTML structure for organization and utilizes CSS to create a bright and colorful design with large buttons. Javascript was used to create the interactive dialog, which prompts readers for their book review.

Challenges we ran into

As a first-time JavaScript learner building Accompl, one of the challenges was coordinating JavaScript with HTML to achieve dynamic rendering. While the basic functionality of allowing input is in place, I have not managed to render the output in response to dynamic changes. As I continue learning about more advanced HTML techniques and JavaScript, Accompl will evolve to become even more interactive and engaging for young readers.

Accomplishments that we're proud of

As a beginner in web development, building Accompl has been a fantastic learning experience. One accomplishment I'm particularly proud of is implementing HTML form validation. While it might seem like a basic step, it plays a crucial role in catching errors early on, like missing fields or invalid email formats. This promotes a more user-friendly experience for young readers on Accompl, ensuring their journey is smooth and frustration-free.

What we learned

Building Accompl has been a learning adventure! While my initial idea was to use an animated SVG background to enhance the visual appeal, I realized after animating the SVG that the animation wouldn't display when referenced in the background-image property. The solution I found involved using the object tag to display the animation, but this approach wouldn't achieve the background effect I desired. Due to time constraints, I abandoned the animated SVG idea for now. However, the process equipped me with valuable animation skills that will be beneficial in future iterations of Accompl.

What's next for Accompl

Moving forward, a major focus will be implementing a data storage solution. We'll explore options like local storage, cookies, and server-side storage, each with its own strengths and weaknesses. Striking the right balance between user experience and data security is paramount. Ultimately, we want to empower young readers to revisit their book reviews with ease. This not only fosters a sense of accomplishment in their reading journeys but also allows them to visualize their progress. Seeing their growing collection of reviews will be a powerful motivator, encouraging them to continue building their literary insights and engaging with Accompl on a deeper level.

Built With

Share this project:

Updates