Jan 13
Job Search Update — Creating a JavaScript App
This week I heard back from someone at Pinapple for a long shot job I applied to. I didn’t have the proper experience for the job, but someone from the company reached out to tell me my resume was impressive and asked a set of questions to gauge my skills and see if perhaps I could manage the position. Keeping my fingers crossed for that and waiting to hear back.
For my coding projects this week I am beginning a new React app for something Ive wanted to do a long time, build a website that lets users post flight routes and what side of the plane is best to look out the window to see things. It will be a react front end app with a rails back end. For my technical portion of my blog, since we already talked about how to create new React apps, this week we will talk about how to make a basic JavaScript (JS) single-page app!
The beauty of JS is how simple it is to get up and running, you don’t need any fancy generators to create a bunch of files that you have no idea what they do. To start, create a project folder then open the folder in your preferred code editor. Next, you need to create two files, an index.html file, and an app.js file.
The HTML file will contain all the DOM elements for our app, it should look like this:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html>
Next, you will need to link your app.js file to your index.HTML page so it knows where to look for the JS actions, add this before the closing </HTML> tag:
<script src="app.js"></script>Now, lets build a simple single page app that when clicked will change the background color.
In your app.js file, we will write code that will allow the user to click anywhere on the background to change the color, to do this we will create an array of colors to choose from, then an event listener that will wait for the user to click on the page to change the background. In your index.html file, add an id to the body to allow JS to detect it:
<body id="body">Now, in your app.js file add the following code:
const bg = document.getElementById('body');const colors = ["blue", "black", "red", "yellow", "green", "white"]bg.addEventListener('click', function onClick(event) { event.target.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];});
Now, open the page in your browser by double-clicking the index.html file and you will see an empty page, clicking on it will change the background color to one of the colors in the array!
