javascript - Why Won't The Card Expand?

Question

I was looking to include a responsive card template into my project and used one of the templates from CodePen to do this. However, when I copied the code from CodePen to my own platform, The card would not expand when I click on "click on expand" like it is unresponsive. But over here, the code runs fine, but not on the IDE I am using.

Where I got the whole code from initially: https://codepen.io/ryanparag/pen/EOBdOK

The HTML/CSS of the card:

/// dribbble
let dribbbleLink = 'https://dribbble.com/ryanparag';

const dribbble = () => {
  let styleRules = '<style> #dribbble { position: fixed; bottom: 15px; right: 15px;width: 100px;z-index: 100; } #dribbble a, #dribbble svg { display: block; } #dribbble svg{ width: 100%;fill: rgba(0, 0, 0, 0.25);} #dribbble svg:hover circle, #dribbble svg:focus circle{ fill: #ea4c89; } #dribbble svg:hover path, #dribbble svg:focus path{ fill: #C32361; }</style>';
  let styleContainer = document.createElement('div');
  styleContainer.innerHTML = styleRules;
  document.head.appendChild(styleContainer);
  let logoHTML = `
        <a href=` + dribbbleLink + ` target="_blank">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
                <rect width="32" height="32" fill="black" fill-opacity="0"/>
                <circle cx="16" cy="16" r="15.5"/>
                <rect width="32" height="32" fill="black" fill-opacity="0"/>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16703 0 0 7.16703 0 16C0 24.833 7.16703 32 16 32C24.8156 32 32 24.833 32 16C32 7.16703 24.8156 0 16 0ZM26.5683 7.37527C28.4772 9.70065 29.6226 12.6681 29.6573 15.8785C29.2061 15.7918 24.6941 14.872 20.1475 15.4447C20.0434 15.2191 19.9566 14.9761 19.8525 14.7332C19.5748 14.0738 19.2625 13.397 18.9501 12.7549C23.9826 10.7072 26.2733 7.75705 26.5683 7.37527ZM16 2.36009C19.4707 2.36009 22.6464 3.66161 25.0586 5.7961C24.8156 6.14317 22.7505 8.90239 17.8915 10.7245C15.6529 6.61171 13.1714 3.24512 12.7896 2.72451C13.8134 2.48156 14.8894 2.36009 16 2.36009ZM10.1866 3.64425C10.551 4.13015 12.9805 7.5141 15.2538 11.5401C8.86768 13.2408 3.22777 13.2061 2.62039 13.2061C3.50542 8.9718 6.36876 5.44902 10.1866 3.64425ZM2.32538 16.0174C2.32538 15.8785 2.32538 15.7397 2.32538 15.6009C2.9154 15.6182 9.54447 15.705 16.3644 13.6573C16.7636 14.4208 17.128 15.2017 17.4751 15.9826C17.3015 16.0347 17.1106 16.0868 16.9371 16.1388C9.89154 18.4121 6.14317 24.6247 5.8308 25.1453C3.6616 22.7332 2.32538 19.5228 2.32538 16.0174ZM16 29.6746C12.8416 29.6746 9.92625 28.5987 7.61822 26.7939C7.86117 26.2907 10.6377 20.9458 18.3427 18.256C18.3774 18.2386 18.3948 18.2386 18.4295 18.2213C20.3557 23.2017 21.1367 27.3839 21.3449 28.5813C19.6963 29.2928 17.8915 29.6746 16 29.6746ZM23.6182 27.3319C23.4794 26.4989 22.7505 22.5076 20.9631 17.5965C25.2495 16.9197 28.9978 18.0304 29.4664 18.1866C28.8764 21.987 26.6898 25.2668 23.6182 27.3319Z"/>
            </svg>
        </a>`;

  let logo = document.createElement('div');
  logo.id = 'dribbble';
  logo.innerHTML = logoHTML;

  document.body.appendChild(logo);
};
dribbble();console.clear();

