Forem: Greg

Traverse The DOM With Depth First Search Recursion

Greg — Thu, 24 Nov 2022 12:23:58 +0000

STOP READING THIS IF YOU CAN USE THE getElementById or querySelector API

TLDR;



myQuerySelectorAll(['div', 'p']);

Intro

The first time in the wild I came across a practical need to use an interview coding algo, I know what you are thinking whoaa no way.

Normally the getElementById API is great for targeting specific dom nodes. In my case I needed to target and style deeply nested p tags in the DOM tree that were served from a back end headless Content Management System (Think umbraco, strapi, shopify). There was no attributes so I was left with tagNames... and to the rescue came Depth First Search (DFS).

With the DFS approach recursion was inevitable to untangle the deeply nested if/else statements I created. The next question is in what order since there are 3 orders:

1 pre-order
2 in-order
3 post-order

Without getting into the weeds we are going with preorder here is a simple schematic of how the orders work.

Essentially I want to traverse from center to the left back up to center and to the right. If the center node doesn't have a child node then it's a dead end leaf node.

Generator Function - traversePreorder

Description: An iterator function that utilizes yield and yield*

Purpose: Iterate through the child DOM nodes in preorder center, left, right until there is none left



//GENERATOR FUNCTION MUST BE AT TOP

// TAKES PLACE OF THE getElementById API

function* traversePreOrder(node) {

  if (!node) return;

yield node; //pause and don't return anything yet

  for (let child of node.children) {

    //delegate or point to traversePreOrder and pass in each child

    yield* traversePreOrder(child);

  }

}

querySelector function - selectAll

querySelector MDN docs

"The querySelector() method of the Element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors."

Description: This is a callback function that utilizes the traversePreOrder generator function. Just like the MDN in the above quote docs state we need to return the children of the targeted selector

Purpose: Find the target selector style it's children and push it into an array



function selectAll(selector, root) {

  let result = [];

  for (let node of traversePreOrder(root)) {

    if (node.matches(selector)) {

      node.style.color = 'red';

      result.push(node);

    }

  }

  return result;

}

The Driving function - myQuerySelectorAll

Description: A parent function that drives the whole mechanism using recursion with two call backs (traversePreOrder, selectAll)

Purpose: I am handling the path of a selector with and without children using the selectAll callback and default to the document.body root node if no node parameter is passed in. I have also created a newPath variable and for loop to return array of all the children



function myQuerySelectorAll(path, node = document.body) {

  let result = [];

  //BASE CASE

  if (path.length === 0) return result;

//IF NO PATH PROVIDED START FROM THE DOCUMENT.BODY

  let root = node;

//THIS SETS THE SELECTOR PATH TO FIRST ELEMENT EX: DOCUMENT.QUERYSELECTORALL('DIV')[0]

  const selector = path[0];

//IF THERE IS ONLY ONE SELECTOR IN PATH, TRAVERSE USING SELECTALL FUNCTION

  if (path.length === 1) return selectAll(selector, root);

//CHECK IF THE CURRENT NODE MATCHES THE CURRENT SELECTOR PATH  AND SLICE OFF IT'S PARENT  FOR SUBSEQUENT SELECTORS

  const newPath = root.matches(selector) ? path.slice(1) : path;

  // LOOP THROUGH THE ROOT CHILDREN RETURN ARRAY OF NODES AND ADD ANY CAUGHT IN THE RECURSION

  for (let child of root.children) {

    result = [...result, ...myQuerySelectorAll(newPath, child)];

  }

  // NOTHING FOUND

  return result;

}

const findNestedPTags = myQuerySelectorAll(['div', 'p']);

// const findNestedX = myQuerySelectorAll(['div','p.x']);

console.log('findNestedPTags', findNestedPTags);

// console.log('findNested', findNestedX);

HTML



<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="style.css" />

    <title>DFS</title>

  </head>

  <body>

    <div>

      <h1>Traversing The DOM With Recursion</h1>

      Parent Div main container

      <div class="sibling">

        1 level deep #1 sibling has children

        <div>

          2 level deep

          <div>

            3 level deep

            <div>

              4 level deep container of p tag children

              <p>This is the target p tag to style red</p>

              <p>This is the target p tag to style red</p>

              <p>This is the target p tag to style red</p>

              <p>This is the target p tag to style red</p>

            </div>

          </div>

        </div>

      </div>

      <div class="sibling">1 level deep #2 sibling no children</div>

      <div class="sibling">1 level deep #3 sibling no children</div>

      <div class="sibling">

        1 level deep #4 sibling has children

        <div>

          2 level deep

          <div>

            3 level deep

            <div>

                4 level deep 

                <div>

                    5 level deep container of p tag children

                    <p>This is the target p tag to style red</p>

                    <p class="x" id="x">This is the target p tag to style red--test</p>

                    <p>This is the target p tag to style red</p>

                    <p>This is the target p tag to style red</p>

                </div>

            </div>

          </div>

        </div>

      </div>

      <div class="sibling">1 level deep #5 sibling no children</div>

    </div>

    <script src="index.js"></script>

  </body>

</html>

CSS



@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&amp;display=swap');

 {

  box-sizing: border-box;

}

/ Body centers the column at 100 vh and hide scrollbars */

body {

  background-color: #c4c1c6;

  color: whitesmoke;

  font-family: 'Roboto Mon0', sans-serif;

  margin: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100vh;

  overflow: hidden;

}

h1{

    text-align: center;

}

Notes:

There are several improvements needed such as abstracting the styling as an argument in the selecAll function and adding more logic to the selectAll function to not just handle selectors but node id's as well. The generator function could also be replaced with async await. All comments are welcome

Links

yield
yield*
querySelector
slice

❤️❤️❤️

repo

Social

Twitter
Linkedin
Portfolio
Github

🤘
Happy Coding

Make A Triangle in HTML/CSS

Greg — Mon, 12 Sep 2022 09:22:45 +0000

A typical interview question and a handy way to show off.
Heres what you need:
index.html
styles.css
A parent container div and Four divs
Liveserver



//index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
      integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Four Triangles</title>
  </head>
  <body>
    <h1>Four Triangles</h1>
    <div class="container">
<div class="triangleUp"></div>
<div class="triangleDown"></div>
<div class="triangleLeft"></div>
<div class="triangleRight"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>



@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@1,400;1,500;1,600;1,700&family=Roboto+Flex:opsz,wght@8..144,300&family=Roboto+Serif:opsz,wght@8..144,300&display=swap');
* {
  box-sizing: border-box;
}
/* Body centers the column at 100 vh and hide scrollbars */
body {
  font-family: 'Roboto Flex', sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background-color: #eee;
}
.container {
  display: flex;
  justify-content: space-evenly;
}
.triangleUp {
  margin: 3px;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid #555;
}
.triangleDown {
  margin: 3px;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 50px solid #555;
}
.triangleLeft {
  margin: 3px;
  width: 0;
  height: 0;
  border-bottom: 25px solid transparent;
  border-top: 25px solid transparent;
  border-right: 50px solid #555;
}
.triangleRight {
  width: 0;
  height: 0;
  margin: 3px;
  border-bottom: 25px solid transparent;
  border-top: 25px solid transparent;
  border-left: 50px solid #555;
}

