msb-public
/
50projects50days
mirror of https://github.com/bradtraversy/50projects50days
1
0
Code Issues Projects Releases Wiki Activity

updated code

Browse Source
pull/229/head
mayank-0103 6 months ago
parent 84434979cb
commit 64c2616a80
3 changed files with 40 additions and 32 deletions
Show Stats Download Patch File Download Diff File

31
auto-text-effect/index.html
Unescape View File

@ -1,19 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Auto Text Effect</title>
</head>
<body>
<h1 id="text">Starting...</h1>
<div> <head>
<label for="speed">Speed:</label> <meta charset="UTF-8" />
<input type="number" name="speed" id="speed" value="1" min="1" max="10" step="1"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</div> <link rel="stylesheet" href="style.css" />
<title>Auto Text Effect</title>
</head>
<body>
<h1 id="text">Starting...</h1>
<div>
<label for="speed">Speed:</label>
<input type="number" name="speed" id="speed" value="5" min="1" max="10" step="1">
</div>
<script src="script.js"></script>
</body>
<script src="script.js"></script>
</body>
</html> </html>

23
auto-text-effect/script.js
Unescape View File

@ -1,22 +1,21 @@
const textEl = document.getElementById('text') const textEl = document.getElementById('text');
const speedEl = document.getElementById('speed') const speedEl = document.getElementById('speed');
const text = 'We Love Programming!' const text = 'xAI is an AI company with the mission of advancing scientific discovery and gaining a deeper understanding of our universe.';
let idx = 1 let idx = 1;
let speed = 300 / speedEl.value let speed = 300 / speedEl.value;
writeText() writeText();
function writeText() { function writeText() {
textEl.innerText = text.slice(0, idx) textEl.innerText = text.slice(0, idx);
idx++ idx++;
if(idx > text.length) { if(idx > text.length) {
idx = 1 idx = 1;
} }
setTimeout(writeText, speed) setTimeout(writeText, speed);
} }
speedEl.addEventListener('input', (e) => speed = 300 / e.target.value);
speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)

14
auto-text-effect/style.css
Unescape View File

@ -5,7 +5,7 @@
} }
body { body {
background-color: darksalmon; background-color: rgb(234, 255, 217);
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -13,13 +13,19 @@ body {
justify-content: center; justify-content: center;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
margin: 0; width: 80vw;
margin: auto;
}
#text {
text-align: center;
} }
div { div {
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
background: rgba(0, 0, 0, 0.1); background: rgba(9, 105, 31, 0.1);
padding: 10px 20px; padding: 10px 20px;
font-size: 18px; font-size: 18px;
} }
@ -28,7 +34,7 @@ input {
width: 50px; width: 50px;
padding: 5px; padding: 5px;
font-size: 18px; font-size: 18px;
background-color: darksalmon; background-color: rgb(172, 234, 201);
border: none; border: none;
text-align: center; text-align: center;
} }

Write Preview
Loading…
Cancel
Save