Å Marlon G Posts - Answer Overflow

Å Marlon G

Posts Comments

KPCKevin Powell - Community

•Created by Å Marlon G on 5/30/2024 in #front-end

Chrome vs. Firefox 😳

6 replies

KPCKevin Powell - Community

•Created by Å Marlon G on 5/22/2024 in #front-end

... center div 😡

This feels like newbie shit, but I don't understand why my H1 is not centering within row 2 and column 2? I've done all the place-items/content/self, justify, align, text-align on both the Header and the H1. Nothing is happening. Repo https://github.com/AMarlonG/Rondo-prototype/blob/main/index.html Live test site https://amarlong.github.io/Rondo-prototype/

20 replies

KPCKevin Powell - Community

•Created by Å Marlon G on 4/26/2024 in #front-end

Flexbox column swap without media or container querie.

3 replies

KPCKevin Powell - Community

•Created by Å Marlon G on 4/25/2024 in #front-end

Responsive columns

Hi, I thought I could quite easily make a layout where I have two columns in a grid, whereby the first column (which is wider) would shrink at a slower rate than the second column, and when there was no room left for the second column, it would just pop underneath. Basically this responsive layout, but with different rates of shrinking for the columns: https://codepen.io/amarlong/pen/WNyaQOJ I have a feeling this is very easy, but I'm not conceptually understanding what I need to write. Here's the repo: https://github.com/AMarlonG/Rondo-prototype

7 replies

KPCKevin Powell - Community

•Created by Å Marlon G on 2/26/2024 in #front-end

Is <time> used?

Hi! Just wandering if <time> is used at all? So many websites have some sort of time data, but I've never seen the time tag used on them. Is there a reason for this?

18 replies

KPCKevin Powell - Community

•Created by Å Marlon G on 2/10/2024 in #front-end

Cancelling out @media in Wordpress template