The main concept here is there are three properties that are needed to create an equilateral triangle.

We only need three sides and can leave the fourth border out which collapses.

25px solid transparent;
25px solid transparent;
50px solid #555;

Render Deployment (free tier) of MERN App

Greg — Thu, 08 Sep 2022 22:40:49 +0000

A guide to deploying your full stack MERN app to Render

Prereqs:

Github Account
Render Account
A fully functional MERN APP and it's repo on Github Here
MongoDB Account

TLDR

Sign in to Render and create web service for your back end (Node, Express, MongoDB) and a static site for you front end (React).

Deployed App - Contact Bank
(warning Deployed link will take 30 seconds to spin up)

There are several ways to architect a full stack app for deployment on Render.
This tutorial is based of a MERN app with following file structure

Contact-Bank (root)/
├── client/
│   ├── src
│   ├── public
│   ├── node_modules
│   ├── .env
│   ├── .gitignore
│   ├── package-lock.json
│   └── package.json
├── config
├── models
├── node_modules
├── routes
├── seed
├── .env
├── .gitignore
├── package-lock.json
├── package.json
└── server.js

Workflow

(If you don't have an fully functional production ready MERN app, follow these steps below, otherwise go here)

The MERN Application

main branch for Render deployment
dev branch for Vercel deployment *optional (front end testing only)

We are focusing on the main branch. I created a MERN App called Contact Bank that is a basic CRUD app with contact information. I seeded 1000 contacts in the MongoDB.

If you need to test your state prior to seeding the database I have included a data folder on front end with contacts.json

I am using the ContextAPI for the state management, if you want to use hooks and prop drill that won't effect the deployment permitting all things are equal.
Steps:

Clone the repo git clone repo
Add your MongoDB connection string from MongoDB as an environment variable (do not hardcode this, it should be in your .env file) ex:
```
MY_MONGO_URI='mongodb+srv:...mongodb.net/contact-bank?retryWrites=true&w=majority'
```
Seed the MongoDB
- Run this command in your CLI
```
   node seed/seeds.js
```
from the same level as the server or the .env variables === undefined

In the root directory package.json scripts needed are

//package.json

  "scripts": {
      "start": "node server.js",
      "server": "nodemon server.js",
      "client": "npm start --prefix client",
      "clientinstall": "npm install --prefix client",
      "dev": "concurrently \"npm run server\" \"npm run 
       client\"",
      "render-postbuild": "NPM_CONFIG_PRODUCTION=false 
      npm install --prefix client && npm run build -- 
      prefix client"
    },

In the root directory CLI npm run dev and everything should run and changes in the UI should be reflected in the database.
Serve static assets in production, inside the server.js

if (process.env.NODE_ENV === 'production') {
    //*Set static folder up in production
    app.use(express.static('client/build'));

    app.get('*', (req,res) => res.sendFile(path.resolve(__dirname, 'client', 'build','index.html')));
  }

This step must be completed to move on to deployment.

Render

(If you have a fully functional production ready MERN App start here)

- Web Service

Create a Web Service
Settings

I have concurrency running with this script npm run dev

Environment

Environment variable for the MongoDB connection string

Logs

- Static site

Create A Static Site
Settings
I am telling Render to use this script to create a build folder from the root npm run render-postbuild and the path to the build folder is ./client/build since all of the npm commands are called in the root folder
Environment
Redirects/Rewrites
My route https://contact-bank.onrender.com/api/* must be the top rule since my routes in the server.js are created with /api/
Logs

Finally

Then after about 30 minutes the static site link https://contact-bank-a72l.onrender.com/ will be live

Yahooooo

I created this tutorial in light of the Heroku announcement so developers working with the MERN stack had some pathway to deploy their projects moving forward

Thanks for reading and Happy coding

Links 🔗

Conact-Bank Repo
Github Account
Render Account
MERN MongoDB
MongoDB
tree.nathanfriend.io

❤️❤️❤️

Social

Twitter
Linkedin
Portfolio
Github

🤘
Happy Coding

Truncate... with this JS function...

Greg — Mon, 06 Jun 2022 18:22:17 +0000

const str= 'I am a very long string thats needs discipline!' 
function truncate(str, n) {
     return str?.length > n ? str.substr(0, n - 1) + '...' : str;
  } 

truncate(str,24);

//'I am a very long string...'

The Gist

Pass the string onto the truncate function with the number indicating the the index of the string you want the ellipse(...) truncation to occur.
This versatile function does not only have to be 3 dots you can create 5 dots or any string character for that matter

❤️❤️❤️

Social

Twitter
Linkedin
Portfolio
Github

🤘

Happy Coding

CSS Debug With 3 Lines

Greg — Sun, 05 Jun 2022 18:52:34 +0000

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

I needed to debug some heavily styled css and this debugger is a game changer. Drop this into your css file and locate the bug.

❤️❤️❤️

Social

Twitter
Linkedin
Portfolio
Github

🤘

Happy Coding

JavaScript and React Fundamentals Quiz

Greg — Thu, 21 Apr 2022 09:19:12 +0000

JavaScript/React Fundamentals

This is a 48 multiple choice and 2 fill in the blank quiz to assess your JavaScript and React skill level.

1. What is Reconciliation in React?

A-The process through which React deletes the DOM.
B-It is a process to set the state.
C-The process through which React updates the DOM.
D-The process through which React updates and deletes the component.

2. How do you create a function in JavaScript?

A-function myFunction()
B-function = myFunction
C-function:myFunction()

3. What is the correct way to write a JavaScript array?

A-var colors = "red", "green", "blue"
B-var colors = (1:"red", 2:"green", 3:"blue")
C-var colors = ["red", "green", "blue"]
D-var colors = 1 = ("red"), 2 = ("green"), 3 = ("blue")

4. Which is the correct description of React State vs Props?

A-Prop is managed within the component and holds some information that may change over the lifetime of the component; State gets passed to the component, like a function parameter

B-Props is a copy of real DOM; State is the definition of the real DOM.

C-Props is something that the parent doesn’t need and decide to throw around among other parents; State is the parent’s favorite child and something the component wants to nurture.

D-Props get passed to the component using naming conventions, like a function parameter; State is managed within the component and holds some information that may change over the lifetime of the component.

5. What is the difference React Controlled Component vs Uncontrolled Component

A-Controlled Components: every state mutation does not have an associated handler function; Uncontrolled Components: does not store their own states internally

B-Controlled Components: A component who is so good at controlling itself; Uncontrolled Components: A component who has no idea how to control itself

C-Controlled Components: store their own states internally; Uncontrolled Components: every state mutation will have an associated handler function

D-Controlled Components: every state mutation will have an associated handler function; Uncontrolled Components: store their own states internally

6. Which operator is used to assign a value to a variable?

A) x
B) -
C) =
D) *
E) +

7. In your manifest.json what is the correct way to declare the location?

