Learn Recursion by Building a Decimal to Binary Converter - Step 7

JavaScript
1

Tell us what’s happening:

How do I see object in my browser console, do i need to copy the whole program in IDE then run the program and then see the result.

Your code so far

<!-- file: 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" />
    <title>Decimal to Binary Converter</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Decimal to Binary Converter</h1>
    <div class="input-container">
      <label for="number-input">Enter a decimal number:</label>
      <input
        value=""
        type="number"
        name="decimal number input"
        id="number-input"
        class="number-input"
      />
      <button class="convert-btn" id="convert-btn">Convert</button>
    </div>
    <output id="result" for="number-input"></output>
    <div id="animation-container"></div>
    <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --light-grey: #f5f6f7;
  --dark-blue: #1b1b32;
  --orange: #f1be32;
}

body {
  background-color: var(--dark-blue);
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  color: var(--light-grey);
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  text-align: center;
  font-size: 2.3rem;
  margin: 20px 0;
}

.input-container {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.convert-btn {
  background-color: var(--orange);
  cursor: pointer;
  border: none;
  padding: 4px;
}

.number-input {
  height: 25px;
}

#result {
  margin: 10px 0;
  min-width: 200px;
  width: fit-content;
  min-height: 80px;
  word-break: break-word;
  padding: 15px;
  border: 5px solid var(--orange);
  font-size: 2rem;
  text-align: center;
}

#animation-container {
  margin: auto;
  max-width: 300px;
}

.animation-frame {
  margin: 250px auto 0;
  padding: 15px 10px;
  border: 5px solid var(--orange);
  font-size: 1.2rem;
  text-align: center;
}

@media screen and (min-width: 500px) {
  .input-container {
    flex-direction: row;
  }

  #result {
    max-width: 460px;
  }
}

/* file: script.js */
const numberInput = document.getElementById("number-input");
const convertBtn = document.getElementById("convert-btn");
const result = document.getElementById("result");

const checkUserInput = () => {
  console.log(numberInput.value);
};

convertBtn.addEventListener("click", checkUserInput);

numberInput.addEventListener("keydown", (e) => {

// User Editable Region

  console.log(e);

// User Editable Region

});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Challenge Information:

Learn Recursion by Building a Decimal to Binary Converter - Step 7

2

Can you clarify your question please?
Are you trying to follow this instruction in the step?

If you open your browser’s console and type in the number input, you’ll see event objects logged to the browser.

3

Hi,
yes I was following the instructions but when I type in browser console to see the number input it is throwing uncaught reference error, but in browser I can see the value of number input i.e if I type 10 I can see 10 but I don’t see anykind of object with key or type properties .

2frame.ts:250 [object KeyboardEvent] this can also be seen in browser console when key is pressed

4

Can you post a screenshot please?

5

console
console1280×800 193 KB

PFA

6

can you find the icon in the browser console that looks like a filter? (it is on the immediate right side of the icon that looks like an eye, which is to the immediate right of the word top)

Can you erase the text you have in the filter field?
Then refresh the page and try again to type into the input area?

Edit: also, can you find the icon on the immediate right of the word top, it kind of looks like a circle with a diagonal line through it. Then to the right of that icon, there is an icon which looks like a window. Please click it to open the window pane and select “messages” at the very top.
I think you’ve setup your console to hide the messages so this will allow you to see the events.

7

console 1
console 11280×800 165 KB

I have done both the things still i Can’t figure out where the problem actually is.
thanks for your patience and reply

8

you will need to click on the line that currently says ‘9 messages’ so you can see all the messages.
Also please force a refresh in your browser CTRL-F5 on windows will do that so that the code is loaded from scratch for this page.

1 Like
9

Which messages do I have to look , I am trying but still can’t figure out which message to look . Force refresh was done every time but still can’t figure out , if you can see it plz help

10

in the screenshot you sent last, the selected item is “b”
I’m saying, please click on the 9 Messages in the pane on the right side (above the b)

1 Like
11

That 9 msg are expandable there is 2 b msg , 6 app msg,1 other msg which contributes to Total of 9 msg. When we click on 9 msg it comes down to this expandable

12

yes, I’m trying to help you see all the messages.
When you click on the top ‘messages’ part of the menu, it will show -everything-

After you do that, you can go back to the Preview pane and type something into the
input box.
This will trigger an event and that event will show up in the messages area in the console.

1 Like
13

Thanks for the patience , finally got it

1 Like