althepal78 Posts - Answer Overflow

althepal78

Explore posts from servers

•Created by althepal78 on 7/4/2024 in #front-end

overflow-x: hidden; overflow-x: clip !important; overflow-x: hidden !important;

I am trying to use this but it seems to not work no matter where I put it, I want to add it mainly for the header section when I am using the query for anything less then 650px wide. however when I do that and go to the section it don't show an arrow but still lets you slide over to the right . I am going to show you the css that my code is rendering versus breaking down the sections of scss. If I have to I will show you how I am using sass to work with this maybe it is that.

57 replies

KPCKevin Powell - Community

•Created by althepal78 on 7/1/2024 in #front-end

Trying to make this animation look smoother

I am trying to make the boat look smoother with keyframes animations

 img {
          width: 10rem;
          filter: grayscale(1) invert(1);
          overflow: clip;
          animation: upanddown 1s infinite;

          @keyframes upanddown {
            0% {
              transform: rotateZ(-6deg);
            }
            25% {
              transform: rotateZ(-3deg);
            }
            50% {
              transform: rotateZ(0deg);
            }
            75% {
              transform: rotateZ(3deg);
            }

            100% {
              transform: rotateZ(6deg);
            }
          }
        }

 img {
          width: 10rem;
          filter: grayscale(1) invert(1);
          overflow: clip;
          animation: upanddown 1s infinite;

          @keyframes upanddown {
            0% {
              transform: rotateZ(-6deg);
            }
            25% {
              transform: rotateZ(-3deg);
            }
            50% {
              transform: rotateZ(0deg);
            }
            75% {
              transform: rotateZ(3deg);
            }

            100% {
              transform: rotateZ(6deg);
            }
          }
        }

19 replies

KPCKevin Powell - Community

•Created by althepal78 on 6/9/2024 in #front-end

Scroll-snap and smooth scrolling

So I have this scroll snap and I am trying to use it and smooth scrolling going left and right. I have some code here but once I add scroll-snap it stops it from scrolling smoothly. Additionally how can I get rid of the scrollbar and have the same affect?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
}

header {
  width: 100%;
}

header nav {
  background-color: black;
  color: white;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

li {
  list-style-type: none;
}

a {
  background-color: rgb(244, 115, 3);
  text-decoration: none;
  color: white;
  font-size: xx-large;
  padding: 0.5rem;
  border-radius: 10px;
  transition: background-color 0.4s ease-in-out;
}

a:hover {
  background-color: brown;
}

.scroll-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;

  scroll-snap-type: x mandatory;
}

.scroll-item {
  
  scroll-snap-align: start;
  scroll-behavior: smooth;
  gap: 0.5rem;
  grid-template-rows: min-content;
  background-color: brown;
  color: white;
  font-size: xx-large;
  height: 85svh;
  text-align: center;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
}

header {
  width: 100%;
}

header nav {
  background-color: black;
  color: white;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

li {
  list-style-type: none;
}

a {
  background-color: rgb(244, 115, 3);
  text-decoration: none;
  color: white;
  font-size: xx-large;
  padding: 0.5rem;
  border-radius: 10px;
  transition: background-color 0.4s ease-in-out;
}

a:hover {
  background-color: brown;
}

.scroll-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;

  scroll-snap-type: x mandatory;
}

.scroll-item {
  
  scroll-snap-align: start;
  scroll-behavior: smooth;
  gap: 0.5rem;
  grid-template-rows: min-content;
  background-color: brown;
  color: white;
  font-size: xx-large;
  height: 85svh;
  text-align: center;
}

3 replies

KPCKevin Powell - Community

•Created by althepal78 on 6/3/2024 in #front-end

pirate scroll theme

I am trying to make a site where the sections roll down like a pirate scroll and when changed out or in transition roll back up until the section is in view. I have no idea where to start but I am trying to do it for my site @ https://www.fishingwithdummies.site

22 replies

KPCKevin Powell - Community

•Created by althepal78 on 5/18/2024 in #front-end

animation to make List Items, "LI", float to the top like a bubble