A-"default_locale": "en"
B-"local":"en"
C-"browser_locale": "en"
D-"country": "en"

8. What is the purpose Array.from() in the code below?

let titleElems = document.querySelectorAll('.article .title')
let titles = Array.from(titleElems).map(t=> t.textContext);
console.log(titles)

A-You need it, because querySelectorAll returns a NodeList, which doesn't have the map method, only arrays do.
B-This code is wrong and won't work.
C-You use it because it is hip.

9. In the function below, what do we use Object.assign for?

function doSomething(param={}){

var defaults= {
color:'red',
shape:'square'
}

    var settings =Object.assign({}, defaults, param);

    //.......more code
}

A-Checks whether defaults equals param.
B-You use it to provide default parameters to the function, which users can override.
C-Create a string containing 'defaults' and 'param'.

10. How do you find the number with the highest value of x and y?

A-Math.max(x, y)
B-top(x, y)
C-ceil(x, y)
D-Math.ceil(x, y)

11. How do you round the number 7.25, to the nearest integer?

A-Math.round(7.25)
B-round(7.25)
C-Math.rnd(7.25)
D-rnd(7.25)

12. Which are the correct phases of the React component lifecycle?

A-Mounting: componentWillUnmount(); Updating: render(); Unmounting: setState()

B-Mounting: getDerivedStateFromProps(); Updating: componentWillUnmount(); Unmounting: shouldComponentUpdate()

C-Mounting: componentDidMount(); Updating: componentDidUpdate(); Unmounting: componentWillUnmount()

D-Mounting: constructor(); Updating: getDerivedStateFromProps(); Unmounting: render()

13. Which language is this?

class Vehicle {
constructor(model, wheels){
    this.model = model;
    this.wheels = wheels;
    }
      makeSound(){
      console.log('Vroom Vroom');
      }
}

class Car extends Vehicle {
           constructor(model){
                     super(model,4);
                   }
}

A-Python
B-JavaScript
C-C#
D-PHP

14. What does the "const" declaration do?

const pi = 3.14;
console.log(pi)

A-const turns variables into constants, and they can't be changed.
B-It is used to define math-related variables.
C-It is exactly the same as let.

15. How to write an IF statement for executing some code if "i" is NOT equal to 5?

A-if i =! 5 then
B-if i <> 5
C-if (i != 5)
D-if (i <> 5)

16. What is the correct way to access translation data in your JavaScript?

A-browser.i18n.getMessage("notificationTitle");
B-i18n.getMessage("notificationTitle");
C-getMessage("notificationTitle");
D-i18n("notificationTitle")
E-browser.i18n("notificationTitle");

17. What does the below code do?

let a = 12, b = 3;
[a, b]=[b, a];

A-Swap the values inside a and b, without using extra variables.
B-Make both a and b equal 12.
C-Create an array containing a and b.

18. What is the correct syntax for referring to an external script called "xyz.js"?

A-<script href="xyz.js">
B-<script src="xyz.js">
C-<script name="xyz.js">

19. What's the ES6 way for quick initialization of objects from variables?


//Old Way 
var name = 'Johnny', job = 'secret agent', from ='England';
var person ={
    'name':name,
    'job':job,
    'from': from
};

// A
let  name = 'Johnny', job ='secret agent', from ='England';
let person = new Object(name, job, from);

// B 
let  name = 'Johnny', job ='secret agent', from ='England';
let person ={name, job, from};

C-None of these are correct.

20. JavaScript is the same as Java.

A-False
B-True

21. Which method can be used to clean up this old JavaScript code?

var arr =[12,3,42,55,10]

function someFunc(arr){

for(let i=o; i<arr.length; i++){
     if(arr[i]>32){
    return arr[i];
    }
  }
}

// A
arr.find(n=> n>32);

// B
arr.findIndex(n=> n>32);

// C
arr.search(n => n>32)

22. Is there anything incorrect in this String interpolation example?

let name ='Harry';
let occupation ='plumber';
console.log(`Hi! my name is ${name}.
I am ${occupation}.`)

A-This is wrong. You can't break a string into separate lines in JavaScript!

B-There is nothing wrong with it. This is how string interpolation works in ES6.

C-This is wrong. You can't embed variables in strings in JavaScript!

23. How does a WHILE loop start?

A-while (i <= 10)
B-while i = 1 to 10
C-while (i <= 10; i++)

24. How do you declare a JavaScript variable?

A-var carName;
B-let carName;
C-const carName;
D-All of the Above

25. ES6 gives us a "let" statement - a new way to declare variables. Can you guess what it does?

let x= 149
if(x>99){

let x= 1;
}
console.log(x)

A-It functions exactly like var.
B-Always makes variables equal 149.
C-Introduces block scoping. Variables defined with let are available only in the nearest enclosing block.

26. Where is the correct place to insert a JavaScript?

A-The <body> section
B-Both the <head> section and the<body> section are correct
C-The <head> section

27. Explain this code:

new webpack.ContextReplacementPlugin(/moment[\/\\]local/,/(en-gb | en-us)\.js/)

Describe = ________________

28. What is the content of the variable "a"?

function mystery(...params) {
     return params;
}
let a = mystery(1,23,4)

A) "a" becomes "1 23 4"
B) "a" becomes [1,23,4]
C) "a" is undefined

29. What is the correct usage for an arrow functions work?

// Old Way 

var arr =[3,5,8];
var plus_one = arr.map(function(n){
return n+1; 
})
console.log(plus_one); //Prints [4,6,9]

// A
let arr =[3,5,8];
let plus_one = arr.map(n => n+1);

// B
let arr =[3,5,8];
let plus_one = arr.map(n ---> n+1);

C- None of these are correct.

30. What will the following code return: Boolean(10 > 9)

A-false
B-NaN
C-true

31. How does a FOR loop start?

A-for (i = 0; i <= 5)
B-for (i = 0; i <= 5; i++)
C-for i = 1 to 5
D-for (i <= 5; i++)

32. What is the correct JavaScript syntax to change the content of the HTML element below? `<p id="demo">` This is a demonstration.`</p>`

A-#demo.innerHTML = "Hello World!";
B-document.getElement("p").innerHTML = "Hello World!";
C-document.getElementById("demo").innerHTML = "Hello World!";
D-document.getElementByName("p").innerHTML = "Hello World!";

33. What results will these function calls return?

function add(a=10, b=5){
return a+b;
}
// A
add(11,2);

// B
add(3);

// C
add(undefined, 20);

// D
add();

1) A - 15, B - 13, C - 30, D - 15
2) A - 13, B - 8, C - 30, D - 15
3) A - 13, B - 13, C - 30, D - undefined

34 Inside which HTML element do we put the JavaScript?

A-<script>
B-<javascript>
C-<scripting>
D-<js>

35. What is the correct JavaScript syntax for opening a new window called "w2" ?

A-w2 = window.open("http://www.w3schools.com");
B-w2 = window.new("http://www.w3schools.com");

36. How can you detect the client's browser name?

A-navigator.appName
B-browser.name
C-client.navName

37. How do you call a function named "myFunction"?

