chrono1913 Posts - Answer Overflow

chrono1913

•Created by chrono1913 on 2/13/2024 in #front-end

href to link to another spot on a page and redirect the page to that spot

<div id="MENUID" class="MENUID-btn"  onmouseleave="close()">
        
                    <ul>
                        <li><a href="HOME">HOME</a></li>
                        <li><a href="ABOUT US">ABOUT US</a></li>
                        <li><a href="CONTACT_US">CONTACT</a></li>
                        <li><a href="#developer">DEVELOPER</a></li>
                    </ul>
                </div>
                
              
            
    </div>

</div>
<div class="newarrival">
<div class="Box1"></div>
    <div class="Box2"></div>
    <div class="Box3"></div>
</div>


<div id="#developer" class="container2of3">
    <div class="WEBDEV"><span><img src="/img/2of3/WEB\ VS\ PNG.png" alt=""></span></div>
    <div class="DEVPHOTO"></div>
    <div class="BIO">lorem</div>
  </div>

</div>

<div id="MENUID" class="MENUID-btn"  onmouseleave="close()">
        
                    <ul>
                        <li><a href="HOME">HOME</a></li>
                        <li><a href="ABOUT US">ABOUT US</a></li>
                        <li><a href="CONTACT_US">CONTACT</a></li>
                        <li><a href="#developer">DEVELOPER</a></li>
                    </ul>
                </div>
                
              
            
    </div>

</div>
<div class="newarrival">
<div class="Box1"></div>
    <div class="Box2"></div>
    <div class="Box3"></div>
</div>


<div id="#developer" class="container2of3">
    <div class="WEBDEV"><span><img src="/img/2of3/WEB\ VS\ PNG.png" alt=""></span></div>
    <div class="DEVPHOTO"></div>
    <div class="BIO">lorem</div>
  </div>

</div>

I am trying to redirct the user to another spot on the page, when they click on the <a>, can I do that this way

14 replies

KPCKevin Powell - Community

•Created by chrono1913 on 2/12/2024 in #front-end

I need to understand grid template rules

  
  <div id="container">
    
    <div class="banner"></div>
  </div>

  
  <div id="container">
    
    <div class="banner"></div>
  </div>

body {
  background-color: black
}

#container {
  display: grid;

  grid-template: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
/*   grid-auto-columns: 0.5fr; */
  grid-gap: 10px;
/*   height: 100%; */
  grid-auto-flow: row;
  background: white;
}


.banner {
  grid-area: 1 / 1 / 3 / 14;
  background-color: #dca4c8;
  
  box-shadow: 2px 3px 9px -1px rgba(158, 0, 255, 1);
  -webkit-box-shadow: 2px 3px 9px -1px rgba(158, 0, 255, 1);
  -moz-box-shadow: 2px 3px 9px -1px rgba(158, 0, 255, 1);
  
  border-radius: 0px 0px 21px 21px;
  -webkit-border-radius: 0px 0px 21px 21px;
  -moz-border-radius: 0px 0px 21px 21px;
}

body {
  background-color: black
}

#container {
  display: grid;

  grid-template: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
/*   grid-auto-columns: 0.5fr; */
  grid-gap: 10px;
/*   height: 100%; */
  grid-auto-flow: row;
  background: white;
}


.banner {
  grid-area: 1 / 1 / 3 / 14;
  background-color: #dca4c8;
  
  box-shadow: 2px 3px 9px -1px rgba(158, 0, 255, 1);
  -webkit-box-shadow: 2px 3px 9px -1px rgba(158, 0, 255, 1);
  -moz-box-shadow: 2px 3px 9px -1px rgba(158, 0, 255, 1);
  
  border-radius: 0px 0px 21px 21px;
  -webkit-border-radius: 0px 0px 21px 21px;
  -moz-border-radius: 0px 0px 21px 21px;
}

The container grid template only have 13 columns and on the banner grid area shows 14 instead of 13, but when I change it to 13, it does not spread to the full width of the page. so if I change it to 14 it will extend to the full length of the page, but why? and it does make sense since like i mentioned there is only 13 columns, pls help me understand this ty

19 replies

KPCKevin Powell - Community

•Created by chrono1913 on 2/9/2024 in #front-end

Can I nest div liek this in scss

