Front end dev 101

Fardina example

by David Gonzalez

HTML

<div id="hello_message">
		Hello,
	</div>
	<button id="fardina_button" class="fardinaClass">
	    button 0 with id= "fardina_button"
	 </button>
	<button >
	    button 1
	 </button>
   
   <button >
	    button 2
	 </button>
   
   <button class="button-style">
	    button 3 with style
	 </button>
   <button class="button-style">
	    button 4 with style
	 </button>

CSS

body > div:first-child {
	 font-weight: bold;
}

.shiny-red {
	 color: red;
}

.fardinaClass{
    color: blue;
    background-color: white;
}

.button-style{
  color: green;
}

JavaScript

helloWorld();

function helloWorld() {
	var message = "world!";
	var $helloMessage = $("#hello_message");
	$helloMessage.append(message);
	$helloMessage.addClass("shiny-red");
}
    
$("button").on("click", function(){
  console.log("hi Button");
} );

$(".button-style").on("click", function(){
  console.log("hi Button with class");
} );
    
var fardinaButton = $("#fardina_button");
fardinaButton.on("click", function(){
  console.log("hi Fardina");
} );