Tristess-Generator V. 1.0 was a fun and engaging way to learn how to implement JavaScript in a basic game structure.

To create the "Tristess Generator," which offers activity suggestions based on whether you're alone, with friends, or on a date, I utilized a range of JavaScript methods and techniques.

First, I obtained references to the relevant HTML elements using document.getElementById, which enabled interaction with buttons, images, and text areas within the HTML document.

Next, I added event listeners to these buttons to trigger specific functions upon clicks. This setup ensures that each button performs a distinct action according to its intended purpose.

The handleButtonClick function manages button clicks using a switch statement to call specific functions for each button, based on the button's ID. This function also updates the visual state of the buttons by removing a CSS class (clicked) from all buttons and adding it only to the clicked button, providing immediate visual feedback to the user.

For each scenario (alone, with friends, on a date), there are specific functions that manage the display and behavior of elements.

To provide random activity suggestions, I used JavaScript’s Math.random function in combination with arrays. I stored activity suggestions for each scenario (alone, with friends, or on a date) in separate arrays. When a user requested a suggestion, I generated a random index using Math.random and scaled it with Math.floor to ensure it fell within the bounds of the array. This index was then used to select and display a random activity from the array, resulting in varied suggestions each time the user interacted with the game.

Overall, the TRISTESS-GENERATOR was a fun way to explore the power of basic JS usage!

RecyRoute was developed by a team of students as a digital solution for individuals who find it challenging or unmotivating to visit their nearest recycling center.

The purpose of this task was to learn how to work as a team using various design-thinking methods, briefly summarized by the following process:

PROBLEM STATEMENT EMPATHIZE DEFINE IDEATE PROTOTYPE TEST

Using Mural and Discord, we employed various methods for real-time collaboration. Some of the methods we used include:

• • 5W1H: Methos used to define our problem statement
• • EMPATHY MAPS: Used to sum up interviews we made with a wide range of people to further understand our users.
• • POV & POV Madlibs: Used to further sum up information and create a basic understanding of our users needs.
• • HOW MIGHT WE: Used to find solutions for our problem statement

We used FIGMA to create a fully clickable prototype that we could test on our users to get feedback.

Interested in exploring a more detailed version of our design process? Download the PDF here [in Swedish].

JAPAN POSTERS was a tailwind-css project to get to know working with CSS-frameworks

I chose Tailwind CSS over other frameworks like Bootstrap because it provided greater flexibility and freedom in designing the website according to my specific vision.

Unlike more opinionated frameworks, Tailwind's utility-first approach allowed me to create a custom design with fine-tuned control over every aspect of the layout and styling. This enabled a more personalized and unique design experience for the project.

I loved working with Tailwind because of its simplicity. Its utility-first approach allowed me to use basic classes to style my layout directly within the HTML document, streamlining the design process and making it more efficient.