/Idea-Box

Primary LanguageJavaScript

Idea Box

was a group project with the objective of learning and utilizing JSON, local storage, and array prototype methods. In addition, we should have cemented our knowledge of using and modifying the DOM, event propagation and bubbling, and how to craft dry, clean code.

Given Comp and Mobile Layout

ideabox-triples-comp01.jpg

ideabox-triples-comp02.jpg

Our Recreation

screencapture-file-Users-raechelodom-Desktop-mod1-Idea-Box-index.png

What We Learned

We learned how to convert and parse Javascript into and from JSON for the use of local storage. We also used the array prototypes filter() and forEach() in a variety of ways, which really helped with identifying when to use them. We furthered our knowledge of manipulation of the DOM and corresponding elements and should now feel ultra-comfortable using querySelectors, event bubbling, and inline styles such as innerText or HTMl. It's also important to note that we learned a lot about working remotely and working with each other.

Remaining Areas for Improvement

We had a hard time keeping our functions as dry as they can be, which is something that we would like to keep working at to better ourselves. While the functionality is there, not all of the functions, especially the updateQuality function could be much cleaner so it's easier to understand.

Wishlist

While we were able to finish a couple of the extensions, it would have been ideal to use JS for the 'Show More' button, but we were unable to coplete the functionality within our time constraint.

Extensions Implemented

We are so happy to say that we were able to finish the character count and we have the submit button disabled when there is no text in both the title and the body for the idea. It would have been pretty cool to get to adding two more idea qualities, but if given the time, our priority should be getting the 'Show More' button to function with Javascript.

Difficulties

We faced difficulty early on with some of our longer, more complex functions, like with the updateQuality funciton but we realized that we were overcomplicating how to work on some of the code,

Mobile Layouts & Responsivenesss

iPad (768 x 1024)

screencapture-file-Users-raechelodom-Desktop-mod1-Idea-Box-index.png

Galaxy S5 (360 x 640)

screencapture-file-Users-raechelodom-Desktop-mod1-Idea-Box-index.png

iPhone X (375 x 812)

screencapture-file-Users-raechelodom-Desktop-mod1-Idea-Box-index.png