{"id":19924070,"url":"https://github.com/maciejkuran/unitconverted","last_synced_at":"2026-04-10T02:15:50.165Z","repository":{"id":49474533,"uuid":"481302758","full_name":"maciejkuran/UnitConverted","owner":"maciejkuran","description":"UnitConverted is a unit converter where you can easily convert all common types of units: length, temperature, area, volume, weight, time and speed. It is a super helpful tool if you expect to have some units converted fast. ","archived":false,"fork":false,"pushed_at":"2023-07-05T08:19:54.000Z","size":184,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-12T00:21:28.488Z","etag":null,"topics":["converter","css","html5","javascript","sass","unit-conversion","unit-converter","unitconverter","vanilla-javascript","web-application"],"latest_commit_sha":null,"homepage":"https://unitconverted.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maciejkuran.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-13T17:00:48.000Z","updated_at":"2023-07-05T08:19:13.000Z","dependencies_parsed_at":"2024-11-15T00:34:45.229Z","dependency_job_id":null,"html_url":"https://github.com/maciejkuran/UnitConverted","commit_stats":null,"previous_names":["maciejkuran/unitconverted"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maciejkuran%2FUnitConverted","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maciejkuran%2FUnitConverted/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maciejkuran%2FUnitConverted/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maciejkuran%2FUnitConverted/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maciejkuran","download_url":"https://codeload.github.com/maciejkuran/UnitConverted/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241350641,"owners_count":19948525,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["converter","css","html5","javascript","sass","unit-conversion","unit-converter","unitconverter","vanilla-javascript","web-application"],"created_at":"2024-11-12T22:16:18.568Z","updated_at":"2025-12-31T01:07:37.875Z","avatar_url":"https://github.com/maciejkuran.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/103118542/163263986-b74ed5c3-9566-4f10-a328-2a88a1ab5b3a.svg\" width=\"400\"\u003e\n\u003c/p\u003e\n\n# UnitConverted\n\n\u003cspan\u003e\u003cimg src=\"https://img.shields.io/badge/Adobe%20XD-470137?style=for-the-badge\u0026logo=Adobe%20XD\u0026logoColor=#FF61F6\" /\u003e \u003c/span\u003e\n\u003cspan\u003e\u003cimg src=\"https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white\" /\u003e \u003c/span\u003e\n\u003cspan\u003e\u003cimg src=\"https://img.shields.io/badge/Sass-CC6699?style=for-the-badge\u0026logo=sass\u0026logoColor=white\" /\u003e \u003c/span\u003e\n\u003cspan\u003e\u003cimg src=\"https://img.shields.io/badge/JavaScript-323330?style=for-the-badge\u0026logo=javascript\u0026logoColor=F7DF1E\" /\u003e \u003c/span\u003e\n\nUnitConverted.com is a free unit converter where you can easily convert all common types\nof units: length, temperature, area, volume, weight, time, and speed. It is a super\nhelpful tool if you expect to have some units converted fast. In addition, you can read\nthe definitions of each unit with direct reference to scientific sources.\n\nLive app ➡️ https://unitconverted.netlify.app/\n\n## Case Study\n\nThe goal of this project was to design and build an application. I chose to develop a Unit Converter from scratch.\nI wanted to \u003cb\u003echallenge myself and try to build a scalable application, a size, and complexity which would be difficult for any novice programmer\u003c/b\u003e.\n\nI did my best and worked diligently to accomplish this project.\n\u003cb\u003eI am aware that this app could have been done better however, this is my first project ever done completely by myself - being a total JS beginner 😉\u003c/b\u003e\nMy goal in developing this app was to challenge myself, design a modern interface, and develop it from scratch. All suggestions are welcome.\n\n## Project Timeline\n\nI was excited to develop my first web application after just 1 month of learning JavaScript - actually my first programming language. The entire application development process went\nsuccessfully as intended. However, this was a constant work, around 8 hours/day, 6\ndays/week.\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/103118542/163339916-b4a0d213-9c55-4171-8347-4111712554fa.png\"\u003e\n\u003c/p\u003e\n\n## Programming problems to solve\n\n \u003cul\u003e\n            \u003cli\u003eprogram the category search filter\u003c/li\u003e\n            \u003cli\u003e\n              write functions that will convert a user input value and return converted value when the \"convert\" button is clicked\n            \u003c/li\u003e\n            \u003cli\u003e\n              program select options so a user can change units easily in the app's interface\n            \u003c/li\u003e\n            \u003cli\u003e\n              access DOM elements to display dynamically a calculation result and formula of calculation on the screen\n            \u003c/li\u003e\n          \u003c/ul\u003e\n\n## General designing concepts\n\n- dark color scheme\n- modern and clean UI\n- easy to navigate interface\n- design that is memorable and stands out from competing applications\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/103118542/163340737-39d7a0d8-17fe-4f9e-a51b-ff47f48d661a.jpg\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/103118542/163340857-305d2093-8bd8-4074-8c8c-e6a5dfb6b95f.jpg\"\u003e\n\u003c/p\u003e\n\n## Problems I encountered during the development process\n\nHonestly, I didn't encounter many problems while coding. To a surprise, with a little\nbit of analyzing I was actually able to match javascript concepts very fast to solve any\nproblems. However, I got stuck for a while styling website ...\n\n\u003cb\u003eSCSS and nested classes\u003c/b\u003e  \nWhat I love about SCSS are nested classes. I just find it comfortable to create some\nsort of \"class trees\". I say it's comfortable because anytime I am back to a specific\nclass to add some extra styling, someway I can easily locate this class, without using\nthe built VS Code 'search' tool. Certainly, there are other advantages of nesting\nclasses such as clean code and not having to repeat code. For example, if div with a\nclass of 'flex' is inside a div with a class of 'wrapper', and there's a \u0026lt;p\u0026gt; tag\ninside that div 'flex', you may write it that way.\n\n```\n.wrapper {\n\n            .flex {\n\n            p { }\n\n            }\n\n            }\n\n            //instead of\n\n            .wrapper {}\n\n            .flex p {}\n\n            .flex {}\n```\n\nHowever, nested classes can be tricky especially when you want to override some styles.\nThat's what I experienced.\n\nI tried to override some styles, especially doing media queries, and even though I added\nstyles to a certain HTML element with a class of 'x', the styles were not overridden.\n\nWell, it's all because I ignored initially declared nested classes. What I mean, based\non the random example given above is if you declared initially div with a class of\n'flex' to be nested inside the 'wrapper', the compiled result of this nesting in the\nstyle.css sheet will be:\n\n```\n.wrapper .flex {}\n\n .wrapper .flex p {}\n```\n\nSo in fact if you want to override any styles doing for example media queries, you\nshould use previously declared nested classes - otherwise it's not going to work.\n\n## Overall feelings\n\nI am happy that I was able to write my first application. It is not something innovative, but it\nis mine, from A to Z designed and coded by me.\n\n\u003cb\u003eI am aware that this could be coded way better so I hope to come back to this project one day and refactor this long code.\u003c/b\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaciejkuran%2Funitconverted","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaciejkuran%2Funitconverted","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaciejkuran%2Funitconverted/lists"}