dellannie Posts - Answer Overflow

dellannie

•Created by dellannie on 9/10/2023 in #front-end

question about assigning a function to a variable

I'm testing and trying out some new things I recently learn about functions and I come across something like this

let testFunction = function() {
  console.log('Hello')
}();

let testFunction = function() {
  console.log('Hello')
}();

now this works and shows the hello on the console. However I decide to take away the

()

()

at the end and I no longer see the hello on the console. Then I try this to see if the hello would show up but instead I get two things Hello and undefined. I have an idea of whats going on and I think the

()

()

in the first statement automatically invoke without being called i think but i'm not sure and I can anybody help me understand why when I console log

testFunction

testFunction

i get undefined

cosole.log(testFunction())

cosole.log(testFunction())

thanks in advance for your help

4 replies

KPCKevin Powell - Community

•Created by dellannie on 9/9/2023 in #front-end

Let vs var vs const

Can any one help me understand how these three different ways to create a variable really works within a function? From what i already learn var is functions scoped let and const is block scope. Whats confusing to me is does this mean that if I create a variable using var I can use that variable anywhere inside the function and let/const can only be used within a specific block for example a if/switch statement? Also how do you even know when its the right time to use a specific type of variable? Thanks in advance

24 replies

KPCKevin Powell - Community

•Created by dellannie on 8/31/2023 in #front-end

for, for of, for in loops

after finally starting to understand loops and how they work i havea curios question. Lets say we have an object like the one listed below and we need to loop over this object(obviously these will be more complex in a real life situation).

let cars = {
    carName: 'Sorento',
    make: 'Kia',
    year: 2016
}

let cars = {
    carName: 'Sorento',
    make: 'Kia',
    year: 2016
}

If i can use for in or for of loop to loop through this object what would be the reason to use a regular for loop instead of the for of or for in? I'm trying to to figure out just an idea on why one can be more important than the other

9 replies

KPCKevin Powell - Community

•Created by dellannie on 8/29/2023 in #front-end

Font converter for Font Face

Do you guys have any recomendation for font coverter. I use Fontsquirl but latley it works when it feels like. I need some other options to convert from TTF to WOFF2 Thanks in advance

5 replies

KPCKevin Powell - Community

•Created by dellannie on 8/25/2023 in #front-end

semicolon or no semicolon for javascript

So I've been doing some research on my own and now dabling/learning JS. One of the things I notice is this whole semicolon vs no semicolon. From what I'm seeing almost all other language use semicolon so my question here is. Do you need to use semicolon or can you create an entire application without a semicolon. Whats the correct way to write JS code or i should say whats the job ready habit I should take on from now when it comes to writing JS

22 replies

KPCKevin Powell - Community

•Created by dellannie on 8/24/2023 in #front-end

Mobile Responsive issues on transitioning from desktop to mobile view

I'm running into a slight problem trying to figure out why one of my content area wont repond like the others between 400px to 375px. One of my containers just seems to wont respond at all after i implement css grid 1fr 1fr. https://codepen.io/dellannie/pen/poqjJWW I attached the code here if anyone can take a look thanks in advance

35 replies

KPCKevin Powell - Community

•Created by dellannie on 8/24/2023 in #front-end

CSS Custom Properties

Can somebody help me understand why these custom properties wont work.

:root{
    /* Primary Colors */
    --cta-main-clor: hsl(71, 73%, 54%)
    --text-color: hsl(179, 62%, 43%)

    /* Neutral Colors */
    --light-gray: hsl(204,43%,93%)
}

:root{
    /* Primary Colors */
    --cta-main-clor: hsl(71, 73%, 54%)
    --text-color: hsl(179, 62%, 43%)

    /* Neutral Colors */
    --light-gray: hsl(204,43%,93%)
}

I get the very first color to work but noting else work after that. It's probably a simple mistake but I cannot figure this out. Thanks in advance

3 replies

KPCKevin Powell - Community

•Created by dellannie on 8/20/2023 in #front-end

Is there a way to add line breaks with CSS

I'm working on a little challenge and in the mobile responsive section I need to have the text with less line breaks compare to the dekstop version. Can you use CSS to add line breaks or is there another way to do that other than using the

br

br

tags

18 replies

KPCKevin Powell - Community

•Created by dellannie on 8/17/2023 in #front-end

px vs rem vs em

New to the dev world but during the last few weeks of learning I'm noticing a few different sizing options. I've done my fair share of research but just trying to see what the general public thinks. How do you choose which sizing options to use between px, rem and em. I keep seeing a lot of content saying stay away from px still cant understand why. If you guys have any resource I can use to learn a little more that would be great for my journey or any insights thanks in advance

7 replies

KPCKevin Powell - Community

•Created by dellannie on 8/17/2023 in #front-end

Flexbox Div inside a container div

I'm having some issues with a small challenge i'm working on. I have a container

div

div

with two seperate

div

div

inside that I have side by side using flexbox. One div holds the an image and the second div holds content but for some reason I cant get the content div background to completely cover the entire div. I dont have any height set on the main container

.main-container{
    display: flex;
    justify-content: space-around;
    background: rgb(236, 222, 222); 
    height: auto;
    padding: 20px;
}

.main-container{
    display: flex;
    justify-content: space-around;
    background: rgb(236, 222, 222); 
    height: auto;
    padding: 20px;
}

This is what I have for my image container so far.

.img-container{
    width: 350px;
    /* height: min-content; */
    /* padding: 20px; */
}

.img-container{
    width: 350px;
    /* height: min-content; */
    /* padding: 20px; */
}

This is my content container.

.content-container {
    width: 350px;
    padding-left: 20px;
    background-color: white;
    height: min-content;
}

.content-container {
    width: 350px;
    padding-left: 20px;
    background-color: white;
    height: min-content;
}

I'm trying to add a white background to that entire half but for some reason the color stops where the button is located. Any ideas to help me progress with this challenge. Thanks in advance.

13 replies

KPCKevin Powell - Community

•Created by dellannie on 8/15/2023 in #front-end

Font-Face

Hey everyone I'm new here and learning front end development. Can anyone help me out with this question. If i have a webpage that has two different type of font for example Robotto and Montserrat and I'm using @font-face to bring those fonts into my work space locally. Do I need two create two separate @font-face property or do I put that all under the same property?

6 replies

Gaming

Programming