Skip to content

Instantly share code, notes, and snippets.

@fitosegrera

fitosegrera/index.html

Created July 30, 2014 22:06
Show Gist options
  • Save fitosegrera/5bd73dc97e07173bb1ff to your computer and use it in GitHub Desktop.
Save fitosegrera/5bd73dc97e07173bb1ff to your computer and use it in GitHub Desktop.
Download ZIP
example_2 messages + alerts + user input
Raw
index.html
<!--
///////////////////////////////////////
// example_2 web class bootcamp 2014 //
///////////////////////////////////////
//////////// Parsons MFADT ////////////
///////////////////////////////////////
//Created by: fito_segrera
//fii.to
-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id = "wrapper">
<div class = "buttonContainer">
<p id = "title">NOW CLICK ME!!</p>
<button onclick="alertButton()">I was a DIV now I'm a BUTTON!</button>
<p>Buttons can be also done using the DIV and it allows much more styling options that the BUTTON tag...</p>
</div>
</div>
</body>
</html>
Raw
script.js
///////////////////////////////////////
// example_2 web class bootcamp 2014 //
///////////////////////////////////////
//////////// Parsons MFADT ////////////
///////////////////////////////////////
//Created by: fito_segrera
//fii.to
//------------------------------------
//------------------------------------
var name = "";
function userName(){
name = prompt("What is your name?")
}
function alertButton(){
alert("Listen "+name+"... You must learn javascript. It is piece of cake!!");
}
window.onload = userName;
Raw
style.css
/*
///////////////////////////////////////
// example_2 web class bootcamp 2014 //
///////////////////////////////////////
//////////// Parsons MFADT ////////////
///////////////////////////////////////
//Created by: fito_segrera
//fii.to
*/
body{
background-color: rgb(0,0,0);
}
#wrapper{
position: absolute;
width: 100%;
}
.buttonContainer{
position: relative;
margin-left: 35%;
margin-top: 20%%;
width: 30%;
}
.buttonContainer button{
width:100%;
height: 100%;
background-color: #ff0000;
text-align: center;
font-size: 15px;
color: #ffff00;
}
#title{
font-family: "arial";
font-size: 40px;
}
.buttonContainer p{
color: #ffffff;
text-align: center;
font-family: "arial";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment