Skip to content

Instantly share code, notes, and snippets.

@iamricard

iamricard/ex1.html

Forked from anonymous/ex1.html
Created July 13, 2015 15:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iamricard/bcd9d06a2fb6e05091f0 to your computer and use it in GitHub Desktop.
Save iamricard/bcd9d06a2fb6e05091f0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ex1.html
<html>
<style>
pre {
height: 25px;
overflow: hidden;
}
.expanded {
height: auto;
}
</style>
<body>
<a href="javascript:;" id="toggleCollapse">Expand</a>
<pre id="content">
Multi-line paragraph
How can we show this?
And this?
</pre>
<script type="text/javascript">
(function() {
var button = document.getElementById('toggleCollapse')
var content = document.getElementById('content')
button.addEventListener('click', function(event) {
if (content.className) {
button.innerHTML = 'Expand'
content.className = ''
} else {
button.innerHTML = 'Collapse'
content.className = 'expanded'
}
})
})()
</script>
</body>
</html>
Raw
ex2.html
1- Add an element to the start of the list
2- Change the style of the odd ones
**BONUS** Change the style of the odd ones as you add new ones
```html
<ul class="list">
<li>Potato</li>
<li>Banana</li>
<li>Something else</li>
</ul>
```
<script>
// 1
$('.list').prepend('<li>New element!</li>')
// 2
$('.list li:odd').addClass('odd')
// BONUS!
$('.list').prepend('<li>New element!</li>')
$('.list li').each(function(index) {
if (index % 2 === 0) $(this).toggleClass('odd', true)
else $(this).toggleClass('odd', false)
})
</script>
Raw
ex3.html
<html>
<body>
<button id="hide">HIDE!</button>
<div class="container">
<p>
Bacon ipsum dolor amet landjaeger ham meatball pork chop, pig alcatra corned beef sirloin capicola boudin shankle turducken ham hock leberkas. Shank ham hock jowl pastrami, brisket pork loin meatloaf kevin boudin porchetta swine. Beef shoulder jerky, brisket shank tail rump hamburger doner salami biltong short loin. Chuck swine beef ribs tenderloin corned beef prosciutto salami ham, pastrami pork. Ground round t-bone pork belly meatloaf brisket prosciutto.
Tenderloin doner meatloaf, short ribs salami pastrami ball tip meatball brisket tail pork loin. Tenderloin kevin prosciutto, hamburger boudin venison filet mignon ham salami andouille. Bacon chicken cow strip steak kevin beef. Drumstick capicola beef ribs, cupim fatback shank chuck filet mignon landjaeger tenderloin turducken tri-tip spare ribs kevin venison. Leberkas fatback shankle shank alcatra pancetta andouille ham hock meatloaf.
Tenderloin boudin corned beef pork chop pork loin spare ribs, doner turducken ball tip pork pig. Doner bacon bresaola pork chop swine jerky, ball tip landjaeger tenderloin t-bone filet mignon alcatra. Rump venison pork chop, beef landjaeger filet mignon tri-tip. T-bone salami porchetta, pork chop meatloaf jowl pancetta pork belly. Filet mignon pork bresaola, cow doner chuck kielbasa short ribs meatball prosciutto meatloaf tail.
Kevin bacon hamburger boudin. Fatback picanha turducken pig kevin biltong. Landjaeger spare ribs boudin doner shankle, picanha meatball shoulder bacon beef rump tongue pork loin cupim. Turducken kielbasa short ribs, pork loin beef sausage ball tip corned beef cow meatloaf tail. Pork loin rump swine, tenderloin turkey ribeye salami ground round leberkas meatball.
Tenderloin filet mignon turducken beef sirloin. Bacon venison porchetta, pork loin t-bone kevin ham pancetta pork. Shankle sirloin frankfurter tenderloin pork belly. Tail boudin ham hock kevin meatloaf corned beef hamburger tongue jowl sirloin strip steak. Short ribs turducken picanha spare ribs biltong, flank prosciutto jerky capicola frankfurter meatball. Fatback pancetta corned beef capicola frankfurter cow ground round pork tongue flank kevin doner pork loin. Landjaeger chicken prosciutto, porchetta spare ribs drumstick pork belly.
Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!
</p>
<button type="submit">COOL</button>
<img src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fmedia.firebox.com%2Fpic%2Fp5294_column_grid_12.jpg&f=1" alt="" />
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" charset="utf-8">
$('#hide').on('click', function() {
$('container').fadeOut()
})
</script>
</body>
</html>
Raw
ex4.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.box {
display: inline-block;
width: 200px;
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<a href="javascript:;">javascript:;</a>
<p class="texts">text</p>
<p class="texts">text</p>
<p class="texts">text</p>
<p class="texts">text</p>
<p class="texts">text</p>
<p class="texts">text</p>
<p class="texts">text</p>
<p class="texts">text</p>
<p class="texts">text</p>
<p class="texts">text</p>
<div class="box">
RAINBOW
</div>
<div class="box">
RAINBOW
</div>
<div class="box">
RAINBOW
</div>
<div class="box">
RAINBOW
</div>
<div class="box">
RAINBOW
</div>
<div class="box">
RAINBOW
</div>
<div class="box">
RAINBOW
</div>
<div class="box">
RAINBOW
</div>
<div class="box">
RAINBOW
</div>
<div class="box">
RAINBOW
</div>
<div class="box">
RAINBOW
</div>
<div class="box">
RAINBOW
</div>
<div class="box">
RAINBOW
</div>
<div class="box">
RAINBOW
</div>
<div class="box">
RAINBOW
</div>
<div class="box">
RAINBOW
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
var colors = ['blue', 'pink', 'red', 'yellow', 'green', 'orange', 'purple', 'cyan', 'lime', 'magenta']
var texts = $('.texts')
function randomNumber() {
return Math.floor(Math.random() * 255)
}
function randomColor() {
return `rgb(${randomNumber()}, ${randomNumber()}, ${randomNumber()})`
}
function rainbowMe(elements) {
elements.each(function() {
var color1 = randomColor()
var color2 = randomColor()
$(this).css({ color: color1, 'background-color': color2 })
})
}
$('a').on('click', function() {
rainbowMe(texts)
})
var boxes = $('.box')
setInterval(function() {
rainbowMe(boxes)
}, 100)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment