devshades-au · October 1, 2021 06:23
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Welcome To My Site</title>
 </head>
 <body>
  <div class="container">
    <img src="" style="height: 125px; width: 125px;" alt="logo goes here...">
    <h1><strong><span id="title">Devshades</span></strong>, 
      <span class="txt-type" data-wait="3000" data-words='["Developer", "Hacker", " Awesome"]'></span>
    </h1>
    <h2>Thanks for landing at my site.</h2>
    
    <p class="quote"><span id="quotation">"</span> I have not failed. I've just found 10,000 ways that won't work.<span id="quotation">"</span> <br><span id="quoteAuthor">... Thomas Edison</span></p>
    
  </div>
  
  <div>

  </div>
  <script src="main.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
 // ES6 Class
 class TypeWriter {
  constructor(txtElement, words, wait = 2000) {
    this.txtElement = txtElement;
    this.words = words;
    this.txt = '';
    this.wordIndex = 0;
    this.wait = parseInt(wait, 10);
    this.type();
    this.isDeleting = false;
  }

  type() {
    // Current index of word
    const current = this.wordIndex % this.words.length;
    // Get full text of current word
    const fullTxt = this.words[current];

    // Check if deleting
    if(this.isDeleting) {
      // Remove char
      this.txt = fullTxt.substring(0, this.txt.length - 1);
    } else {
      // Add char
      this.txt = fullTxt.substring(0, this.txt.length + 1);
    }

    // Insert txt into element
    this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;

    // Initial Type Speed
    let typeSpeed = 100;

    if(this.isDeleting) {
      typeSpeed /= 2;
    }

    // If word is complete
    if(!this.isDeleting && this.txt === fullTxt) {
      // Make pause at end
      typeSpeed = this.wait;
      // Set delete to true
      this.isDeleting = true;
    } else if(this.isDeleting && this.txt === '') {
      this.isDeleting = false;
      // Move to next word
      this.wordIndex++;
      // Pause before start typing
      typeSpeed = 500;
    }

    setTimeout(() => this.type(), typeSpeed);
  }
 }


 // Init On DOM Load
 document.addEventListener('DOMContentLoaded', init);

 // Init App
 function init() {
  const txtElement = document.querySelector('.txt-type');
  const words = JSON.parse(txtElement.getAttribute('data-words'));
  const wait = txtElement.getAttribute('data-wait');
  // Init TypeWriter
  new TypeWriter(txtElement, words, wait);
 }
diff --git a/style.css b/style.css
 @import url('https://fonts.googleapis.com/css?family=Raleway:200,100,400');

 body {
  font-family: 'Raleway', sans-serif;
  height: 100vh;
  background: #333 url('https://images.pexels.com/photos/397998/pexels-photo-397998.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940') no-repeat center center / cover;
  color: #ccc;
  overflow:hidden;
 }

 .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0 3rem;
 }

 h1, h2 {
  font-weight: 200;
  margin: 0.4rem;
 }

 h1 {
  font-size: 3.5rem;
 }

 h2 {
  font-size: 2rem;
  color: #aaa;
 }

 /* Cursor */
 .txt-type > .txt {
  border-right: 0.2rem solid #777;
 }

 @media(min-width: 1200px) {
  h1 {
    font-size: 5rem;
  }
 }

 @media(max-width: 800px) {
  .container {
    padding: 0 1rem;
  }

  h1 {
    font-size: 3rem;
  }
 }

 @media(max-width: 500px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.5rem;
  }
 }
 .quote {
  padding: 5px;
  opacity: 0.2;
  font-size: 14px;
 }

 #quoteAuthor{
  font-size: 13px;
 }

 #quotation {
  font-size: 30px;
 }
diff --git a/type-writer-effect.markdown b/type-writer-effect.markdown
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="style.css">
	<title>Welcome To My Site</title>
	</head>
	<body>
	<div class="container">
	<img src="" style="height: 125px; width: 125px;" alt="logo goes here...">
	<h1><strong><span id="title">Devshades</span></strong>,
	<span class="txt-type" data-wait="3000" data-words='["Developer", "Hacker", " Awesome"]'></span>
	</h1>
	<h2>Thanks for landing at my site.</h2>

	<p class="quote"><span id="quotation">"</span> I have not failed. I've just found 10,000 ways that won't work.<span id="quotation">"</span> <br><span id="quoteAuthor">... Thomas Edison</span></p>

	</div>

	<div>

	</div>
	<script src="main.js"></script>
	</body>
	</html>
	// ES6 Class
	class TypeWriter {
	constructor(txtElement, words, wait = 2000) {
	this.txtElement = txtElement;
	this.words = words;
	this.txt = '';
	this.wordIndex = 0;
	this.wait = parseInt(wait, 10);
	this.type();
	this.isDeleting = false;
	}

	type() {
	// Current index of word
	const current = this.wordIndex % this.words.length;
	// Get full text of current word
	const fullTxt = this.words[current];

	// Check if deleting
	if(this.isDeleting) {
	// Remove char
	this.txt = fullTxt.substring(0, this.txt.length - 1);
	} else {
	// Add char
	this.txt = fullTxt.substring(0, this.txt.length + 1);
	}

	// Insert txt into element
	this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;

	// Initial Type Speed
	let typeSpeed = 100;

	if(this.isDeleting) {
	typeSpeed /= 2;
	}

	// If word is complete
	if(!this.isDeleting && this.txt === fullTxt) {
	// Make pause at end
	typeSpeed = this.wait;
	// Set delete to true
	this.isDeleting = true;
	} else if(this.isDeleting && this.txt === '') {
	this.isDeleting = false;
	// Move to next word
	this.wordIndex++;
	// Pause before start typing
	typeSpeed = 500;
	}

	setTimeout(() => this.type(), typeSpeed);
	}
	}


	// Init On DOM Load
	document.addEventListener('DOMContentLoaded', init);

	// Init App
	function init() {
	const txtElement = document.querySelector('.txt-type');
	const words = JSON.parse(txtElement.getAttribute('data-words'));
	const wait = txtElement.getAttribute('data-wait');
	// Init TypeWriter
	new TypeWriter(txtElement, words, wait);
	}
	@import url('https://fonts.googleapis.com/css?family=Raleway:200,100,400');

	body {
	font-family: 'Raleway', sans-serif;
	height: 100vh;
	background: #333 url('https://images.pexels.com/photos/397998/pexels-photo-397998.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940') no-repeat center center / cover;
	color: #ccc;
	overflow:hidden;
	}

	.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding: 0 3rem;
	}

	h1, h2 {
	font-weight: 200;
	margin: 0.4rem;
	}

	h1 {
	font-size: 3.5rem;
	}

	h2 {
	font-size: 2rem;
	color: #aaa;
	}

	/* Cursor */
	.txt-type > .txt {
	border-right: 0.2rem solid #777;
	}

	@media(min-width: 1200px) {
	h1 {
	font-size: 5rem;
	}
	}

	@media(max-width: 800px) {
	.container {
	padding: 0 1rem;
	}

	h1 {
	font-size: 3rem;
	}
	}

	@media(max-width: 500px) {
	h1 {
	font-size: 2.5rem;
	}

	h2 {
	font-size: 1.5rem;
	}
	}
	.quote {
	padding: 5px;
	opacity: 0.2;
	font-size: 14px;
	}

	#quoteAuthor{
	font-size: 13px;
	}

	#quotation {
	font-size: 30px;
	}