An image search engine from Flickr. Play it here.

The image loops take images from Flickr and show only 10 pictures when you search.

Clone and repo and open your index.html.

To make a good readme the following prerequisites are necessary:

1. VS Code
2. CSS,HTML,Javascript knowledge.

For this particular project, there are no specific installation requirements.

This project is hosted on Github.

• VS Code
• Github

• Yiting Liu -- ITP 2021 -- NYU ITP

I wanted to work with audio and images. However, in this homework assignement, I did not acheive so. It takes quite a long time to navigate and learn what Javascript has to offer. I am beginning to see the conveinence of using Javascript to make lots of things happen. For instance, I used forEach to replace for loops. Also, the arrow functions really helped.

I struggled a lot with Javascript and CSS since there are so much room for improvements. In working with images, I wanted to create a grid that show all the images. However, I was struggling with flex box, grid creation in CSS. Also, most of the cases, I need to create div as a container for a paragraph or a button.

This is a process of trail and errors and some ideas come along when I was creating this website. I originally had a button to submit the user input. However, I wanted to create a smooth interaction, therefore, I searched for the keydown function and replaced the button with Enter key.

Also, I learned how simple it is to createElements and add tags in Javascript. It takes a while to wrap my head around but it is worthy and convenient for me in the end.

I am half satisfied with my CSS effort. With the help of the horizontal scrolling tutorial, I was able to make the scrolling smooth. I felt my CSS is not as strong. I had to search for the website for multiple outcomes. For instance, I wanted to increase the font size of the placeHolder content in the textbox. The back-and-forth searching makes me feel like I have a long way to go. But I am excited since now I have a goal to create websites that are music and image related.

• Flickr API takes time for me to figure out elements needed. I tried to use Flickr Scraper yet failed to do so. So I went the old school way to deconstruct the API link in my js code.
• Couldn't update images based on new user input. The images will pile up at the end of the array rather than at the top. Therefore, users would have to scroll till the end to see the new images.

• How to make a grid in CSS
• User input updates
• Horizontal Scrolling