lynnerang / ideabox

Group project for Turing Module 1

IdeaBox Triples

Table of contents

• General Info
• Motivation
• Built With
• Screenshots
• How to Use
• Setup
• License

General Info

A project where we built an application for recording and archiving our good ideas for Turing's Front-End Engineering course, Module 1.

Motivation

Ideabox was a project assigned to us as Mod 1 students at Turing. Working with HTML, CSS and JS. This project was to help us understand how to implement client-side data persistence using localstorage, having a seperate data and dom model and how to iterate over them, and how to utilize data-* attributes.

Here's the comp we were given:

Built With

• HTML
• CSS
• JS

Screenshots

Features

• Viewing ideas
• Adding and editing a new idea
• Deleting an existing idea
• Changing the quality of an idea
• Filtering and searing by text and importance
• Recent ideas
• Character Counter
• Submit button disabled on character count
• 5 qualities total

How to Use

Fill in the empty text boxes with a title and body for your new ideas. Upon pressing save the application saves your idea on the DOM and in local storage to access later. Every new idea starts with the quality of 'Mehhh' and allows the user to cycle up through 4 other quality options. When cycling up and down the card will save the new quality. Additionally the user can update the title and body section of existing cards. When the user fills up the page with new ideas they can press the 'Show less...' button and reduce the amount of cards on the DOM to 10, and then show more to show the additional cards. The user can filter through their idea cards by using the search box, or filter by quality by clicking on the corresponding quality button.

Setup

View here on my GitHub.

License

All credit goes to Turing School of Software for providing the project specifications and website design.