A-call myFunction()
B-call function myFunction()
C-myFunction()

38. Your javascript bundle is too large and is causing performance issues. Please describe the steps you would take to fix this issue

Describe__________

39. How to write an IF statement in JavaScript?

A-if i == 5 then
B-if (i == 5)
C-if i = 5
D-if i = 5 then

40. Is JavaScript case-sensitive?

A-Yes
B-No

41. What is the recommended structure for providing localized strings via i18n?

A-Using the language as the name of as JSON file in the root (en.json)

B-Using the local folder structure for JSON (local/en.json)

C-Using the _locales folder structure to nest messages (_locales/en/messages.json)

D-Using YAML structure (en.xaml)
Parsing text files or ini equivalent

42. Which of these examples is the correct ES6 way to replace the "Old Way"?


//Old Way
let arr =[17,42,122]
for(let i=0; i<arr.length; i++){
console.log(arr[i]);
} 

// A
let arr =[17,42,122]
for(let i in arr){
console.log(`This the A answer ${arr[i]}`);
}

// B
let arr =[17,42,122]
for(let i of arr){
console.log(`This the B answer ${i}`);
}

C-They do the same thing.

43. What is the React “key” prop?

A-“Key” prop is a way for React to identify a newly added item in a list and compare during the “diffing” algorithm.
B-It is one of the attributes in HTML.
C-“Key” prop is just there to look pretty and there is no benefit whatsoever.

44. All I know is that it is NOT commonly used in array.

What is stored into the triangle array?

var point =[1,3];
segment=[point,[5,5]],
triangle=[...segment,[1,8]];

A-23
B-[ [1,3], [5,5], [1,8] ]
C-[1,3,5,5,1,8]

45. How do you write "Hello World" in an alert box?

A-msgBox("Hello World");
B-alert("Hello World");
C-alertBox("Hello World");
D-msg("Hello World");

46. What is the correct ES6 function to replace this code?

let some_text ='some cool string';

if(some_text.indexOf('str') != -1){
return true;

A-some_text.repeat()
B-some_text.endsWith()
C-some_text.includes()

47. How can you add a comment in a JavaScript?

A-//This is a comment
B-
C-'This is a comment

48. The external JavaScript file must contain the `<script>` tag.

A-False
B-True

49. Which event occurs when the user clicks on an HTML element?

A-onclick
B-onchange
C-onmouseclick
D-onmouseover

50. How to insert a comment that has more than one line?

A-//This comment has more than one line//
B-
C-/*This comment has more than one line*/

Answers 🔑

1C
2A
3C
4D
5D
6C
7A
8A
9B
10A
11A
12C
13B
14A
15C
16A
17A
18B
19C
20A
21A
22B
23A
24D
25C
26B
27 File matching
28B
29A
30C
31B
32C
33-2
34A
35A
36A
37C
38 Compress with a gzip, webpack plugin, check image types and sizes, see the console network tab for load times
39b
40A
41C
42C
43A
44B
45B
46C
47A
48A
49A
50C

Social ❤️

Twitter
Linkedin
Portfolio
Github

Thank you for your time.

Best,

Happy Coding!

JWT In Plain English

Greg — Fri, 15 Apr 2022 10:21:31 +0000

TLDR;

Install json web token npm i jsonwebtoken
Require
Generate token
Sign the json web token with the users id, secret and expiration time
Check the token in Postman, Database, and jwt.io
Build a route to protect and create the logic
Create middleware to verify the token for the current user
Place middleware into the desired route to protect

What is a json web token?

A secure way to access protected routes through authenticating users and sharing information.
The issuer uses a secret to sign the JWT. The receiver will verify the signature to make sure the token hasn’t been altered after it was signed by the issuer.

Context

I am building a MERN (MongoDB, Express, React, Node) app that will have a user register as a new user or login if the user already exists. The user's information gets stored in the MongoDB database via Express and Node on the Backend. I am utilizing the MVC (Model-view-controller) pattern for separation of concerns, see the link for more info on MVC.

Versions

node v16.13.1
bcryptjs v^2.4.3,
express v^4.17.3,
express-async-handler v^1.2.0,
jsonwebtoken v^8.5.1,
mongoose v^6.2.10

Drilling down further in this demo will only need to focus on the
userController.js, authMiddleware.js, and userRoutes.js see the file structure below:

client also known as view

client
backend
   |config
   |-controller        
         |-userController.js
   |-middleware
         |-authMiddleware.js
   |models
   |-routes
         |-userRoutes.js
   |server
.env
.gitignore
package-lock.json
package.json

Once you have created a user in your database you will need login typically with a password and email. I use bcryptjs to salt my users password from plaintext to a hashed password and confirmed this on Postman and in the database MongoDB. Now you are ready to create the json web token.

Set up the json web token

Step 1

Install

In your cli run npm i jsonwebtoken check if it's in your package.json "jsonwebtoken": "^8.5.1"

Step 2

Require

In your controller folder, open a file with the users routes logic. I called mine userController.js bring in const jwt = require ('jsonwebtoken')
See my code:

backend>controllers>userController.js

userContoller.js

// Simple middleware for handling exceptions inside of async express routes and passing them to your express error handlers. Need to wrap entire function
const asyncHandler = require('express-async-handler');

// Use bcrypt to hash the password
const bcrypt = require('bcryptjs');

// Bring in the user model
const User = require('../models/userModel');

// Bring in jsonwebtoken
const jwt = require ('jsonwebtoken')

Step 3

Generate A Token

Generate a token and pass the users id. The generateToken function will return a .sign method

userContoller.js

const generateToken = (id)=> {
return jwt.sign({})
}

Step 4

Sign The Token

The returned .sing method will take in 3 arguments

users id, an object
secret (can be anything and should be hidden in your .env)
expiration time, an option object

userContoller.js

const generateToken = (id)=> {
return jwt.sign({id},process.env.JWT_SECRET,{expiresIn:'4d'})
}

Step 5

Put It Together
The token needs to be generated with the users id. In my user collection in MonogDB this would be user._id and must be signed. In the register and login route there will be a res.json({}) that gets returned and in the object will have token:generateToken(user._id)

backend>controllers>userController.js

userContoller.js

const registerUser=()=> {
code logic...
res.status(200).json({
  // user in mongodb stores id as _id
  _id: user._id,
  name: user.name,
  email: user.email,
  token:generateToken(user._id)
  });
}

const loginUser=()=> {
code logic...
res.status(200).json({
  // user in mongodb stores id as _id
  _id: user._id,
  name: user.name,
  email: user.email,
  token:generateToken(user._id)
  });
}

The generate function

backend>controllers>userController

userContoller.js

// GENERATE TOKEN
const generateToken = (id) => {
  return jwt.sign({ id }, process.env.JWT_SECRET, {
    expiresIn: '4d'
  });
};

Step 6

Check For Confirmation
I deleted my test user from my database and registered a new user with Postman to manually verify the token was passed http://localhost:5000/api/users

Inside the token is the users id. Manually verify it, copy and paste your token into jwt.io the field on the left and on the right you will see the payload

The payload circled in red should match the _id in Postman and the _id in your database.

Halfway Home

Now that we created a token how do we use it? The protected route functionality can be achieved in several ways.
Here's how I would do it: build a route, create the logic, create middleware, bring the middleware into the route to protect.

Build a route I want to protect called router.get('/me', getUser); in the routes folder in userRoutes.js, later we will come back to this file and add the middleware.

backend>routes>userRoutes.js

userRoutes.js

const express = require('express');
const router = express.Router();

// bring logic from the controllers folder
const { registerUser, loginUser, getUser } = require('../controllers/userController');

// example: router.method(path, logic)
router.post('/', registerUser);
router.get('/login', loginUser);

// protected route, will add protect middleware last
router.get('/me', getUser);

module.exports = router;

Create getUser logic in the controllers like this

backend>controllers>userController.js

userController.js

const asyncHandler = require('express-async-handler');
const bcrypt = require('bcryptjs');
const User = require('../models/userModel');
const jwt = require('jsonwebtoken');

const registerUser=()=> {
code logic...
}

const loginUser=()=> {
code logic...
}

const getUser = asyncHandler(async (req, res) => {
  const user = {
    id: req.user._id,
    email: req.user.email,
    name: req.user.name
  };
  res.status(200).json(user);
});

const generateToken = (id) => {
  return jwt.sign({ id }, process.env.JWT_SECRET, {
    expiresIn: '4d'
  });
};

module.exports = {
  loginUser,
  registerUser,
  getUser
};

Add a piece of middleware called authMiddleware.js with a function called protect to verify the token will get passed into the headers and return only the specific user info for that token.

backend>middleware>authMiddleware.js

authMiddleware.js
// *MIDDLEWARE FOR PROTECTED ROUTES
const jwt = require('jsonwebtoken');
const asyncHandler= require('express-async-handler');
const User = require('../models/userModel');

const protect= asyncHandler(async(req, res, next)=> {
    let token;

// Bearer token
// Check for token in the headers for authorization and Bearer token
if(req.headers.authorization && req.headers.authorization.startsWith('Bearer')){
try {
    // Get the token from the header
    // it comes back as "Bearer token" must split at space
    // split will return[Bearer token] and need the second item
    token= req.headers.authorization.split(' ')[1]

    // Verify the token value has not changed and the secret is the same
    const decoded = jwt.verify(token, process.env.JWT_SECRET)

    // Return the user from the user id in the token minus the password
    req.user =await User.findById(decoded.id).select('-password');

next()

} catch (error) {
console.log(error);
res.status(401)
throw new Error('Not Authorized')
}
}

//  If there is no token in the first place
if(!token){
    res.status(401)
    throw new Error('Not Authorized')
}

})
module.exports = {protect}

Lastly bring the protect function middleware into the userRoutes.js.

backend>routes>userRoutes.js

userRoutes.js

const express = require('express');
const router = express.Router();

// Bring logic from the controllers folder
const { registerUser, loginUser, getUser } = require('../controllers/userController');

// Bring in middleware to protect routes
const {protect}= require('../middleware/authMiddleware');

// example: router.method(path, logic)
router.post('/', registerUser);
router.get('/login', loginUser);

// protected route
router.get('/me',protect, getUser);

module.exports = router;

Finally check the protected route through Postman to verify it's protected. You'll want to use the Auth tab and paste your token in from your login route

We are finished here!

Thank you for your time.

Happy Coding!

Social ❤️

Twitter
Linkedin
Portfolio
Github

React Self Assessment

Greg — Tue, 05 Apr 2022 21:24:57 +0000

17 Question to Audit Your React Dev Skills

I always look for room to improve my react dev skills. The react assessment may build your confidence or discover a weakness either way a Win-Win 🏆.

disclaimer: Although understanding legacy code is great skill. The test questions may not be up to date with the latest version of React.

Lets begin 🐐

Question 1

How do you access a function fetch() from an h1 element in JSX?

a) <h1>{fetch()}</h1>
b) <h1>${fetch()}</h1>
c) <h1>{fetch}</h1>
d) <h1>${fetch}</h1>

