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
🍪 Cookie clicker inspired game
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