DEV Community: abhijeetekad

2021 wrap up

abhijeetekad — Sat, 01 Jan 2022 22:41:22 +0000

For the past few days I have been reading many 2021 wraps on my feed so that made me think about what I did last year and to be honest, I don't remember doing anything special or any specific achievement. so I forced myself to write this blog because one thing I want to improve in the coming days is my writing and for that, there can not be any other best topic than this which I could think of right now so bear with me.

Quick introduction of me
I am abhijeet currently in my 3rd year of graduation pursuing electronics and telecommunication engineering. In Varun Mayya's Avalon meta discord server I learn to make WordPress websites and after that, I found this programming, web development etc. interesting so now I am all in into this field.
...
so coming back to the heading of this blog what I did in 2021. so I have a very handsome answer as I am a student I attended online classes, did assignments, gave exams and many more but I will not talk about this in this blog because I know that all things mentioned above are lies and fake. so again I have nothing to answer what I did in 2021.

so now I going month wise. In January if you remember everyone on the internet was talking about investing, the stock market and the crypto crash so I was consuming content regarding this only. so I opened accounts to buy stocks and crypto But I didn't have much money but I had this website rohidasekad.com which has google AdSense approval. so I used to get some dollars per day. so I started working and creating more content on this website. I made quizzes for students, started uploading news posts regularly and all this was done in WordPress so you don't need any specific programming knowledge to build this. I got good engagement and I made around $560 in that 3 months then I stopped doing this because that was very time consuming and I learned mostly everything regarding elementor, google AdSense, google analytics, seo plugins etc

so now I have money and as I said before as I was watching many YouTube videos regarding the stock market. so I put that money into the stock market and in crypto. from the very first I was clear that I will not put money in the stock market which is given by parents. so learn a few stock market concepts. bought many stocks at low sold on high made profit but still, I was not sure about that also because I had less money and watching everything daily is frustrating so in October I stopped doing that also.

In the meantime one of my friend’s fathers asked me to make a website for his compeny again I made that in WordPress this was my second project of this year.

While doing all this I was learning JavaScript side by side. in September I started preparing for neogcamp. made 15 projects, wrote 2 blogs started attending Twitter spaces and I started liking this vibe. In November I gave an interview and got selected that is one achievement I guess.

In December I got one more project from my friend's father. he is fitness trainer he wanted to have a portfolio website so that was my 3rd project of this year again I am not super proud of this because of WordPress.

I saw Varun Mayya and Tanay Pratap’s video Why Youngsters Should Not Invest Actively and I learned that all this time I was running behind money for a small percentage of gain. so decided to book all my profit from the stock market and use that amount to pay a fee of neogcamp.

from last month I have started following the right people on Twitter, have started reading good books for ex. The almanack of ravikant, atomic habits. now the task is to make new connections with like-minded people, interact with more people on Twitter, complete neogcamp, get a good job and improve writing (this blog is a baby step).

so now after writing this I still feel that I have done nothing and wasted so much time this year(which is true btw) if you are still reading this then feel free to add me on your Twitter feed
abhijeet Twitter

Making MCQ quiz in JavaScript

abhijeetekad — Wed, 25 Aug 2021 20:02:41 +0000

Hey there, Javascript developers 👩‍💻

In this article, we are going to see how to make a simple quiz (MCQ) in javascript !!

Problem Statement

Prepare a Quiz and enable the user to play the quiz and calculate scores based on the answers chosen by the user.

Tech Stack Used

Html, CSS, and Javascript. This is beginner friendly application that any newbie can try to make the concept more clear and for good coding practice.

okay, this sounds interesting but the question is where to start?

I prefer to build the HTML part at first so that we can get an idea about the app which we are going to develop.

then develop a javascript file to form logic around the application and to make sure that wiring between HTML file and javascript file is good for that you can do a dry run by using console log.

and last I prefer to do css part because I am not good at css but you can do it simultaneously. so let's start coding with the first HTML file.

  <form id="quiz-form">
      <div>
          <h2 >Triangle Quiz</h2>
          <p>1. What is the third angle for the triangle where angle1 = 45° and angle2 = 
           45°?</p>
      </div>
  </form>

Here I am using the form element to make a quiz because in javascript form element is used as a documenting section for submitting information. nowhere inside the form element, ideal practice is making separate div element for every new question. you will see ahead why I am saying this.

