03 Webtechnology

This portfolio project will cover the basics of webdevelopment. That means

  • Variables, operators, types

  • Arrays, objects

  • Functions

  • DOM

SNAK OM PLAGIAT INDEN DEN SKAL AFLEVERES: https://mit.kea.dk/eksamensregler

De skal ikke bare aflevere noget de har fundet online!

The project should be created individually!

In this project you have to choose one out of these 4 projects👇 (or create your own)

Datoer for portefølje: 23/10 - 29/10

🌍 Personal CO2 Emission Calculator - level 1

Create a web application that allows users to calculate their personal CO2 emissions based on their daily activities. This could be based on the distance they drive, the type of food they consume, their electricity usage, etc.

  • Maybe a user inputs how many miles they drive in a week and the type of vehicle they own, and the website calculates their weekly CO2 emissions.

  • Maybe a user inputs the type of food they consume in a week (vegetarian, non-vegetarian, vegan) and the website calculates the CO2 emissions based on their diet.

  • Maybe a user inputs their monthly electricity bill, and the website estimates their CO2 emissions based on average energy sources.

If you cannot think of any idea, try researching common sources of personal CO2 emissions and see if you can incorporate them into your calculator!

Requirements

  • The user should input details about their daily activities.

  • There should be a button that initiates the calculation.

  • The application should display the calculated CO2 emissions based on the user's input.

  • Should be deployable

Inspiration

  • https://www.carbonfootprint.com/calculator.aspx

  • https://co2.myclimate.org/en/footprint_calculators/new

🧮 Simple calculator

Difficulty: level 1

Create a calculator where a user can input some information and get a result from that information.

  • Maybe a user inputs how far you have to drive to work and the website calculates co2 emissions

  • Maybe a caculator where you put in your birthday and the website tells you how many days, seconds, heartbeats, etc you have lived

If you cannot think of any idea then try and ask friends/family if they would like some kind of caluculator that could help them in their life!

Requirements

  • The user should put in some details

  • There should be a button that initiates the calculation

  • There should be some kind of calculation being done

  • Should be deployed

Inspiration

🎸 Online musical instrument

Difficulty: level 3

Create an online instrument. How the instrument should function or work is up to you. Maybe you press different buttons that play different tones or audioclips. Maybe you use the accellerometer to tilt the phone and play a tone based on that. Maybe you slide your finger up and down? Its up to you

Requirements

  • It should be possible to play different tones/audioclips

  • The user should be able to interact with the instrument

  • There should be a guide for how to operate the instrument

  • Should be deployed

This task takes some research on playing tones and clips with javascript

Inspiration

🎨 Online paint editor

Difficulty: level 2

Create an online paint editor. Consider using P5.js!

Requirements

  • It should be possible to select some kind of brush and see what brush you have selected

  • It should be possible to paint with that brush

  • The brush could be painting with

    • Emojis

    • Color

    • Text

    • Images

    • Your idea here

  • Should be deployed

Inspiration

Difficulty: level 1.5

Create a game where a user should click a button and get some points over time. The longer the user stays on the page the more points. There are lots of potential features like maybe clicking a key on the keyboard to get more points

Requirements

  • A user should click a button in order to get points

  • Over time a user should get more points

  • Should be deployed

Inspiration

Handin

Handin the link of the deployed webpage before the 29/10 23:59

The project should be handed in here

Peer review

The project should be peer reviewed by someone in your class. Don't spend more than 20 min on this task!

The tasks of the reviewer

  • Describe some positive things about the project

  • In the html, has the right tags been used for the right job? If not where has the wrong tag been used and why is it wrong?

  • Is the javascript easy for you to read and understand? Where is it not clear? If there is lots of code select a part of the code to go through

Use this review to improve your website, and pat yourself on the shoulder for the positive things mentioned!

Last updated