-
Notifications
You must be signed in to change notification settings - Fork 0
/
decoratemytext.html
56 lines (48 loc) · 2.14 KB
/
decoratemytext.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<!--
The ‘Decorate’ assignment has taken me about 6 hours to complete. Although I grasped the concept of the assignment, I have wasted much time searching for appropriate JavaScript inbuilt function to do certain jobs like reading a text area and displaying it.
I have used the java script JSHint after enabling it. I have no errors except naming warnings.
I have implemented all the functionalities.
Making the text bigger at 500ms interval
Decorating the text (changing font color green and underlining )
The Pig Latin conversion
And finally the Malkovitch conversion
I have learned things like
How to access get values from a text area
How to associate a task with a button click
How to set text area values
and how to write javaScipt functions.
-->
<html>
<head>
<title>Text Decorator</title>
<link rel="stylesheet" href="decoratemytext.css">
<!--
This is a widely-used JavaScript library named jQuery that has
many useful functions which we need.
Please don't remove this link or change its URL; leave it as-is!
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<!-- link to your script file here -->
<script src="decoratemytext.js" type="text/javascript"></script>
</head>
<body>
<h1>Text Decorator</h1>
<img src="decoration.jpg" width="270" height="179" alt="very decorated!" />
<!-- Your UI controls go here -->
<fieldset>
<legend>Text</legend>
<textarea cols="30" rows="4" wrap="soft" id="txtArea">Type your text here</textarea>
<textarea cols="30" rows="4" wrap="soft" id="txtArea2" readonly>Pig Latin Effects displays here</textarea>
<textarea cols="30" rows="4" wrap="soft" id="txtArea3" readonly>Malkovitch Text Effect displpays here</textarea>
</fieldset>
<fieldset>
<legend>Decoration</legend>
<button id="btn">Bigger Decorations</button>
<button id="btn2">Pig Latin</button>
<button id="btn3">Malkovitch Effect</button><br/><br/>
<label>Bling - background</label><input type="checkbox" id="chckBox"><br/>
<label>Text decorator</label><input type="checkbox" id="chckBox2">
</fieldset>
</body>
</html>