PINTEREST REDESIGN

This was a redesign of Pinterest, which I created with a partner in my Programming Basics class. I coded this project completely by hand using JavaScript, CSS, and HTML.

 

THE PROCESS

 
  • First, we had to plan out our website. I sketched out a potential design, taking into account all the elements that we wanted to include, then we got to work.

  • This website uses a csv (which we later converted into a JSON file in JS) that we filled with information about all of the images featured on the website. This CSV included potential terms users could use to search for each image, individual links we associated with each image, captions we came up with for each image, and links to the brand from which each image came.

  • For the website to work, we used a series of JavaScript functions for the landing page, searching for each image, and clicking on each image to view it larger

 

THE SEARCH BAR.

The search bar uses a JavaScript function to allow users to search for different images using key terms like “jeans,” “recycled,” or “inclusivesizing.” For best use, I recommend using no spaces in between search terms with more than one word. Search terms are case sensitive, so I would also recommend either using lower or camel case.

THE FEATURED BRANDS.

Each brand featured on the website is listed on the side of the page. Users can use the search bar to search for all the images associated with any of the brands featured on the website.

 
 
Previous
Previous

abc's of caribbean food