Personal Portfolio Website

Hi. I’m currently doing the “Personal Portfolio Project” on the Full-Stack Engineer skill path (https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fecp-html-css-and-js-portfolio-project/modules/fecp-personal-portfolio-website/kanban_projects/portfolio-website ). I’ve almost finished the project, however, there’s one issue I can’t resolve. I’ve tried lots of different solutions and none seem to work.

I’m having issues with toggling the dark mode. Whatever fix I try, for some reason it will not change the text in the header (see below screenshot).

Please find my code below too.

<!DOCTYPE html>
<html lang='en'>

<head>
    <title>My Portfolio</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/2beacff43a.js" crossorigin="anonymous"></script>
</head>

<body>
    <script src="script.js"></script>

    <div class="nav-container">
        <header>
          <a href="index.html" class="logo">Matthew Smith</a>
            <nav>
                <ul class="navigation">                           
                    <li><a href="index.html">About Me</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#skills">Skills</a></li>
                    <li><a href="contact.html">Contact</a></li>                              
                </ul>
            </nav>
        </header>
    </div>  

    <div class="content">
    <div class="about-me">
    <aside>
        <img src="Images/photo-of-me.jpg" alt="Photo of Matthew Smith">
    </aside>        
    <h2>About Me</h2>
        <br>
        <p>Hi! I'm Matthew, Since I was young, I have always had a passion for helping other people. I studied Biomedical Science at university, and I translated this passion into working in the product safety departments of three major companies.</p>
        <br>
        <p>However, recently I’ve been investigating the long-term direction my career should take. As part of this research, I took YouScience aptitude tests, and performed very strongly in skills related to computing, a career direction I had never considered before.</p>
        <br>
        <p>To test whether this was suited to me, I started a beginners’ Python programming course, and have really enjoyed it and confidently succeeded in the assignments. I then started Codecademy's Full-Stack Engineer programming course and have been making huge progress.</p>
        <br>
        <p>I'm currently seeking a junior full-stack developer position because it will enable me to change career direction to my new-found love for software and programming, which I can then combine with my passion for helping other people by developing software for their benefit.</p>
        <br>
    </div>

    <div class="projects">
    <h2>Projects</h2>
    <div class="dropdown">
        <div id="Mixed_Messages">
            <details>
                <summary>Mixed Messages</summary>
                <p>For this project, I built a message generator program. Every time a user runs a program, they get a new, randomized output of three different jokes.</p>
            </details>
        </div>
        <div id="Tuples">   
            <details>
                <summary>Tuples</summary>
                <p>I wrote a program to read through a massive .txt file and figure out the distribution by hour of the day for each of the messages. Once I accumulated the counts for each hour, I printed out the counts, sorted by hour.</p>
            </details>                    
        </div>  
    </div>                
    </div>
    <br>

    <div class="skills">
    <h2>Skills</h2>
    <br>
    <div class="icons">
        <i class="fab fa-html5"></i>
        <i class="fab fa-css3-alt"></i>
        <i class="fab fa-js"></i>
        <i class="fab fa-python"></i>
        <i class="fab fa-git"></i>
        <i class="fab fa-github"></i>
    </div>
    </div>

    <button onclick="toggleDarkMode()" id="toggle_dark_mode">Toggle Dark Mode</button>
    </div>

</body>
</html>
/*RESET STYLES*/

* {
    margin: 0;
    padding: 0;
}

/*GLOBAL STYLES*/

html {
    font-family: "Open Sans", Helvetica, sans-serif;
    line-height: 1.4;
}

body {
    background-color: whitesmoke;
    max-width: 960px;
    margin: auto;
    padding: 20px;
}

.dark-mode {
    background-color: #333333;
    color: whitesmoke;
}

/*NAVIGATION BAR STYLES*/

header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-top: 2em;
    padding-right: 2em;
    padding-bottom: 2em;
    padding-left: 0em;
    border-style: solid;
    border-color: blue;    
}
  
header .logo {
    color: black;
    font-weight: bold;
    padding-top: 10px;
    padding-right: 12px;
    padding-bottom: 10px;
    padding-left: 0px;
    margin: 0px;
    float: left;
    border-style: solid;
    border-color: red;
}

.logo {
    font-size: 32px;
    text-decoration: none;
}
  
header nav {
    float: right;
}
  
header nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style-type: none;
}
  
header nav ul a {
    display: block;
    padding: 2em 1em;
    font-weight: bold;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
    color: black;
    border-style: solid;
    border-color: green;
}
    
.navigation a:hover {
    opacity: 0.7;
    background-color: black;
    color: whitesmoke;
    text-decoration: none;
}

/*BODY STYLES*/

img {
    border-radius: 25px;
}

aside {
    padding-left: .5rem;
    margin-left: .5rem;
    float: right;
    height: 100vh;
}

.about-me, .projects, .skills {
    display: block;
}

details > summary {
    border: none;
    margin-top: 17px;
    margin-bottom: 17px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

#toggle_dark_mode {
    border: 2px solid black;
    padding: 0.2em;
}

