You can click on the desired image to enlarge it, please.
Game of quick song name typing
Song Name Typing Game with Difficulty Levels
The game features a mode selection and difficulty system. You choose your favorite artist, and a
random song name will be generated. Your task is to type the song name correctly within a
specified time frame, which varies based on the selected difficulty level and mode.
Each mode is accompanied by a beautifully themed interface.
Once the player has entered the complete answer, they can press the button to save and start the
game.
The game will start by counting down three seconds
to
prepare.
The randomly generated song name that you
type
will be displayed and stored as part of your word history.
prepare.
You can click on the settings icon to change
the
mode,
difficulty level, or select the artist whose song names you want to generate randomly.
This is the settings section for changing the difficulty level.
This is a scoreboard that keeps track of your
scores, categorized by mode and difficulty level.
With the design intention in mind, I have
designed
the toolbar for exiting this scoreboard window to dynamically change according to the selected
statistics mode.
You can open both the statistics and settings windows simultaneously, allowing you to view the
statistics and make configuration changes concurrently.
On the left side is the page displaying the complete word history, which is designed with different
appearances for each mode to match the themes.
On the right side is the main page, where you can find the button to clear all the recorded word
history. The clear button is located next to the button for opening the page that contains all the
saved
word history.
This is the endgame screen, which appears when the game is over and the
time has run out.
Within
the endgame
screen, it will display a report of the mode played, the difficulty level, and the maximum
achievable score
within the game. If your score surpasses your previous high score, the area on the right side
that shows the
highest score achieved within each mode will be updated accordingly.
Designing using Figma
This is the design of an application created using Figma. The design topic is a car-related store app, featuring products related to automobiles. The image above represents the home page of the store app.
This is a section of the storefront category page in the application. It displays various categories, and users can click on them to access and use them.
Once you select a category in the store, you can click on the items to make a purchase or view the details of the desired product.
In the product page, upon clicking, important information will be displayed. There will be buttons for making a purchase and adding items to the cart. The design of the purchase button will be eye-catching with vibrant colors to attract the user's attention and make it easy to use.
If users are interested in a product but still have doubts and require additional information to make an informed decision, they can click on a button to read more details about that particular item.
There is a system where users can click on a three-dot icon located at the top right corner, which will trigger a popup window on the side. The information within the side panel includes shortcuts to various pages, a QR code for contacting, user profile details, and a button for logging out of the system.
Next, we have the member system section, where the member page is designed to display details and buttons for accessing various features of the application. This is the most feature-rich section of the application. The designed app also includes a login page, and there is a sample feature for changing the theme to a dark mode
Income and Expense Account
Income and Expense Calculator Program
On the left-hand side, it displays the total amount, including the overall sum of all transactions, total income, and total expenses. The right-hand side is the input and display area for the latest transaction entries. The income and expense system allows for adjustable font sizes, including small, medium, and large sizes, to enhance readability and flexibility for different devices displaying the website.
In the transaction list, income transactions will be represented by a green symbol, while expense transactions will be represented by a red symbol. Additionally, the most recently added transaction will have a distinct colored bar to easily differentiate it from previous entries.
If there are more transactions, the old transactions will still remain. You can use a scroll to view the data or click on a button to see all transactions.
The system supports deleting individual transactions by tapping or clicking on the transaction entry. A confirmation window will appear to confirm the deletion.
For the most recent transaction that the user wishes to delete, it will have a slightly faded colored bar and a distinct symbol to make it easier for the user to identify which transaction they are about to delete.
In addition to the distinction for the most recent transaction, the other transaction entries will also have different colored bars to indicate which transactions are marked for deletion. Income transactions will have a green-colored bar, while expense transactions will have a red-colored bar.
Apart from deleting individual transaction entries, the system also supports clearing all transactions at once by clicking on the 'Clear all transactions' button.
This is an example of how the display appears on different devices with varying sizes.
Music search system
Music search system by entering the artist's name, band, or song title. The system will search for songs by the artist or band.
Displaying results on different devices with varying sizes.
There are two search points available. The first one is located at the topmost stationary section of the website, designed to remain fixed and unaffected by scrolling. The second one is positioned in the upper section of the website as well but is designed to move along with the score. It is used when users want to search for information without having to scroll back up to the top of the website to use the search bar.
The search bar in the upper right-hand corner is designed to initially remain hidden. However, as the scroll reaches the point where the list of songs is being viewed, the search bar gradually fades in and becomes visible.
After performing a song search, you can click on a "Details" button to access the page displaying the detailed information of the desired song. This page will include elements such as the album cover image, song title, band/artist name, and album name. Additionally, there will be an audio player playing the song that the user is currently viewing the details of.
There is a notification window that informs the user if they have entered search details that the system cannot find any matching songs for.
Currency exchange
Currency exchange system:
- It allows users to toggle between the currencies they are currently viewing.
- There is a system that displays the exchange rates between the currencies.
- Users can specify the decimal places for viewing the results of currency exchange rates.
There is a website theme customization system that is designed with various sky-themed options for different time periods.
There are different sky themes available based on the time of day, including morning, evening, and nighttime skies. Additionally, there may be sky themes that change based on weather conditions.
By default, the system is set to a default theme and the decimal places for the currency exchange rates are configured to display up to 6 decimal places.
When you change the theme, the display and calculations will remain the same. However, when you change the currency settings, both the exchange rate information displayed below and the results of currency exchange will be updated immediately.
When you change the decimal places setting, both the decimal places in the results and the exchange rate ratios will be updated accordingly.
Next, I will explain the display on devices with different sizes.
Time Calculation Program
Time Calculation Program in Python
The usage of the program is as follows:
- Enter the initial time, specifying whether it is in AM or PM.
- Enter the number of hours and minutes to be added to the initial time.
- Finally, enter the starting date for the calculation.
In case you don't want to know the result related to the calculation of the common day, you can enter the number '0'.
In cases where the result of adding the specified number of hours and minutes to the initial time causes a change in the day, such as transitioning to the next day, the program will calculate and indicate the updated date as shown in the example image.
The result for cases where there is no change in the day or the initial time range is calculated by adding the specified number of hours and minutes will not cause a change in the day.
Example of entering data or input in an incorrect format and the response to entering data in an incorrect format.
The system will notify the user that they have entered an incorrect format. In the system notification, it will provide the correct format for input before displaying the question and a blank space for re-entering the data.
Inquire about COVID-19 infection statistics
Program to answer questions about COVID-19 infection statistics, specifically for the period from 12th April 2022 to 1st May 2022. The program can answer questions regarding the total number of infections, the number of infections within a specific timeframe, and statistics related to infections based on gender.
Example of using a program to ask questions in all three formats.
To inquire about the number of COVID-19 cases separated by gender, the format requires specifying the necessary answer. It can either be the total number from the first day to the last day available in the database or a specific time period that you want to know.
Example of responding to a case where the specified answer is not in the correct format.
Example of how to end the program usage and the program's response when entering '0' to stop the specified inquiries.
Performing addition and subtraction calculations, showing vertical methods
Performing addition and subtraction calculations, showing the results in a vertical format with the option to specify whether the answer should be provided or kept hidden. This task focuses on presenting the calculation methods in an organized and aesthetically pleasing manner, as well as creating conditions for using the program for practice purposes.
Example of system usage, where the program is configured with lowercase and uppercase letter settings. When the user enters data or provides answers correctly according to the format, the program will execute and display the desired response.
Example of the program's response when using the system in an incorrect format
The program is configured to allow a maximum of 5 rounds of calculations and the number of digits used for calculations must not exceed 4 digits.
Furthermore, since the program is designed for addition and subtraction only, if the user enters a multiplication or division symbol for calculations, it will be considered as providing an answer in an incorrect format.
Real-time streaming donation graph simulation system
A program that simulates real-time donation statistics graph, displaying the donations received per second. This program requires two input answers for usage:
- How long do you want to simulate the program for?
- How many seconds of recent data do you want the visualization to display?
An example simulation of the program, where the simulated donation amounts are generated randomly. In the example image, the program is set to display the data from the past twenty seconds
The program supports multiple rounds of data simulation. Therefore, if you still wish to use the system for the question section, it should be specified as 'no'.
Sample image for usage when typing in the correct format but with differences in lowercase and uppercase letters, which can still function normally.
For this simulation, the donation amounts will be in USD ($), and the time unit will be counted in seconds.
In the program header section, on the right-hand side, there will be the current total donation amount updated in real-time.
