Neumorphic Calculator Build 2020 (HTML, CSS, JavaScript)

In this video, we are going to talk about neumorphic design.

Neumorphism is a recent UI design trend. It’s also called “Soft UI”.
It’s designs appear to extrude from the background.

Neumorphism is derived from “New Skeuomorphism”. Skeuomorphism involves using user interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them.

Now, I want to be clear that just because this is a “trend” doesn’t mean that you should use this design throughout all of your projects. There are a lot of issues with this design, such as contrast ratio. It can be really hard to see certain components with neumorphic design. So as with any trend or design concept, a little goes a long way!

We’re going to build a neumorphic styled calculator. The first part of the video will be the building and styling (HTML & CSS). Then we’ll implement some JavaScript and put into practice a lot of the things that we learned throughout #JavaScriptJanuary.

📚 References: 📚

⏱️ Timestamps: ⏱️
00:00 - Intro
02:05 - HTML
06:41 - CSS/SCSS
18:34 - JavaScript
_____________________________________

📚 Learn to CODE in just a FEW months here:
_____________________________________

🛠️ Tools I use:

_____________________________________

🚀 Get 1 Year of FREE Hosting (Sponsor Link)
🚨 Use code: Stackr to get $25 in FREE Credit!!
_____________________________________

💖 Show support!
_____________________________________

Watch Next:
_____________________________________

Connect With Me:
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #neumorphism

[codeSTACKr]

Thanks for all of the support! Here is the calculator build I promised :)

Watch the entire #JavaScriptJanuary series from the beginning!

📚 My Favorite Web Design Books 📚
Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett (paid link)

[frownonline]

For those that don't want to use SASS, you can use CSS variables like: :root {--shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.15);} button { border-radius: var(--shadow); }

[ickimadrasi]

I can't wait for the React course

[_sahdevodedara]

transform: translateY(1.2px); add this to button active state for nice animation.

[gilmoretj]

Great demonstration of this new design trend and thank you for an excellent set of tutorial videos. You did say towards the end the calculator was 'almost functional' and might have bugs. One fault I found was the decimal point does not work but otherwise it is a lovely example.

[randhirsona]

Thank you for the video, by the way, which theme I liked its style.

[NERO-ezmn]

25:00 is there any implications if i put the callback() opCallback below the for loop () and not on the above? please reply

[sommie]

I guess instead of having an attribute op we should use data-op so we'll get access to the JavaScript API that handles custom attributes?

[AlexSchwartzATV]

fuck I get to the end and hear "this is buggy and not fully functional" etc lmfaooo I played myself.

[kuldeepjaswal]

how your scss converting to css? pls show where you added code to convert.

[soldadopreciso]

hello pal, how we can clone the new light Facebook theme, principally in buttons, links, hover, thanks.

[ml]

I just want to know what is the function of "op" at the html code, I looked for this keyword on the internet I couldn't anything .

[sarojthakur]

From into I can say you are honest person

[jacksonnadar]

i didnt know you can use '$' in variable name.great video btw

[fadimoussa]

Lines 11 - 13 at 23:09 could be replaced with a loop of querySelectorAll like on line 3 and have the onclick event call opCallback with it's own op-attribute.

You could actually use 1 querySelectorAll on button and check for the classname in the loop and execute the appropriate code.

In general I would say that it is not recommended to use two lists (array of operators + switch) which would require you to maintain two lists but this calculator has a simple and probably never-changing configuration - so, no biggie 😊

[VICTOR]

everything working fine except that the javascript code isn't effective when I run the .HTML file on the web browser.

[AlexSchwartzATV]

say in buffer.push({ value: parseFloat($display.value)});, why isn't it just ?

[sublimedone]

I tried doing what you did but it will not open

[NERO-ezmn]

do you have a js crash course? the way you do js is advance & every js scripter has different script styles

[Savi]

i cant save it. i did alot of the code and i dint know how to save it so when i checked it it looked like it was just made