Friday, 24 April 2015

HTML-Code Converter

The code is

HTML-Code

"I just want a simple HTML-code converter!".

If you write some text in your HTML code,characters like < or > are not shown correctly because those characters are reserved for the code. There are plenty of good sites showing all the HTML codes but I just wanted to find the corresponding code quick and easy thus I've created this converter.

After I've made the converter look nice with CSS I've coded the converting system with JavaScript. Get the text in the input field(id "input") with the code

var x =document.getElementById("id of the input field").value;

Don't forget to put value at the end otherwise the information of the input field will not be stored. Now, we want to output the corresponding HTML code of the character you've typed in. Anykind of number or alphabet is called a "string". A character is a also a string so we look at the JavaScript string methods.

charCodeAt()

That's the string method we've been looking for! Because it converts strings to HTML codes.Write

variable of the input field.charCodeAt()

to output the corresponding code.

Now, let's look at the button. It is invoked through 2 events which are mousedown and mouseup. If you click the mouse which is the "mousedown" event, the code is outputed and the border style of the button is changed to inset so that the button looks like it's pushed down.

I've you finish clicking which is the "mouseup" event, the border style is changed to its initial style which is outset. Finito, now we've created a simple HTML-Code converter.

HTML, CSS and JavaScript Code

#converter
{position:relative;
width:150px;
height:200px;
border-top-left-radius:25px;
border-bottom-right-radius:25px;
background:linear-gradient(315deg,#CCCCFF,#9999FF 40%);
border: outset 2px #6699FF;
}
  
#input
{position:absolute;
top:10px;
left:50px;
width:50px;
 }
  
#output
{position:absolute;
top:25px;
left:20px;
font-size:120%;
color:#332900;
}
  
#typed_character
{position:absolute;
top:40px;
left:20px;
color:#FFCC00;
font-size:130%;
text-align:center;
}

#button
{position:absolute;
top:160px;
left:20px;
width:100px;
height:20px;
padding:3px;
border-radius:10px;
border:outset 2px #A18FB2;
background-color:#CCCCFF;
text-align:center;
font-size:90%;}

</style>
</head>

<body>

<div id="converter">
<input id="input" maxlength="1" type="text" value="">
<p id="output">The code is 
<span id="typed_character"></span>
</p>
<div id="button">HTML-Code</div>
</div>
<script>
var buttonc=document.getElementById("button");
 
if(buttonc.addEventListener){
buttonc.addEventListener("mousedown",showUnicode,false);}
else if (buttonc.attachEvent){
buttonc.attachEvent("onmousedown",showUnicode);}
  
function showUnicode(){
var inputc=document.getElementById("input").value;
document.getElementById("typed_character").innerHTML="&#"+inputc.charCodeAt()+";";
buttonc.style.border="inset 2px #A18FB2";
}

if(buttonc.addEventListener){
buttonc.addEventListener("mouseup",clearUnicode,false);}
else if (buttonc.attachEvent){
buttonc.attachEvent("onmouseup",clearUnicode);}

function clearUnicode(){
buttonc.style.border="outset 2px #A18FB2";
}
</script>

</body></html>

Wednesday, 22 April 2015

Pastel Colored Title Design with Flex

Pastel Colored Title Design with Flex C a n d y

I love CSS because you can make all kinds of stylish stuff with it and it's so easy.

This time, I've tried some candy-like title design thus using round pastel colored shapes. The word "candy" is one span element including span child elemtsof each alphabet with different id's.

So how do you make the round shapes?

One way is to create seperate div elements and define height, width and other details for each element. But there is an easier solution to make same sized shapes. The answer is the CSS property flex.

Write display:flex in the parent element (id="candy") flex:some number in the child elements. This number defines the width of the element. It's annoying but to make this property compatible with other browsers you need the prefixes -webkit-flex for Google and Safary, -ms-flex for IE. I hope that we will not need these prefixes someday!

HTML and CSS Code

<html>
<head>
<style>
#candy
{position:relative;
width:450px;
height:100px;
font-size:450%;
text-align:center;
color:white;
display:flex;
-webkit-display:flex;
-ms-display:flex;
}
  
#candy #C
{flex:1;
-webkit-flex:1;
-ms-flex:1;
background-color:#FF66CC;
border:outset 5px #E65CB8;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
text-shadow:
1px 1px 0px #E65CB8,
1px 2px 0px #E65CB8,
1px 3px 0px #E65CB8,
1px 4px 0px #E65CB8,
1px 5px 0px #E65CB8;}

#candy #A
{flex:1;
-webkit-flex:1;
-ms-flex:1;
background-color:#FFCC99;
border:outset 5px #E6B88A;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
text-shadow:
1px 1px 0px #E6B88A,
1px 2px 0px #E6B88A,
1px 3px 0px #E6B88A,
1px 4px 0px #E6B88A,
1px 5px 0px #E6B88A;}

#candy #N
{flex:1;
-webkit-flex:1;
-ms-flex:1;
background-color:#CCCCFF;
border:outset 5px #8F8FB2;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
text-shadow:
1px 1px 0px #8F8FB2,
1px 2px 0px #8F8FB2,
1px 3px 0px #8F8FB2,
1px 4px 0px #8F8FB2,
1px 5px 0px #8F8FB2;}
  
#candy #D
{flex:1;
-webkit-flex:1;
-ms-flex:1;
background-color:#CC99FF;
border:outset 5px #A37ACC;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
text-shadow:
1px 1px 0px #A37ACC,
1px 2px 0px #A37ACC,
1px 3px 0px #A37ACC,
1px 4px 0px #A37ACC,
1px 5px 0px #A37ACC;}
  
#candy #y
{flex:1;
-webkit-flex:1;
-ms-flex:1;
background-color:#CCFF33;
border:outset 5px #A3CC29;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
text-shadow:
1px 1px 0px #A3CC29,
1px 2px 0px #A3CC29,
1px 3px 0px #A3CC29,
1px 4px 0px #A3CC29,
1px 5px 0px #A3CC29;  }
</style>
</head>

</body>
</html>

Thursday, 16 April 2015

Drawing Rectangles With HTML Canvas

x-coordinate:

y-coodinate:

width:

height:

Recently, I discovered how powerful the HTML canvas element is. You can conviniently draw all kinds of shapes, make animations or even create games with it.

In the example above, create any kind of rectangle by typing in some values inside the input field. Create the canvas element with canvas. Optionally, define the width and height of it.

A canvas without drawing abilities is not very usefuel. In the JavaScript code we specify what we want to do with it. getContext("2d") allows you to draw lines, rectangles, circles and much more! Get the data of the canvas element with document.getElementById("id of the canvas"), return the object of it with the getContext("2d") method and start drawing.

This time, we want to draw a rectangle so we use the fillRect() method. The syntax is as follows:

fillRect(x-coordinate, y-coordinate, width, height)

The values, typed in by the user, is stored in document.getElementById ("name of id").value. All this is fired with an onclick event. The rectangle is erased with the clerRect() method.

The JavaScript and HTML Code

#inputDesign
{position:relative;
 top:200px;
 padding:10px;
 background-color:#CCFF99;
 width:130px;
 height:160px;
 border-radius:5px;}
</style>
</head>

<body>

<canvas width="450px" height="300px" id="canvas40">Your browser does not

support the HTML5 canvas tag.</canvas>

<div id="inputDesign">
x-coordinate:<br><input id="inputX40" maxlength="3"

size="3"><br>
y-coodinate:<br><input id="inputY40" maxlength="3"

size="3"><br>
width:<br><input id="inputW40" maxlength="3" size="3"><br>
height:<br><input id="inputH40" maxlength="3" size="3">

<p><button onclick="createRectangle()">create rectangle!

</button></p>
  <p><button onclick="clearRectangle()">clear!

</button></p>

</div>
<script>

var c = document.getElementById("canvas");
var r = c.getContext("2d");
r.fillStyle = "blue";

function createRectangle(){
var x = document.getElementById("inputX").value;
var y = document.getElementById("inputY").value;
var w = document.getElementById("inputW").value;
var h = document.getElementById("inputH").value;

var c = document.getElementById("canvas");
r.fillRect(x,y,w,h);
}

function clearRectangle(){
r.clearRect(0,0,500,500);
}
</script>

Monday, 13 April 2015

Simple Word Count With JavaScript

This word count does not work inside this blog!Please copy&past the code in the text area to a text file and save it as a html file.

Here I've created a simple word count system with JavaScript.

I didn't expect that the code was so simple. What we need is a for-loop, RegExp object and a match() method. That's it.

Put the text in the text field and start counting its words by clicking the button "count". The text field is created with the textarea element of HTML. The "count" button has the "onclick" attribute and fires the "count()" function.

Now, let's look at the JavaScript code inside the count() function. We get the value inside the "textarea" with the following syntax:

document.getElementById("id of the element").value

We've got the data of the text typed inside the text area and next we want to count the words. So what's a word? To keep it simple, in this example a word is defined as a string containing one or more alphabets or numbers which is expressed by the metacharacter\w+. We want to look at the whole text therefore we use g for a global match. Here is the syntax:

id of the textarea element.match(/\w+/g)

Since we want to look at these word character chunks, we store the statement above in a variable. In the code example it's stored into "output". Now comes the for-loop to count each single chunk. The variable i stands for one chunk and to count them all we use the increment operator (i++). The counting should be continued regardless of the number of words therefore we need an infinite loop described by the statement i<(i+1). The brakets are necessary otherwise 1 is not added to the variable i.

Still, we have one problem. Metacharacters other than words are counted as "undefined". We just want to count the words so we have to get rid of "undefined". The break statement comes in handy. The syntax is as follows:

if (output==undefined){break;}

This statement removes all results marked as "undefined".

HTML and JavaScript Code

Thursday, 9 April 2015

Smiley With Eyes Popping Out

It's always those Sunday afternoons when you are totally bored and have stupid ideas. This time, I've created a smiley face with its eyes popping out when you put your mouse over it.

The head, eyes, black eyes and mouth are all made of div elements. The mouth is made of a circle which is covered by a yellow rectangle creating its moon-like shape.

By changing the width of the eye div elements ("lefteye38", "righteye38") the pop out effect is created. Here is the code for it:

@keyframes name of the animation
{
from{width:20px;}
to{width:50px;left:-40px;}
}

Note that not only the width is changed but also the left property to create the protruding effect. The "mouseenter" event invokes the keyframe animation. You have to write
addEventListener and attachEventListener in order to make the event in all browsers work including IE. Don't forget to write "mouseenter" for addEventListener and "onmouseenter" for attachEvent. The code gets longer and longer because we also want to make the event touchscreen-compatible so we add "touchstart"for "mouseenter" and "touchend" for "mouseleave".

By putting the mouse over the smiley head the animation should be invoked. Here is the code for it:

function name of the function (){
id of the element.style.animation="your animation 1s normal forwards";
}

Always put the addEventListener and attachEvent in the body element otherwise nothing will fire!

HTML, CSS and JavaScript Code

#smileyhead38
    {position:relative;
    top:20px;
    left:50px;
    height:60px;
    width:60px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border: 3px #FF9933 solid;
    background-color:yellow;
    }
    
    #lefteye38
    {position:absolute;
    top:10px;
    left:0px;
    width:20px;
    height:20px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border:2px #FF9933 solid;
    background-color:white;
    z-index:2;
    }
    
    #leftblackpart38
    {position:absolute;
    top:5px;
    left:5px;
    width:10px;
    height:10px;
    background-color:navy;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    }
    
    #righteye38
    {position:absolute;
    top:10px;
    left:35px;
    width:20px;
    height:20px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border:2px #FF9933 solid;
    background-color:white;
    z-index:2;
    }
    
    #rightblackpart38
    {position:absolute;
    top:5px;
    left:5px;
    width:10px;
    height:10px;
    background-color:navy;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    }
    
    #mouth38
    {position:absolute;
    top:30px;
    left:15px;
    width:30px;
    height:30px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    background-color:red;
    }
    
    #covermouth38
    {position:absolute;
     top:30px;
     left:15px;
     width:30px;
     height:15px;
     background-color:yellow;
    }
    
    
   /*animation*/
    @keyframes protrude38
    {
    from{width:20px;}
    to{width:50px;left:-40px;}
    }
    
     @-webkit-keyframes protrude38
    {
    from{width:20px;}
    to{width:50px;left:-40px;}
    }

@keyframes protrude381
    {
    from{width:20px;}
    to{width:50px;left:-10px;}
    }
    
     @-webkit-keyframes protrude381
    {
    from{width:20px;}
    to{width:50px;left:-10px;}
    }
 </style>
 </head>
<body>
<div id="smileyhead38">
  
  <div id="lefteye38">
    <div id="leftblackpart38">
</div>
</div>

  
  <div id="righteye38">
    <div id="rightblackpart38">
</div>
</div>

  
  <div id="mouth38">
    
  </div>

   <div id="covermouth38">
</div>
</div>

<script>
   var smiley38 = document.getElementById("smileyhead38");
   var lefteye38 =document.getElementById("lefteye38");
   var righteye38 = document.getElementById("righteye38");

//mouenter
    if (smiley38.addEventListener){
        smiley38.addEventListener("mouseenter",change38);
        smiley38.addEventListener("touchstart",change38);
        } else if (smiley38.attachEvent){
        smiley38.attachEvent("onmouseenter",change38);
        smiley38.attachEvent("ontouchstart",change38);
       }
    
    //mouseleave
    if (smiley38.addEventListener){
        smiley38.addEventListener("mouseleave",change381);
  smiley38.addEventListener("touchend",change381);
        } else if (smiley38.attachEvent){
        smiley38.attachEvent("onmouseleave",change381);
 smiley38.attachEvent("ontouchend",change381);
       }

//touevents
    
    function change38(){
    lefteye38.style.WebkitAnimation="protrude38 1s normal forwards";
    lefteye38.style.animation= "protrude38 1s normal forwards";
    righteye38.style.WebkitAnimation="protrude381 1s normal forwards";
    righteye38.style.animation= "protrude381 1s normal forwards";
    }
    
    function change381(){
    lefteye38.style.WebkitAnimation="";
    lefteye38.style.animation="";
    righteye38.style.WebkitAnimation="";
    rightye38.style.animation= "";
    }
  </script>
  </body>
 </html>

Thursday, 2 April 2015

Drop Down Menus With CSS and JavaScript

Countries

Europe

Germany

Austria

Spain

Asia

Japan

Korea

Taiwan

Last year, I started a blog about travel.
I posted and posted and I had problem:
My landing page got so messy with all this posts.
How do we organize a messy site?
Drop down menu is the answer!

In order to create a drop down menu, you need the addEventListener of JavaScript. In the example above, when you put the mouse pointer on Europe or Asia which are put inside the div element "dropdown37_1" another box including the country names will appear.

Each box is created with a div comprising the country names which are also put inside div elements. Always nest the lists inside the parent element otherwise the event will not function properly.

First, I tried to make 3 parent boxes but it got all jiggly when I put the pointer on the boxes. Only the "dropdown37_1" div element should be visible so the other elements' visibility are set to hidden with "visibility:hidden" in the CSS code. Through the events "mouseenter" and "mouseleave", the elements become visible or invisible.

Here is the syntax for the event:

var x=document.getElementById ("the ID of the affiliated element");

x.addEventListener("mouseenter or mouseleave",
function(){details about what CSS property needs to be changed;},
false};
Much to my chagrin, the code didn't work on my iPod!
Thankfully, the solution was easy. Just add another code replacing "mouseenter" with "touchstart" and "mouseleave" with "touchmove". Maybe it's not the best solution but it did work properly. Well, for all the details check out the code below.

HTML, CSS and JavaScript Code

<html><head>
<title>Drop Down Menus With CSS and JavaScript</title>
<style>
#countries37_1
{position:relative;
width:75px;
height:15px;
text-align:center;
border-width:2px;
box-shadow:1px 1px 5px #b1ae8f;
padding:5px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
 
#dropdown37_1
{position:absolute;
top:0px;
left:85px;
width:85px;
height:65px;
box-shadow:1px 1px 5px #b1ae8f;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
padding:5px;
visibility:hidden;
}

#countries37_2
{position:absolute;
top:0px;
width:75px;
height:25px;
left:0px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
padding:5px;

}
 
#dropdown37_2
{position:absolute;
top:0px;
left:80px;
width:75px;
height:55px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
padding:5px;
box-shadow:1px 1px 5px #b1ae8f;
visibility:hidden;
}

#countries37_6
{position:absolute;
top:35px;
width:75px;
height:25px;
left:0px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
padding:5px;

}
  
#dropdown37_3
{position:absolute;
top:0px;
left:80px;
width:75px;
height:55px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
padding:5px;
box-shadow:1px 1px 5px #b1ae8f;
visibility:hidden;}
  
  
</style>
</head>
<body>

<div id="countries37_1">
Countries
<div id="dropdown37_1">

<div id="countries37_2">
Europe
  
 <div id="dropdown37_2">
  <div id="countries37_3">
Germany</div>
<div id="countries37_4">
Austria</div>
<div id="countries37_5">
Spain</div>
</div>
</div>
<div id="countries37_6">
Asia

<div id="dropdown37_3">
  <div id="countries37_7">
Japan</div>
<div id="countries37_8">
Korea</div>
<div id="countries37_9">
Taiwan</div>
</div>
</div>
</div>
</div>
<script>
var d371 = document.getElementById("dropdown37_1");
var d372 = document.getElementById("dropdown37_2");
var d373 = document.getElementById("dropdown37_3");

var c371= document.getElementById("countries37_1");
var c372 = document.getElementById("countries37_2");

var c373 = document.getElementById("countries37_3");
var c374 = document.getElementById("countries37_4");
var c375 = document.getElementById("countries37_5");

var c376 = document.getElementById("countries37_6");
var c377 = document.getElementById("countries37_7");
var c378 = document.getElementById("countries37_8");
var c379 = document.getElementById("countries37_9");
 
    
c371.addEventListener("mouseenter",function()
{c371.style.backgroundColor="#b4fff8";
d371.style.visibility="visible";},false)

d371.addEventListener("mouseenter",function()
{d371.style.visibility="visible";},false)

c372.addEventListener("mouseenter",function()
{c372.style.backgroundColor="#b4fff8";
d372.style.visibility="visible";},false)

c376.addEventListener("mouseenter",function()
{c376.style.backgroundColor="#b4fff8";
d373.style.visibility="visible";},false)

c371.addEventListener("touchstart",function()
{c371.style.backgroundColor="#b4fff8";
d371.style.visibility="visible";},false)

d371.addEventListener("touchstart",function()
{d371.style.visibility="visible";},false)

c372.addEventListener("touchstart",function()
{c372.style.backgroundColor="#b4fff8";
d372.style.visibility="visible";},false)

c376.addEventListener("touchstart",function()
{c376.style.backgroundColor="#b4fff8";
d373.style.visibility="visible";},false)

c373.addEventListener("mouseenter",function()
{c373.style.backgroundColor="#b4fff8";
},false)

c374.addEventListener("mouseenter",function()
{c374.style.backgroundColor="#b4fff8";
},false)

c375.addEventListener("mouseenter",function()
{c375.style.backgroundColor="#b4fff8";
},false)

c373.addEventListener("touchstart",function()
{c373.style.backgroundColor="#b4fff8";
},false)

c374.addEventListener("touchstart",function()
{c374.style.backgroundColor="#b4fff8";
},false)

c375.addEventListener("touchstart",function()
{c375.style.backgroundColor="#b4fff8";
},false)

c377.addEventListener("mouseenter",function()
{c377.style.backgroundColor="#b4fff8";
},false)

c378.addEventListener("mouseenter",function()
{c378.style.backgroundColor="#b4fff8";
},false)

c379.addEventListener("mouseenter",function()
{c379.style.backgroundColor="#b4fff8";
},false)

c377.addEventListener("touchstart",function()
{c377.style.backgroundColor="#b4fff8";
},false)

c378.addEventListener("touchstart",function()
{c378.style.backgroundColor="#b4fff8";
},false)

c379.addEventListener("touchstart",function()
{c379.style.backgroundColor="#b4fff8";
},false)

c371.addEventListener("mouseleave",function()
{c371.style.backgroundColor="";
d371.style.visibility="hidden";
d372.style.visibility="hidden";
d373.style.visibility="hidden";},false)

d372.addEventListener("mouseleave",function()
{d372.style.backgroundColor="";
d372.style.visibility="hidden";},false)

c372.addEventListener("mouseleave",function()
{c372.style.backgroundColor="";
},false)

c376.addEventListener("mouseleave",function()
{c376.style.backgroundColor="";
},false)

c371.addEventListener("touchmove",function()
{c371.style.backgroundColor="";
d371.style.visibility="hidden";
d372.style.visibility="hidden";
d373.style.visibility="hidden";},false)

d372.addEventListener("touchmove",function()
{d372.style.backgroundColor="";
d372.style.visibility="hidden";},false)

c372.addEventListener("touchmove",function()
{c372.style.backgroundColor="";
},false)

c376.addEventListener("touchmove",function()
{c376.style.backgroundColor="";
},false)

d373.addEventListener("mouseleave",function()
{d373.style.backgroundColor="";
d373.style.visibility="hidden";},false)

c373.addEventListener("mouseleave",function()
{c373.style.backgroundColor="";},false)

c374.addEventListener("mouseleave",function()
{c374.style.backgroundColor="";},false)

c375.addEventListener("mouseleave",function()
{c375.style.backgroundColor="";},false)

d373.addEventListener("touchmove",function()
{d373.style.backgroundColor="";
d373.style.visibility="hidden";},false)

c373.addEventListener("touchmove",function()
{c373.style.backgroundColor="";},false)

c374.addEventListener("touchmove",function()
{c374.style.backgroundColor="";},false)

c375.addEventListener("touchmove",function()
{c375.style.backgroundColor="";},false)

c377.addEventListener("mouseleave",function()
{c377.style.backgroundColor="";
},false)

c378.addEventListener("mouseleave",function()
{c378.style.backgroundColor="";
},false)

c379.addEventListener("mouseleave",function()
{c379.style.backgroundColor="";
},false)

c377.addEventListener("touchmove",function()
{c377.style.backgroundColor="";
},false)

c378.addEventListener("touchmove",function()
{c378.style.backgroundColor="";
},false)

c379.addEventListener("touchmove",function()
{c379.style.backgroundColor="";
},false)

</script>

</body></html>