JS Troubleshooting #1/Part 1: basic UX exploration by running a web app program with the click of a button

Today I wanted to troubleshoot a rudimentary Horoscope app I began building during our first two weeks of the Open Code program. The premise of the application is simple–you click on the button in the middle of the page that triggers a pop-up prompt, enter the needed information (in this case your Zodiac sign) into the input field of the prompt and in turn after you click the button, you receive your horoscope for the day along with some illustration and more information about your sign. The screencaps below show the three main views and steps of how the app works so far.

Now, since this is a rudimentary app and I have not developed the content, data structure, and hosting needed for a wide multitude of daily horoscopes, my current app as it stands shows the horoscopes for each sign for just one random day that I have picked. I would have to learn more about the Javascript principles of objects and mass data organization to know how to integrate and effectively store content for a wide calendar of daily horoscopes. Currently, I am learning how to work with HTML and CSS elements using the fundamentals of Javascript, a powerful programming language that has the ability to compute numbers and data on the browser side and control the visual elements you see on a website or app. Javascript is used to create dynamic, interactive websites that have the potential to be rich in user-experience.

I wanted to add the functionality of having a button on the page that would initiate the process of getting your horoscope. Javascript enables you to take user actions, known as events, such as clicking a button or link, scrolling, or hovering over an element on the page and turn them into something we can interact with. By adding special Javascript code called functions into our code, we can add event listeners (or handlers) so that the browser knows how to respond to the actions of the user based on what code you have given it to perform in response to those actions.

Below, highlighted in line 1, is the event listener function that enables the rest of the code to run after the click of the button has taken place.

document.getElementById("checkHoroscope").onclick = function() { 
document.querySelector('#checkHoroscope').style.visibility = 'hidden';
document.querySelector('#checkHoroscope').style.display = 'none';

First, we have to find the element we are looking for, by using document.getElementbyId("checkHoroscope")

This function first scans the document, then with getElementbyId grabs the button by searching for its ID name "checkHoroscope" (the ID name being an attribute you may call any unique element on your site for the purpose of styling or manipulating said element). Then the event listener of .onclick is added after we have designated the button and we follow this with defining the function: document.getElementById("checkHoroscope").onclick = function() {

Anything that comes after the bracket, will be executed upon the click of the button. Immediately following the click of the button, I added the functionality of removing the button from view upon clicking it by adding the codes highlighted in lines 2-3 below.

document.getElementById("checkHoroscope").onclick = function() { 
document.querySelector('#checkHoroscope').style.visibility = 'hidden';
document.querySelector('#checkHoroscope').style.display = 'none';

These two codes are functioning similarly in the sense that we are using the Document Object Model to select which element we want to manipulate, in this case, I am instead using document.querySelector('#checkHoroscope') to designate the button as we want it to disappear. Now, since I want the button to disappear, I will use functionality of element.style.attribute after the designation so I can change the attributes of the Button’s CSS (and therefore allow it to disappear) after that event. Before the button is clicked, the original CSS attributes of the button are set so that its visibility is ‘visible’ and its display is ‘block’, as shown below:

#checkHoroscope{
  visibility:visible;
  display:block;

When the button is clicked, the attributes change to what I had assigned:

document.querySelector('#checkHoroscope').style.visibility = 'hidden';
document.querySelector('#checkHoroscope').style.display = 'none';


By setting the visibility = ‘hidden’;, we are telling the element to not appear. We have to additionally set the display = ‘none’; because otherwise a blank space would still appear where the content would be. When you set the display to none, neither the content or the space that it occupies will appear. This functionality came in hand as I was trying to figure out different wyas on how to include a slightly better user experience, which is a goal as not only a developer but as a graphic designer. In this instance, by creating a toggle for the button and room for the resulting content after it disappears, it helps to present a clearer path of action that is more aesthetically pleasing to the user.

This blog post is one of a series I will be doing on this ongoing Horoscope app project build – stay tuned to find out how I implemented if/else statements to display information based on user input and how I learned a shortcut that made my code cleaner but just as effective. I’m hoping to do some solo intensive Javascript refresher exercises the next few days to prepare for the Software Engineering immersive with General Assembly starting in a few weeks,–so I may be limited with time–but if I find some later this week I hope to get this Horoscope code both onto github into a repository and onto github pages with a custom domain. I also plan to start using an independent desktop editor for my code so I can ping version controls of this app to a real website and learn how to stage changes to the site before publishing. I have been using codepen.io for our projects as suggested by our Professor, but want to get comfortable using industry standard developer tools and workflows as soon as possible.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s