JavaScript&&HTML/CSS
The first thing we need to do is look at the code, obviously. So, here's the HTML:
<html>
<head>
<title>Hey, wassup.</title>
<script type = "text/javascript" src = "script.js"><!--script for the .js -->
</script>
<link rel = "stylesheet" type = "text/css" href = "thing.css"/>
</head>
<body>
<!-- put whatever you want to here. -->
<p>Hey, this is a line of text with a border!</p>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content --><span>Hey,</span>
</div>
<span class="back">
<!-- back content --><span>do you even <a href = "http://www.google.com"><g>G</g><o>o</o><t>o</t><h>g</h><l>l</l><e>e</e></a>, bro?</span>
</span>
</body>
</html>
Not exactly the cleanest layout, but it does some pretty nifty stuff! The thing with the bunch of tags in a row spells out Google and the CSS makes it turn into the Google colors. A little touch of fun, you know?
Speaking of CSS, here's the CSS:
p{
clear: both;
text-align: center;
border-radius: 50%;
border: 10px solid black;
}
a{
text-decoration:none;
}
g{
color: blue;
}
o{
color: red;
}
t{
color: yellow;
}
h{
color: blue;
}
l{
color: green;
}
e{
color:red;
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
The code s commented quite nicely so that you may understand it easily. The basic idea is that it's activated by the mouse and once you go below the div, it flips over.
Now, if you noticed, which I'm sure you did, there was this:
<script type = "text/javascript" src = "script.js"><!--script for the .js -->
Which my comment tells you about. Yesterday I found something I probably should have known about a looonnngg time ago!
document.write()
It writes to the, you guessed it, the document! Whoo!
So, today, I just did a simple line of text, and a FizzBuzz, because those are fun:
document.write(" Hey this is a thing, now! You can write with .js! <br />\
and have it print out to the webpage.<br /> I knew that was a thing. <br />\
I just couldn't find it till now!<br />");
for(var i =1; i<=71; i++){
if(i%15===0){
document.write("FizzBuzz <br />");
}else if(i%3===0){
document.write("Fizz <br />");
}else if(i%5===0){
document.write("Buzz <br />");
}else{
document.write(i + "<br />");
}
}
Also, notice the fact that both and <br /> are used in the .js text. Yup, that's right folks, you can use those HTML elements in .js text. Pretty nifty, if I do say.
All of this texts makes for a pretty lackluster page with a spinning dealie on it. Told you the scripts were going to be stupid. Expect better each time! Well, that's what I'm hoping. Next time I'm going for a better looking page with more spinning and motion!!
See y'all on Monday!
No comments:
Post a Comment