x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-03-23 16:44:03 +03:00 committed by GitHub
parent 696ed3db93
commit fcc32ace71
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 74 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
100_projects/30-calculate-textarea-text-while-writing/css.css Normal file
View File

@ -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;
}

BIN
100_projects/30-calculate-textarea-text-while-writing/guille-unsplash.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 766 KiB

19
100_projects/30-calculate-textarea-text-while-writing/index.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<form>
<textarea id="myText"></textarea>
<br/>
Letters Left (<span id="mySpan">100</span>)
</form>
<script src="main.js"></script>
</body>
</html>

22
100_projects/30-calculate-textarea-text-while-writing/main.js Normal file
View File

@ -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';
// };