DEV Community: Patricia C.

JavaScript Event Listeners

Patricia C. — Mon, 31 May 2021 01:05:20 +0000

On this blog I will teach how to create a flip card with event listeners.

The first step is to write your code in HTML starting with the generic syntax and including the external files.

<!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">
    <link rel="stylesheet" href="style.css">
</head>
<h1>Movie Card</h1>
<body>
    <!--card 1-->
    <div class="card">
        <div class="card_inner">
        <div class="card_face card_face--front">
            <h3>“Let me explain something to you. Um, I am not “Mr. Lebowski”. You’re Mr. Lebowski. I’m the Dude. So that’s what you call me. You know, that or, uh, His Dudeness, or uh, Duder, or El Duderino if you’re not into the whole brevity thing.”
            </h3>

    <script src="movieCard.js"></script>
</body>
</html>

Lets add a div tag with a class attribute, then two more divs nested inside the main div. We will need an h1 tag for the title, follow by and image tag to insert the image source.

       <div class="card_face card_face--back">
            <div class="card_content">
                <div class="card_header">
                   <h1>The Big Lebowski</h1>
                    <img src="./images/big_lewoski.jpg" alt="" class="movie-info"/>
                    <h2>The Big Lewoski</h2>
                    </div>
                    </p>

                </div>
            </div>
        </div>
    </div>
</div>

To make the card flip, all you have to do is select the ".card_inner" attribute and implement an event listener as illustrated below.


const card = document.querySelector('.card_inner');
card.addEventListener('click', () => {
    card.classList.toggle('is-flipped');
})

Here's the final piece

Photo by Jopwell from Pexels

All About Analog Clocks

Patricia C. — Mon, 24 May 2021 03:01:53 +0000

I create an animated Analog Clock when at the beginning of my JavaScript journey. I was excited to get started and I knew that I could add my own personal style.

The first step was to set up the HTML code in different class attributes from 1 to 12.

     <div class="clock">
                <div class="hand hour" data-hour></div>
                <div class="hand minute" data-minute></div>
                <div class="hand second" data-second></div>
                <div class="number number1">1</div>
                <div class="number number2">2</div>
                <div class="number number3">3</div>
                <div class="number number4">4</div>
                <div class="number number5">5</div>
                <div class="number number6">6</div>
                <div class="number number7">7</div>
                <div class="number number8">8</div>
                <div class="number number9">9</div>
                <div class="number number10">10</div>
                <div class="number number11">11</div>
                <div class="number number12">12</div>
            </div>

            <script src="clock.js"></script>     
        </body>

JavaScript

I created an array with a variety of colors, then implemented that array in the randomColor() function to change the color on each second, as shown below
.

let colorArray = ["#71b8bd", "#6ebcbe", "#6cc1be", "#6bc5be", "#6ac9bd", "#6bcdbb", "#6dd1b9", "#71d5b6", "#75d8b2", "#7bdcae", "#82dfa9", "#8ae2a4", "#93e59f", "#9de899", "#a7ea93", "#b2ed8d", "#beef87", "#caf082", "#d6f27c", "#e3f377"]

function changeColor() {
  let randomColor = colorArray[Math.floor(Math.random() * colorArray.length)];
    document.getElementById('bg-color').style.backgroundColor = randomColor;
}

And here it is!

Getting started with HTML Forms

Patricia C. — Mon, 17 May 2021 03:59:07 +0000

When I first started my coding journey, one of the things that I’ve noticed is that forms are everywhere, and it’s useful to get in the habit of creating forms, whether you’re a frontend or backend engineer.

Here are several steps to create a simple login form with HTML and CSS

Start with the HTML file

Inside the body tag, enter a div tag with a class name, then the form.

<!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">
   <link rel="stylesheet" href="style.css">
   <title>Form</title>
</head>
<body>
   <div class="container">
       <h2>Login</h2>
        <form>
        </form>
   </div>
</body>

In the form tag, implement the inputs for the email and password.

<form> 
<input type="email" class="input-box" placeholder="enter your email" required>
      <input type="password" class="input-box" placeholder="enter your password" required>
</form>

CSS

Create a universal selector with a 0 margin and padding.

* {
   margin: 0;
   padding: 0;
}

Enter the class attribute, .container as shown in the code below with the additional properties.

.container {
   width: 100%;
   height: 100vh;
   font-family: sans-serif;
   background: rgb(255, 255, 255);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
}

And there you have it.

Photo by Andrea Piacquadio from Pexels

JavaScript Built-in Functions

Patricia C. — Mon, 10 May 2021 02:22:04 +0000

In the past few months, I've been learning the ropes of JavaScript and came across some useful built-in functions that always come in handy.

Arrow Functions

With arrow functions you don’t need to pass the function keyword; it can also be passed as an anonymous function.

functionOne = ( ) => {
     return console.log(‘this is an anonymous function);
}

functionTwo  =  parameter => {
    return console.log(this has one parameter);
}

An Inline function doesn’t need the return keyword and you can remove the parenthesis if you’re passing 1 parameter.

const multiply = num => num * 4;

verses

const multiply = (num) => { return num * 4; }

Splice

The Splice function selects element(s) in array that can be replaced or removed.

Let fruits = [‘apple’, ‘kiwi’, ‘orange’, ‘avocado’];`

Fruits.splice(2, 0, ‘raspberries’);

2 is where the new element will be positioned, 0 is the number of elements that are removed, ‘raspberry is the new element that's added to the array.

modified array: = [‘apple’, ‘kiwi’, ‘orange’, ‘raspberry’, ‘avocado’];

Slice

Slice Returns a new array.

names = [‘Pat’, ‘John’, ‘Ann’, ‘Lukas’, ‘Tom’]
names.slice(2, 3);
new array name: [‘Ann’]

Photo credit: Christina Morillo from Pexels

SVG Text Animation

Patricia C. — Mon, 03 May 2021 03:47:03 +0000

Here are a few steps to create an SVG file with a simple text animation.

To start, setup the SVG file on html within the SVG tags.

Style and Animation

On the CSS file, use @keyframes

@keyframes draw {
    from {
        stroke-dashoffset: -563;
    }
    to {
        stroke-dashoffset: 0;
    }

And lastly, in the JavaScript file select the class attribute, then implement the getTotalLength() function.

let path = document.querySelector('path');
let pathLength = path.getTotalLength();