Skip to content

Instantly share code, notes, and snippets.

@desinas
Created December 23, 2017 14:59
Show Gist options
  • Save desinas/122e84c523a6f68c5492dbad287d892a to your computer and use it in GitHub Desktop.
Save desinas/122e84c523a6f68c5492dbad287d892a to your computer and use it in GitHub Desktop.
$( function ) Quiz of lesson 19 from Udacity FEWD
/*
For this quiz, can you use this script, which is linked in the <head> of index.html,
to change the boring placeholder image to a picture of a cute animal?
Remember, you'll need to pass a function into the jQuery object to run
when the document is ready.
Unfortunately, placepuppy is no longer available. Here's a link to a random
animal image on lorempixel.com:
http://lorempixel.com/350/150/animals/
Good luck!
*/
$(function () {
$('img').attr('src','http://lorempixel.com/350/150/animals/')
})
<!DOCTYPE html>
<!--
This is the HTML document you'll use jQuery to modify. To take the quiz, click over to app.js!
-->
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<header class="header">
<nav id="nav" class="navigator">
<h1>Nav Header</h1>
<ul class="nav-list">
<li class="nav-item"><a>Item #1</a></li>
<li class="nav-item active"><a href="#2">Item #2</a></li>
<li class="nav-item"><a href="#3">Item #3</a></li>
<li class="nav-item"><a href="#4">Item #4</a></li>
<li class="nav-item"><a href="#5">Item #5</a></li>
<li class="nav-item"><a href="#6">Item #6</a></li>
</ul>
</nav>
</header>
<div class="articles">
<input id="input" value="Cool Articles" type="text">
<h1>Cool Articles</h1>
<ul class="article-list">
<li class="article-item">
<header>Article #1</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita sapiente officiis beatae, ut consequuntur. Quos minus neque eius, nemo sunt excepturi eveniet amet veritatis voluptatibus corporis ea, blanditiis porro ad!</p>
<h3>Sample Image Title here</h3>
<img src="http://placehold.it/350x150" alt="Placeholder Image">
<ul>
<li class="bold">James</li>
<li>Lily</li>
<li>Harry</li>
</ul>
<p>Magnam ex autem doloremque, tempore mollitia atque aut delectus corporis rem similique voluptates omnis reiciendis vitae impedit exercitationem unde quaerat, doloribus voluptatibus molestias et veritatis sed optio repudiandae? Provident, voluptates.</p>
</li>
<li class="article-item featured">
<header>Article #2</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil animi ipsum, incidunt mollitia modi cum, eum ex doloremque rerum quod, maiores quisquam, enim quam unde cumque! Quam, doloremque. Voluptatum, maxime!</p>
<p>Numquam et quae, quasi. Reiciendis nemo mollitia eveniet alias, debitis facere atque excepturi et beatae laudantium commodi optio unde amet vitae libero quas cupiditate, nam porro minus. Quisquam, odit non.</p>
</li>
<li class="article-item">
<header>Article #3</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt ratione, cum doloremque molestias labore amet at dicta reiciendis repudiandae fuga atque adipisci pariatur distinctio suscipit perferendis provident, facere ad aut.</p>
<p>Temporibus sapiente odio eveniet enim perferendis maxime, ratione, accusantium suscipit alias, soluta architecto culpa pariatur. Cupiditate nam eaque dolore voluptatem necessitatibus corporis iusto adipisci, dignissimos error, vitae quam, aliquid eius!</p>
</li>
<li class="article-item">
<header>Article #4</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate commodi, est soluta eos voluptates eum! Modi sit quia ipsum fugiat nesciunt, assumenda deleniti consequuntur molestias reprehenderit. Voluptate corporis illum nam?</p>
<p>Quia, omnis. Quasi necessitatibus, ducimus, deserunt ipsa, reprehenderit sit a dolore fuga placeat magni culpa ipsam quas id aut veniam rerum pariatur enim harum recusandae quo odio consequuntur. Maxime, aperiam.</p>
</li>
</ul>
</div>
</div>
</body>
</html>
@desinas
Copy link
Author

desinas commented Dec 23, 2017

The index html file is a sample jQuery page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment