Austine Gomez
@agomez99
All comments
- Austine Gomez• 660
@agomez99
Posted
Awesome work!!
Marked as helpful
0 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?
Austine Gomez• 660@agomez99
Posted
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- Karolaine Lima• 10
@kartulle
Submitted
Austine Gomez• 660@agomez99
Posted
Hello! great work removing the extra dot should show your image
<img src="../images/image-qr-code.png" alt="">
4 - Jennifer Alarcon S• 120
@JenniferAS26
Submitted
Austine Gomez• 660@agomez99
Posted
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 - eudeees• 50
@eudeees
Submitted
open to tips, comment! thanks for view, like please
Austine Gomez• 660@agomez99
Posted
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
@wwheeler89
Submitted
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!!!
Austine Gomez• 660@agomez99
Posted
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 - Letícia Lima• 50
@itsleticia
Submitted
Austine Gomez• 660@agomez99
Posted
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 - suhridp• 110
@suhridp
Submitted
how can I add hover image effect on the main image? the image of the hover time is not provided.
Austine Gomez• 660@agomez99
Posted
You can overlay an eye icon or svg of your choice and then change the opacity of the icon on hover
0 - 00YellowLemon• 440
@00YellowLemon
Submitted
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.
Austine Gomez• 660@agomez99
Posted
For github to show your images add the . In the path before the folder
<img src="./images.... />
Marked as helpful
0 - Isaac Lezama• 50
@IsaacLezama
Submitted
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 (:
Austine Gomez• 660@agomez99
Posted
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 - Andrea Jarich• 20
@AJarich
Submitted
-
How are you able to print out the data.json information using vanilla Javascript? This is something I've been wondering about.
-
Any advice on how to make this more streamlined?
Austine Gomez• 660@agomez99
Posted
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• 120
@harnettd
Submitted
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?
Austine Gomez• 660@agomez99
Posted
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