These are chat archives for FreeCodeCamp/Help

5th
Mar 2019
nsonhouse
@nsonhouse
Mar 05 02:31
Can someone help debug my code?
I am not getting output to the browser.
<script>
let str = "rotatedstring";
document.getElementById("btn-area").innerHTML = str ;

document.getElementById("button").addEventListener("click", rotate);

function rotate(str) {
let tail = str.slice(str.length-1);
let tmpStr = str.slice(0, str.length-1);
str = tail +tmpStr;
document.getElementById("output").innerHTML = str;

};
</script>
Christopher McCormack
@cmccormack
Mar 05 02:38
@nsonhouse please use markdown when pasting code - there's a little button to the bottom right of the chat input that will tell you the format, but it's basically:
```
code
```
@nsonhouse do all of those elements you are targeting with .getElementById have an id attribute that matches?
nsonhouse
@nsonhouse
Mar 05 02:44
@cmccormack No. It is a string and I want to print each iteration at the div I have labeled out put.
Are you referring to the button labeled M?
Christopher McCormack
@cmccormack
Mar 05 02:45
@nsonhouse i'm only referring to elements in my question above, elements are div, span, input etc...
nsonhouse
@nsonhouse
Mar 05 02:45
Ok. I have a div with the id ="output"
Christopher McCormack
@cmccormack
Mar 05 02:46
your code (if the HTML is fine) won't work because you aren't actually passing str to your rotate function
nsonhouse
@nsonhouse
Mar 05 02:47
When I change the last line of the function to console.log I get the desired output.
Christopher McCormack
@cmccormack
Mar 05 02:47
@nsonhouse here is a working example when the argument is passed (using bind)
@nsonhouse but if you want that to continue to work, you have to access the content of the #btn-area element within your event listener function
nsonhouse
@nsonhouse
Mar 05 02:51
@cmccormack so the bind() is like a pointer?
Christopher McCormack
@cmccormack
Mar 05 02:52
nah that basically creates a new function - the first argument is the context, the rest are arguments passed to it
bind is often used as a shortcut for something like document.getElementById("button").addEventListener("click", function() { rotate(str) });
I've updated the pen - is that the functionality you wanted? codepen
nsonhouse
@nsonhouse
Mar 05 02:54
@cmccormack That is exactly what I was trying to do.
Christopher McCormack
@cmccormack
Mar 05 02:55
@nsonhouse very good, run through it and ask any questions if you have them
nsonhouse
@nsonhouse
Mar 05 02:55
1st question?
You were talking about the M button in the corner?
Christopher McCormack
@cmccormack
Mar 05 02:56
on gitter yes
image.png
nsonhouse
@nsonhouse
Mar 05 02:57
Ok, I'll practice in a sec.
2nd question.
You said I have to access the content in the div="btn-area". If the string is defined within in the function, why am I referencing the content in that div?
Christopher McCormack
@cmccormack
Mar 05 03:00
I'll update that to state you need to access the content in #output
nsonhouse
@nsonhouse
Mar 05 03:00
OK gotcha
Christopher McCormack
@cmccormack
Mar 05 03:00
because you are changing the output every time you click the button, you now need to reference that output.
You can use a global string instead if you wanted to, then you can just reference that variable and update it each time the button is clicked
Or using a closure
nsonhouse
@nsonhouse
Mar 05 03:01
I totally missed the update str step.
OK, Now I see what I did wrong. Thank you SIR..
Christopher McCormack
@cmccormack
Mar 05 03:02
np
nsonhouse
@nsonhouse
Mar 05 03:04
@cmccormack No I did update the str. str = tail +tmpStr;
The only difference I see is the bind(). Im going read this on mdn. BRB
Christopher McCormack
@cmccormack
Mar 05 03:06
i made changes did you refresh?
nsonhouse
@nsonhouse
Mar 05 03:08
GOT YOU
I see what you did now
So update the div content after each iteration
@cmccormack Thank you. That was awesome.
Christopher McCormack
@cmccormack
Mar 05 03:09
yup
here is a version using closures. No global state - instead rotate has access to str from the persistentStrRotate scope
Also notice the integer value used in str.slice
sorry if I'm jumping ahead but closures can be useful for something like this
nsonhouse
@nsonhouse
Mar 05 03:14
Im still learning. Coming from c++.
Scope is a bit different in JS
Christopher McCormack
@cmccormack
Mar 05 03:21
I don't see them in use all that often but they're pretty handy
kinopotato
@kinopotato
Mar 05 05:55

