/paminfo-open-lab-event

Primary LanguageCSS

PaM Informatics - Interactive Open Lab Workshop

Welcome to your interactive Software Developer Workshop! Please follow the instructions below:

Requirements

  1. Have Node.js installed.

  2. Clone the repository:

git clone https://github.com/sanger-pathogens/paminfo-open-lab-event.git

  1. Install VSCode:

  2. Open your project in VSCode and install the suggested Svelte plugin.

  3. Run the following in your integrated terminal:

npm install
npm run dev
  1. Visit http://localhost:3000 to see your changes locally/live

Important

The files you will need to edit are:

  • src/routes/ExerciseOne.svelte
  • src/routes/ExerciseTwo.svelte
  • src/routes/ExerciseThree.svelte

There is no need to explore the rest of the repository contents.

Follow the instructions you see on: http://localhost:3000

Exercises

  1. Onclick event
  • Create a button which displays a "Hello World" message each time the button gets clicked (either as via console log or alert)
  • Change the style of your button: e.g. make the background black/the text white
  1. Fix the bug
  • A 'file_format' object is being imported from ./constant_store.svelte, but is not properly displaying "name" property values. Troubleshoot the issue so that instead of "undefined", you see the correct object values, meaning:
FASTA
FASTQ
BAM
SAM
VCF
GFF
  1. Create and Populate a table
  • Using the imported file_format object, display all of the object properties/property values in a table. The style for the table element has already been provided in src/routes/+page.svelte.

Useful links