Hi! So this is a real nut for me .... I've been asked by my employer to build a schedule and add it to an existing wordpress template. I tried to use WP plugins, but nothing gave me the horisontal scroll I desired. So I made this template for each day: https://github.com/AMarlonG/Ice-Hot-kode Now comes the crux. I've build this with the responsive code line width: min(120ch, 100% - 4rem);, which is my preferred option. But this WP template has many different @media breakpoints which is overriding this. I think it is .main > .containerwhich has all the @media queries (there is another .container for the header and nav tag. I don't wanna change their width). This is the Wordpress page I want to zero out the media queries. The HTML was added using an html block in the WP CMS. https://www.icehotnordicdance.com/thursday-15th-schedule/ I've tried selecting each of the break points and adding both 0 or the width: min(120ch, 100% - 4rem);, but I'm not getting it to work.

14 replies

KPCKevin Powell - Community

•Created by Å Marlon G on 2/10/2024 in #front-end

Height iframe

Hi! First time using iframes. Why does it have vertical scrolling? https://github.com/AMarlonG/Ice-Hot-kode/blob/main/Saturday/index.html Tried adding height, changing width to max-width, etc. But cant get it to look like this: https://www.yr.no/en/content/1-72837/card.html

10 replies

KPCKevin Powell - Community

•Created by Å Marlon G on 2/8/2024 in #front-end

How to choose specific element

Hi! In this code I want to select the first <p> in both, but with different color. In the one with class:"schedule-item ice-spice" I want the first <p> to be blue, in the second, with class="schedule-item performance" I want the first <p> to be red. I've lost my ways. I want to avoid using :has()since I know many will use an older phone. When I use p:first-child the entire schedule-item changes color, and not just the first <p>. A bit lost now ...

<div class="schedule">
          <div class="schedule-item ice-spice">
            <p>Ice Spice</p>
            <span>07:00 – 08:30</span>
            <h4>Sauna</h4>
            <p>Sukkerbiten</p>
          </div>
        </div>

<div class="schedule">
          <div class="schedule-item performance">
            <p>Performance</p>
            <span>16:00 – 17:20</span>
            <h4>Harald Beharie</h4>
            <h5>Batty Bwoy</h5>
            <p>Dansens Hus</p>
            <span class="bus">
                <p>17:25 – Bus to Aviaja Dance, SILA</p>
            </span>
          </div>
        </div>

<div class="schedule">
          <div class="schedule-item ice-spice">
            <p>Ice Spice</p>
            <span>07:00 – 08:30</span>
            <h4>Sauna</h4>
            <p>Sukkerbiten</p>
          </div>
        </div>

<div class="schedule">
          <div class="schedule-item performance">
            <p>Performance</p>
            <span>16:00 – 17:20</span>
            <h4>Harald Beharie</h4>
            <h5>Batty Bwoy</h5>
            <p>Dansens Hus</p>
            <span class="bus">
                <p>17:25 – Bus to Aviaja Dance, SILA</p>
            </span>
          </div>
        </div>

4 replies

KPCKevin Powell - Community

•Created by Å Marlon G on 10/26/2023 in #front-end

Calculating the salary based on salary – JS

// Utregning av ansiennitet
function activeYears(year) {
  const currentYear = new Date().getFullYear();
  const yearsSince = currentYear - year;
  return yearsSince;
}
// Finn lønnstrinn og lønn basert på ansiennitet
function salaryEmployee(year) {
  const yearsSince = activeYears(year);
  let level;
  let salary;

  if (yearsSince >= 0 && yearsSince < 2) return { level: 12, salary: 503118 };
  if (yearsSince >= 2 && yearsSince < 4) return { level: 14, salary: 514020 };
  if (yearsSince >= 4 && yearsSince < 6) return { level: 16, salary: 526214 };
  if (yearsSince >= 6 && yearsSince < 8) return { level: 18, salary: 536828 };
  if (yearsSince >= 8 && yearsSince < 10) return { level: 20, salary: 549884 };
  if (yearsSince >= 10 && yearsSince < 12) return { level: 22, salary: 564086 };
  if (yearsSince >= 12 && yearsSince < 14) return { level: 24, salary: 578861 };
  if (yearsSince >= 14 && yearsSince < 16) return { level: 29, salary: 622194 };
  if (yearsSince >= 16 && yearsSince < 18) return { level: 30, salary: 630515 };
  if (yearsSince >= 18 && yearsSince < 20) return { level: 32, salary: 648016 };
  if (yearsSince >= 20 && yearsSince < Infinity)
    return { level: 34, salary: 666234 };
}

console.log(salaryEmployee(2014));

// Utregning av ansiennitet
function activeYears(year) {
  const currentYear = new Date().getFullYear();
  const yearsSince = currentYear - year;
  return yearsSince;
}
// Finn lønnstrinn og lønn basert på ansiennitet
function salaryEmployee(year) {
  const yearsSince = activeYears(year);
  let level;
  let salary;

  if (yearsSince >= 0 && yearsSince < 2) return { level: 12, salary: 503118 };
  if (yearsSince >= 2 && yearsSince < 4) return { level: 14, salary: 514020 };
  if (yearsSince >= 4 && yearsSince < 6) return { level: 16, salary: 526214 };
  if (yearsSince >= 6 && yearsSince < 8) return { level: 18, salary: 536828 };
  if (yearsSince >= 8 && yearsSince < 10) return { level: 20, salary: 549884 };
  if (yearsSince >= 10 && yearsSince < 12) return { level: 22, salary: 564086 };
  if (yearsSince >= 12 && yearsSince < 14) return { level: 24, salary: 578861 };
  if (yearsSince >= 14 && yearsSince < 16) return { level: 29, salary: 622194 };
  if (yearsSince >= 16 && yearsSince < 18) return { level: 30, salary: 630515 };
  if (yearsSince >= 18 && yearsSince < 20) return { level: 32, salary: 648016 };
  if (yearsSince >= 20 && yearsSince < Infinity)
    return { level: 34, salary: 666234 };
}

console.log(salaryEmployee(2014));

In this calculation, which logs { level: 20, salary: 549884 }, how can you get the amount from salary, 549884 and times it with 38,6%? Basically: salary * 1,368 ... To be clear: how do I draw out the salary amount to use in further calculations ...

7 replies

KPCKevin Powell - Community

•Created by Å Marlon G on 8/8/2023 in #front-end

Finding element in the dev tools

Hello! I can't fint the header text on this website, the first text lying across the video. Using the dev tools I can't seem to pick the text specifically, just the container (<figure class="featured-media">). How can I understand what this element is? www.tekstlab.com

15 replies

KPCKevin Powell - Community

•Created by Å Marlon G on 7/17/2023 in #front-end

Disconnect between attribute and CSS selector – styles are not implemented as expected.

I just got some amazing help to add an id attribute to an elelement in a react component, but now that I want to add some styling the selector doesn't seem to affect the element: I'm using this video as inspiration, and want the header element to fade out when it gets id scrolling added on scrolling. https://www.youtube.com/watch?v=V-CBdlfCPic React component: https://github.com/AMarlonG/Website/blob/main/web-app/PageComponents/FrontPage.tsx CSS modules file: https://github.com/AMarlonG/Website/blob/main/web-app/PageComponents/frontPage.module.css The element in question is the header within mainInfo > mainInfoContent, which gets id="scrolling" when page scrolls. No blue border is being added when I scroll. Which is weird to me ...

6 replies

KPCKevin Powell - Community

•Created by Å Marlon G on 7/17/2023 in #front-end

Adding id to element on scroll using react hooks useInView and useID in nextjs.13

Right ... so the title might be a bit daunting, but I think this is actually just some plain JS at the end of it. But I'm stuck here now ... In this code you see two react hooks, useInView and useID, being used to listen for scroll behaviour and adding an id to an element:

import { useInView } from 'react-intersection-observer';
import { useId } from 'react';

export const FrontPage = () => {
  // Intersection observer hook
  const { ref: myRef, inView: elementIsVisible } = useInView();
  console.log('elementIsVisible', elementIsVisible);

  const newId = useId();

  return (
    <>
      <section className={styles.mainInfo}>
        <div id={newId} className={styles.mainInfoContent}>
          <HeadingOne content='Magefølelsen' />

          <HeadingTwo content='Kommunikasjon & design' />

          <EmailAddress content='hei@magefolelsen.no' />
        </div>
      </section>

      <section className={styles.shallWeWorkTogether}>
        <div className={styles.shallWeTitle}>
          <HeadingThree content='Skal vi jobbe sammen?' />
        </div>

        <div className={styles.shallWeContent} ref={myRef}>
          <div>
            <BodyText
              content='Er du enig i at for å kunne lage en fortelling og et design må man
            ha en god idé og historie?'
            />
            <NoddingWoman />
          </div>

import { useInView } from 'react-intersection-observer';
import { useId } from 'react';

export const FrontPage = () => {
  // Intersection observer hook
  const { ref: myRef, inView: elementIsVisible } = useInView();
  console.log('elementIsVisible', elementIsVisible);

  const newId = useId();

  return (
    <>
      <section className={styles.mainInfo}>
        <div id={newId} className={styles.mainInfoContent}>
          <HeadingOne content='Magefølelsen' />

          <HeadingTwo content='Kommunikasjon & design' />

          <EmailAddress content='hei@magefolelsen.no' />
        </div>
      </section>

      <section className={styles.shallWeWorkTogether}>
        <div className={styles.shallWeTitle}>
          <HeadingThree content='Skal vi jobbe sammen?' />
        </div>

        <div className={styles.shallWeContent} ref={myRef}>
          <div>
            <BodyText
              content='Er du enig i at for å kunne lage en fortelling og et design må man
            ha en god idé og historie?'
            />
            <NoddingWoman />
          </div>

... this is not all of the code. The entire react component can be seen here: https://github.com/AMarlonG/Website/blob/main/web-app/PageComponents/FrontPage.tsx

20 replies

KPCKevin Powell - Community

•Created by Å Marlon G on 7/14/2023 in #front-end

A tag href with props

Hi! I wanna insert a prop into the mailto href in an a tag, but I'm not understanding how to split the mailto:from the prop content. Child component:

type EmailAddress = {
  content: string;
};

export const EmailAddress = (props: EmailAddress) => {
  return (
    <>
      //This is where I have the issue ...
      <a href="mailto:"{props.content}>{props.content}</a>
    </>
  );
};

type EmailAddress = {
  content: string;
};

export const EmailAddress = (props: EmailAddress) => {
  return (
    <>
      //This is where I have the issue ...
      <a href="mailto:"{props.content}>{props.content}</a>
    </>
  );
};

Parent component:

export const Test = () => {
  return (
    <>
      // This is the content I want to be inserted
      <EmailAddress content="test@test.me" />
    </>
  );
};

export const Test = () => {
  return (
    <>
      // This is the content I want to be inserted
      <EmailAddress content="test@test.me" />
    </>
  );
};

The final link should, when hovered, give the value mailto:test@test.me

3 replies

KPCKevin Powell - Community

•Created by Å Marlon G on 7/14/2023 in #front-end

Custom headings (h1, h2, etc ...)

Hello! When building a component (I'm using React in Next), I want to build a component with plain text, but I wanna be able to change the heading order based on which page it is on. Example text: "I'm a subtitle" Homepage: I want this to be a h3 About page: I want it it o be a h1 How is this done, and is there any issues with this I haven't thought about? When I google this the only thing I get is headers, which is not the issue here ...

7 replies

KPCKevin Powell - Community

•Created by Å Marlon G on 7/3/2023 in #front-end

Writing code convention JS / React?

Hi, again! In the quest to understand syntax better, a quick question. In the example underneath, from codecademy, the function calculating the prime number is underneath the counter function reusing the prime function. In my mind it would make more sense to place the prime function above the counter function since counter uses prime. So why is it underneath? Is this a JS / React convention?

import React, { useState, useEffect } from 'react';

export const Counter = () => {

    const [counter, setCounter] = useState(0);

    useEffect(() => {
        if (isPrime(counter)) {
            document.body.style.backgroundImage = 'linear-gradient(to right, coral, teal)';
        } else {
            document.body.style.backgroundImage = "";
        }
    }, [counter]);

    return (
        <div>
            <h2>Count: {counter}</h2>
            <button onClick={() => setCounter(counter + 1)}>Click Me!</button>
        </div>
    );
};


const isPrime = (num) => {
    const squareRoot = Math.sqrt(num)
    for (let i = 2; i <= squareRoot; i++) {
        if (num % i === 0) {
            return false;
        }
    }
    return num > 1;
};

import React, { useState, useEffect } from 'react';

export const Counter = () => {

    const [counter, setCounter] = useState(0);

    useEffect(() => {
        if (isPrime(counter)) {
            document.body.style.backgroundImage = 'linear-gradient(to right, coral, teal)';
        } else {
            document.body.style.backgroundImage = "";
        }
    }, [counter]);

    return (
        <div>
            <h2>Count: {counter}</h2>
            <button onClick={() => setCounter(counter + 1)}>Click Me!</button>
        </div>
    );
};


const isPrime = (num) => {
    const squareRoot = Math.sqrt(num)
    for (let i = 2; i <= squareRoot; i++) {
        if (num % i === 0) {
            return false;
        }
    }
    return num > 1;
};

7 replies

KPCKevin Powell - Community

•Created by Å Marlon G on 6/24/2023 in #front-end

State setters for newbie ...

Hi! Again, this is taken from codecademys react intro course. I have the same issue as usual – reading syntax. This code snippet is simplified as follows:

const handleChange = (event) => {
    const newEmail = event.target.value;
    setEmail(newEmail);
}

const handleChange = (event) => setEmail(event.target.value);

const handleChange = ({ target }) => setEmail(target.value);

const handleChange = (event) => {
    const newEmail = event.target.value;
    setEmail(newEmail);
}

const handleChange = (event) => setEmail(event.target.value);

const handleChange = ({ target }) => setEmail(target.value);

1. Why is there curly brackets around target in the last restructuring, but not around event in the second restructuring. What is the curly brackets doing ...? 2. What happened to event in the last restructuring?

15 replies

KPCKevin Powell - Community

•Created by Å Marlon G on 6/16/2023 in #front-end

JS in JSX for newbie

Hello! What is the square brackets in the const img doing here:

import React from 'react';
import { createRoot } from 'react-dom/client';

const container = document.getElementById('app');
const root = createRoot(container);
function coinToss() {
    // Randomly return either 'heads' or 'tails'.
    return Math.random() < 0.5 ? 'heads' : 'tails';
}

const pics = {
    kitty: 'https://content.codecademy.com/courses/React/react_photo-kitty.jpg',
    doggy: 'https://content.codecademy.com/courses/React/react_photo-puppy.jpeg'
};

const img = <img
    src={pics[coinToss() === 'heads' ? 'kitty' : 'doggy']}
/>;

root.render(img);

import React from 'react';
import { createRoot } from 'react-dom/client';

const container = document.getElementById('app');
const root = createRoot(container);
function coinToss() {
    // Randomly return either 'heads' or 'tails'.
    return Math.random() < 0.5 ? 'heads' : 'tails';
}

const pics = {
    kitty: 'https://content.codecademy.com/courses/React/react_photo-kitty.jpg',
    doggy: 'https://content.codecademy.com/courses/React/react_photo-puppy.jpeg'
};

const img = <img
    src={pics[coinToss() === 'heads' ? 'kitty' : 'doggy']}
/>;

root.render(img);

Are they allowing for the ternary function to choose the pics property and connecting them to coinToss() in an array?

26 replies

KPCKevin Powell - Community

•Created by Å Marlon G on 6/10/2023 in #front-end

Finding correct tax bracket with iteration

Hello! taxBracket is finding the tax payed for each step of the tax bracket (stepOne, stepTwo, etc ...) What I want to do is find if myIncome is: --- higher than low and equal to high, if so, return the full sum --- higher than low, but lower than high, if so subtract low from myIncome and multiply with tax to find a new sum --- lower than low, ignore the bracket I'v tried all day with for loops, if...else statements, but I don't understand what to use to calculate all of those three conditions ...

const myIncome = 650000;

const taxBracket = (low, high, tax) => {
    return {
        low,
        high,
        tax,
        sum() {
            return (this.high - this.low) * this.tax;
        }
    }

};

const stepOne = taxBracket(198350, 279150, 0.017);
const stepTwo = taxBracket(279150, 642590, 0.04);
const stepThree = taxBracket(642590, 926800, 0.134);
const stepFour = taxBracket(926800, 1500000, 0.164);
const stepFive = taxBracket(1500000, Infinity, 0.174);

const myIncome = 650000;

const taxBracket = (low, high, tax) => {
    return {
        low,
        high,
        tax,
        sum() {
            return (this.high - this.low) * this.tax;
        }
    }

};

const stepOne = taxBracket(198350, 279150, 0.017);
const stepTwo = taxBracket(279150, 642590, 0.04);
const stepThree = taxBracket(642590, 926800, 0.134);
const stepFour = taxBracket(926800, 1500000, 0.164);
const stepFive = taxBracket(1500000, Infinity, 0.174);

13 replies

KPCKevin Powell - Community

•Created by Å Marlon G on 6/9/2023 in #front-end

Vacation pay calculator – JS

Hi folks! I'm a bit stuck, and not really sure how to google this issue ... When running the script in this repo I get a NaN when calculating vacationPay at the end ... I understand that something is not defined, but I don't understand what that is ... https://github.com/AMarlonG/JavaScript/blob/main/Projects/calculator.js

11 replies

KPCKevin Powell - Community

•Created by Å Marlon G on 6/8/2023 in #front-end

Following Kevin's advice as best as one can ... how well do you need to understand vanilla JS?

So Kevin put out this video (https://www.youtube.com/watch?v=HuI4fDxDM0g), and it was a nice reminder that having commited to the "boring" route of become a web dev he endorsed the choice I made of sticking to my guns and finishing codecademys JS courses, plus filling in gaps with javascript.info, Kyle in Web Dev Simp., etc. But then it hit me from watching this video – how well do you need to know vanilla stuff before you go on to react, next.js, etc? Because I now know some very basic JS structure, and with the help of the resources I've mentioned and the power of googleing I could probably build very basic stuff with JS, like a calculator, etc. Objects are important, functions are important, having done the JS course first, I really felt like TypeScript is something I can see as a good tool (and actually felt easy to understand), but what I don't understand is how well should I understand when I should use classes instead of basic objects? When do I build a function from scratch and when is it better to use specific methods? And having googled this issues I don't really find any good resources. As a specific example: Now I can read a JS file and understand the different tools and steps (this is an object, and this method is using this property, etc.), but I could never build one from scratch myself. So if I wanted to build an ecommerce web app I could not write that code myself, but I would be able to decipher an ecommerce program someone else has build. So – is it know that I jump over to understanding React and other libraries, frameworks, etc., and start chippin away on them, or are there any good resoruces to kind of close the gap between really basic vanilla JS knowledge, and real life application building? This could also be a question for the back-end channel, but here it goes for now.

16 replies

Gaming

Programming