Correct answer = a) <h1>{fetch()}</h1>

Question 2

Which method in a React Component should you override to stop the component from updating?

a) willComponentUpdate
b) shouldComponentUpdate
c) componentDidUpdate
d) componentDidMount

Correct answer = b) shouldComponentUpdate

Question 3

What's used to pass data to a component from outside?

a) setState
b) render with arguments
c) PropTypes
d) props

Correct answer = d) props

Question 4

Which method in a React Component is called after the component is rendered for the first time?

a) componentDidUpdate
b) componentDidMount
c) componentMounted
d) componentUpdated

Correct answer = b) componentDidMount

Question 5

Which of the following is a must API for every React.js component?

a) SetinitialComponent
b) renderComponent
c) render
d) All of the above

Correct answer = b) renderComponent

Question 6

What is the use of webpack command in React.js?

a) The "webpack" command is used to transpile
b) all the JavaScript down into one file
It runs React local development server
c) It is a module bundler
d) None of the above

Correct answer = c) It is a module bundler

Question 7

Which of the following is correct syntax for a button click event handler, foo?

a) <button onclick={this.foo()}>
b) <button onclick={this.foo}>
c) <button onClick={this.foo()}>
d) <button onClick={this.foo}>

Correct answer = d) <button onClick={this.foo}>

Question 8

What happens when you call setState() inside render() method?

a) Repetitive output appears on the screen
b) Stack overflow error
c) Duplicate key error
d) Nothing happens. Life goes on!

Correct answer = b) Stack overflow error

Question 9

How do you write an inline style specifying the font-size:12px and color:red; in JSX

a) style={{font-size:12,color:'red'}}
b) style={{fontSize:'12px',color:'red'}}
c) style={fontSize:'12px',color:'red'}
d) style={{font-size:12px,color:'red'}}

Correct answer = b) style={{fontSize:'12px',color:'red'}}

Question 10

Which of the following concepts is/are key to ReactJS?

a) Event delegation model
b) Component-oriented design
c) Both of the above
d) None of the above

Correct answer = c) Both of the above

Question 11

Which of the following are the advantages of React.js?

a) Increases the application’s performance with Virtual DOM
b) JSX makes a code that is easy to read and write
c) It renders both on client and server side
Easy to integrate with other frameworks(Angular, BackboneJS) since it is only a view library
d) All of the above

Correct answer = d) All of the above

Question 12

Which of the following command is used to install create-react-app?

a) npm install -g create-react-app
b) npm install create-react-app
c) npm install -f create-react-app
d) install -g create-react-app

Correct answer = a) npm install -g create-react-app

*Alternatively npx create-react-app if you have Node >= 14.0.0 and npm >= 5.6 on your machine.

Question 13

What of the following is used in React.js to increase performance?

a) Original DOM
b) Virtual DOM
c) Both A and B.
d) None of the above.

Correct answer = b) Virtual DOM

Question 14

Which of the following keyword is used to create a class inheritance?

a) Create
b) Inherits
c) Extends
d) This

Correct answer = c) Extends

