DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for ImpressiveSquare.js
Khaleel Gibran
Khaleel Gibran

Posted on • Updated on

ImpressiveSquare.js

ImpressiveSquare.js is a simple and small JS library for creating and styling responsive and simple <div> elements. These <div>s have a small hover animation with a light box-shadow to produce a simple effect.

This may not sound like a big thing :), but it's my first REAL JavaScript library. Because it is my first, I might be doing something wrong or the code might have errors or security problems, but feel free to let me know about it in the comments!

This is how it will look:

Getting started

For this to work, you'll need a <div> element structured like this:

<div class="impressive-square">
  <img class="impressive-image" src="https://generative-placeholders.glitch.me/image?width=637&height=200" width="100%" />
  <div class="impressive-body">
    Hi Hello
    <p>
      I'm an impressive square
    </p>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

There should be a main <div> and it should have an <img> tag, which will be the main image of the <div> and another <div> which will have all the content of the square, to which you can add more HTML.

Once you've done that, you can either download ImpressiveSquare.js from here or you can use a <script> tag with a link to a CDN:

<script src = "https://cdn.jsdelivr.net/gh/khalby786/ImpressiveSquare.js@latest/script.js"></script>
Enter fullscreen mode Exit fullscreen mode

And then, call the function to style the <div>s!

<script>
square.new();
</script>
Enter fullscreen mode Exit fullscreen mode

square.new() applies styles to default classes impressive-square, impressive-image (for the

image) and impressive-body (for all the contents). However, if you wish, you can change the classes of the square, image, and body and pass it as an argument to square.new() like this:
const config = {
  class: "my-square",
  images: "my-image",
  content: "my-body",
  width: "100%",
  back: "white",
  fore: "black"
};

square.new(config);
  • class is the class of the square where you want the styles to be applied.
  • images is the class for the main image of the square.
  • content is the class for the square content.
  • width is the width of the square.
  • back is the background color of the square.
  • fore is the color of the text.

Note that calling square.new() once will style all the elements with the specified class (if arguments are passed) or to the default class impressive-square for the square, impressive-image for the main image, or impressive-body for the square content, if no arguments are passed.

This is just a starter project and I'll be sure to add more features!

GitHub:

GitHub logo khalby786 / ImpressiveSquare.js

ImpressiveSquare.js is a simple JS library for creating and styling responsive and simple `<div>` elements. These `<div>`s have a small hover animation with a light box-shadow to produce a simple effect.

ImpressiveSquare.js

ImpressiveSquare.js is a simple JS library for creating and styling responsive and simple <div> elements. These <div>s have a small hover animation with a light box-shadow to produce a simple effect.

This is how it will look:

{% glitch impressive-squares app %}

Getting started

For this to work, you'll need a <div> element structured like this:

<div class="impressive-square">
  <img class="impressive-image" src="https://generative-placeholders.glitch.me/image?width=637&height=200" width="100%" />
  <div class="impressive-body">
    Hi Hello
    <p>
      I'm an impressive square
    </p>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

There should be a main <div> and it should have an <img> tag, which will be the main image of the <div> and another <div> which will have all the content of the square, to which you can add more HTML.

Once you've done that…

Top comments (0)

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!