Sometimes you need a pick me up. Remember those motivational posters that were all over the place in classrooms and online? We’re going to make our own!
Write clean, DRY JavaScript to store our data.
Use a provided class by creating object instances using the new keyword.
Manipulate the page after it has loaded adding, removing, and updating elements on the DOM.
Begin to understand the connection between HTML, CSS and JavaScript.
Learning Goals
Develop a better understanding of learned concepts.
Work on teaching strategies to grow as a developer.
Get more reps, add to developer toolbox, and tie concepts together.
Work on teamwork and remote collaboration skills.
Why was this project created?
This project was created to teach the fundamentals of working on a team and implementing vanilla JavaScript to create a basic web application.
How does this work?
Each page load will automatically generate a random motivational poster. From here, the user has options!
The user may continue to generate random posters by clicking the Show Another Random Poster Button.
To create their own poster, a user will click on Make Your Own Poster. This will pull up a form that accepts inputs for an image URL, a title, and a quote. Clicking Show my poster will return the user to the home page and display their new poster! There is also an option to return to the home page without creating a poster, by clicking Nevermind, take me back!
Posters can also be stored for later viewing by clicking Save This Poster. This switches to a grid view displaying mini versions of all saved posters.
To delete a poster, the user can double click the image.
This applications runs directly in the web browser!
Want to contribute?
Interested in contributing to Hang In There?!
Fork this project and clone to your machine.
Create a pull request, and one of our project managers will get back to you with a code review!
Technologies Used
JavaScript
HTML
CSS
Project Reflection
Nichele
I had a great experience during this project. Peter and I spent a good deal of time planning and discussing the problems, challenges we might face, and how to address problems when encountered.
Peter
On reflection, I feel very similarly! This was a successful and enjoyable experience overall, primarily driven by strong communication, a patient approach to planning and debugging, and a commitment to writing code together.
Wins
Nichele
I felt like our communication styles worked well together, and we were able to address coding challenges through discussion and solo pseudocoding.
Planning! We spent a lot of time in discussion deciding how to address a problem before writing any code. This seemed to give us a clear direction without leaving us muddled in issues we hadn't accounted for.
Our git workflow seemed to come together pretty quickly and I didn't have any issues with merges or pulls.
We were able to reach out to mentors when we needed assistance, and were able to come up with a solution to our problem with some gentle nudging.
Peter
We struck an effective balance between cooperative and solo work, always agreeing on when it was best to continue discussion and/or work cooperatively on a given feature/fix, and when to break away and analyze the issue independently, regrouping afterwards.
I think we demonstrated self-awareness of our own abilities, with a willingness to push through points of frustration in order to improve our debugging skills, but not to the point that we ever struggled unproductively. We knew when to reach out to our peers/mentors, and then using their guidance were able to continue on to solve these problems ourselves.
Challenges
Nichele
I wish I had taken more notes! On the next project, I think I'll create a separate file within the project to store reflections and questions that come up during the project.
We didn't really utilize our mentors for code reviews. Though we did discuss issues we were having, we didn't actually add them to any of the PR code reviews. Next time I would like to discuss a code review schedule with my mentors prior to beginning the project.
Peter
I too wish I'd taken more notes, or even used some sort of "progress document" to track the exact points of frustration and how exactly we were able to overcome these specific difficulties. It could be useful in future projects to be able to recall the methodologies that worked and use them again when appropriate.
While I did reach out to my rock and mentor for reviews, I think it was a bit too close to the deadline to reasonably expect them to help with that. In the future I agree that it would be wise to communicate with mentors ahead of time, establish a schedule, and allow plenty of time for them to compete reviews and for the team to use that feedback to refactor accordingly.
Overall Impressions
Nichele
Overall this project went well for me! I was able to gain more experience working with another developer, and continue to look at what my interactions are like in those situations.
I feel good about my progress in understanding the JavaScript logic and why certain solutions might be better than others.
I was able to understand the DOM and how it interacted with our code, and how to add and remove elements from the page after the initial DOM tree was created.
I learned a lot about what a good design and planning phase could mean for the future of a project and my own sanity during development!
Peter
This was an ideal first "Paired Project" and I feel fortunate that I had a partner who communicated well with me, from beginning to end. I learned a great deal about collaborative coding and the overall experience of working on a team, and I'm grateful that I was able to do so not through conflict or frustration, but through recognition of all the things that actually went well.
Among the many things I learned more about and gained more experience with, the DOM (on both a conceptual and practical/interactive level) and event handlers/methods were probably the most significant. This project also taught me a lot about the importance of effective "Googling", as we were able to discover and implement several JavaScript tools that became crucial in the program's functionality.
Future Features
Implement data validation and error handling into the form (disable button, provide error messages if data entered is not correct, etc).
In the main poster view, allow users to click each piece of the poster (image, title, quote) to update just that piece with another random item from the appropriate array.
When a user single clicks a saved poster, create a modal to view it larger.
Allow users to drag and drop saved posters into whatever order they want them to appear.