Question 15

True or false: Test should be written before code is written?
a) True
b) False

Correct answer = a) True

Question 16

Considering the code below, how many times would "Hello" be displayed in the console?

import { useState, useEffect } from "react";

    export default function App(props) {
      const [counter, setCounter] = useState(0);
      useEffect(() => {
        console.log("Hello");
        setCounter(1);
      }, [props.visible]);
      return <div className="App">{counter}</div>;
    }

a) 1
b) 2
c) 3
d) 4

Correct answer = a) 1

Question 17

.What happens when the following render() method executes?

render(){
   let langs = ["Ruby","ES6","Scala"]
     return (<div>
       {langs.map(it => <p>{it}</p>)}
     </div>)
 }

a) Displays the list of languages in the array
b) Error. Cannot use direct JavaScript code in JSX
c) Displays nothing
d) Error. Should be replaced with a for..loop for correct

Correct answer = a) Displays the list of languages in the array

🔑

1A
2B
3D
4B
5B
6C
7D
8B
9B
10C
11D
12A
13B
14C
15A
16A
17A

Links 🔗

CRA

React Components

Inheritance

Social

Twitter
Linkedin
Portfolio
Github

Thank you for your time.

Best,

❤️

Happy Coding

useRef Hook In React

Greg — Thu, 10 Mar 2022 12:39:31 +0000

useRef

Demo
repo

The useRef hook in React is a quick and easy way to access and mutate a DOM element without causing a state change or re-render. useRef docs

*Disclaimer: When you need to make state changes use the useState hook. Using the useRef hook in place of the useState hook is an anti-pattern.

useRef looks like this:

const box = useRef(initialValue);

Code Set Up:
Create a folder and open up VScode and run create react app commands CRA. Once your set up trim the folder down to bare essentials see my repo and update the following three files:

App.css


 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 24px;
}

body {
  font-family: 'Courier New', Courier, monospace;
  background-color: rgba(148, 30, 9, 0.76);
  color: whitesmoke;
  line-height: 1.8;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 768px;
  margin: auto;
  padding: 0 20px;
}

label,
h1,
label {
  text-align: center;
  width: 200px;
}
button {
  background-color: dodgerblue;
  color: honeydew;
  height: 50px;
  width: 100px;
  margin: 16px;
}

App.js

import './App.css';
import UseRefHook from './UseRefHook';

function App() {
  return (
    <>
      <UseRefHook />
    </>
  );
}

export default App;

UseRefHook.js

import React from 'react'

export const UseRefHook = () => {
  return (
    <div className="container">
    <h1>useRef Demo</h1>
    <form>

    </form>
    <label htmlFor='box'>Box Input </label>
    <input type='text' id='box'/>
    <button type='submit'>Enter</button>
  </div>
  )
}
export default UseRefHook

Run npm start in the CLI and you should see this

The useRef hook has one property called

.current

and it's an object holding the mutable value passed to it.

By passing an object to the ref attribute

<input type='text' ref ={box} id='box'/>

We gain access to the DOM node and the .current property is set to the value.

Check The Console

See this in the console.logs in the onSubmit function

UseRefHook.js

import { useRef } from 'react';

 export const UseRefHook = () => {
  const box = useRef();

  const onSubmit = (e) => {
    e.preventDefault();
    console.log(box);
    console.log(box.current);
    console.log(box.current.value);
  };
  return (
    <div className='container'>
      <h1>useRef Demo</h1>
      <form onSubmit={onSubmit}>
        <label htmlFor='box'>Box Input </label>
        <input type='text' ref={box} id='box' />
        <button type='submit'>Enter</button>
      </form>
    </div>
  );
}
export default UseRefHook

//The current object
console.log(box); // {current: input#box}

//The DOM node 
console.log(box.current); //{current: input#box}

//The value of the DOM node
console.log(box.current.value); //hello world

Lets See Some Action

I have set the value of box to change color and "Thank you" when submitted

UseRefHook.js

import { useRef } from 'react';

 export const UseRefHook = () => {
  const box = useRef();

  const onSubmit = (e) => {
    e.preventDefault();
    // console.log(box);
    // console.log(box.current);
    // console.log(box.current.value);

    // Set the value directly and this doesn't cause a re-render
    // When submitted change color of field and say Thank you
    box.current.style.backgroundColor="dodgerblue"
    box.current.value= 'Thank you'

  };
  return (
    <div className='container'>
      <h1>useRef Demo</h1>
      <form onSubmit={onSubmit}>
        <label htmlFor='box'>Box Input </label>
        <input type='text' ref={box} id='box' />
        <button type='submit'>Enter</button>
      </form>
    </div>
  );
}
export default UseRefHook

Further considerations:
useRef is not limited to a DOM node and can reference any value such as the previous state.

Links 🔗

Demo
repo
Hooks
useRef

❤️❤️❤️

Social

Twitter
Linkedin
Portfolio
Github

🤘

Happy Coding

REACT -- Convert a Class Component to Functional Component with Hooks Guide w/ES6

Greg — Mon, 07 Mar 2022 18:54:58 +0000

Demo
repo

In React, the class components and lifecycle methods have changed quite a bit in the last few years. Often times a developer may be handling legacy code and the newer paradigm of functional components and hooks. In this article I will use a basic example of converting a class component into a functional component with the hooks. Repo

The Rules Functional && Class Components

props are read-only, the same props must return the same result. Components that respect their props are called “pure”.
Do not mutate the state directly

The Functional vs Class:

Functional Component

Takes advantage of functional programming
A function with a traditional return statement
Functional Components can be stateless
Commonly use the useState hook that updates (overwrites) the state.
UseEffect takes place of the lifecycle methods

Class Component

Takes advantage of object oriented programming
Creates objects via constructor function, a built in JavaScript class method
The 'class', 'constructor', 'super', 'this' and 'new' keyword are needed
JSX is returned in the render statement
The render lifecycle must be managed explicitly
Use the setState and will merge the state
Method Binding

App.css



* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Courier New', Courier, monospace;
  background-color: rgba(125, 137, 238, 0.877);
  color: whitesmoke;
  line-height: 1.6;
}

ul {
  list-style: none;
}
h1, h2 {
  text-align: center;
}
.container {
  max-width: 768px;
  margin: auto;
  padding: 0 20px;
}

App.js



import './App.css';
import Dogs from './Dogs';
import Cats from './Cats';

const App = () => {
  return (
    <div className='container'>
      <h1>Class to Functional</h1>
      <Dogs />
      <Cats />
    </div>
  );
};

export default App;

Class Component

Cats.js



import React from 'react';

class Cats extends React.Component {
  render() {
    return(
<>
<h1 style={{ color: 'blue' }}>A Class Component</h1>
<h1>Hello Cats</h1>
</>
)
  }
}
export default Cats;

Functional Component w/ES6

Dogs.js



import React from 'react';

const Dogs = () => {

  return (
<>
<h1 style={{ color: 'red' }}>A Functional Component</h1>
<h1>Hello Dogs</h1>
</>
)
};

export default Dogs;

Simple demo rendering a class and functional component