now as this is MCQ quiz we need 4 options. to give options we are using input element but in input, we are using type as "radio".

why type="radio"
because radio represents the collection of radio buttons describing related options.

Note 1: radio buttons of all options should share the same name.

Note 2: The value attribute defines the unique value associated with each radio button. The value is not shown to the user but is the value that is sent to the server on "submit" to identify which radio button was selected.

Note 3: Always add the tag for best accessibility practices!

<form id="quiz-form" >
        <div>
            <h2 >Triangle Quiz</h2>
            <p>1. What is the third angle for the triangle where angle1 = 45° and angle2 = 45°?</p>
            <label><input type="radio" name="question1" value="45°"/>45°</label>
            <label><input type="radio" name="question1" value="60°"/>60°</label>
            <label><input type="radio" name="question1" value="90°"/>90°</label>
        </div>

    </form>

now we have the question format ready we can make quiz of any number of questions.
Tip: remember to change the name tag inside the input tag for every question so that it toggles for only that question.

now let's create a button to submit our test.

<button id="submit-btn" >Submit Answers</button>

Remember write button element outside the form because if we click on button page gets refreshed. so to make it simple let's write a button element outside the form element.

and last we are going to make another div for our final result.

Emoji translator using react js

abhijeetekad — Thu, 19 Aug 2021 08:53:19 +0000

Why code sandbox to develop this app.
This is beginner friendly web application to make so code sandbox solves the problem of creating environment which is required for react framework.

We can call code sandbox; vscode on the cloud.

code sandbox is very easy to use mainly for beginners like me. we can share the direct link of code to someone or if we want to do collaboration work in small teams then it is very easy to use.

also it is online so we can directly link this to our GitHub repository, fork repository any time to make changes without changing actual code that's why I am using code sandbox here.

let's start

before writing anything first understand that we are writing code in .js file instead of .html file because we are using javascript this is same as html but in our workplace that is in app.js jsx has an important role it converts html into js.

We can use jsx as a template. in this app I have used embedding in javascript everytime whenever I wanted to prepare result to display on screen using setter function. I will explain that later but first we will see the example of embedding.

import React from "react"; const userName = "Abijeet export default function App() { return ( <div className="App"> <h1>Welcome {userName}</h1> </div> ); } output: Welcome Abhijeet

similarly, we can use CSS properties in react using double parentheses. so this was the basic syntax which was different from normal HTML and css otherwise everything is almost the same.

Making button which is clickable

Syntex for the button is the same as in HTML but to make button clickable we are going to use onclick event here first we will see the syntax.

<button onClick={clickEventHandler}>Click Here </button>

this is syntex for button in react. here we are using onclick event rather than using .addEventListner() which we use in-plane javascript. here clickEventHandler is a function so we need to make a function with that name to proceed further otherwise we will get an error.

but till now whatever we are getting as an output we are getting it in the console. now we want to show output on the screen. so now we are using the setter function and useState hook from react.

Update result on view/screen.

*setter function and useState.

const [variable, setvariable]=useState(" ")

setter function is used to rerender code again. If we use a normal/single function without a set we cant render code again after one cycle. so we call setter function is the function that returns a function.

In the above syntax, the variable function gets the value setvariable function before that it has the default value which is given in usestate("").

use variable to show output on UI ex. {varible}

Handling the data from the input element

This is our final app. in this we have to give emoji as input and it will give us the meaning of emoji.

so we have to write code to process input data. to use input element put onChange event.
make new function inputEventHandler pass parameter event from that now we are going to use target.value to take input and store in variable.

and the last update the value using useState.

showing meaning to the user

now input and output are done now we have to write code for processing. to do processing we need data that has emoji and its meaning. to store that data we are using objects and that data will be in key, value pair because we are using setter usestate to render.

 ```const flagEmoji = {
 "😁": "Beaming Face with Smiling Eyes",
 "🤣": "Rolling on the Floor Laughing Face",
 "😭": "Loudly Crying Face",
 "😲": "Astonished Face"
  };  ```

this is the data on which we are going to do the process.

converting object into an array

to handle data we are going to use .map function for that we need to convert objects into arrays because the map function doesn't traverse through objects.
By using this we can get keys on screen and also we can click on that to get the meaning of that particular emoji,

at last, we need to use the setter function once again to render meaning. setMeaning(object[input])

I have made this app in https://neog.camp/ level zero program. so thanks to Tanay Pratap for teaching these concepts.