Let’s make sure we understand the key ideas of using data in JavaScript by using it in a miniature project.
As with all challenges, do this work in pairs and in class. This means you will both submit the same work and should work together on one computer to produce the project. You can take turns typing stuff in.
To start up you should:
data-challengecart253 repositoryWith your partner(s):
Become a Car Designer
Our idea is going to be to choose a random car manufacturer and a random dinosaur name and join them together to generate a hypothetical new car name. We’re also going to do a small bit of localization so this can be experienced in English or French.
We’re going to start with some example code for you to modify, so start paste the following code into your script.js:
/**
* Terrible New Car
* Pippin Barr
*
* A program to generate new car model names using dinosaurs.
*
* Uses:
* Darius Kazemi's corpora repository
* https://github.com/dariusk/corpora/tree/master
*/
"use strict";
let carData = undefined;
let dinosaurData = undefined;
let langData = undefined;
let lang = "fr";
// Starts with the instruction
let carName = "Click to generate a car name.";
/**
* Load the car and dinosaur data
*/
function preload() {
}
/**
* Create the canvas
*/
function setup() {
createCanvas(600, 400);
}
/**
* Display the current main text (either instructions or a car)
*/
function draw() {
background(0);
push();
fill("pink");
textAlign(CENTER, CENTER);
textSize(32);
text(carName, width / 2, height / 2);
pop();
}
/**
* Generate a new car name
*/
function mousePressed() {
}
First, we’re going to need some data. If you want to follow along with the idea here then you should go and download the following from Darius Kazemi’s corpora project:
Copy your two JSON files into your project in the assets/data folder (create it if you haven’t already).
🌶️ If you want to mash up something different, go ahead! Sport + Architecture? Cats + Books? Films + Governments? The world is your oyster.
Add a preload() function to load the two data files into the provided data variables.
In the mousePressed() function, change carName to be a random car manufacturer and a random dinosaur combined together. (You may want to load your two random elements into variables first, then construct your new string by adding them together with +.)
Try it out: when you click you should see a (terrible) new car name each time.
You’re done! (Only do the rest of the challenge if feeling spicy!)
🌶️ Feel free to get more ambitious by combining in other words and emojis as you wish!
Right now our program is only in English, but it would be cool if it could be in French as well. We’d only need to change the instructions, but to be clever we want to create a lanugage JSON file.
Create a new file in your data folder called lang.json and write JSON that allows you to specify the English and French versions of your instructions. Create a property called instructions and inside it store an object with two properties, en and fr, each of which has the correct instructions in that language.
Include a description property in your file too as good practice.
Create a new language data variable (langData?) and load your new file into it in preload().
Create one more variable at the top of your script called lang and assign "en" or "fr" to it, depending on the language you want to see.
In setup() set carName to the appropriate instructions using your data and the lang variable. You could use an if-statement for this, e.g.
if (lang === "fr") {
carName = langData.instructions.fr;
}
else if (lang === "en") {
carName = langData.instructions.en;
}
But even better is to use a neat trick with JS object properties:
const cat = {
name: "Paws",
legs: 3
};
// The usual way of accessing a property
let name = cat.name; // "Paws" will be in name
// A different way of accessing a property using square brackets
let name2 = cat["name"]; // "Paws" will be in name2
// An even cooler way of accessing a property using square brackets and a variable
let propertyName = "name";
let name3 = cat[propertyName]; // "Paws" will be in name3
You can use this trick to access the correct version of the instructions via the lang variable. (That is, you can access langData.instructions[lang]!)
All going to plan, you will see the correct language appear when you set lang to en or fr. Localized!
When you’re finished, show the instructor or teaching assistant your work and they will confirm you’ve passed the challenge and can submit it on the Moodle.
This challenge is pass/fail and is worth 1% of your final grade.
Once you’re cleared to submit, go to the Moodle and both submit your work. You should all separately submit:
Note: It’s fine if the project is only in one of your repositories, but it’s not a bad idea to make sure you both have it for your own reference.