A Class Component with State, Props, and Lifecycle Method

Cats.js



import React from 'react';
import Kittens from './Kittens';


class Cats extends React.Component {
  constructor() {
    super();
    this.state = { color: 'yellow', name: 'Tartar', kittens:3 };
  }
  componentDidMount() {
alert('This componentDidMount to the DOM')
  }
  changeColor = () => {
    this.setState({color: "red"});
  }
  render() {
    return (
      <div>
        <h1 style={{ color: 'blue' }}>A Class Component</h1>
        <h2>Hello Cats</h2>
        <h2>
          Hello Cats. My name is {this.state.name} and I am the color {this.state.color}.
        </h2>
        <Kittens kittens={this.state.kittens}/>

        <button type='button' onClick={this.changeColor}>
          Class Change color
        </button>
      </div>
    );
  }
}
export default Cats;

The (Kittens.js) Child Class Component

Kittens.js



import React from 'react'

class Kittens extends React.Component{


render() {
    return 
<>
<h1 style={{ color: 'blue' }}>A Class Component</h1>
<h2>Tartar has {this.props.kittens} kittens</h2>
</>
}
}
export default Kittens;

Let's Change the Class Component Cats.js to A Functional Component

I am creating new component called 'ChangeCat.js'

Side Note:

The child component called Kittens.js remained a class but still reads the props from ChangeCat.js we could go further and change the Kittens.js to functional component which would be consistent with the paradigm.

App.js



import './App.css';
import Dogs from './Dogs';
import Cats from './Cats';
import ChangeCat from './ChangeCat';

const App = () => {
  return (
    <div className='container'>
      <h1>Class to Functional</h1>
      <Dogs />
      <Cats />
      <ChangeCat />
    </div>
  );
};

export default App;

ChangeCat.js



import React, { useEffect, useState } from 'react';
import Kittens from './Kittens';
const ChangeCat = () => {
  const [catInfo, setCatInfo] = useState({
    name: 'Tartar',
    color: 'Yellow',
    kittens: 3
  });

  useEffect(() => {
    alert(
      "This was the componentDidMount in Cats.js but now it's coming from the ChangeCat.js useEffect to the DOM"
    );
  }, []);

  const handleClick = (e) => setCatInfo({ ...catInfo, color: e.target.value });

  return (
    <>
      <h1 style={{ color: 'red' }}>A Functional Component</h1>

      <h2>
        Hello Cats. My name is {catInfo.name} and I am the color {catInfo.color}
        .
      </h2>
      <Kittens kittens={catInfo.kittens} />
      <button type='button' value='red' onClick={handleClick}>
        Functional Change Color
      </button>
    </>
  );
};

export default ChangeCat;

Summary

Legacy code is challenging.

This demo compared Dogs.js (functional) and Cats.js (Class) components both can be used in React.
I created a class component with more complexity to include state, passing props to a child class component, and a lifecycle method.
I changed the Cats.js class component to a functional component called ChangeCat.js
Final Result is a functional component ChangeCat.js with a class component child.

Give it a try and convert the rest of the class components to functional components Repo

Links 🔗

React Docs
Demo

❤️❤️❤️

Social

Twitter
Linkedin
Portfolio
Github

🤘
Happy Coding

Multiple Radio Buttons in React

Greg — Fri, 25 Feb 2022 14:24:56 +0000

Demo
repo

We have all been there staring at the same five or more radio buttons with same value or worse no value.

All we want is each radio button to have their own state value. The confusion lies at the heart of the DOM value vs the DOM element

Intro

I am going to code five radio buttons and show the underpinnings of react and how to handle multiple buttons in a single piece of state

Short version:

The value of an element is a primitive data type:boolean, number etc
The element is the actual node like html tag, className, id etc
Event handler will make the connection to the state

Getting started

npx create-react-app radio-buttons See the screenshot for the folder structure and code. I cleaned up the boilerplate and added useState go here for the repo.

App.js



const App = () => {
  return (
    <div className='App'>
      <h1>Radio Journey</h1>
    </div>
  );
};

export default App;

Index.js



import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Index.css

Style for style points on your own or see mine later in the demo Styles

Ok now that we have the basic set up lets code through it.

We need to add state and a radio button such as



import { useState } from 'react';

const App = () => {
  //STATE
  const [isRadio, setIsRadio] = useState(5);

  return (
    <div className='App'>
      <h1>Radio Journey</h1>
      <ul>
        <li>
          <input />
          <label>1</label>
        </li>
      </ul>
    </div>
  );
};

export default App;

Next the `<input/>` and `<label/>` need a few props like so



import { useState } from 'react';

const App = () => {

//STATE
  const [isRadio, setIsRadio] = useState(5);


  return (
    <div className='App'>
      <h1>Radio Journey</h1>
      <ul>
        <li>
          <input
            type='radio'
            id='radio1'
            value='1'
            onChange={handleChange}
            checked={isRadio === 1}
          />
          <label htmlFor='num1'>1</label>
        </li>
      </ul>
    </div>
  );
};

Styles

add style to get a visual interface of whats going on. Add this to your index.css



* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Courier New', Courier, monospace;
  background-color: #090c57cb;
  color: #fff;
  line-height: 1.8;
}

ul {
  list-style: none;
}
h1 {
  text-align: center;
}
.container {
  max-width: 768px;
  margin: auto;
  padding: 0 20px;
}

input {
  flex-grow: 2;
  border: none;
  font-size: 16px;
}

input:focus {
  outline: none;
}

.radios {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 30px 0 40px;
}

.radios li {
  position: relative;
  background: #f4f4f4;
  width: 50px;
  height: 50px;
  padding: 10px;
  text-align: center;
  border-radius: 50%;
  font-size: 19px;
  border: 1px #eee solid;
  transition: 0.3s;
}
li label {
  position: absolute;
  top: 110%;
  left: 0;
  width: 50px;
  height: 50px;
  padding: 10px;
  border-radius: 50%;
}

.radios li:hover {
  background: #f00303;
  color: #fff;
}

[type='radio'] {
  opacity: 0;
}

[type='radio']:checked ~ label {
  background: #f00303;
  color: #fff;
}

Should look like this

The <input/> has everything it needs and we have styles. Next address the handleChange and add four more radio buttons.



import { useState } from 'react';