.icons {
    font-size: 2em;
}

i {
    padding-right: 0.5em;
}

button {
    border: none;
    display: list-item;
    list-style-type: disc;
    margin-top: 17px;
    margin-bottom: 17px;
    background-color: whitesmoke;
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
}
<!DOCTYPE html>
<html lang='en'>

<head>
    <title>My Portfolio</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="contact-style.css">
    <script src="https://kit.fontawesome.com/2beacff43a.js" crossorigin="anonymous"></script>
</head>

<body>
    <script src="script.js"></script>
    <div class="nav-container">
    <header>
        <a href="index.html" class="logo">Matthew Smith</a>
          <nav>
              <ul class="navigation">
                  <li><a href="index.html">About Me</a></li>
                  <li><a href="#projects">Projects</a></li>
                  <li><a href="#skills">Skills</a></li>
                  <li><a href="contact.html">Contact</a></li>
              </ul>
          </nav>
      </header>
     </div>

    <h2>About Me</h2>
    <br>
    <p>If you would like to get in contact, I would love to hear from you! Please contact me using LinkedIn, GitHub or email using the links below:</p>
    <br>

    <div class="icons">
        <i class="fab fa-linkedin"></i>
        <i class="fas fa-envelope-square"></i>
        <i class="fab fa-github"></i>
    </div>

    <button onclick="toggleDarkMode()" id="toggle_dark_mode">Toggle Dark Mode</button>

</body>
</html>
/*RESET STYLES*/

* {
    margin: 0;
    padding: 0;
}

/*GLOBAL STYLES*/

html {
    font-family: "Open Sans", Helvetica, sans-serif;
    line-height: 1.4;
}

body {
    background-color: whitesmoke;
    max-width: 960px;
    margin: auto;
    padding: 20px;
}

.dark-mode {
    background-color: #333333;
    color: whitesmoke;
}

/*NAVIGATION BAR STYLES*/

header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding:2em;
}
  
header .logo {
    color: black;
    font-weight: bold;
    padding: 10px 12px;
}

.logo {
    font-size: 32px;
    text-decoration: none;
    border-style: solid;
    border-color: red;
}
  
header nav {
    float: right;
}
  
header nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style-type: none;
}
  
header nav ul a {
    display: block;
    padding: 2em 1em;
    font-weight: bold;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
    color: black;
}
    
.navigation a:hover {
    opacity: 0.7;
    background-color: black;
    color: whitesmoke;
    text-decoration: none;
}

/*BODY STYLES*/

.about-me, .projects, .skills {
    display: block;
}

button {
    border: none;
    display: list-item;
    list-style-type: disc;
    margin-top: 17px;
    margin-bottom: 17px;
    background-color: whitesmoke;
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
}

#toggle_dark_mode {
    border: 2px solid black;
    padding: 0.2em;
}

.icons {
    font-size: 2em;
}

i {
    padding-right: 0.5em;
}
  function toggleDarkMode() {
    var element = document.body;
    element.classList.toggle("dark-mode");
    var logoName = document.getElementsByTagName("HEADER");
    logoName.classList.toggle("dark-mode");
  }
<button onclick="toggleDarkMode()" id="toggle_dark_mode">Toggle Dark Mode</button>

That won’t work. You’re calling a function in an HTML file. You should have your script tag, before your body’s closing tag and have a toggle button function in your Js file.

It also seems like in your function toggleDarkMode( ) you're targeting "dark-mode" instead of the i.d you gave it in the button element, which would be #toggle_dark_mode

I tried moving the script tag and it still didn’t work.

The #toggle_dark_mode ID was just to give the box a border because I was worried it would change and become invisible when I chose dark mode. However, I realised it wasn’t doing anything, so I have removed it.

Please find my updated code below (I’ll just include the code for the first page).

The code still isn’t working. I tried some different things with the Javascript code and nothing worked. I think it might be something to do with the specificity, because the background of the header is changing, just not the text colour itself.

<!DOCTYPE html>
<html lang='en'>

<head>
    <title>My Portfolio</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/2beacff43a.js" crossorigin="anonymous"></script>
</head>