Where could I look up lessons to do this or does anyone know how could this be done easy or easier

9 replies

KPCKevin Powell - Community

•Created by althepal78 on 4/3/2024 in #os-and-tools

bash wsl command not found

114 replies

KPCKevin Powell - Community

•Created by althepal78 on 4/1/2024 in #front-end

azimuth degrees into Cardinal Point

So I am trying to find out if there is a json file somewhere that would have the degrees and allow me to use it to turn degrees into north and north west. I am still working on my weather app but keep running into bumps in the road, like I had to reset my computer and lost what I was working on lol I am just using JavaScript

6 replies

KPCKevin Powell - Community

•Created by althepal78 on 3/12/2024 in #front-end

working with api's using fetch

I am trying to figure out why this is not working properly. I keep getting undefine when I console.log(data)? and when I do something to mess it up on purpose the browser the .catch statment says it is wrong but I copied it from the docs and the only difference is that I put er instead of error

 async function getData() {

  const data = await fetch(url)
    .then((res) => {
      if (res.status === 200) {        
          return res.json();
      } else {
        throw new Error("Server Error");
      }
    })
    .then((deb) => {
      console.debug(deb);
    })
    .catch((er) => {
      console.error(er);
    });

    console.log(data)
 
}
 getData();

 async function getData() {

  const data = await fetch(url)
    .then((res) => {
      if (res.status === 200) {        
          return res.json();
      } else {
        throw new Error("Server Error");
      }
    })
    .then((deb) => {
      console.debug(deb);
    })
    .catch((er) => {
      console.error(er);
    });

    console.log(data)
 
}
 getData();

37 replies

KPCKevin Powell - Community

•Created by althepal78 on 1/21/2024 in #front-end

can you defer a sass media query

I am trying to do what I saw KP do in his folder setup, however, my media query goes a head of my actual code. I have separated it and I have to use the @use on the top meaning when it imports the query for some reason haves to go on top in the css file.

@media (max-width: 650px) {
  header {
    background: blue;
    padding: 1rem;
    z-index: 100;
  }
}
header {
  background-color: rgb(19, 22, 26);
  position: fixed;
  width: 100%;
  top: 0;
}

@media (max-width: 650px) {
  header {
    background: blue;
    padding: 1rem;
    z-index: 100;
  }
}
header {
  background-color: rgb(19, 22, 26);
  position: fixed;
  width: 100%;
  top: 0;
}

Is there a way I can make it that the media query actually goes after this using partials in scss ?

45 replies

KPCKevin Powell - Community

•Created by althepal78 on 1/14/2024 in #front-end

@use instead of @import

So my dilemma is I used to import a _header.scss so it could have all the code for the nav in that area but how would I do something like that with @use since sass is trying to get away from @import 😉

22 replies

KPCKevin Powell - Community

•Created by althepal78 on 12/6/2023 in #front-end

advent of code help

I am trying to see if anyone can help me redo my code I am struggling with my code. It seems like it worked but then it does not

demoData = `two1nine
eightwothree
abcone2threexyz
xtwone3four
4nineeightseven2
zoneight234
7pqrstsixteen`
let demoStrings = demoData.split(/\n/);

let wordNumObj = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
  five: 5,
  six: 6,
  seven: 7,
  eight: 8,
  nine: 9,
};

let numStr = "";
let numArr = [];
let splitStr = "";
let currentString = "";
let newStr ="";
function getNumbersFromStrings() {
  for (let i = 0; i < demoStrings.length; i++) {
    currentString = demoStrings[i].trim();
    for (let x = 0; x < currentString.length; x++) {
      splitStr += currentString.charAt(x);
      for (key in wordNumObj) {
        if (splitStr.match(key)) {
          numStr += wordNumObj[key];
          newStr = splitStr.slice(-1);
          splitStr = newStr;
        } else if (splitStr.match(wordNumObj[key])) {
          numStr += wordNumObj[key];
          splitStr = "";
        }
        // console.log(splitStr, 'and the iteration',i)
      } // end for key in wordNumbObj
    } // end loop for currentString.Length
  
      numStr = numStr.charAt(0) + numStr.charAt(numStr.length - 1);
      numArr.push(Number(numStr.trim()));
      numStr = "";
     
  } // end for loop for demoStrings

  const total = numArr.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
  }, 0);
  console.log(total, "is the total");
}
getNumbersFromStrings();

