One Green Step To Do List

This to-do list allows users to organize and plan their tasks and shows daily performance. Additionally, this list suggests "One green Step" the users can easily achieve to prevent climate change.

Comment

Inspiration

A lot of people think of taking action for climate change is difficult. However, there are a lot of small steps that we can take to protect our environment. Since protecting the Earth is one of our to-dos, I combined a to-do list with a random green step generator so that people can click the "green" button when they want to get a "green step" suggestion.

What it does

When a task is written in the box and the "Add" button is clicked, the task is added to the list below. When the "Green" button is clicked, a randomly generated green task is added to the list below. When an item in the list is clicked, the task becomes struck out. Tasks can be removed using the "x" button.

How I built it

This was my first time working with HTML, CSS, and Javascript. I decided to use these tools because I found they were very interesting tools from yesterday's web development workshop. I got source to-do list code from We3Schools, and added a "green" task generator studying source code and researching online.

Challenges I ran into

As this was my first time working with new tools, it took a while to understand the source code. Using yesterday's workshop notes and studying through code helping webpages helped a lot.

Accomplishments that I'm proud of

I finished my first HTML project and to-do list! Also, I'm proud of having time to learn new tools.

What I learned

NEW TOOLS: HTML, CSS, and Javascript! I could learn how design can be formatted using HTML. Also, Hackathon allows me to work extra focused on the task!! It was a fun time XD

What's next for One Green Step To Do List

  • number of tasks completed can be added to provide daily performance
  • clock can be added
  • more green tasks will be added to the list :)

Built With

Share this project:

Updates