Code Monkey home page Code Monkey logo

content-slideshow-events-lab's Introduction

JS Event Handling Practice

Instructions

Fork this repo, then run git clone to download your fork locally. Then cd into the downloaded directory and open it in your text editor with code ..

Submitting

When you’re finished, run the following commands in your terminal to submit:

git add .
git commit -m 'Done'
git push

To get feedback on your code, make a pull request from your forked repo. If you worked with a partner, you can tag your partner on the pull request.

Assignment

In this challenge, we're going to be working on a site that allows our user to view random content. For the bored users out there! We're going to be using data from an array of objects inside the data.js file. We're going to give our users the ability to:

  • View some intitial random content on page load
  • Click on the "show random picture" button to view random content from our contentArray array
  • 'Like' content
  • Submit content
  • Edit the currently displayed content

There's a section in this Readme file for your notes on each deliverable. As you go through the deliverables, write down some notes in this file on how you solved each problem. It'll help reinforce what you learned and give you a head start next time you see a similar problem.

Deliverable 1: Intitial random content on page load

When a user loads the page, the page should display some random content on the page including the image, description, and number of likes.

Some things to keep in mind:

  • For coming up with a random number to use as the index of the array (to get a random content object to display), consider using JavaScript's Math.random()

YOUR NOTES


Deliverable 2: "Show random picture" button

When a user clicks the "Show random picture" button, new random content should be displayed.

YOUR NOTES


Deliverable 3: "Like" button

When a user clicks the "Show random picture" button, the likes count of the currently displayed content should increase by 1 and should be updated in the array. The likes won't persist (if you refresh the page, they'll reset to their original value) - we'll add persistence in a future challenge. Consider using a dataset attribute to store the ID of the content object on the element.

Some things to keep in mind:

  • Consider using dataset attributes in order to uniquely identify which content object you are currently displaying to the user on the page

YOUR NOTES


Deliverable 4: Add Content

When a user submits the form to add content, the new content should be added to the contentArray array and should be displayed in the content slideshow section on the page.

The data won't persist (when you refresh the page, the new content won't be available anymore) - we'll see how to fix this later on. For now, focus on getting the new content on the page when the form is submitted!

YOUR NOTES


Deliverable 5: Edit Content

When a user submits the form to edit the currently displayed content, the content that is currently displayed on the page should be updated with the information from the user input in the contentArray and the update should also be reflected on the page.

The data won't persist (when you refresh the page, the content won't have the updates anymore) - we'll see how to fix this later on. For now, focus on getting the new content on the page when the form is submitted!

Some things to keep in mind:

  • Make sure you're using the form submit event, not the click event.
  • If you see the page refresh, consider adding some code to prevent the default behavior of a form submitting.

YOUR NOTES


content-slideshow-events-lab's People

Contributors

brendamichelle 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.