Inspiration

If you go on social media, you'll likely see more bad news than good news. You'll see more negative encounters instead of wholesome interactions. The internet and even parts of our community have become a hotbed for cynicism and gloom. I want to address that, or at least make an effort to. Although this site won't gain any traction, I wanted to make the world more positive, even if just by a little bit, because those little bits of positivity compound into a collective feeling of compassion and cheerfulness. This is the whole idea of this website.

What it does

The intended functionality of this website is for users to click the 'Generate act of kindness' button near the middle of the page. Clicking this button, as shown by the name, displays an idea for a random act of kindness that can make someone's day better.

How I built it

Using basic HTML, CSS, and JS skills, I was able to make this website which includes animated graphics, basic text, pleasant colors, and an interactive button. I iterated through each step of the process, building the page element by element, while also adding on some things at the end. HTML was used for the page structure and elements, CSS for customization and effects, and JS for interactivity and dynamic things like the generation count.

Challenges we ran into

I have somewhat limited knowledge with JS (started learning recently) so I was obviously limited in terms of what kind of interactive/dynamic elements I could implement. I tried to stick with a basic idea, limiting myself to this acts of kindness generator, trying not to make things too complex. I also had some issues with naming ids and classes, because sometimes my CSS or JS code wouldn't work as intended because a certain element in the code might not be referenced with the right naming (e.g. clickCount in HTML was typed as click-count in CSS). Besides this, development was relatively smooth and I didn't encounter any images. But I will say that choosing a good page was a big thing for me, and it took me a while to find something good! My original prototype didn't have that so I had to restructure the page to include it.

Accomplishments that we're proud of

What we learned

What's next for Your Kindness Copilot

Built With

Share this project:

Updates