In this #CodeShare, I'll show you the implementation of randomized word placement idea I had. This approach ensures that certain words or phrases appear in different locations on the screen every time the webpage is refreshed. Now, let's dive into how I made this happen:
Here's the end result! Each time the page refreshes, a different placement of the words will be shown, randomized.
A Peek Into the Toolbox
I'll keep this article updated, as I work on and improve this code.
Before we get started, it's crucial to understand that this feature involves both HTML (for the structure of the web page) and JavaScript (to create the randomness). We’ll also use CSS to apply styles and control the presentation of these words.
Do I always know what I'm doing when I code? No! But, that's what makes it fun. Feel free to send me corrections, tips, and resources in the comments!
Getting Started with the HTML
First, we'll create individual divs for each phrase or word we want to randomize. We can assign a class for styling and easy selection in our JavaScript code.
Creating the elements that will be randomized. "The Editor's Loft" (the title of this blog) in different languages.
Creating the Magic with JavaScript
The key part of this process is creating the randomness:
This is the math part of the code. I used a code generator for this part!
Polishing with CSS
Finally, to control the look and feel of these words, we’ll add some CSS:
The font I chose is Google Font Inter, which is my typography jam for this publication! I also left a notation in the code, to remind me and you to set the min-height.
Is this code done yet?
Nope. I'm still working on the font styling with this one, and will update this article as I dial it in to something I like!
Code share
Want to try this out? Improve it? Use it?
If you're familiar with coding, you'll notice that I jammed the HTML, JS, and CSS into "HTML" blocks of my Codepen share. This is purposeful, as I made this code for inserting into HTML blocks in website builders. #NotBestPractice, but it works. 😉
Copy and fork, on Codepen ⤵️
The idea of randomizing word placement on a webpage refresh may seem like a small detail, but in the world of web design, it's these small details that can turn a good website into a great one.
This technique adds a layer of dynamism and interactivity to your site, providing a unique experience for each visitor. Try it out!
Got any pens, code, or tips to share with me? Let me know in the comments! Don't be shy. 😊