acidtone

Hello Vanilla Challenges

• Hello Vanilla starter code.

Challenges by spiciness

Mild

• Move css, javascript and image files to dedicated directories.
• Move "count is" text from counter.js to index.html.
• Replace <img> logos with inline svg.
• Refactor colour hex codes to hsl().
• Change the dark mode setting of the page by changing your OS system preference.

acidtone

Hello Vanilla

Welcome to a Hello Vanilla, a starter web app built with vanilla HTML, CSS and Javascript.

• Challenges

Attributions

• This code is based on Vite Vanilla install.
• The following SVGs were cleaned with SVG OMG
  • HTML 5 Logo
  • CSS Logo
• JS Logo

acidtone

JS Activity: Object Value Treasure Hunt

Given the following Javascript objects, find the instructions in each file's comments and log individual values to the console using dot and bracket notation.

Related resources on MDN

• Object basics
• Property Accessors
  • Dot Notation
  • Bracket notation

Attributions

acidtone

JS Activity: Refactor into pure functions

The following files contain code that runs in the global scope of the file on hard-coded variables. Refactor each of these files so that the code is reusable and portable using a pure function.

Pure function

A function that takes arguments as the only inputs and returns the result as its only output. Pure functions don't make any changes to variables outside of the function or store internal variables as state (aka. side-effects).

Instructions

For ONE of the .js files in this Gist, refactor the following code into a function so that it:

acidtone

JS Activity: Object-oriented Treasure Hunt

Given the following Javascript objects, log individual values using dot and bracket notation.

Related resources on MDN

• Object basics
• Working_with_Objects
• Property Accessors
  • Dot Notation
  • Bracket notation

acidtone

JS Activity: Bug hunt - syntax errors

Overview

The code in script.js has syntax errors. Hunt them down and fix them!

Instructions

1. Run the code in script.js (see below);
2. Check the console/terminal for errors;
3. Find the line number of the error;
4. Using your knowledge of js variables, fix the problems so the file runs without error.

acidtone

VS Code: Setting up the Debugger

The VS Code Debugger can be tricky to work with until you set it up. There are a lot of options but the following code will allow you to run individual files:

Instructions

1. Open the Run and Debug panel in VS Code;
2. Create a launch.json file if one doesn't already exist;
3. Add a "Run Current File" configuration by adding it to your launch.json file:

{

acidtone

Flexbox Navigation Examples

A Pen by Tony Grimes on CodePen.

License.

acidtone

Test Page for .md

Code Highlighting

// JavaScript goes here,
// And will be syntax-highlighted!
const message = 'Hello World';

---

acidtone

Create Skeleton Sveltkit app

Instructions heavily based on this article.

Starting from scratch

1. Create project:

   npm init svelte@next app-name

   • Choose Skeleton App

• Default: say no to the options (or not)