Arimoro Olamilekan Ezekiel's Blog

Building an Auto-write-text and Heart Rain App with HTML, CSS & Vanilla JavaScript.

Arimoro Olamilekan Ezekiel's photo
Arimoro Olamilekan Ezekiel
·

8 min read

Building an Auto-write-text and Heart Rain App with HTML, CSS & Vanilla JavaScript.

Sequel to the release of the written version of the first day of my 20 days JavaScript Challenge which can be found here . I decided to complete the series by putting the remaining 19 JavaScript Apps to writing so that other developers can learn and make reference to it whenever they need it.

The pattern of explanation will take the same form as my first JavaScript App which is a Countdown Timer.

In this second challenge, I built an Auto-Text-Write and Heart Rain App with just HTML, CSS and JavaScript. This Apps writes a text on the screen automatically by itself and in the process of writing there is a rain of Heart that starts at a low frequency and increases. It was fun building this app because it made me understand some JavaScript concepts well.

I will be explaining with code snippets to show what I did and I believe it would be easier to try it out on your personal text editor.

This piece of writing is divided into three parts which are;

  1. HTML Structure.

  2. CSS Styling.

  3. JavaScript Functionality.

HTML Structure

The HTML code snippet shows the structure of the app, how every content on the web page was written using different tags to show the sections of the page. On this page we have just the default HTML markup for a simple web page and a div that has an id of main and this div receives the text that auto writes dynamically. We also have a link to the stylesheet used to style this page and the JavaScript file I used to make it functional. Here is the code snippet;

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">
    <title>Auto Write Text</title>
  </head>
  <body>
    <div id="main"></div>
    <script src="./main.js"></script>
  </body>

CSS Styling

After writing the markup I added some styling to it in order to make it more presentable, I used a nice font for the text called Laila, I also used flexbox for the good alignment of the text on the webpage.

Also for the Heart rain I used key-frame animation in css to make it look nice. You can also check the code snippet that explains more about it.

@import url('https://fonts.googleapis.com/css2?family=Laila:wght@500&display=swap');

* {
  box-sizing: border-box;
}

body {
  background: url(./bg.jpg) no-repeat center center/cover;
  color: black;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Laila', sans-serif;
  margin: 0;
  min-height: 100vh;
}

@media (max-width: 320px) {
  #main {
    font-size: 19px;
    font-weight: bold;
  }
}

JavaScript Functionality

This final part is what I refer to as the brain behind the whole app and I will try to break it down so that we can learn greatly from it.

Auto-Text-Writer Functionality

The first functionality I did was to do the Auto-Text-Writer, This functionality can be achieved by taking just three steps.

  1. Setting an initial index to 0: There is an initial index set to start from 0, it will start counting from 0 because it was initiated to start at that value.

  2. Slicing the text I want to Auto Write with the slice method: The slice method takes in two properties which is the start index and end index, as stated above the start index is 0 and the end index is when we get to the final index of the text we are auto writing.

  3. And incrementing the index every 350milliseconds which is approximately 0.35seconds: After slicing the text we need to make it appear as it is slicing it per index, so we use a JavaScript method called setInterval() and set it to any preferred timing but in the course of this app I used 350ms.

setInterval(() => {
  writeText();
}, 350);

After doing this three things then we can insert it into the main div. Try it out yourself;

const text = "Arimoro Olamilekan";

let index = 0;

function writeText() {
  document.getElementById('main').innerText = text.slice(0, index);

  index++;

  if (index > text.length) {
    index = 0;
  }
}

Heart Rain Functionality

After achieving the milestone of doing the Auto-Text-Writer then I moved on to do the Heart Rain Functionality.

To achieve this we need to use CSS and JavaScript, Firstly we need to create a class called 'heart' and add little styling that we will add dynamically with the JavaScript. Below is a code snippet of what I am saying;

.heart {
  position: fixed;
  top: -5vh;
  font-size: 5px;
  transform: translateY(0);
  animation: fall 3s linear forwards;
}

@keyframes fall {
  to {
    transform: translateY(105vh);
  }
}

After adding this styling we can now make use of it in our JavaScript file but the main idea behind the styling is to give it animation and set the initial position and final position for the heart rain. In this case the initial position is -5vh and the final position is 105vh.

For the JavaScript part, you will need to first add this class name called 'heart' then set animation for the fall of the rain using Math method. Then we can now insert what we want to rain which is the Heart emoji and this was gotten from a vs code extension called Emoji, but you can decide to rain another emoji of your choice.

This is a code snippet that shows what I explained above;

function createHeart() {
  const heart = document.createElement('div');
  heart.classList.add('heart');

  heart.style.left = Math.random() * 100 + 'vw';

  heart.style.animationDuration = Math.random() * 2 + 3 + 's';

  heart.innerText = '❤️️';

  document.body.appendChild(heart);
}

After doing all these we can now set an interval with the JavaScript method called setInterval() and here is the result;

setInterval(() => {
  createHeart();
}, 150);

Having accomplished these two functionalities then our App is set, We now have an Auto-Text-Writer and Heart Rain App.

Conclusion

This App can be greatly used in your portfolio website or some other websites to make your websites more functional and more user friendly. Thanks for reading through and watch out for my third JavaScript Challenge that should be out by weekend... To check the hosted link of this app click here and the source code can also be found here.

Bye....

JavaScriptfrontend