# PROJECT 001 - Web Application

### By Nancye Blair Black and Bayan Masarwa
CodePen [https://codepen.io/nwb2111/collab/rNKRvjZ](https://codepen.io/nwb2111/collab/rNKRvjZ)

---

### **PROBLEM**
All parents and kids want is to bond with their parents and be intimate and closer to them for positive growth and development. Reading books has a significant role in child development, and it prompts brain development and imagination and develops language and emotions.
Many parents and caregivers struggle to find the right book to capture their little one`s attention. So finding a solution to reading a favorite book without a struggle or a fight can be challenging.

---

### **SOLUTION**
Our solution is an interactive children`s book. Our book gives parents and children a fun and intimate experience to bond with each other.
In the book, the child and the caregiver can add their names.

On the next page, the child can collect stars in a box as a fun activity with their parents.

Next, they can pick and paint the sky in any color they wish.

The third page provides the opportunity to hear different birds' sounds by clicking on each bird.

On the Last page, the child can choose what type of adventure they would like to take next; swimming in the sea or hiking in the mountains.
After they pick witch adventure they want, this new page will open.
If they pick "Swimming in the Sea"
If they pick "Hiking in the Woods"

---

### **REFLECTION**
#### Bayan's Reflecion
Before starting this class, I was worried about how I would handle it. I had zero background in coding and programming; I did not know what HTML, CSS, AND JS were, so everything was foreign and new to me. I had a lot of anxieties about this class; I was not sure I could even learn coding at one point.
Looking back at things now, I had four significant factors that helped me get to where I am. Worked hard; I remember spending a lot of time during the semester studying and doing all the needed assignments to understand the topic. Meeting with Lisa once a week or two weeks, she helped me understand and develop some of the concepts that I struggled with, Jin's encouraging feedback and teaching methods; helped me to reflect on my learning and try to find the proper connection needed for me to understand the materials., and last but not least, my teammate Nancye; the collaborative teamwork that we had enabled me to learn so much from Nancye and to progress in my learning.
Coding and learning how to program was not as bad as I thought it would be. In fact, at times, it was fun and very satisfying when I had something working.

#### Nancye's Reflecion
I learned a lot this semester. Aside from occasionally embedding an image or YouTube video somewhere, all three of these languages - HTML, CSS, and Javascript - were new to me. Also, my only experiences programming with an interactive graphical user interface have been doing basic functionality with block-based code in Scratch or App Inventor. In this class, I was able to transfer some of my background knowledge to quickly pick up concepts like variables and variable types or basic control structures like for loops and if/else statements. But figuring out how to write functions that use events and control structures to manipulate the DOM or integrating the use of arrays and objects was all an entirely new beast. Even in this final project, the use of objects to create displayStates for the pages was very basic compared to some of the capabilities with objects and constructors that were explored in the last FCC and Tinker assignment. Nevertheless, I felt like it was a big accomplishment for me to get it to work at all, and I'm happy with that.

Similarly, I also took on other challenges in this project that were new to me - and even beyond my capabilities in the Doodle web toy two weeks ago. For example, I was able to figure out how to pass in the id of the star buttons when they are clicked so that I could reuse the same function instead of writing separate ones for each button. I also tried some things with layering div backgrounds, pulling rgb values from arrays based on user input, and using a range input to adjust the rgba alpha value. That took a lot of experimentation, trial and error, and several different approaches to get the effect of painting the sky that we were going for.

I also realized that learning new coding concepts and creating even these simple web apps can be incredibly time-consuming. I've enjoyed making these projects, but also grown frustrated when it has sometimes taken an hour or two or more to figure out why one thing isn't working. And sometimes it is something as simple as having only one equal sign instead of two/three inside the if statement condition. And sometimes even when asking for help, the second pair of eyes couldn't see it right away either. Learning to better use the debugging console and understand the error messages has helped with some of that, but I think it will also just take more time and practice.

Despite doing the required work and more to learn in this course, there are still several concepts that were introduced in the last Tinker and especially in the final FCC that I don't feel like I've fully grasped yet, but I'm hoping those will start coming together next semester, too.

In the end, I was able to make some simple toys and apps in this course that I feel very proud of. And I feel really good about the progress that I made and my preparation for the 5013 course in the spring. Thank you, Jin and Lisa, for all of your support.