Hello people :) very quick question, how can you do this?

console.log(`${1++}.) ${exp}`);

I thought you can do that 1++ with es6 template literal syntax, but apparently not :| is there a way to do it within that line instead of initializing a variable to 1?

kinopotato
@kinopotato
Mar 05 06:03
nevermind, it's just another stupid question. haha
psyperl
@psyperl
Mar 05 06:12
lol
console.log(`${2}.) ${exp}`);

or

console.log(`${1?1+1:2}.) ${exp}`);

ezpz

Aditya
@ezioda004
Mar 05 06:20
Or
console.log("%d", 1?1+1:2);
kinopotato
@kinopotato
Mar 05 06:27
I'll try these out, I'm actually thinking of a counter but I'm forgetting my basics again :) thanks!
what do you call that syntax? with the : and ?
psyperl
@psyperl
Mar 05 06:30
ternary operator
kinopotato
@kinopotato
Mar 05 06:30
if then else?! holy crap you'
Aditya
@ezioda004
Mar 05 06:30
@kinopotato The only problem with your assertion is that both post/pre increment operator have a RHS value that you assign to the LHS variable, but 1 is a primitive value therefore you get that error
kinopotato
@kinopotato
Mar 05 06:30
re right
psyperl
@psyperl
Mar 05 06:31
yeah as @ezioda004 mentioned, if you want to increment them, you would need to put them in a variable
kinopotato
@kinopotato
Mar 05 06:32
seems like that's the only choice. I was avoiding it to make things more, errr, "blocky", but no choice it seems
Aditya
@ezioda004
Mar 05 06:33
What do you mean by "blocky"?
psyperl
@psyperl
Mar 05 06:33
well the troll code above is pretty much saying, if you know the number already, just put in the number .. no need to do operation on the concrete number
kinopotato
@kinopotato
Mar 05 06:33

this is my full code

// Do everything here for now
// To run this, just type `node logic.js`

//I should be able to view and add my expense statement


//save user input expense inside a variable, outside of function so value can change and persist
let expense = [];
let counter = 0;
//function that allows user to input an expense and returns a console.log of all the expense
let addExpense = (exp) => {
    //push user expense (exp) into expense array
    expense.push(exp);
    //create a new array for saving all expenses
    let totalExpense = 0;
    //list all expenses with x.) format
    (()=>{
      console.log(`${counter+=1}.) ${exp}`);
    })()
    //save and return all expense into new array via adding all items in the expense array
    return totalExpense = expense.reduce((a,b) => a + b);
};

console.log(addExpense(1));
console.log(addExpense(2));
console.log(addExpense(75));

I wanted to have the least amount of variable outside the function

