Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/maciejkuran/unitconverted

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.
https://github.com/maciejkuran/unitconverted

converter css html5 javascript sass unit-conversion unit-converter unitconverter vanilla-javascript web-application

Last synced: about 1 month ago
JSON representation

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.

Awesome Lists containing this project

README 

        







# UnitConverted



 

 

 

 



UnitConverted.com is a free 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. In addition, you can read

the definitions of each unit with direct reference to scientific sources.



Live app ➡️ https://unitconverted.netlify.app/



## Case Study



The goal of this project was to design and build an application. I chose to develop a Unit Converter from scratch.

I wanted to challenge myself and try to build a scalable application, a size, and complexity which would be difficult for any novice programmer.



I did my best and worked diligently to accomplish this project.

I 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 😉

My goal in developing this app was to challenge myself, design a modern interface, and develop it from scratch. All suggestions are welcome.



## Project Timeline



I 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

successfully as intended. However, this was a constant work, around 8 hours/day, 6

days/week.










## Programming problems to solve



 
    

                
  • program the category search filter
    • 

                
  • 

                  write functions that will convert a user input value and return converted value when the "convert" button is clicked

                
    • 

                
  • 

                  program select options so a user can change units easily in the app's interface

                
    • 

                
  • 

                  access DOM elements to display dynamically a calculation result and formula of calculation on the screen

                
    • 

              



## General designing concepts



- dark color scheme

- modern and clean UI

- easy to navigate interface

- design that is memorable and stands out from competing applications
















## Problems I encountered during the development process



Honestly, I didn't encounter many problems while coding. To a surprise, with a little

bit of analyzing I was actually able to match javascript concepts very fast to solve any

problems. However, I got stuck for a while styling website ...



SCSS and nested classes  

What I love about SCSS are nested classes. I just find it comfortable to create some

sort of "class trees". I say it's comfortable because anytime I am back to a specific

class to add some extra styling, someway I can easily locate this class, without using

the built VS Code 'search' tool. Certainly, there are other advantages of nesting

classes such as clean code and not having to repeat code. For example, if div with a

class of 'flex' is inside a div with a class of 'wrapper', and there's a <p> tag

inside that div 'flex', you may write it that way.



```

.wrapper {



            .flex {



            p { }



            }



            }



            //instead of



            .wrapper {}



            .flex p {}



            .flex {}

```



However, nested classes can be tricky especially when you want to override some styles.

That's what I experienced.



I tried to override some styles, especially doing media queries, and even though I added

styles to a certain HTML element with a class of 'x', the styles were not overridden.



Well, it's all because I ignored initially declared nested classes. What I mean, based

on the random example given above is if you declared initially div with a class of

'flex' to be nested inside the 'wrapper', the compiled result of this nesting in the

style.css sheet will be:



```

.wrapper .flex {}



 .wrapper .flex p {}

```



So in fact if you want to override any styles doing for example media queries, you

should use previously declared nested classes - otherwise it's not going to work.



## Overall feelings



I am happy that I was able to write my first application. It is not something innovative, but it

is mine, from A to Z designed and coded by me.



I 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.