Skip to content

Instantly share code, notes, and snippets.

@acidtone

acidtone/README.md

Last active October 24, 2021 15:47
Show Gist options
  • Save acidtone/8ceabb3fbd269f9689925946f562f14a to your computer and use it in GitHub Desktop.
Save acidtone/8ceabb3fbd269f9689925946f562f14a to your computer and use it in GitHub Desktop.
Download ZIP
Refactoring Activity: Refactor embedded js and css to external files
Raw
README.md

Refactoring Activity: Embedded JS/CSS to eternal files

The goal of this activity is to move the embedded Javascript and CSS in index.html to external files without breaking the page.

Instructions

  1. Download or fork/clone this Gist into your workspace.
  2. Move the Javascript currently in the script element to an external file called script.js. Delete the now empty script element.
  3. In index.html, link to this new Javascript file by adding a new script element in the head of the HTML file.
    • Use the src attribute to relatively link to the new Javascript file you just created.
    • Add an attribute of defer to the script element. This ensures that the Javascript loads after the DOM has loaded (this is the same as putting the script at the bottom of the page).
  4. Test the page to make sure it still functions normally (colours should change when you click the button).
  5. Move the CSS currently in the style element to an external file called styles.css. Delete the now empty style element.
  6. In index.html, link to this new Javascript file by adding a new link element in the head of the HTML file.
    • Use the href attribute to relatively link to the new CSS file you just created.
    • Add an attribute of rel="stylesheet" so browser knows how to properly load the CSS file.
  7. Test the page to make sure it still functions normally (colours should change when you click the button).

Spoilers

Coming soon.

Raw
index.html
<!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>Refactoring Activity</title>
<style>
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:root {
--hue: 0;
--hue2-deflect: 30;
--hue3-deflect: 60;
--hue4-deflect: 180;
}
body {
--auto-hue2: calc(var(--hue) + var(--hue2-deflect, 0));
--auto-hue3: calc(var(--hue) + var(--hue3-deflect, 0));
--auto-hue4: calc(var(--hue) + var(--hue4-deflect, 0));
}
body {
--lum-super-light: 95%;
--clr-hbg: hsl(var(--hue), 30%, 97%);
--clr-h: hsl(var(--auto-hue2), 100%, 10%);
--clr-border: hsl(var(--auto-hue3), 60%, 60%);
--clr-bbg: hsl(var(--auto-hue4), 70%, 60%);
margin: 0;
min-height: 85vh;
background-color: var(--clr-bbg);
display: flex;
}
main {
display: flex;
margin: auto;
}
button {
font-variant: small-caps;
text-align: center;
font-weight: normal;
font-size: 8vmin; /* Ugh. IE, Safari... Safari!?! */
font-size: clamp(5vmin, 8vmin, 64px);
padding: 2rem;
border-color: var(--clr-border);
background-color: var(--clr-hbg);
color: var(--clr-h);
border-width: 1vmin;
border-style: solid;
border-radius: 3rem;
}
@media screen and (min-width: 960px) {
body {
min-height: 100vh;
}
}
</style>
</head>
<body>
<main>
<button>Randomize Colours</button>
</main>
<script>
const colour = {
setRandomHue: function() {
const newHue = Math.floor(Math.random() * Math.floor(360));
document.querySelector(':root').style.setProperty('--hue',newHue);
const hue = document.getElementById('hue');
if (hue instanceof Element) {
hue.value = newHue;
}
}
}
colour.setRandomHue();
document.querySelector('button').addEventListener('click', colour.setRandomHue);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment