diff --git a/100_projects/30-calculate-textarea-text-while-writing/css.css b/100_projects/30-calculate-textarea-text-while-writing/css.css
new file mode 100644
index 0000000..0937aac
--- /dev/null
+++ b/100_projects/30-calculate-textarea-text-while-writing/css.css
@@ -0,0 +1,33 @@
+*{
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+body{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ height: 100vh;
+ color: #fff;
+ font-size: 1.2em;
+ background: url("guille-unsplash.jpg");
+ background-position:bottom;
+ background-size: cover;
+}
+textarea{
+ width: 280px;
+ height: 200px;
+ background: rgba(255, 255, 255, .2);
+ border: 1px solid rgba(255, 255, 255, .2);
+ box-shadow:
+ 5px 5px 5px rgba(255, 255, 255, .2),
+ -5px -5px 5px rgba(255, 255, 255, .2);
+ outline: none;
+ border-radius: 5px;
+ font-size: 25px;
+ color: #fff;
+}
+span{
+ color: #fff;
+}
\ No newline at end of file
diff --git a/100_projects/30-calculate-textarea-text-while-writing/guille-unsplash.jpg b/100_projects/30-calculate-textarea-text-while-writing/guille-unsplash.jpg
new file mode 100644
index 0000000..27eb773
Binary files /dev/null and b/100_projects/30-calculate-textarea-text-while-writing/guille-unsplash.jpg differ
diff --git a/100_projects/30-calculate-textarea-text-while-writing/index.html b/100_projects/30-calculate-textarea-text-while-writing/index.html
new file mode 100644
index 0000000..e817ba9
--- /dev/null
+++ b/100_projects/30-calculate-textarea-text-while-writing/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
diff --git a/100_projects/30-calculate-textarea-text-while-writing/main.js b/100_projects/30-calculate-textarea-text-while-writing/main.js
new file mode 100644
index 0000000..ee38536
--- /dev/null
+++ b/100_projects/30-calculate-textarea-text-while-writing/main.js
@@ -0,0 +1,22 @@
+var myTextarea = document.getElementById('myText'),
+ mySpan = document.getElementById('mySpan');
+
+myTextarea.onkeyup = function() {
+ 'use strict';
+ mySpan.textContent = 100 - this.value.length;
+
+ if (mySpan.textContent < 0){
+ mySpan.style.color = '#F00';
+ } else {
+ mySpan.style.color = '#008000';
+ }};
+
+// 2 Code If Short
+
+// mySpan = document.getElementById('mySpan');
+// document.getElementById('myText').onkeyup = function() {
+// 'use strict';
+
+// mySpan.textContent = 50 - this.value.length;
+// mySpan.textContent < 0 ? mySpan.style.color = '#F00' : mySpan.style.color = '#000';
+// };
\ No newline at end of file