I suppose I should turn expense into an object instead of an array, but then it might make this more complicated than it should when the code can be changed when we do the next User Story :|
Aditya
@ezioda004
Mar 05 06:38
You could make use of closure if you dont want to pollute the global:
let addExpense = (function(){
    let expense = [];
    let counter = 0;
    //function that allows user to input an expense and returns a console.log of all the expense
    return exp => {
        //push user expense (exp) into expense array
        expense.push(exp);
        //create a new array for saving all expenses
        let totalExpense = 0;
        //list all expenses with x.) format
        (()=>{
          console.log(`${counter+=1}.) ${exp}`);
        })()
        //save and return all expense into new array via adding all items in the expense array
        return totalExpense = expense.reduce((a,b) => a + b);
    };
})();
kinopotato
@kinopotato
Mar 05 06:40
wow that worked O.O alright I'mma study this. thanks dude! I thought it would always go back to 0 each time the function is called if you don't save outside the function
Aditya
@ezioda004
Mar 05 06:41
It doesnt reset because the inner function has the reference to its lexical scope and therefore can access the variables like expense and counter
In a nutshell, thats closure of the inner function
kinopotato
@kinopotato
Mar 05 06:43
that's the key phrase for this? "closure of the inner function" so I can study this err, technique?
also, why did you write it as a self invoking function?
psyperl
@psyperl
Mar 05 06:45
closure is the key if you want to look it up yeah
i've been wondering.. how one would reset the counter in there @ezioda004 ? :laughing:
kinopotato
@kinopotato
Mar 05 06:46
a sophisticated man will code it: counter = 0; he he he
Aditya
@ezioda004
Mar 05 06:52
@psyperl I dont see the functionality to do that in the current construct but if I had to I'd have an object as a closure:
const someObj = (function(){
  let count = 0;
  return {
     resetCount(){
       return count = 0;
    },
    incCounter(){
      return ++count;
    }
  };
})();
psyperl
@psyperl
Mar 05 06:53
aha i see it yeah.. thanks @ezioda004
kinopotato
@kinopotato
Mar 05 06:53
this is the syntax you follow so you can easily turn it into an object?
psyperl
@psyperl
Mar 05 06:54
@ezioda004 although that is almost equal as returning the object directly
Aditya
@ezioda004
Mar 05 06:55
@psyperl One distinction is that count wont be in global namespace, so its "encapsulated"
@kinopotato Turn what into an object?
psyperl
@psyperl
Mar 05 06:55
ah right, similar to private prop mechanism it seems yeah
Aditya
@ezioda004
Mar 05 06:56
@kinopotato Its just a pattern, I believe its called "module revealing" pattern
kinopotato
@kinopotato
Mar 05 06:56
@ezioda004 the function? I don't understand the syntax and I don't know if I've encountered it before. for example in the previous function, how does it not return "exp" is undefined when you call the addExpense(1) function
Aditya
@ezioda004
Mar 05 06:58
@kinopotato Thats the magic of closure, the inner function has the reference to its scope and therefore the variables defined in it; read more here
kinopotato
@kinopotato
Mar 05 06:58
that's the thing, when was exp defined??
with "return"?
Aditya
@ezioda004
Mar 05 07:01
Defined here:
let expense = [];
    let counter = 0;
    //function that allows user to input an expense and returns a console.log of all the expense
    return exp => {
psyperl
@psyperl
Mar 05 07:01
exp was defined as the parameter of that returning anonymous function
Aditya
@ezioda004
Mar 05 07:02
^^
Equivalent to:
return function(exp) {
  // do stuff
}
kinopotato
@kinopotato
Mar 05 07:02
so it's like return (exp) => {}
psyperl
@psyperl
Mar 05 07:02
yeah
arrow function can omit ( and ) if it only have 1 parameter
kinopotato
@kinopotato
Mar 05 07:06
so each time I do this
let func = (function()=>{
//whenever I type the next "something => {} will mean it's the parameter for the function above?
return insideFunc => {}
}) ()
this returns two, wott


let func = (function(){
  let arr = [];
  return x => {
    return arr.push(x);
  }
})()

func("a");//returns 1
func("b");//returns 2
psyperl
@psyperl
Mar 05 07:11
push return value : "The new length property of the object upon which the method was called"
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
kinopotato
@kinopotato
Mar 05 07:12
let func = (function(){
  let arr = [];
  return x => {
    arr.push(x);
    return arr;
  }
})()

func("a"); //["a"]
func("b"); // ["a", "b"]
he he he, sorry about that
psyperl
@psyperl
Mar 05 07:12
which that means it can be use as your counter
kinopotato
@kinopotato
Mar 05 07:13
I don't think I want an array with 1000 items in it, hahaha
seems like a really good way to slow your project down
psyperl
@psyperl
Mar 05 07:13
let expense = [];
let addExpense = (exp) => {
    expense.push(exp);
    let totalExpense = 0;
    console.log(`${expense.length}.) ${exp}`);
    return totalExpense = expense.reduce((a,b) => a + b);
};
Aditya
@ezioda004
Mar 05 07:14
Why'd you have a log in IIFE?
kinopotato
@kinopotato
Mar 05 07:14
if I push these code to github, do I credit you guys? xD
the log is temporary, since we don't have a front end yet
psyperl
@psyperl
Mar 05 07:15
yeah that IIFE is unneccessary
Aditya
@ezioda004
Mar 05 07:15
@kinopotato I'll take cash instead :^
psyperl
@psyperl
Mar 05 07:16
lol
kinopotato
@kinopotato
Mar 05 07:16
he he he, sorry bub, I have 6 USD to my name and it's staying there
and they say "everyone can code" apparently it should be "everyone can code but not everyone who codes is employable"
Aditya
@ezioda004
Mar 05 07:19
Thats just true with everything
kinopotato
@kinopotato
Mar 05 07:20
guess I'd have to resort to seducing who ever will interview me, better start with Gym stuff
I can also just learn better coding, but I mean, who knows when that will pan out
psyperl
@psyperl
Mar 05 07:21
these days is more like "everyone can code but not everyone who codes can employ their own code"
kinopotato
@kinopotato
Mar 05 07:21
how do you employ your own code tho?
psyperl
@psyperl
Mar 05 07:21
:laughing:
by telling them to learn about things?
kinopotato
@kinopotato
Mar 05 07:22
I have no clue how to tell your code to learn things, but then I don't have much clue about anything. hahaha,
psyperl
@psyperl
Mar 05 07:23
Machine Learning for example :D
any type of automation is actually employing the code to do something for us
kinopotato
@kinopotato
Mar 05 07:25
I can't even make a proper function tho, that's just insult to injury, haha
psyperl
@psyperl
Mar 05 07:26
nah, by the look of your code, it doesn't look like a beginner codes already
kinopotato
@kinopotato
Mar 05 07:26
thanks dude, I'll take that to mean that I'm already master level. he he he, I guess in a month Bill Gates will be hiring me personally
i won't forget you, don't worry. you can be my lacky
psyperl
@psyperl
Mar 05 07:27
hehehe.. that's the spirit
yeah just don't forget about me :D
kinopotato
@kinopotato
Mar 05 07:28
25 lines of code, took me 2 hours, and I'm attempting to make a web app, this should be fun
well 2 hours and help from two people, this should be realllly fun
Manu Saini
@slayercoder
Mar 05 10:01

https://glitch.com/edit/#!/stormy-sunday?path=package.json:5:25
can someone help me in validating the fcc problem, I am not able to understand why its not passing the test
https://learn.freecodecamp.org/apis-and-microservices/managing-packages-with-npm/how-to-use-package-json-the-core-of-any-node-js-project-or-npm-package
this is the problem
that I am trying to solve
I used this link to validate my JSON, https://jsonlint.com/
still its not passing the test

it is throwing this error
// running tests Unexpected token < in JSON at position 0 // tests completed

This message was deleted
This message was deleted
kinopotato
@kinopotato
Mar 05 12:21
how do you insert new things inside an object?? I always forget this
push wasn't working, concat too for some reason, though maybe that's because I wasn't doing
x = x.concat(y)
Aditya
@ezioda004
Mar 05 12:32
@kinopotato Use dot or bracket notation?
const obj = {};
obj.stuff = "new stuff!";
kinopotato
@kinopotato
Mar 05 12:33
how about for { {this object I mean} }
Aditya
@ezioda004
Mar 05 12:33
concat and push are Array prototype methods, so only work on Arrays.
kinopotato
@kinopotato
Mar 05 12:33
{ {this object}, {how do I push this object right here} }
Aditya
@ezioda004
Mar 05 12:34
@kinopotato I dont get it, objects are always in key: value pair, you'd need to have a key and then the value can be an object
@kinopotato Theres no key?
kinopotato
@kinopotato
Mar 05 12:35
how do I append that new pair then? is looping the only way?
let obj = {}
//some loop here
obj[x].stuff[x] = "new stuff"
Aditya
@ezioda004
Mar 05 12:38
Whats x suppose to be?
kinopotato
@kinopotato
Mar 05 12:38
a number, so it would add a new entry.
I feel like I'm asking something stupid, haha, lemme rewrite it
Aditya
@ezioda004
Mar 05 12:38
Ok - whats the structure of the object?
kinopotato
@kinopotato
Mar 05 12:40
obj = {
entry: {
amount: 0,
tags: []
}
//so I want it to be something like
//some function here
obj = {
entry: {
amount: 100,
tags: ["food", "transportation"]
},
entry2: {
amount: 1000,
tags: ["food", "transportation"]
}
}
Aditya
@ezioda004
Mar 05 12:40

Suppose you have an object like:

const obj = {
  a: 1,
  b: 2
};

And you want to get the keys of this object, then you can use for .. in:

for (let key in obj) {
  console.log(key);
  if (key === "a"){
    obj[key] = 3;
  }
}
// {
  a: 3,
  b: 2
}
@kinopotato Yeah so you want to append entryNinto object?
kinopotato
@kinopotato
Mar 05 12:42
yes!
hahaha
it's hard to be so dumb, I lack to vocab to even ask questions xD
Aditya
@ezioda004
Mar 05 12:43
Then you can simply do:
obj.entryN = {
  amount: 1000,
  tags: ["stuff']
};
kinopotato
@kinopotato
Mar 05 12:43
it would have to be a loop of some kind right?
oh wait
I'm making this complex
Aditya
@ezioda004
Mar 05 12:43
Dont have to loop if you know the key :)
kinopotato
@kinopotato
Mar 05 12:43
yeah
hmmmmm, hmmmm, you're right. yeah I was making it too complex, I could even just have a counter
why do I think this way? lol, thanks dude! :D
Aditya
@ezioda004
Mar 05 12:46
Need more practice
kinopotato
@kinopotato
Mar 05 12:46
good thing tho, github doesn't scare me as much now.
Aditya
@ezioda004
Mar 05 12:47
Thats the right direction
May Kittens Devour Your Soul
@diomed
Mar 05 12:48
lop_lop
kinopotato
@kinopotato
Mar 05 12:48
I think I should go for Linux now, hahahaha, aim big right!
Altin Rrahmani
@DevKosov
Mar 05 13:19
anyone familiar with snapsvg or svg morphing
Niraj Nandish
@Nirajn2311
Mar 05 14:07
@diomed lap_lap
hows your day going
May Kittens Devour Your Soul
@diomed
Mar 05 16:25
@Nirajn2311 am so tired lately for no reason
I'm probably suffering from Fe deficiency or smth
going_going_GONE
Christopher McCormack
@cmccormack
Mar 05 16:29
@diomed you could eat some nails, that would help
May Kittens Devour Your Soul
@diomed
Mar 05 16:35
@cmccormack now you tell me
I actually was in nails business for days now
ended today
Christopher McCormack
@cmccormack
Mar 05 16:36
nails business??
May Kittens Devour Your Soul
@diomed
Mar 05 16:36
yeah. I was so hammered
Christopher McCormack
@cmccormack
Mar 05 16:37
Ba Dum Tss - Imgur.gif
May Kittens Devour Your Soul
@diomed
Mar 05 16:38
@cmccormack nah, actually I'm doing some menial work at home
with plucking out nails from the wood
such is life. wasted on stupid things
Christopher McCormack
@cmccormack
Mar 05 16:45
@diomed I always say life is just one big process of doing stuff you don't want to do
As a kid I dreaded growing older, as I would watch my dad work all week, then have to work on the house all weekend or do something for family or something else not fun
Philip Durbin
@pdurbin
Mar 05 16:46
do the dumb things I gotta do
Christopher McCormack
@cmccormack
Mar 05 16:49
@diomed why do you have so many loose nails in your house?
@pdurbin I like it, more terse :)
Philip Durbin
@pdurbin
Mar 05 16:50
It's from a They Might Be Giants song.
Christopher McCormack
@cmccormack
Mar 05 16:52
I think i've only heard particle man and the istanbul song :)
Philip Durbin
@pdurbin
Mar 05 16:58
Sure. Those were on Tiny Toons.
Christopher McCormack
@cmccormack
Mar 05 17:00
lol busted
Philip Durbin
@pdurbin
Mar 05 17:02
:)
psyperl
@psyperl
Mar 05 17:15
is it possible to implement own authorization these days?
Christopher McCormack
@cmccormack
Mar 05 17:15
@psyperl own as in local auth?
Kaz Baig
@kbaig
Mar 05 17:16
I've down github oauth 2 on my own before. Wasn't so bad
Christopher McCormack
@cmccormack
Mar 05 17:16
I did twitter as well, easy peasy
local auth is more difficult :)
Kaz Baig
@kbaig
Mar 05 17:17
on my own meaning no passport
@cmccormack by local auth do you mean username/pw?
Christopher McCormack
@cmccormack
Mar 05 17:17
but absolutely feasible. However, you do have to deal with things like lost passwords, verified emails, etc.. to make it more secure
@kbaig yes
Kaz Baig
@kbaig
Mar 05 17:17
oh yeah I did that too
Didn't think it was so bad...but it was a bit time consuming
Christopher McCormack
@cmccormack
Mar 05 17:18
once you understand it, it's quick to setup
Kaz Baig
@kbaig
Mar 05 17:18
In the future, I'd prob copy/alter the implementation I already have or just go with oauth
Jason Luboff
@JLuboff
Mar 05 17:18
I setup local auth with passport, but didn't do password reset/email verification, etc
psyperl
@psyperl
Mar 05 17:22
@cmccormack you make it sound so easy.. or am i just thinking too much?
Christopher McCormack
@cmccormack
Mar 05 17:23
@psyperl once you've done anything, hindsight makes it seem easy
but there are a lot of guides on how to do it with passportjs
Kaz Baig
@kbaig
Mar 05 17:23
tbh I tried passport and I just didn't 'get it' so I did myself
Jason Luboff
@JLuboff
Mar 05 17:23
Its decently easy with passport, mongo, and bcrypt
psyperl
@psyperl
Mar 05 17:25
oauth makes it easy because we use external auth mechanism .. what i worry is internal registration
Christopher McCormack
@cmccormack
Mar 05 17:25
passport just provides a few conveniences like adding some methods and state to the request object, but doing it yourself isn't much more work
psyperl
@psyperl
Mar 05 17:26
i tried cognito and currently looking at auth0 .. but somewhat pricey?
and also i am not so convince about bcrypt?
Kaz Baig
@kbaig
Mar 05 17:27
@psyperl you basically need to use a solution for crypto. Don't do try it yourself
psyperl
@psyperl
Mar 05 17:28
oh yeah i am not going to invent myself.. but isn't bcrypt alone is less standard than SHA256 for example?
Christopher McCormack
@cmccormack
Mar 05 17:31
bcrypt is designed to be slow, which is a big advantage when trying to brute force
psyperl
@psyperl
Mar 05 17:31
can one substitute that with delay on authentication?
a delay on auth isn't going to matter if someone gets a hold of your password data
psyperl
@psyperl
Mar 05 17:32
yeah, if someone get a hold of the password data.. doesn't that mean i am screwed already?
Kaz Baig
@kbaig
Mar 05 17:33
that's what using a salt and a slow crypto algo is for
psyperl
@psyperl
Mar 05 17:33
ok
Joestilllives
@Joestilllives
Mar 05 17:33
Okay hi guys. um, I don't know whether this is the right channel to ask but I want help with study material. Can I ask it here?
Kaz Baig
@kbaig
Mar 05 17:34
@Joestilllives we could help if it's js related
Joestilllives
@Joestilllives
Mar 05 17:35
Hey, So I am doing an online course in information technology but they have terrible terrible study material.
So I wanted to know if you could suggest alternate study material for a couple of subjects.
One is Fundamentals of Information Technology, another is Computer network and third is Operating Systems
psyperl
@psyperl
Mar 05 17:46
wouldn't computer science syllabus from a well known university be a good guidance for the respective subjects?
May Kittens Devour Your Soul
@diomed
Mar 05 17:55

@diomed why do you have so many loose nails in your house?

because I have many loose ends

psyperl
@psyperl
Mar 05 18:21
thanks @cmccormack @JLuboff @kbaig , so summary is .. feasible.. I won't throttle the chat too much with my questions .. but will revisit the subject again when i have doubt.
Kaz Baig
@kbaig
Mar 05 18:23
@psyperl np
Niraj Nandish
@Nirajn2311
Mar 05 20:43
@diomed today was a bad day for us kids
Kaylee
@kaymonlee
Mar 05 23:02
Can someone help me with flexbox stuff?
Christopher McCormack
@cmccormack
Mar 05 23:09
I'm about to run but if you still have your question @kaymonlee you can ask and hopefully someone responds soon
I would like for the h2s and the p to be aligned under the photos
Christopher McCormack
@cmccormack
Mar 05 23:13
@kaymonlee would make more sense to put all three (img h2 p) in a container of their own together so you can control size
Kaylee
@kaymonlee
Mar 05 23:14
like each section wrapped in its own container?
Christopher McCormack
@cmccormack
Mar 05 23:48
@kaymonlee Sure, you can even use flexbox within each container if you wanted, maybe use flex direction: column for the container, then combine the H2 and P into a separate container with flex-direction: row, for example