Gold Challenge: Random Otters
by Todd Gandee, Chris Aquino
Front-End Web Development: The Big Nerd Ranch Guide
- Title Page
- Acknowledgments
- Table of Contents
- Dedication
- Introduction
- I. Core Browser Programming
- 1. Setting Up Your Development Environment
- 2. Setting Up Your First Project
- 3. Styles
- 4. Responsive Layouts with Flexbox
- 5. Adaptive Layouts with Media Queries
- 6. Handling Events with JavaScript
- Preparing the Anchor Tags for Duty
- Your First Script
- Overview of the JavaScript for Ottergram
- Declaring String Variables
- Working in the Console
- Accessing DOM Elements
- Writing the setDetails Function
- Returning Values from Functions
- Adding an Event Listener
- Accessing All the Thumbnails
- Iterating Through the Array of Thumbnails
- Silver Challenge: Link Hijack
- Gold Challenge: Random Otters
- For the More Curious: Strict Mode
- For the More Curious: Closures
- For the More Curious: NodeLists and HTMLCollections
- For the More Curious: JavaScript Types
- 7. Visual Effects with CSS
- II. Modules, Objects, and Forms
- 8. Modules, Objects, and Methods
- Modules
- Setting Up CoffeeRun
- Creating the DataStore Module
- Adding Modules to a Namespace
- Constructors
- Creating the Truck Module
- Debugging
- Initializing CoffeeRun on Page Load
- Bronze Challenge: Truck ID for Non-Trekkies
- For the More Curious: Private Module Data
- Silver Challenge: Making data Private
- For the More Curious: Setting this in forEach’s Callback
- 9. Introduction to Bootstrap
- 10. Processing Forms with JavaScript
- 11. From Data to DOM
- 12. Validating Forms
- 13. Ajax
- 14. Deferreds and Promises
- 8. Modules, Objects, and Methods
- III. Real-Time Data
- 15. Introduction to Node.js
- Node and npm
- Hello, World
- Adding an npm Script
- Serving from Files
- Error Handling
- For the More Curious: npm Module Registry
- Bronze Challenge: Creating a Custom Error Page
- For the More Curious: MIME Types
- Silver Challenge: Providing a MIME Type Dynamically
- Gold Challenge: Moving Error Handling to Its Own Module
- 16. Real-Time Communication with WebSockets
- 17. Using ES6 with Babel
- Tools for Compiling JavaScript
- The Chattrbox Client Application
- First Steps with Babel
- Using Browserify for Packaging Modules
- Adding the ChatMessage Class
- Creating the ws-client Module
- For the More Curious: Compiling to JavaScript from Other Languages
- Bronze Challenge: Default Import Name
- Silver Challenge: Closed Connection Alert
- For the More Curious: Hoisting
- For the More Curious: Arrow Functions
- 18. ES6, the Adventure Continues
- Installing jQuery as a Node Module
- Creating the ChatForm Class
- Creating the ChatList Class
- Using Gravatars
- Prompting for Username
- User Session Storage
- Formatting and Updating Message Timestamps
- Bronze Challenge: Adding Visual Effects to Messages
- Silver Challenge: Caching Messages
- Gold Challenge: Separate Chat Rooms
- 15. Introduction to Node.js
- IV. Application Architecture
- 19. Introduction to MVC and Ember
- 20. Routing, Routes, and Models
- 21. Models and Data Binding
- 22. Data – Adapters, Serializers, and Transforms
- 23. Views and Templates
- 24. Controllers
- 25. Components
- 26. Afterword
- Index
Write a function that changes the data-image-url
of a random otter thumbnail so that the detail image no longer matches the thumbnail.
Use the URL of an image of your choosing (though a web
search for “tacocat” should provide a good one).
For an extra challenge, write a function that resets your
otter thumbnails to their original data-image-url
values and changes another one at random.
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.