I have a creative project in mind where I want to design various shapes resembling English alphabets, and each shape should include text. I already have an image file illustrating my idea. My objective is to accomplish this using only html css javascript. I'm not seeking a comprehensive tutorial, just some references to different methods would suffice.
Additional Information: The content within the shapes will be dynamically generated.
This website is the closest thing to generating ASCII art without resorting to a ridiculous answer.
You have the freedom to create various types of ASCII art here. Feel free to unleash your creativity!
It's highly unlikely that someone will write out an entire story for you, but you can now utilize CSS shapes to separate images from text.
Good luck with experimenting!
Learn more about css-shapes here
It may seem challenging, but not impossible. One option is to utilize CSS shapes, although their compatibility with various browsers is uncertain. Another approach would be to use an image or manually type out each letter individually, but this may limit flexibility.
An alternative method is to personally map out each letter, which could be time-consuming...but once completed, you have the freedom to customize their appearance and make changes easily.
Let's take a look at the letter E!
var letter_e = [25,25,25,25,25,10,10,10,10,10,25,25,25,25,10,10,10,10,10,25,25,25,25,25];
var div = document.getElementById('content');
letter_e.forEach(function (count) {
for (i = 0; i < count; i++) {
div.innerHTML = div.innerHTML + 'e';
}
div.innerHTML = div.innerHTML + '</br>';
});
Or my personal favorite:
Writing out giant letters
with javascript is a bad
idea! Writing out giant
letters with javascript i
s a bad idea! Writing out
giant let
ters with
javascript
is a bad
idea! Writ
ing out giant letters wit
h javascript is a bad ide
a! Writing out giant lett
ers with javascript is a
bad idea!
Writing ou
t giant le
tters with
javascrip
t is a bad idea! Writing
out giant letters with ja
vascript is a bad idea! W
riting out giant letters
with javascript is a bad
Edit:
To combat boredom, I created a basic version that can handle gaps within a letter. Presenting the letter B!
In this version, when mapping out each letter, if you only specify a number, it will display that many letters on a line. If you provide an array, it will alternate between spaces and letters.
For instance, defining [4,20,5,13,4] would result in 4 letters, followed by 20 spaces, then 5 letters, followed by 13 spaces, and finally 4 letters on a single line.
A potential drawback of this method is the need to manually map out every individual letter, which can be quite time-consuming.
hhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhh
hhhhh hhhh
hhhhh
hhhhh
hhhhh
hhhhh hhhhhhhhh
hhhhh hhhhhhhhh
hhhhh hhhh
hhhhh hhhh
hhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhh
website link http://www.example.com
As I delve into my studies on React Native, I came across the deprecation of the tabBarOptions feature. I understand that now we need to include it in screenOptions, but I'm facing issues with implementing this in my code. I tried enclosing them in br ...
My goal is to project a 3D scene onto a 2D plane using ray tracing. Although my ultimate aim is volume rendering, I am currently struggling with the basics. I have set up a three.js scene with the viewing plane attached to the camera in front of it. The S ...
Struggling to tidy up a website I'm working on for a client. I've spent countless hours trying to solve this issue! With my limited knowledge, I could really use some help with the code. The main challenge is making the top section of the site (o ...
<form method='post' action=''> <label for="x1">X1</label> <input id="x1" name="checkbox[]" type="checkbox" value="x1" /> <label for="x2">X2</label> <input id="x2" name="checkbox[]" type="check ...
I'm currently working on animating two different objects: a square and a circle. Each object has its own button to initiate the animation, which involves moving the object from left to right. However, I've run into an issue where clicking on one ...
Click here In the Plnkr linked above, I have included the latest versions of d3 and nvd3 libraries. Upon initial viewing of the chart, you may notice that all the timespan ticks such as 09:00, 08:30, 08:00, etc., are overlapping on the left xAxis. The ti ...
I am working with an array of booleans representing week days to determine which day is selected: selectedWeekDays: boolean[] = [true,true,true,true,true,true]; In my HTML file: <section> <h4>Choose your days:</h4> <mat-che ...
Memory = "0"; Current = "0"; Operation = 0; MAXLENGTH = 30; alert("yea"); function AddDigit(digit) { alert("yea"); if (Current.length > MAXLENGTH) { Current = "Aargh! Too long"; } else { if (eval(Current) == 0) { Current = dig; ...
I am having trouble populating my multiple dropdown list using AJAX. The dropdown list is dependent on another single selection dropdown list. Here is the HTML code: <div class="form-group"> <label for="InputGender">Select Course</ ...
I am currently working on a task that requires me to display a pop-up message at the top-middle of the screen stating "please fill in all fields before submitting". This custom box should be stylable using CSS. Although the solution seems simple, I am str ...
I am currently using jQuery to create HTML elements with specific classes and then append them together. However, the code I have written is not adding the generated HTML to the container as expected. There are no errors being produced but the HTML is not ...
In the text box, I've implemented a feature to prevent typing of a forbidden character: #. While this feature is successful in restricting the input of the forbidden character, there's an issue that arises when data is already filled in the text ...
I am attempting to utilize intersection observer in order to apply a class to certain text once it crosses a specific trigger point. Although I have confirmed that my observer is functioning properly as some text changes to blue, there are other texts tha ...
@Html.Password("password", null, new { @class = "form-control frmField", placeholder = "Password" }) I want to incorporate a button that when clicked will make the password visible. I know this can be achieved using jQuery or Javascript, but I am unsure h ...
I need assistance with displaying each div individually on my list when the user hovers over and off of them. I also want the displayed div to slideUp upon exit. If you'd like to take a look, here is my code on http://jsfiddle.net/AZhgk/ <div id= ...
Is there a way to use javascript to generate a file based on user input and provide it as a download without storing it on the server? For instance, imagine a scenario where a user is using an application and they want to download their work by clicking ...
I found this interesting code snippet: .float-left { float: left !important; } .float-right { float: right !important; } .container { padding: 1rem; } .clearfix { clear: both; } .has-border { border: 2px solid #000; } .d-inline-block { ...
My goal is to extract data from a MongoDB database using the find() method, specifically retrieving documents that have a specified "room" value. From there, I aim to identify all unique values within the array of rooms, based on the key "variety". I initi ...
Currently, I am immersed in a project where I am utilizing React.js, Express.js, and Node.js to transform a user-provided image into an NFT on the Ethereum blockchain. To achieve this, I must first upload the image to IPFS (Pinata being my choice of servic ...
Does anyone have insights into the root cause of this error? warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works TypeError: Cannot read properties of null (reading 'lengt ...