Code Monkey home page Code Monkey logo

int-u5-project-23-24-starter-code's Introduction

Unit 5 Project: Suggestion App

Note: the following are aligned with a MOVIE suggestion app - you should adapt to whatever you want.

How the app should work ๐Ÿค”

  • When a user types in a movie genre and presses "Submit!" they will see pictures/captions of suggested movies appended to the page.

HTML

  1. Add any additional questions or inputs you like.
  2. Create a class name for the input(s).
  3. Create a class name for the button(s).
  4. We want our show suggestions to appear in a div. There's one div on the page. Give it a class!
  5. Change the h1 to call the app whatever you want!

CSS

  1. Change the background, text size, and text color.
  2. Change anything else you want.

JS

Arrays

  1. Create at least three arrays that contain the links to images of few movies you recommend in each genre.
  2. The name of the arrays should be the name of the genres you chose.

Variables

  1. Save your HTML elements into variables.
  2. We want our suggestions to appear in the div. Save that to a variable too!

Conditionals & Loops

When the user types in a genre, the images of the recommendations should append to the page.

  1. Inside the first click handler (already declared), we'll need to save the user's input to a variable. To do that, you'll need to use the .value method.`
  2. Write a conditional statement that checks if the user has typed in the first of the genres you chose.
  3. Within that first conditional, write a loop that appends each image link in the first array as an <img> tag to the div.
  4. Do the same thing now for any other arrays you created! NOTE: remember to use else-if

Use console.log along the way to test your code is working.

int-u5-project-23-24-starter-code's People

Contributors

cn-mika avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.