Skip to content

Instantly share code, notes, and snippets.

@aranajhonny

aranajhonny/formulario.js

Created October 4, 2015 15:12
Show Gist options
  • Save aranajhonny/88f0aff51fefe6da4084 to your computer and use it in GitHub Desktop.
Save aranajhonny/88f0aff51fefe6da4084 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
formulario.js
var $form = $('#formulario'),
$titulo = $('#titulo'),
$url = $('#url'),
$button = $('#mostrar-form'),
$list = $('#contenido'),
$post = $('.item').first();
function mostrarFormulario(){
$form.slideToggle();
return false;
}
function agregarPost(){
var url = $url.val(),
titulo = $titulo.val(),
$clone = $post.clone();
$clone.find('.titulo_item a')
.text(titulo)
.attr('href', url);
$clone.hide();
$list.prepend($clone);
$clone.fadeIn();
return false;
}
// Eventos
$button.click( mostrarFormulario );
$form.on('submit', agregarPost );
Raw
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes">
<title>Mi primera app web :D</title>
<meta name="description" content="Curso platzi">
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/estilos.css" />
</head>
<body>
<header>
<figure id="logo">
<img src="img/logo.png" />
</figure>
<h1 id="titulo_header">Pulse: Comunidad de programadores. </h1>
<figure id="avatar">
<img src="img/avatar.png" />
</figure>
</header>
<nav>
<ul>
<li><a href="#">Python</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">Django</a></li>
<li id="publicar_nav">
<a href="#" id="mostrar-form" class="icon-lapiz">Publicar</a>
</li>
</ul>
</nav>
<div id="beta">
<form action="" id="formulario" class="formulario">
<input type="text" id="titulo" placeholder="Titulo" required>
<input type="url" id="url" placeholder="Link" required>
<input type="submit" value="Agregar">
</form>
</div>
<aside>
<video width="320" height="240" autoplay >
<source src="video/lecturas.m4v" type="video/mp4"/>
<source src="video/lecturas.ogg" type="video/ogg"/>
<!-- actualiza tu navegador -->
</video>
</aside>
<section id="contenido">
<article class="item">
<figure class="imagen_item">
<img src="img/imagen.jpg" />
</figure>
<h2 class="titulo_item">
<a href="#">Una mirada a Leap Motion: El control Minority Report</a>
</h2>
<div class="autor_item">
Por <a href="#">Jhonny arana</a>
</div>
<div class="datos_item">
<a class="tag_item" href="#">hardware</a>
<span class="fecha_item">Hace 5 min</span>
</div>
<div class="votacion">
<a class="up" href="#">+</a>
3141
<a class="down" href="#">-</a>
<a class="comentarios_item" href="#">x3</a>
</div>
<div class="votacion">
<a class="up icon-f-arriba" href="#"></a>
3141
<a class="down icon-f-abajo" href="#"></a>
<a class="comentarios_item" href="#">3</a>
<a href="#" class="guardar_item icon-estrella"></a>
</div>
</article>
<article class="item">
<figure class="imagen_item">
<img src="img/imagen.jpg" />
</figure>
<h2 class="titulo_item">
<a href="#">Usa módulos del lado cliente con Browserify</a>
</h2>
<div class="autor_item">
Por <a href="#">Jhonny arana</a>
</div>
<div class="datos_item">
<a class="tag_item" href="#">css</a>
<span class="fecha_item">Hace 5 min</span>
</div>
<div class="votacion">
<a class="up icon-f-arriba" href="#"></a>
3141
<a class="down icon-f-abajo" href="#"></a>
<a class="comentarios_item" href="#">3</a>
<a href="#" class="guardar_item icon-estrella"></a>
</div>
</article>
<article class="item">
<figure class="imagen_item">
<img src="img/imagen.jpg" />
</figure>
<h2 class="titulo_item">
<a href="#">Automatización de tareas de frontend usando Gulp.js</a>
</h2>
<div class="autor_item">
Por <a href="#">Jhonny arana</a>
</div>
<div class="datos_item">
<a class="tag_item" href="#">javascript</a>
<span class="fecha_item">Hace 5 min</span>
</div>
<div class="votacion">
<a class="up icon-f-arriba" href="#"></a>
3141
<a class="down icon-f-abajo" href="#"></a>
<a class="comentarios_item" href="#">3</a>
<a href="#" class="guardar_item icon-estrella"></a>
</div>
</article>
<article class="item">
<figure class="imagen_item">
<img src="img/imagen.jpg" />
</figure>
<h2 class="titulo_item">
<a href="#">mejorando.la ahora es platzi</a>
</h2>
<div class="autor_item">
Por <a href="#">Jhonny arana</a>
</div>
<div class="datos_item">
<a class="tag_item" href="#">javascript</a>
<span class="fecha_item">Hace 5 min</span>
</div>
<div class="votacion">
<a class="up icon-f-arriba" href="#"></a>
3141
<a class="down icon-f-abajo" href="#"></a>
<a class="comentarios_item" href="#">3</a>
<a href="#" class="guardar_item icon-estrella"></a>
</div>
</article>
<article class="item">
<figure class="imagen_item">
<img src="img/imagen.jpg" />
</figure>
<h2 class="titulo_item">
<a href="#">trabajanfo con github y gitlab.</a>
</h2>
<div class="autor_item">
Por <a href="#">Jhonny arana</a>
</div>
<div class="datos_item">
<a class="tag_item" href="#">javascript</a>
<span class="fecha_item">Hace 5 min</span>
</div>
<div class="votacion">
<a class="up icon-f-arriba" href="#"></a>
3141
<a class="down icon-f-abajo" href="#"></a>
<a class="comentarios_item" href="#">3</a>
<a href="#" class="guardar_item icon-estrella"></a>
</div>
</article>
<article class="item">
<figure class="imagen_item">
<img src="img/imagen.jpg" />
</figure>
<h2 class="titulo_item">
<a href="#">Angular js y django</a>
</h2>
<div class="autor_item">
Por <a href="#">Jhonny arana</a>
</div>
<div class="datos_item">
<a class="tag_item" href="#">javascript</a>
<span class="fecha_item">Hace 5 min</span>
</div>
<div class="votacion">
<a class="up icon-f-arriba" href="#"></a>
3141
<a class="down icon-f-abajo" href="#"></a>
<a class="comentarios_item" href="#">3</a>
<a href="#" class="guardar_item icon-estrella"></a>
</div>
</article>
</section>
<footer>
<p>Powered by Platzi</p>
<p>Jhonny Arana ®</p>
</footer>
<script src="js/prefixfree.js" type="text/javascript" ></script>
<script src="js/jquery.js"></script>
<script src="js/formulario.js" type="text/javascript" ></script>
<script type="text/javascript">
$(function(){
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment