The Organizer

Inspiration-

We wanted to create something that could help students from anywhere organize their notes for all of their classes. During the quarantine all of our work was online, and taking notes was very difficult when we weren't in class, and when we did manage to take notes, it was very hard to review our notes for tests because all of our notes were so unorganized. So we decided to create a way for people to organize their notes for each of the core subjects that they would take in class.

What it does -

The Organizer is an easy way to store all of your notes based on a subject. Currently, we have premade categories in which you can store your notes. To access your notes, you just have to select your category, and type in and/or edit your notes. Its simple, fast and efficient, and it is guaranteed to make your education a whole lot easier

How we built it -

First, we set up the Index.html using HTML and CSS and from there, we came up with the idea that there would be a page for each of the individual subjects (e.g. "Math notes"). So we made an .html file for each page and then we designed the logo and the header for the website as well as the buttons directing to the pages. In the pages, we set up a 2x2 table using HTML that would take place of the boxes for taking notes and then we also added an input field where the user would add notes to the boxes. In addition to that, we also implemented two different buttons for each of the boxes where you can add the note for a specific box (by number) as well as deleting the notes. With CSS, we adjusted the height and width as well as additional settings for the table and the sizes of the rows and columns. Those were the HTML and CSS aspects of the project. Using JS, we added the functionality for the buttons using functions() where it would store the text value from the user input in a variable and from there, it would call the function() method to update the text field in the according box with the variable.

Challenges we ran into- ##

We ran into some challenges, and sometimes we were stuck on coding in general. We knew and had a rough sketch in our heads about what the project was going to be like. But in reality it took us a very long time to figure out how to implement our code. We also used JavaScript, CSS, and HTML so we has to switch languages a good bit. What was really difficult as well was that we had never created something like this before, so it was a real challenge to figure out what we needed to do to get it to work. But in the end, we were able to get through the difficulties and create a working project.

Accomplishments that we're proud of-

We are proud of making a simple yet different website. This took a very long time and we kept alternating with our ideas but in the end it worked out for us. We are proud of working together in a efficient manner, no arguing amongst ourselves and bouncing ideas off of each other.

What we learned-

We learned a whole lot while coding this project. We learned a lot about JavaScript, and how it is integrated with HTML and websites in general. All of us had taken JavaScript courses in the past, but this project truly gave us a sense on what it is like to be able to take those skills that we learned and apply them to a real project in the real world.

What's next for The Organizer-

We believe we can use a log in screen possibly for security purposes, and it gives people access to the website from multiple images. We also plan to add more categories and letting users create their own category to take notes.

Built With

• css
• html
• javascript