Skip to content
OverviewSolutions
33
Comments
13
Austine Gomez
@agomez99

All comments

  • Austine Gomez•660
    @agomez99Posted over 1 year ago

    Awesome work!!

    Marked as helpful
    0
  • Jeff Lang•280
    @jefflangtechSubmitted over 1 year ago

    First time trying a flexbox on the body to center a component vertically and horizontally. Ran into some weird stuff with media queries where the components may have wanted to stretch off the page, could be width rules creating conflicts. It all works but was not as seamless as I would have guessed.

    Anybody prefer this pattern of centering on the page? And why?

    Social proof section - lots of grid & flex

    1
    Austine Gomez•660
    @agomez99Posted over 1 year ago

    Looks Great, I use Flexbox alot mostly for simplicity. Flexbox provides a straightforward and easy-to-understand way to center content both horizontally and vertically, reducing the need for complex CSS rules. Using Flexbox for centering content offers a powerful and flexible solution that saves development time.

    0
  • Austine Gomez•660
    @agomez99Posted over 1 year ago

    Hello! great work removing the extra dot should show your image

     <img src="../images/image-qr-code.png" alt="">
    4
  • Austine Gomez•660
    @agomez99Posted over 1 year ago

    Hello great job!, I refactored your JavaScript a bit, changed your function to handle submit some to handle the form being submitted with out entering information.

    const subscribeButton =  document.querySelector('.form__button');
const dismissButton = document.querySelector('.thanks-section__button');
const principalContainer = document.querySelector('.main-content');
const thanksSectionContainer = document.querySelector('.thanks-section');
const emailInput = document.querySelector('.form__input');
const emailErrorDiv = document.querySelector('.form__input--error');

thanksSectionContainer.style.display = 'none';

emailInput.addEventListener('input', handleEmailInput);

subscribeButton.addEventListener('click', handleSubscribeClick);

dismissButton.addEventListener('click', handleDismissClick);

function handleEmailInput(e) {
if (emailInput.value === '') {
showError(emailInput, emailErrorDiv, 'Cannot be empty');
} else {
showError(emailInput, emailErrorDiv, '', false);
}
}

function handleSubscribeClick(e) {
e.preventDefault();
console.log('click subscribe button');
verifyFilled(emailInput, emailErrorDiv);
if (emailInput.value.length > 0) {
principalContainer.style.display = 'none';
thanksSectionContainer.style.display = 'flex';
showError(emailInput, emailErrorDiv, '', false);
}
thanksSectionContainer.style.display = 'grid';
}

function handleDismissClick() {
if (window.innerWidth >= 1440) {
principalContainer.style.display = 'flex';
}
thanksSectionContainer.style.display = 'none';
}

function showError(input, errorDiv, errorMessage, show = true) {
if (show) {
errorDiv.textContent = errorMessage;
input.style.borderColor = 'hsl(4, 100%, 67%)';
} else {
errorDiv.textContent = errorMessage;
input.style.borderColor = '#D3D3D3';
}
}

function verifyFilled(input, errorDiv) {
if (input.value.length > 0) {
showError(input, errorDiv, '', false);
} else {
showError(input, errorDiv, 'This field cannot be empty');
}
}
    • Changed the variable name dimissButton to dismissButton for consistency.
    • Replaced anonymous arrow functions with named functions handleEmailInput, handleSubscribeClick, and handleDismissClick.
    • Moved the event listeners below the named functions for better readability.
    • Changed the error message when the email input is empty from "This field can be empty" to "This field cannot be empty" to align with the logic.
    Marked as helpful
    0
  • Austine Gomez•660
    @agomez99Posted over 1 year ago

    hello looks great, a suggestion would be if you want to utilize Flexbox more to position your container you can change from absolute position to center it to:

    .container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;  