// the answer I got 53587 it is to low

demoData = `two1nine
eightwothree
abcone2threexyz
xtwone3four
4nineeightseven2
zoneight234
7pqrstsixteen`
let demoStrings = demoData.split(/\n/);

let wordNumObj = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
  five: 5,
  six: 6,
  seven: 7,
  eight: 8,
  nine: 9,
};

let numStr = "";
let numArr = [];
let splitStr = "";
let currentString = "";
let newStr ="";
function getNumbersFromStrings() {
  for (let i = 0; i < demoStrings.length; i++) {
    currentString = demoStrings[i].trim();
    for (let x = 0; x < currentString.length; x++) {
      splitStr += currentString.charAt(x);
      for (key in wordNumObj) {
        if (splitStr.match(key)) {
          numStr += wordNumObj[key];
          newStr = splitStr.slice(-1);
          splitStr = newStr;
        } else if (splitStr.match(wordNumObj[key])) {
          numStr += wordNumObj[key];
          splitStr = "";
        }
        // console.log(splitStr, 'and the iteration',i)
      } // end for key in wordNumbObj
    } // end loop for currentString.Length
  
      numStr = numStr.charAt(0) + numStr.charAt(numStr.length - 1);
      numArr.push(Number(numStr.trim()));
      numStr = "";
     
  } // end for loop for demoStrings

  const total = numArr.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
  }, 0);
  console.log(total, "is the total");
}
getNumbersFromStrings();

// the answer I got 53587 it is to low

3 replies

KPCKevin Powell - Community

•Created by althepal78 on 11/26/2023 in #front-end

scaleX()

So I understand how to use the typical css scaleX() but I am wanting to do is confusing. First I want to make a hover effect that allows me to make a button looked like it grew to the right, however I am getting it gowing from the middles and moving from the center out. I am confused how to do this

.button {
  margin: 2rem;
  font-size: 1.5em;
  padding: 0.5rem;
  background-color: $accent-color;
  color: $bg-color;
  transition: transform 1s ease-in-out;
}

.button:hover,
.button:focus-visible {
  color: $text-alt;
  transform : scaleX(1.5);
  font-size: 1.5em;
  text-align: left;
  transform: scalex(1.5);
}

.button {
  margin: 2rem;
  font-size: 1.5em;
  padding: 0.5rem;
  background-color: $accent-color;
  color: $bg-color;
  transition: transform 1s ease-in-out;
}

.button:hover,
.button:focus-visible {
  color: $text-alt;
  transform : scaleX(1.5);
  font-size: 1.5em;
  text-align: left;
  transform: scalex(1.5);
}

20 replies

KPCKevin Powell - Community

•Created by althepal78 on 11/26/2023 in #front-end

using * and box-sizing etc..

So I see KP do this

*,
::before,
::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

*,
::before,
::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

what is the difference between that and

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

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

33 replies

CC#

•Created by althepal78 on 5/24/2023 in #help

❔ Tailwindcss and . net7 proper installation using vs 2022 preview

So I got tailwind css working just not working properly. I cannot nest classes together like in vs code site. By nesting I mean

<div class="text-xl md:text-3xl" > 
   Text in here 
</div>

<div class="text-xl md:text-3xl" > 
   Text in here 
</div>

4 replies

KPCKevin Powell - Community

•Created by althepal78 on 4/27/2023 in #front-end

tailwind

If I am using tailwind and want animate bounce to bounce once how can I make that happen

4 replies

KPCKevin Powell - Community

•Created by althepal78 on 1/18/2023 in #front-end

Create a div with no content then add a border when content is created or added to it?

So that is what I am trying to do. I have been searching for it because I thought I saw it but can't find an answer. Is there a way to do this with just SCSS?

18 replies

Gaming

Programming