Coding Challenge: Change the CSS Style Sheet Using JavaScript - SOLUTION

Coding Challenge: Change the CSS Style Sheet Using JavaScript - SOLUTION

Below is a solution to the Change the CSS Style Sheet Using JavaScript coding challenge that I posted earlier this month.


There are many possible solutions to this coding challenge. The solution shown in the example below is only one possible option.

There were several errors in the original coding challenge:

  1. The id for the link tag on line 7 and the id selected on line 42 should have matching capitalization (mainStyles v. mainstyles).
  2. The anchor tags in lines 21-26 are not closed properly (</a> instead of <a>).
  3. The button id for the "Wild" button should be "wild" and not "experiment" in order to match the rest of the code.
  4. A quotation mark is missing from the getElementById method on line 42.
  5. The cleanBtn variable is used on line 50, but is not defined in the code.
  6. The variable named at the top of the switch statement should be called "stylesheet" and not "style."
  7. The second case in the switch statement is missing a colon.
  8. The expBtn variable in line 58 should be called wildBtn.
  9. A comma is missing from the addEventListener method on line 63.
  10. A semicolon is missing at the end of line 64.
  11. All instances of the getElementById() method are written as getElementByID(), which has incorrect capitalization.
  12. Extra lines of code need to be added to each case of the switch statement to remove the classes from the buttons that are not selected.
  13. The changeCSS() function needs to be called when the page is first loaded in order to select the current style sheet.

Download Completed Project Files View Completed Project

Coding Challenge: Change the CSS Style Sheet Using JavaScript

Coding Challenge: Change the CSS Style Sheet Using JavaScript

For this coding challenge, you will be given pre-existing code that you will need to edit in order to make it functional.

The Scenario

You have begun a new internship in web design this week. Your supervisor has decided that he would like to assess your current JavaScript skills. He decides to have you work on an unfinished project made by a previous intern. The project is nearly finished, but has some serious errors in functionality and layout. Your supervisor is aware of these issues and would like to see if you can fix them.

He sends you the files and this list of requirements for the project:

  1. When page loads, it should use the clean-and-classic-styles.css sheet.
  2. Clicking one of the buttons in the "Choose a Style" section should change the current CSS style sheet to one of the other two style sheets.
  3. The left navigation should take up a quarter of the width of the page in desktop mode and 100% of the width on mobile devices.
  4. The "Choose a Style" section should take up 3/4 of the width of the page in desktop mode.
  5. The footer information should display at the bottom of the page.
  6. The button that represents the current style sheet in use should look visually different than the other two buttons. This should also happen on the initial page load.
  7. Each time the style changes, the page should display a different header image. Your supervisor believes that the last intern had achieved this using CSS styles, but had not chosen header images yet.

Download Project Files   View Current Project State

Good luck on your coding challenge! View the coding challenge solution

2017 IT Skills and Salary Survey – Extended to November 18

2017 IT Skills and Salary Survey – Extended to November 18

If you haven’t completed the IT Skills and Salary Survey for 2017, don’t worry! The deadline has been extended until Friday, November 18. Please visit the Global Knowledge’s survey webpage at

Global Knowledge and CIW invite you to be part of one of the industry's most extensive studies of salary trends, in-demand skills and popular certifications for IT and business professionals. Last year, more than 14,000 people worldwide responded to the survey.

Your valuable feedback will be compiled in an annual report that is used by working professionals, top IT vendors and hiring managers. The Global Knowledge IT Skills and Salary Survey will take about 10 to 15 minutes to finish, and you’ll receive an advance copy of the report when it’s published in the spring.

Complete the survey by Nov. 18 to be entered in a random drawing to win one of six $250 American Express gift cards.

Close Window