Laisha 'L' Jordan

Year 2

I had a few modules in which I learned website and web app programming:

  • Website Development 1
  • Web Design & Development
  • Web App Development

Website Development 2

This module helped me to learn more HTML, classes, arrays, mathematics in coding, event listeners, query selectors createElement and innerHTML.

Assignments

Assignment 1 - Building a Quiz with JavaScript
Assignment 2 - Adding JavaScript to Previously made Website

Labs

Lab 1
Mathematical Calculations 1 Making the code add, subract, multiply and divide numbers
Prompt Box Making a prompt box and printing the input within a sentence
Learning Types of Variables Types of Variables
Concatenation Concatenating two words and printing to screen
Loops Using loops and counting the average
Switch & Case Learning switch and case to give corresponding information to an input number
Lab 2
Manipulating Strings 1 Extracting the first and last character from an input
Manipulating Strings 2 Finding the length of an input and the position of specific characters
Manipulating Strings 3 Splitting information, calculating it and outputing it in a new format
Manipulating Strings 4 Using .substring
Getting a Date Getting and outputting the date using a new Date object
Mathematical Calculations 2 More maths equations and printing to table

Lab 3
Arrow Functions Using arrow functions to print to the console
Functions Using functions to print input information to console
Mathematical Calculations 3 Calculating with two inputs
forEach Using forEach
Numerical Arrays Printing different loops from a numerical array to the screen
String Arrays Printing different sets of information to the screen from a string array
Lab 4
JSON Array 1 Outputting a JSON array
JSON Array 2 Outputting a piece of information from a JSON array
Arrays Outputing Array Information Based on a Condition
Calculation Array Numbers Turning an array of people and test scores into a readable list

Lab 5
Adding Classes Learning to use JavaScript to add classes to information
Event Listeners 1 Allowing user to input their name by clicking a button with event listeners
Query Selectors 1 Selecting Information with Query Selectors
Event Listeners 2 Using event listener to change appearances
Query Selectors 2 Adding Classes with Query Selectors
Lab 6
Query Selectors 3 Adding Information with Query Selectors
Query Selectors 4 Moving Information with Query Selectors
Read More Buttons Making read more/ read less buttons
createElement and innerHTML Making a to-do list with createElement and innerHTML

Website Design & Development

In this module, I learned more about how to build a website better so it is picked up in a browser properly as well as more about how to structure a website.

Website Assignment
  • This website was made with the intention of promoting a college course.
  • I made it with a very simple design that is not commonly used because my main objective was to make it less overwhelming for students trying to figure out what they want to do in life.
  • It is fully based off a design document I made as a plan.

One a previous project like this, I used PowerPoint and Adobe XD to do make my wireframes and mock-ups. This time I decided to use a variety of other software: HubSpot, GlooMaps, Mindmup and WireframePro. Have a look at these below.

Click on the left or right sides of the images to slide through them!

Web App Development

In this module, I learned how to put together a website application. I gained some experience with node.js, handlebars, and management of a large amount of files.

My app called The Instrument Archive
  • This app is for recording information about instruments for a made-up music instrument store.
  • Users can make an account and sign in.
  • They can create categories and add instruments of their own in them.