Code Monkey home page Code Monkey logo

w02d01-jq-lab's Introduction

Lets practice some jQuery!

Getting started

  • Fork and clone this repo
  • Open up the files in your text editor
  • Open index.html in your browser
  • Take a look at what code is already given. Theres a bunch going on here!
  • Open up main.js and begin work

Assignment

Gallery

  • When you click on '.gallery-tile'
  • Get the background image of 'this' gallery-tile
  • Set '#main-img' background image to the image

Classes

  • When you click on a '.tab'
  • Select the element with the class of 'selected' and remove the class 'selected'
  • Add the class 'selected' to 'this' element
  • Select the '#tab-conent' element
  • If 'this' tab has an id of 'fewd' set the text of the '#tab-content' to the fewdText
  • If it has an id of 'js' set it to the jsText
  • If it has an id of 'wdi' set it to the wdiText
  • HINT: use attr to get the id of the element

Instructors

  • When you click on '#jackie'
  • Select '#jackie-info' and toggle the class 'show'
  • When you click on 'trevor'
  • Select 'trevor-info' and toggle the class 'show'

BONUS (this will be a tough one!)

  • When the page loads, set the #main-img to a random image from the '.gallery-tile's
  • HINT: Look at Math.random()

w02d01-jq-lab's People

Contributors

jackiecasper avatar

Watchers

James Cloos avatar Aljawharah Alqahtani 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.