.RIGHT3DOTS .RIGHT4DOTS .RightBig4Dots .LEFT3DOTS .LEFT4DOTS .LEFTBig3Dots {
  opacity: .5;
}

.RIGHT3DOTS .RIGHT4DOTS .RightBig4Dots .LEFT3DOTS .LEFT4DOTS .LEFTBig3Dots {
  opacity: .5;
}

2 replies

KPCKevin Powell - Community

•Created by chrono1913 on 2/7/2024 in #front-end

using parallax in a grid, is it possible

I have been using grid and trying to apply the parallax effect to the grid. I want to know how to make it work without uysing the postion, absolute

1 replies

KPCKevin Powell - Community

•Created by chrono1913 on 2/5/2024 in #back-end

need help with grid

body{
    background: linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255));
    height: 300vw;
    // position: sticky;
}

#container {
  display: grid;
  
  grid-template: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-gap: 4px;
  height: 100%;
//   grid-auto-flow: row;
  
  background-color: #2196F3;
  border: 1px solid blue;//delte in final work
}

.banner {
    grid-area: 1 / 1 / 1 / 9;
    background-color: blue;
    // width: 100%;
}

.middlebackground {
    // height: 400px;
    // width: 100%;
    grid-area: 3 / 3 / 6 / 10;
    background-color: white;
}

body{
    background: linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255));
    height: 300vw;
    // position: sticky;
}

#container {
  display: grid;
  
  grid-template: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-gap: 4px;
  height: 100%;
//   grid-auto-flow: row;
  
  background-color: #2196F3;
  border: 1px solid blue;//delte in final work
}

.banner {
    grid-area: 1 / 1 / 1 / 9;
    background-color: blue;
    // width: 100%;
}

.middlebackground {
    // height: 400px;
    // width: 100%;
    grid-area: 3 / 3 / 6 / 10;
    background-color: white;
}

how can i cover the grid area to cover the area without using width and height.

4 replies

KPCKevin Powell - Community

•Created by chrono1913 on 11/27/2022 in #front-end

readLine() what does this do in this code

x = (score) => {
score = parseInt(readLine(), 10)
return score >= 88 ? "excellent" : (score <= 87 && score >=40) ? "good": "fail";    
}
console.log(x())

x = (score) => {
score = parseInt(readLine(), 10)
return score >= 88 ? "excellent" : (score <= 87 && score >=40) ? "good": "fail";    
}
console.log(x())

16 replies

KPCKevin Powell - Community

•Created by chrono1913 on 11/27/2022 in #front-end

what does this line mean z = (++b+—a)%5

``` var a = 3 var b = 2 z = (++b+—a)%5 document.write(z)

27 replies

KPCKevin Powell - Community

•Created by chrono1913 on 10/6/2022 in #front-end

I need to understand this part of the code

let x = "hello my name is chrono" const finalSentence = x.replace(/\S\w | \s\w/g, letter => letter.toUpperCase()); >>>>>>>>>>>>> I need to understand this part of the code >>>>>>>>>>>> letter => letter.toUpperCase() Is it like writing this function letter(letter) { letter.toUpperCase() return letter }

26 replies

KPCKevin Powell - Community

•Created by chrono1913 on 10/3/2022 in #front-end

how to use a loop to cap the last letter of a string

let x = "hello my name is chrono" let reg = x.split(' ') for(let i = 0; i < reg.length; i++) {

reg[i] = reg[i][0].toUpperCase() + reg[i].substr(1)
} reg.join(" ") console.log(reg) >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> The code above is to change the first letter of the string to uppercase. The next lesson is to change the last letter instead of the first Please help

20 replies

KPCKevin Powell - Community

•Created by chrono1913 on 9/27/2022 in #front-end

I just want to know if i did this right, regarding js and react script

function clickfunction() { const p = document.querySelector('.container') p.styles.padding = "50px"; } export function App2() { return <div> <p>Hello Again</p> <div>
<p onclick="clickfunction" className="container1">djskahdasfklaskl</p> </div> </div> }

9 replies

KPCKevin Powell - Community

•Created by chrono1913 on 9/25/2022 in #front-end

What is the point of the concept ‘promise’

I been watching ‘Promise’ videos and still dont understand the concept. When is it most relevant to use it?

7 replies

Gaming

Programming