Before heading into the tutorial part, this is what we are going to build. Simple right, but we are going to build this with the help of two semantic HTML tags (details and summary)

captured19ec6d0a1d6f48a1.gif
captured19ec6d0a1d6f48a1.gif

I have been teaching intricate concepts in CSS/JavaScript with simple examples in my blog — javascriptwillrule.com.

Let’s get started.

Step 1: Semantic HTML elements

In styles.css

Just decorating the body section.

Step 2: What details and summary tags will do ?

Just like accordians. The child elements of details tag will be considered as the content and the summary tag will be the accordian header. Without using any CSS/JavaScript we can create an accordian in HTML itself. Glad I learned this.

So far:

Image for post
Image for post

Step 3: Decorate the icon

So far:

Image for post
Image for post

Step 4: Transform ham menu to cross symbol

So far:

Image for post
Image for post

Step 5: Styling the nav and links

So far:

Image for post
Image for post

Step 6: Add helper content and hide on menu open

Final output:

captured19ec6d0a1d6f48a1.gif
captured19ec6d0a1d6f48a1.gif
Image for post
Image for post
javascriptwillrule.netlify.com

In this posts, we are going to solve a CodeWars JavaScript Challenge where we will see how to evaluate a Reverse Polish Notation expression.

Github Repo (Give it a star if you like it)

Have a look at my new front end dev blog: javascriptwillrule.com

Before going into the Reverse Polish Notation, we have to first look into Polish notation and the types of it to understand the difference clearly.

Polish notation is a way of expressing arithmetic expressions. Its most basic distinguishing feature is that operators are placed on the left of their operands.

There are 3 types of polish…

I heard Hooks are the new hotness. Ironically, I want to start this blog by describing fun facts about class components. How about that!

These gotchas are not important for using React productively. But you might find them amusing if you like to dig deeper into how things work.

Here’s the first one.

I wrote super(props) more times in my life than I’d like to know:

class Checkbox extends React.Component {
constructor(props) {
super(props); this.state = { isOn: true };
}
// ...
}

Of course, the class fields proposal lets us skip the ceremony:

class Checkbox extends React.Component {
state = { isOn: true };
// ... …

About

JavaScript Will Rule

I am a self taught front end web developer. Portfolio — subinsamrat.online . Blog — javascriptwillrule.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store