const App = () => {
  //STATE
  const [isRadio, setIsRadio] = useState(5);

  // HANDLE THE ONCHANGE HERE

  const handleChange = (e) => {
    // string passed in
    // a string returned by default
    console.log(e.currentTarget.value);
    // add + to the event to make the value a number
    setIsRadio(+e.currentTarget.value);
  };

  return (
    <div className='App'>
      <h1>Radio Journey</h1>
      <ul className='radios'>
        <li>
          <input
            type='radio'
            id='radio1'
            value='1'
            onChange={handleChange}
            checked={isRadio === 1}
          />
          <label htmlFor='num1'>1</label>
        </li>
        <li>
          <input
            type='radio'
            id='radio2'
            value='2'
            onChange={handleChange}
            checked={isRadio === 2}
          />
          <label htmlFor='num2'>2</label>
        </li>
        <li>
          <input
            type='radio'
            id='radio3'
            value='3'
            onChange={handleChange}
            checked={isRadio === 3}
          />
          <label htmlFor='num3'>3</label>
        </li>
        <li>
          <input
            type='radio'
            id='radio4'
            value='4'
            onChange={handleChange}
            checked={isRadio === 4}
          />
          <label htmlFor='num4'>4</label>
        </li>
        <li>
          <input
            type='radio'
            id='radio5'
            value='5'
            onChange={handleChange}
            checked={isRadio === 5}
          />
          <label htmlFor='num5'>5</label>
        </li>
      </ul>

You should have this in your browser:

Notice the console.log(e.currentTarget.value)

Here is definition of the currentTarget Docs here:
"The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM."

Let's run back through it. We have five radio buttons each one has a string value captured by the handleChange function when clicked. The string value needs to be changed to a number by adding the '+' sign in front of the e like so setIsRadio(+e.currentTarget.value);

Now that the clicked value is a number it gets updated to the state and isRadio is a new value. The checked prop is a unique identifier for the state to match to 'Hey checked your number value matches let's make you the star of the show'.

click event > handleChange > updates state > checked made it to the show.

Like always confirm with dev tools:

Conclusion
In this demo my intent was to show how to effectively utilize one piece of state with hooks and multiple radio buttons in code. The console and dev tools confirmed the UI is matching the state changes. I hope this demo was helpful. This demo is could easily be used to create your next radio button component and be further optimized.

There are a few ways to handle multiple radio buttons especially as they get nested into components which is out of the scope of this demo.

Links 🔗

useState
Input
Checked
currentTarget

❤️❤️❤️

Social

Twitter
Linkedin
Portfolio
Github

🤘
Thank you for reading happy coding!

Github Repo

GregPetropoulos / Radio-Buttons-Demo

A demo on several radio buttons. I created five radio buttons and show the underpinnings of react and how to handle multiple buttons in a single piece of state

Github Repo Setup for React App

Greg — Wed, 27 Oct 2021 23:34:16 +0000

repo

React && Github

I will discuss the appropriate way to create a react application that points to a Github repo. First, I will set up a react application locally. Secondly, set up a Github repo and lastly point my local react application to the newly created Github repo to push my changes to.

*Prerequisites you need to have updated versions of Node.js, npm, create-react-app, Github Account, Git setup

React

Create a folder with the project name
- my-app
Inside my-app open up the terminal, I use vscode Integrated Terminal by right clicking in my-app
In the terminal run npx create-react-app .
- Don't forget the dot(.)
- This builds the react template and the dot assigns top level project folder named "my-app" You should see your file structure on the left after CRA is executed
Run npm start to confirm React is working in the browser below.

Close the browser at this point and leave vscode open*

We now have a working React app with it's own local git only. All the git commands like add and commit would remain local and never reach Github. In the next step we will set up a Github repo.

Github

Go to your Github account and create repo by clicking on "repositories" and then "new"
Enter the name of your repo, I'll call it test-app it can be different from the project folder named "my-app".
- radio button public
- **Crucial -- Do not add README, .gitignore or license
- click on Create repository green button Once the screen appears you are ready to go back to the vscode terminal
Now we are ready to use our newly created github repo with react in the same vscode terminal we created the CRA and run this command git remote add origin https://github.com/username/test-app.git
- In my case it was git remote add origin https://github.com/GregPetropoulos/test-app.git
This command is to check if we are pointing the correct repo git remote -v
Run and git add . and `git commit -m "My first commit"
git push
- we get a notification that set upstream flag is needed
Lastly git push --set-upstream origin master
Check Github to confirm

Links 🔗

repo

❤️❤️❤️

Social

Twitter
Linkedin
Portfolio
Github

🤘
Happy Coding!

Forem: Greg

Traverse The DOM With Depth First Search Recursion

STOP READING THIS IF YOU CAN USE THE getElementById or querySelector API

TLDR;

Intro

Generator Function - traversePreorder

querySelector function - selectAll

querySelector MDN docs

The Driving function - myQuerySelectorAll

HTML

CSS

Notes:

Links

Social

Make A Triangle in HTML/CSS

Render Deployment (free tier) of MERN App

A guide to deploying your full stack MERN app to Render

TLDR

Workflow

The MERN Application

Render

- Web Service

- Static site

Finally

Links 🔗

Social

Truncate... with this JS function...

The Gist

Social

Happy Coding

CSS Debug With 3 Lines

Social

Happy Coding

JavaScript and React Fundamentals Quiz

1. What is Reconciliation in React?

2. How do you create a function in JavaScript?

3. What is the correct way to write a JavaScript array?

4. Which is the correct description of React State vs Props?

5. What is the difference React Controlled Component vs Uncontrolled Component

6. Which operator is used to assign a value to a variable?

7. In your manifest.json what is the correct way to declare the location?

8. What is the purpose Array.from() in the code below?

9. In the function below, what do we use Object.assign for?

10. How do you find the number with the highest value of x and y?

11. How do you round the number 7.25, to the nearest integer?

12. Which are the correct phases of the React component lifecycle?

13. Which language is this?

14. What does the "const" declaration do?

15. How to write an IF statement for executing some code if "i" is NOT equal to 5?

16. What is the correct way to access translation data in your JavaScript?

17. What does the below code do?

18. What is the correct syntax for referring to an external script called "xyz.js"?

19. What's the ES6 way for quick initialization of objects from variables?

20. JavaScript is the same as Java.

21. Which method can be used to clean up this old JavaScript code?

22. Is there anything incorrect in this String interpolation example?

23. How does a WHILE loop start?

24. How do you declare a JavaScript variable?

25. ES6 gives us a "let" statement - a new way to declare variables. Can you guess what it does?

26. Where is the correct place to insert a JavaScript?

27. Explain this code:

28. What is the content of the variable "a"?

29. What is the correct usage for an arrow functions work?

30. What will the following code return: Boolean(10 > 9)

31. How does a FOR loop start?

32. What is the correct JavaScript syntax to change the content of the HTML element below? <p id="demo"> This is a demonstration.</p>

33. What results will these function calls return?

34 Inside which HTML element do we put the JavaScript?

35. What is the correct JavaScript syntax for opening a new window called "w2" ?

36. How can you detect the client's browser name?

37. How do you call a function named "myFunction"?

38. Your javascript bundle is too large and is causing performance issues. Please describe the steps you would take to fix this issue

39. How to write an IF statement in JavaScript?

40. Is JavaScript case-sensitive?

41. What is the recommended structure for providing localized strings via i18n?

42. Which of these examples is the correct ES6 way to replace the "Old Way"?

43. What is the React “key” prop?

44. All I know is that it is NOT commonly used in array.

45. How do you write "Hello World" in an alert box?

46. What is the correct ES6 function to replace this code?

32. What is the correct JavaScript syntax to change the content of the HTML element below? `<p id="demo">` This is a demonstration.`</p>`

48. The external JavaScript file must contain the `<script>` tag.