Photo by Alexander Andrews on Unsplash
Project: Generating Random Fake Weather History
mixedMessages.js
Preface: As of the time of this post, I am a new developer, immersing myself in anything and everything JavaScript.
The Project
This was another fun project, this time not nearly as guided or as "on rails" as Mysterious Organism. The gist of this project was to create a "program" that would display a random message to the user each time the program was ran.
Project Description
For this project, you will build a message generator program. Every time a user runs a program, they should get a new, randomized output. You’re welcome to take the project in a couple of different forms, like an astrology generator, inspirational message, or nonsensical jokes. To make your program truly random, the message that it outputs should be made up of at least three different pieces of data. Take what you know of JavaScript syntax so far to build the program and customize it to your liking.
The Plan
Initially I wanted to create a quote generator with three parts to pull from: (1) the quote itself, (2) the name of person attributed to the quote, and (3) the date of the quote. I wanted the entire thing to be dynamically generated.
The plan was to go about this in such a way that an array for each part would be generated. The length of all three arrays would be the same, and the result of a user defined number.
Once all three arrays were generated, the function that compiled the three parts would match quote[0]
to year[0]
and to person[0]
(and so on, i.e. quote[1]
to year[1]
...). The index shared across all arrays would be randomly chosen.
I quickly realized that as easy as generating a random year is, generating random names and random quotes would be a little more time consuming and/or a little beyond my expertise level. Perhaps also beyond the scope of this project at this point in my knowledge level.
Additionally, thinking about it now in hindsight, this approach wouldn't have made sense--why go to the trouble of generating three separate arrays? Why not just generate a string, and skip the arrays?
Time Sink
In terms of the time sink, both the random name and the random quote could be solved by hand typing (i.e. copy/pasting) several names and quotes into an array or an object. Quite an ugly solution, and not nearly as elegant as the random year generator. I would have to do all of the heavy lifting.
tl;dr A hard coded array of names and quotes for the program choose from? ... NO.
Expertise
It could also be solved by writing a function that puts together a simple, grammatically correct phrase for the quote ( "Mad Libs" style--which what this project eventually turned into anyway), and a separate function that can construct a phonetically valid name from a series of word parts.
Probably a little beyond the scope of the project?
The Outcome
What I ended up doing was creating a generator that uses several sources to show a randomized past day's weather during a time of day, e.g. "It was a warm autumn evening on 13 December 1945". Each "data set" is an object (not an array), tied to a function.
In the current iteration of this program, it is possible that some of the randomization output won't make sense. For example, it could generate "warm winter night". Winter generally isn't warm. Neither is the night. This is fixable, but probably not worth the effort to "fix" it.
Additionally, it will be possible for a non-existent date to generate (e.g. February 31), but this is also fixable (but probably also not worth the effort).
In any case, I built in some other functions that do some fun things with the format of the date, with the part of the day, etc. Some of those functions are below.
Regional Format
This function will take in a string (either eu
or us
), and return a date in those region's respective formats. If us
is passed in, the date format is month
day
[a number], year
. If eu
is passed in, the date format is day
[a number] month
year
.
const dateFormat = (locale) => {
let format = {
us: `${month} ${day}${suffix}, ${year}`,
eu: `${day} ${month} ${year}`,
};
return format[locale]; // => string
};
Date Suffix
This function, when enabled with a boolean value, will add a "st", "rd", etc. after the date. Currently this function is hard coded into the us
formatted date from above. In the future (or probably better phrased as "ideally"), this would be totally independent from the regional format.
This isn't difficult to implement, of course, but for all intents and purposes, and even without this function, I have achieved the directive of this project.
const dateSuffix = (date, bool = false) => {
// https://tinyurl.com/date-suffix
if (bool === true) {
let suffix = {
1: `st`,
2: `nd`,
3: `rd`,
21: `st`,
22: `nd`,
23: `rd`,
31: `st`,
};
return suffix[date] || `th`; // => string
} else {
return ``; // => string (empty)
}
};
Part of Day
This function will generate a randomized "part" of the day (e.g. morning, afternoon, etc.). It makes the resulting final message a little more interesting to read.
const randPartOfDay = () => {
let partOfDay = {
1: `morning`,
2: `afternoon`,
3: `evening`,
4: `night`,
};
let i = Math.ceil(Math.random() * Object.keys(partOfDay).length);
return partOfDay[i]; // => string
};
Make it Pretty
Last but not least, I wanted the program to be more than something ran in the console/terminal. So I created a basic little web page for the script to run on. Just press F5 to get a new message!
Ideally the user should be able to chose which regional format they want, whether or not they want the date suffixes, etc. Maybe later?