<body>
        <header>
          <a href="index.html" class="logo">Matthew Smith</a>
            <nav>
                <ul class="navigation" id="wholeHeader">                           
                    <li><a href="index.html">About Me</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#skills">Skills</a></li>
                    <li><a href="contact.html">Contact</a></li>                              
                </ul>
            </nav>
        </header>

    <div class="content">
    <div class="about-me">
    <aside>
        <img src="Images/photo-of-me.jpg" alt="Photo of Matthew Smith">
    </aside>        
    <h2>About Me</h2>
        <br>
        <p>Hi! I'm Matthew, Since I was young, I have always had a passion for helping other people. I studied Biomedical Science at university, and I translated this passion into working in the product safety departments of three major companies.</p>
        <br>
        <p>However, recently I’ve been investigating the long-term direction my career should take. As part of this research, I took YouScience aptitude tests, and performed very strongly in skills related to computing, a career direction I had never considered before.</p>
        <br>
        <p>To test whether this was suited to me, I started a beginners’ Python programming course, and have really enjoyed it and confidently succeeded in the assignments. I then started Codecademy's Full-Stack Engineer programming course and have been making huge progress.</p>
        <br>
        <p>I'm currently seeking a junior full-stack developer position because it will enable me to change career direction to my new-found love for software and programming, which I can then combine with my passion for helping other people by developing software for their benefit.</p>
        <br>
    </div>

    <div class="projects">
    <h2>Projects</h2>
    <div class="dropdown">
        <div id="Mixed_Messages">
            <details>
                <summary>Mixed Messages</summary>
                <p>For this project, I built a message generator program. Every time a user runs a program, they get a new, randomized output of three different jokes.</p>
            </details>
        </div>
        <div id="Tuples">   
            <details>
                <summary>Tuples</summary>
                <p>I wrote a program to read through a massive .txt file and figure out the distribution by hour of the day for each of the messages. Once I accumulated the counts for each hour, I printed out the counts, sorted by hour.</p>
            </details>                    
        </div>  
    </div>                
    </div>
    <br>

    <div class="skills">
    <h2>Skills</h2>
    <br>
    <div class="icons">
        <i class="fab fa-html5"></i>
        <i class="fab fa-css3-alt"></i>
        <i class="fab fa-js"></i>
        <i class="fab fa-python"></i>
        <i class="fab fa-git"></i>
        <i class="fab fa-github"></i>
    </div>
    </div>

    <button onclick="toggleDarkMode()">Toggle Dark Mode</button>
    </div>

    <script src="script.js"></script>

</body>
</html>
/*RESET STYLES*/

* {
    margin: 0;
    padding: 0;
}

/*GLOBAL STYLES*/

html {
    font-family: "Open Sans", Helvetica, sans-serif;
    line-height: 1.4;
}

body {
    background-color: whitesmoke;
    max-width: 960px;
    margin: auto;
    padding: 20px;
}

/*NAVIGATION BAR STYLES*/

header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-top: 2em;
    padding-right: 2em;
    padding-bottom: 2em;
    padding-left: 0em;
    border-style: solid;
    border-color: blue;    
}
  
header .logo {
    color: black;
    font-weight: bold;
    padding-top: 10px;
    padding-right: 12px;
    padding-bottom: 10px;
    padding-left: 0px;
    margin: 0px;
    float: left;
    border-style: solid;
    border-color: red;
}

.logo {
    font-size: 32px;
    text-decoration: none;
}
  
header nav {
    float: right;
}
  
header nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style-type: none;
    border-style: solid;
    border-color: yellow;
}
  
header nav ul a {
    display: block;
    padding: 2em 1em;
    font-weight: bold;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
    color: black;
    border-style: solid;
    border-color: green;
}
    
.navigation a:hover {
    opacity: 0.7;
    background-color: black;
    color: whitesmoke;
    text-decoration: none;
}

/*BODY STYLES*/

img {
    border-radius: 25px;
}

aside {
    padding-left: .5rem;
    margin-left: .5rem;
    float: right;
    height: 100vh;
}

.about-me, .projects, .skills {
    display: block;
}

details > summary {
    border: none;
    margin-top: 17px;
    margin-bottom: 17px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

.icons {
    font-size: 2em;
}

i {
    padding-right: 0.5em;
}

button {
    border: 2px solid black;
    padding: 0.2em;
    display: list-item;
    list-style-type: disc;
    margin-top: 17px;
    margin-bottom: 17px;
    background-color: whitesmoke;
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
}

/*DARK MODE*/

.dark-mode {
    background-color: #333333;
    color: whitesmoke;
}
  function toggleDarkMode() {
    var element = document.body;
    element.classList.toggle("dark-mode");
  }

Hi,

Whilst @raulways is correct and that it is best to declare scripts before the body closing tag, this wasn’t causing the error.

If you inspect the page, the ‘.logo’ and other header text elements have their color assigned already:
image
This will over-rule anything that is assigned to the body.
Therefore, you need to remove this line of code.

Note that this will mean that the header text is blue because it is a link.
I solved this by giving the header logo an id value as well:

<header>
  <a id="logo" class="logo norm" href="index.html">Matthew Smith</a>
</header>

Note there is also a ‘norm’ class. This is to keep the link color black when on a white background:
image
Next, I changed the JavaScript so that when the button is pressed, it switches between the classes:

let logo = document.getElementById("logo");

if (logo.classList.contains("norm") === true){
  logo.classList.remove("norm");
  logo.classList.toggle("dark-mode");
} else {
  logo.classList.remove("dark-mode");
  logo.classList.toggle("norm");
}

That should work!

Hope that helps!

2 Likes

@bcoding21, this has worked! Thank you so much!

I applied the same logic to my anchor tags and got them to change colour too. Thank you so much again, I’ve been struggling to get it to work for weeks! :grinning: