A checklist created for the online game Lost Ark

Overview

Arkesia.todo

Arkesia.todo is an online checklist tool that tracks your daily and weekly progress of tasks for the MMORPG Lost Ark. Arkesia.todo can store multiple characters and allows the creation of custom tasks; resetting all task progress both daily and weekly!

sample.jpg

Key Features

  • Tracking of multiple characters as well as roster bound tasks
  • Daily and Weekly task views to switch between
  • Creation of new tasks for both dailies and weeklies
  • Timers counting down until time of reset (10:00 UTC)
  • Resetting of task progress daily and weekly
  • Stored to LocalStorage on your browser

How to Use

  1. On first visit, Arkesia.todo will generate you default "Account" card with some default tasks.
  2. You can click on the "+" symbol at the back of your cards whenever you want to add a new character.

    ๐Ÿ’ก Tip: If your board becomes too full, you can scroll through the carousel with SHIFT + Scroll Wheel!

  3. Your new character will also come with some default tasks but don't worry, you can edit or remove any task by hovering over the profile image and clicking the "Edit" button at the top right!
  4. Add a new task by hovering over a card and clicking the "Add Task" button that appear at the bottom of the task list.
  5. Unchecking tasks in the "Edit" menu will delete the task when the "Apply" button is clicked.

    ๐Ÿ’ก Tip: Left clicking tasks will progress them, ALT + CLICK will decrement the progress!

  6. Add characters and tasks and happy adventuring!

Technologies Used

  • HyperText Markup Language (HTML)
  • Cascading Style Sheets (CSS)
  • JavaScript (JS)

Purpose

Arkesia.todo is a personal project I embarked on to expand my experience in web development. Although I have dipped my toes into web development previously, Arkesia.todo is probably the first fully fledged website I have developed and I am very excited to share it with the Lost Ark community! I have pursued this project as I wanted to create a more visually impressive and customizable todo list compared to other resources I have seen.

Process

As this is a personal project, I will be detailing my journey through the design and development of Arkesia.todo as well as what I have learnt from this experience!

The initial design I had for Arkesia.todo was created using Figma. This was my first experience with Figma and it was a joy to work with after figuring out the basics. Prototyping my design had a huge impact on the amount of time I spent when coding the frontend user interface and I will definitely be revisiting it for future projects! Although the design was incomplete, I had the core design concepts figured out and fine-tuned it when I began coding. figma-design.jpg

From design, I went into HTML and CSS to design the frontend framework and making it as mobile friendly as I could with my experience by using Flexbox. (I hope it works well for you mobile users!) Once I had the layout ready, I began working through the JavaScript and there's a whole bunch to unpack here!

Prior to this project, I have not used much JavaScript however, with a programming background it was very natural to get into. There were a lot of new concepts and problems I had to work out, mostly pertaining to storing, loading, and interacting with LocalStorage elements. Most of the complications I had stemmed from linking LocalStorage elements with the HTML elements, grabbing updates when needed. The solution I started using near the end of my development was to use data attributes which are accessible from JavaScript after grabbing the HTML element from the DOM. This solution was a lot more elegant than my workaround when I began this project and I would very much like to update the rest of the code to use this method. However, that would entail structural changes to the core objects used throughout the entire project. This will definitely be something I keep in mind for future projects.

As someone who has not published a website before, I am very happy with what I have managed to accomplish with Arkesia.todo and wish all those that use it a wonderful experience! Happy adventuring, and I will see you all in the world of Arkesia!

You might also like...

๐ŸŽฎ Excalibur is a free game engine written in TypeScript for making 2D games in HTML5 canvas

๐ŸŽฎ Excalibur is a free game engine written in TypeScript for making 2D games in HTML5 canvas

๐ŸŽฎ An easy to use 2D HTML5 game engine written in TypeScript

Dec 30, 2022

Pig is a simple two player dice game.

Pig is a simple two player dice game.

Pig game Pig is a simple two player dice game. Play here: formidablae.github.io/pig_game or formaidablae-pig-game.netlify.app Each turn, a player repe

Oct 5, 2022

Quizpetitive - A quiz game to learn new knowledge and terms in the field of project management.

Quizpetitive - A quiz game to learn new knowledge and terms in the field of project management.

Quizpetitive A quiz game to learn new knowledge and terms in the field of project management. The key element to the success of this project was the c

May 16, 2022

Bitburner Game

Bitburner Bitburner is a programming-based incremental game that revolves around hacking and cyberpunk themes. The game can be played at https://danie

Dec 30, 2022

A clone of the popular Wordle game.

Wordle Clone How to play locally: yarn install

Jan 9, 2022

A clone of the popular game Wordle made using React, Typescript, and Tailwind

Wordle Clone Go play the real Wordle here Read the story behind it here Try a demo of this clone project here Inspiration: This game is an open source

Jan 8, 2023

๐ŸŽฉ 2048 game is cloned with ReactJS, CSS3.

2048-react This is a clone of 2048 implemented using React. It's running live here. The game logic is implemented in ./src/components/mainBoard.jsx. I

Jul 31, 2022

A tiny game to practice AoE building shortcuts.

Aegis A tiny game to practice Age of Empires IV building shortcuts. Using โš›๏ธ Create-React-App and ๐Ÿป Zustand. License With the exception of all visual

Jan 1, 2023

Provides 5 keywords with which to narrow down your wordle game. I ruin nice things.

Widdle?? I hate fun so I wrote a script that ruins Wordle. This script can be used to find a Widdle, a set of five words that cover nearly all letters

Mar 12, 2022
Comments
  • Feature Request(s)

    Feature Request(s)

    Hi,

    First of all thank you for your work! It looks cleaner to alternative projects on GitHub and seems easier to maintain.

    I've got a couple of feature request(s) and for some I might be able to assist.

    1. Add icons for tasks (as shown in your concept screenshot)
    2. Add reset button to reset tasks (per char / category)
    3. Making changes like adding additional default tasks in main.js, won't update unless you clear browser data or use in-private browser.
    4. Ability to delete custom task(s) added by user(s).

    Thanks again!

    enhancement 
    opened by Insolux 4
Owner
null
A simple electron wrapper for bonk.io, a fun online game

A simple electron wrapper for bonk.io, a fun online game I tend to play a lot. I dunno how useful it'd be for other players, maybe they'd like the fullscreen of it, but it'll probably mostly just be for myself to play around with the source code of the game.

null 3 Feb 16, 2022
Aprilbeat is an new open-source, online, fully web-based rhythm game

Aprilbeat! open-source web-based online rhythm game Aprilbeat is an new open-source, online, fully web-based rhythm game. It plays songs in APB format

Bone April Tea 4 Oct 17, 2022
Eva.js is a front-end game engine specifically for creating interactive game projects.

High-performance: Eva.js is powered by efficient runtime and rendering pipeline (Pixi.JS) which makes it possible to unleash the full potential of your device.

EVA 1.6k Dec 27, 2022
WordleGameCB - a game inspired by the Wordle word game developed by Josh Wardle

Technologies WordleGameCB WordleGameCB is a game inspired by the Wordle word game developed by Josh Wardle. This application was developed with the ai

@Encoding 4 Feb 20, 2022
Created by Hashlips! In this repository, Hashlips and ScrawnyViking teach you how to create your unique randomly generated NFTs and launch them on to a free Github Domain where people can buy your NFTs from

Thank You HashLips ?? Upgraded and Articulated by ScrawnyViking aka TWECryptoDev All the code in these repos was created and explained by HashLips - P

TomorrowWontExist 16 Dec 14, 2022
I created Worlde with ReactJS, and Tailwind CSS

I made Wordle XD Hello everyone ?? , I am glad to see you here I know it ain't much but this is the game wordle (popular in twitter recently!) I made

Mahmoud Fettal 26 Nov 30, 2022
A lightweight 3D game engine for the web.

A lightweight 3D game engine for the web. Built with three.js and cannon-es.

null 667 Dec 31, 2022
๐ŸŽ Open source racing game developed by everyone willing

?? Open source racing game developed by everyone willing

Poimandres 2k Dec 26, 2022
LittleJS Logo LittleJS - The Tiny JavaScript Game Engine That Can

The Tiny JavaScript Game Engine That Can! ??

Frank Force 2.4k Dec 31, 2022
Golf it! is a game designed to let you show off your code-fu by solving problems

Golf it! Golf it! is a game designed to let you show off your code-fu by solving problems in the least number of characters โœจ Explore the docs ยป View

Ashikka Gupta 5 Aug 18, 2022