const article = [
{ text: 'When Pharrell Williams appeared on BET's 106 & Park in 2004, he excitedly declared that Dilla was his favorite producer and told an audibly stumped crowd that it had probably never heard of the man. At the time, Dilla had been active for well over a decade and had netted enough beats -- including the Pharcyde's "Runnin'," De La Soul's "Stakes Is High," Common's "The Light," and several others with production teams the Ummah and the Soulquarians -- to be considered an all-time great.' },
{ text: 'Dilla never produced a mainstream smash and, in many cases, his presence has to be confirmed with a liner notes scan. (And even then, that might not help; he occasionally went uncredited.) He never marked his territory like Just Blaze ("Just Blaze!") or Jazze Pha ("This is a Jazze Phizzle produc-shizzle!"), and he never hogged the mike like P. Diddy. He let his music, and its followers, do the talking. Rather than provide immediate (or fleeting) thrills, he was hooked on working the subconscious as much as the neck muscles. He was so focused on his work that it took a severe toll on his health.' },
{ text: 'Born and raised on the east side of Detroit, Dilla -- James Yancey -- was forced by his parents to become involved with music, and he was a record fanatic at a young age, absorbing funk and rap singles and jazz albums, from Slave to Jack McDuff. He learned to play cello, keyboards, trumpet, and violin, but drums got him like nothing else. He tried his hand at producing tracks on a tape deck by using the pause and record buttons, and he also took up MC'ing. In 1988, he formed Slum Village with Pershing High School friends Baatin and T3. It wasn't until 1992, after receiving some valuable guidance from fellow Detroiter Amp Fiddler, that his talent really began to take shape.' },
{ text: 'A session keyboardist who had worked with Prince, Parliament, and Enchantment, Fiddler taught Dilla how to use the MPC drum machine. To say that Dilla was a quick study would be an understatement. Fiddler introduced his protégé to A Tribe Called Quest's Q-Tip, who heard some of Slum Village's material, liked it, and helped get the word out. Following sessions with First Down (a collaboration with Phat Kat, another Detroiter), Little Indian, and alternative rocker Poe, Dilla's production career reached full flight. In 1996 alone, he worked with Busta Rhymes, De La Soul, and the Pharcyde, all the while playing a major role in the Ummah with Q-Tip and Ali Shaheed Muhammad. (He did extensive work on Tribe's last two albums.) Before long, hardcore hip-hop fans began to know Dilla for his steady wobble, which was unfailingly musical and rich in details -- shuffling hi-hats, oddly placed handclaps, spacious drum loops with drastically reshaped samples of tracks both obscure and obvious.' },
{ text: 'Through the remainder of the '90s, Dilla quietly racked up more output, including Janet Jackson's "Got 'Til It's Gone" (for which he did not receive credit), additional tracks for the Pharcyde, and collaborative work with Q-Tip on all of 1999's Amplified. Largely upbeat and filled with boisterous energy and thick sounds, Amplified is one of many pieces of evidence against the argument that Dilla was about one sound and one style. During the producer's steady rise, Slum Village remained a priority. Fantastic, Vol. 2 and Best Kept Secret (the latter credited to J-88, an SV pseudonym) were released within weeks of each other in 2000. However, the producer would only contribute a few tracks to the group from then on, as his schedule became increasingly tight. As a core member of the Soulquarians, with James Poyser and the Roots' Ahmir "?eustlove" Thompson, Dilla worked on Common's Like Water for Chocolate, D'Angelo's Voodoo, Erykah Badu's Mama's Gun, and Talib Kweli's Quality. Through 2005, he continued to work with past associates while dipping his toes deeper in R&B. A favor was returned on Fiddler's 2004-released Waltz of a Ghetto Fly, and a couple dynamite tracks -- Steve Spacek's "Dollar" and longtime collaborator Dwele's "Keep On" -- were released the following year.' },
{ text: 'Amazingly, from 2001 on, Dilla was also a prolific solo artist. A couple singles and the Welcome 2 Detroit album came out in 2001, and a number of low-key instrumental compilations and incidental 12" singles followed shortly thereafter. Rarely praised for his mike skills, he was often assisted by the likes of Phat Kat, Lacks, and Frank-n-Dank. Wooed by a Madlib mixtape that featured the rhymes of Oxnard's finest over his own beats, Dilla forged an alliance with his admirer for 2003's Champion Sound, released under the name Jaylib. It was around this time that his health took a sharp decline. For over two years, he had to use a dialysis machine. Despite having to perform in a wheelchair, he was still able to tour in Europe during late 2005.' },
{ text: 'Donuts, an album of instrumentals that Dilla completed during one of his extended hospital stays, was released on February 7, 2006, his 32nd birthday. Three days later, while staying at his Los Angeles home with his mother, Maureen "Ma Dukes" Yancey, he passed away, a victim of cardiac arrest. While reflecting on the tremendous loss, close colleague and friend Thompson (an authority if there ever was one) compared the producer's level of genius to that of jazz giant Charlie Parker. Karriem Riggins, a close associate, put the final touches on another album, The Shining, which was released six months later.' },
{ text: 'A dizzying quantity of posthumous albums, EPs, and singles, most notably a greatly expanded edition of the Ruff Draft EP, were issued throughout the decade that followed. In 2014, Dilla's mother, who was involved in many of those releases, donated her son's MPC and Minimoog Voyager synthesizer to the Smithsonian's National Museum of African American History and Culture. The Diary of J Dilla, which originated as an early-2000s project for MCA, saw release in 2016. MCA had signed Dilla for his reputation as a beat maker, but Dilla confounded the major label by switching to MC mode and enlisting the likes of comrades House Shoes, Waajeed, Madlib, and Pete Rock as producers. After an extended period that entailed major legal obstacles and the recovery of recordings, the album was released in 2016 on the reactivated Pay Jay label through Mass Appeal. Yet another poshumous release arrived in 2017. Titled Motor City, that set consisted of previously unreleased instrumentals selected and sequenced by Maureen Yancey.' }];


const expandArticle = () => {
  for (var i = 0; i < article.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    const newText = document.createElement('p');
    newText.innerHTML = article[i].text;
    document.querySelector('#article').appendChild(newText);
  }window.CP.exitedLoop(0);
};

const constrictArticle = () => {
  const article = document.getElementById('article');
  const paragraphs = document.querySelectorAll('#article p');
  while (article.lastChild.id !== 'intro') {if (window.CP.shouldStopExecution(1)) break;
    article.removeChild(article.lastChild);
  }window.CP.exitedLoop(1);
};

document.querySelector('.card__expand').addEventListener('click', function () {
  document.querySelector('.card').classList.add('is-expanded');
  this.style.display = 'none';
  document.querySelector('.card__constrict').style.display = 'block';
  expandArticle();
});

document.querySelector('.card__constrict').addEventListener('click', function () {
  document.querySelector('.card').classList.remove('is-expanded');
  this.style.display = 'none';
  document.querySelector('.card__expand').style.display = 'block';
  constrictArticle();
});

@import url("https://fonts.googleapis.com/css?family=Work+Sans:400,700");
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background: whitesmoke;
  color: rgba(0, 0, 0, 0.54);
  display: flex;
  justify-content: center;
  font-family: "Work Sans", sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  color: rgba(0, 0, 0, 0.87);
}

p {
  line-height: 1.6;
}
p.card__intro {
  color: rgba(0, 0, 0, 0.87);
}

.overlay {
  position: absolute;
  top: 0;
  le

Answer 1

You're referencing javascript with the wrong tag.

Javascript should be referenced with a <script> tag, not with the <link> tag

Replace this line:

<link href="script.js" rel="stylesheet" type="text/css" />

With this line:

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

It worked here and in codepen site, because both are not using a reference to the javascript, they are "creating one".

EDIT: To avoid the following error in the repl.it site:

TypeError: Cannot read property 'appendChild' of null
    at dribbble (/script.js:23:17)
    at /script.js:25:1

You will also need to wait the page load to execute the JS, you can do it putting the JS inside this event listener:

document.addEventListener("DOMContentLoaded", function(event) { // your entire js code here });

If you don't use it there you will get an error.