Skip to content

README.md

Latest commit

 

History

History
28 lines (21 loc) · 3.49 KB

README.md

File metadata and controls

28 lines (21 loc) · 3.49 KB

JavaScript Project

This project will serve as a review for all the HTML, CSS, and JavaScript we've learned so far in class.

Before you do anything, you should break into groups of 3 or 4. You'll be working together for the next 2-3 classes.

Rules

What you're making:

  1. You'll create a single webpage. This could be a blog like Tumblr, a social media landing page, an e-commerce site, or a photo sharing site (like Instagram or Pinterest) etc.
  2. You should include your JS in the script.js file and CSS in your style.css file.
  3. If you need to include images or other files, you can either find an image online and use that url, OR download the image and create a folder in your project like 'img'. Then, place your images in that file. In your code, you'll need to use a relative file path name, so the url would be 'img/image-name.jpg'

Basic requirements:

  • Before you write any code, you'll need to brainstorm with your team and make a simple wireframe. Once you're done, go to your assigned instructor who will make sure your idea satisfies the project requirements. Be prepared to explain how your proposed wireframe meets the requirements and how you'll approach making the page and what tools you'll use.
  • You must include at least three of the following:
    1. Include a <button> element that, when clicked, causes something to change on the page. For example, an image can disappear, or appear, or text might change color, etc.
    2. Use a for-loop and an array of data to create a list of something in your HTML. For example, if you have an array like this, you would have to somehow turn it into html: var posts = [['John','image1.jpg',34],['Sammy','face.jpg',90],['Shera','vacation1.jpg',103]]. So posts[i][0] is the poster's name, posts[i][1] is the image url and posts[i][2] is the number of likes. You need to come up with your own data.
    3. Include a way for the user to type text into an <input> element (i.e. textbox), and then when the user clicks a button, the text is appended onto the html. (Hint: You might want to use $(selectorName).val() somewhere in your code)
    4. In the above task, check if the input is valid. You see this a lot when you have to make a password when signing up for some new site. For example, you might want to make sure whatever the user is typing and submitting is at least 8 characters long and starts with a letter 'a'. You can make up your own requirements.
    5. If your team decides to work with an array, you might want to allow users to add new 'posts' by typing and submitting from your input box(es). How do you add new items to your array?
    6. Make a border appear around an image on your page if the user has their cursor over the image. (You can use jQuery OR CSS to make this happen)
    7. Add a like/heart button to a post (image, blog, social media etc.) on your page. If the use clicks, the button should change color, and there you be a number next to it that increments (increases by one). For an added challenge, you should also implement the reverse: the number should go down by one (decrement) if the user unlikes. The button should go back to its original color.

Tips

  • Try to keep your wireframe layout simple, but don't worry if your design incorporates something you don't know how to do. We'll give you feedback about your design, and help you with CSS tricks and techniques. Focus on using JavaScript to get all of your contents into html, and displayed on the screen first. Then worry about the styling afterward.