background-color: hsl(0, 0%, 95%);
border-radius: 8px;
}

    This would stretch the width of the whole page, so then you want to place height and width on your divs

    .sedan {
background-color:  hsl(31, 77%, 52%);
font-family: 'Big Shoulders Display';
font-weight: 700;
font-size: 20px;
width:20rem;
height:28rem;

}

    You may also have to adjust your container height for mobile query as well.

    0
  • wwheeler89•30
    @wwheeler89Submitted over 1 year ago

    I'm a new coder and need a little help.

    Everything looks correct in the browser extension while working in VS Code, but when I click the URL on github.com there is an error with the QR Code image not showing up?

    Did I do something wrong? If so, please explain so I don't make the same mistake again.

    Thanks alot!!!

    QR Code Component

    2
    Austine Gomez•660
    @agomez99Posted over 1 year ago

    Hello great work, your path to your image is from images folder src="images/image-qr-code.png

    Should be ./image-qr-code.png

    Marked as helpful
    1
  • Austine Gomez•660
    @agomez99Posted over 1 year ago

    Hello, you can change the url in your CSS for your background to appear

    body{
background-image: url(/images/bg-intro-desktop.png);
//or     background-image: url(./images/bg-intro-desktop.png);
background-color: var(--Red);
color: white;
}
    Marked as helpful
    0
  • Austine Gomez•660
    @agomez99Posted over 1 year ago

    You can overlay an eye icon or svg of your choice and then change the opacity of the icon on hover

    0
  • 00YellowLemon•440
    @00YellowLemonSubmitted over 1 year ago

    I had trouble converting this to mobile . Can anyone tell me how to do it. The question does not fallback to its original color. Suggest a fix for this and more. Feedback will be highly appreciated. I just dont why the images dont show on github pages.

    FAQ Accordion

    2
    Austine Gomez•660
    @agomez99Posted over 1 year ago

    For github to show your images add the . In the path before the folder

    <img src="./images.... />
    Marked as helpful
    0
  • Isaac Lezama•50
    @IsaacLezamaSubmitted over 1 year ago

    I'd like some help with centering divs, I found kind of easy with the horizontal centering but it was difficult when I tried vertical. Any advice or comment about what I did would be really appreciated. Also sorry for my english in advanced, it's not my first language (:

    solution with html css flexbox and vanilla javascript

    4
    Austine Gomez•660
    @agomez99Posted over 1 year ago

    Hello, you can add the <main> tag around around the container, which specifies the main content of a document.

    <main>
<div class="container" >
<div class="main-content">
      
<h1>Stay updated!</h1>

    then modify your CSS to use flex and removing the position properties as follows:

    body {
background-color: var(--darkSlateGrey);
font-size: 16px;
}
main{
display: flex;
align-items: center;
justify-content: center;
height:100vh;
}

.container {
background-color: var(--white);
display: flex;
width: 800px;
height: 500px;
padding: 20px;
border-radius: 20px;
}

    *** I added the correct background color, you may have to adjust your media query css

    Marked as helpful
    0
  • Austine Gomez•660
    @agomez99Posted over 1 year ago

    You can use the fetch API

    fetch('./data.json')
.then(response => response.json())
.then(data => {
// Access the JSON data here
console.log(data);

// You can iterate over the array and access each object's properties
data.forEach(item => {
console.log('Category:', item.category);
console.log('Score:', item.score);
console.log('Icon:', item.icon);
});
})
.catch(error => {
console.log('Error:', error);
});
    Marked as helpful
    1
  • Derek Harnett•130
    @harnettdSubmitted over 1 year ago

    Reading in a local JSON file was surprisingly difficult. In the end, I edited the data.json file so that it defined data to be a list of objects. Then, I loaded the file in index.html using a script tag. But to do this, I needed to be able to edit data.json which won't always be the case. So, what's the simplest way to read a local JSON file?

    Results Summary Component using JQuery

    1
    Austine Gomez•660
    @agomez99Posted over 1 year ago

    You can use the fetch API

    fetch('./data.json')
.then(response => response.json())
.then(data => {
// Access the JSON data here
console.log(data);

// You can iterate over the array and access each object's properties
data.forEach(item => {
console.log('Category:', item.category);
console.log('Score:', item.score);
console.log('Icon:', item.icon);
});
})
.catch(error => {
console.log('Error:', error);
});
    Marked as helpful
    0