Skip to content
OverviewSolutions
21
Comments
8
P
Matthias
@astragenius

All comments

  • Duyen Nguyen•950
    @Duyen-codesSubmitted over 2 years ago

    I'm stuck with deleting item from the list. Could you please help give me some hints on this please. I'm still a beginner but wanna challenge myself with this. Thanks for your help!

    Todo app

    3
    Matthias•630
    @astrageniusPosted over 2 years ago

    Hey your bg-images and icons dont load correctly.

    Remove "/" on all your img url path.

    for example:

    body {
    --bg-img: url("/images/bg-mobile-dark.jpg");
}

to

body {

    --bg-img: url("images/bg-mobile-dark.jpg");
}

    do this on all your image urls. After this all images should load correctly.

    Marked as helpful
    0
  • Javier Lopez•145
    @jglopezreSubmitted over 2 years ago

    Hi guys, i need some ideas, about image on background, I don't know how to make it to cover entirely background when resolution is greater than 1440px, I used object-fit: cover but it doesn't perform changes. Thank a lot for yours answers. Greeting.

    responsive-bootstrap-based-signup-form

    2
    Matthias•630
    @astrageniusPosted over 2 years ago

    Hi my friend :)

    Delete the div and picture element with the class .background-image. And delete the class in the css file aswell. (these are not necessary) Set the background-image on the body via CSS. (less code)

    I make this change on your css file:

    body {
  background-image: url(./images/bg-intro-desktop.png);
  background-color: #ff7a7a;
  min-height: 100vh;
  font-family: "Poppins", sans-serif;
}

    You can make a mediaquerie to change the mobile image aswell.

    media (max-width: 375px) {
   body {
  background-image: url(./images/bg-intro-mobile.png);
  
    }
}

    This shoult work:)

    have a nice day :)

    0
  • Matthias•630
    @astrageniusPosted almost 3 years ago

    Hey ho :) Good solution so far. Your layout is really accurate.

    You should set the 'label' html element to each input element.

    For more Details:

    Link for further Reading

    for example

    <label for="email"></label>
<input type="email" id="email">

or

<label for="email">
<input type="email" id="email">
</label>

    Technical you don't need Javascript for clientsite formvalidation. You can it do only with CSS pseudo-classes. (its an alternative because some user have deactivate JS on their browser. So no JS validation possible.)

    For example

    input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-color: red;
}

input:valid {
  border: 2px solid green;
}

    For more Details:

    MDN Webdocs CSS Tricks

    0
  • Matthias•630
    @astrageniusPosted almost 3 years ago

    Hey ho :) Good solution so far.

    Change

    background: url(/images/bg-intro-desktop.png);

(you have to add a dot)
to

background: url(./images/bg-intro-desktop.png);

(now your background image is loading).

    You can delete the body:after class completly

    Add the red background-color in the html element instead:

    html {
  font-size: 62.5%;
  background-color: hsla(0, 100%, 74%, 0.658);
}

    You should set the 'label' html element to each input element.

    For more Details:

    Link for further Reading

    for example

    <label for="email"></label>
<input type="email" id="email">

or

<label for="email">
<input type="email" id="email">
</label>

    Technical you don't need Javascript for clientsite formvalidation. You can it do only with CSS pseudo-classes.

    For example

    input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-color: red;
}

input:valid {
  border: 2px solid green;
}

    For more Details:

    MDN Webdocs CSS Tricks

    0
  • Maciej•280
    @dreamspiceSubmitted almost 3 years ago

    Sadly, without JavaScript :( However check it.

    I always start creating on ~2.5k width, then mobile, then desktop.... Maybe i will try mobile first.

    First time use SASS - finally less and cleaner code.

    How to put div / footer down when we can scroll our site?

    Intro component with sign up form

    4
    Matthias•630
    @astrageniusPosted almost 3 years ago

    Hey ho :) Good solution so far. Your layout is really accurate.

    You should set a 'label' html element to each input element.

    For more Details:

    Link for further Reading

    for example

    <label for="email"></label>
<input type="email" id="email">

or

<label for="email">
<input type="email" id="email">
</label>

    Technical you don't need Javascript for clientsite formvalidation. You can it do only with CSS pseudo-classes.

    For example

    input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-color: red;
}

input:valid {
  border: 2px solid green;
}

    For more Details:

    MDN Webdocs CSS Tricks

    Marked as helpful
    1
  • murilo•110
    @mlzziSubmitted almost 3 years ago

    Hi guys,

    This project gave me real work to function.

    Please give me feedback.

    In the email field, the type in input tag I changed it to text, because I wasn't having the result I want, like the correct email format, and the red message example in the placeholder. So I change it from email to text, added a Javascript function to correct format and it worked. But I shouldn't do this right?

    How can I achieve a better result without changing the type input?

    Sass and Javascript

    2
    Matthias•630
    @astrageniusPosted almost 3 years ago

    Hey ho :) Good solution so far. Your layout is really accurate.

    For your question for the Email input:

    • Set a "required" attribute and the "pattern" attribute and set an RegEx for Email validation in it. For example
    <input type="email" id="email"  placeholder="Email Address" pattern="/[\w\-\._]+@[\w\-\._]+\.\w{2,10}/" required>

    You should set the 'label' html element to each input element.

    For more Details:

    Link for further Reading

    for example

    <label for="email"></label>
<input type="email" id="email">

or

<label for="email">
<input type="email" id="email">
</label>

    Technical you don't need Javascript for clientsite formvalidation. You can it do only with CSS pseudo-classes.

    For example

    input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-color: red;
}

input:valid {
  border: 2px solid green;
}

    For more Details:

    MDN Webdocs CSS Tricks

    0
  • Matthias•630
    @astrageniusPosted almost 3 years ago

    Hello Jesse,

    First

    Change the min-height property of the body to 100vh so the background color can completely expand.

    body {
    min-height: 100%;
min-width: 100%;
position: relative
to

    min-height: 100vh;
    background-color: hsl(0, 100%, 74%);

   
}

    Because with min-height or min-width to 100% the container will only take the space he really need.

     min-height: 100%;
 min-width: 100%;

    You can also delete

    .pink-overlay {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;

    You dont need it anymore.

    Change the background-color in the media-queries also.

    Second

    center the Sign up form.

    Add display grid to the body

    body {
    display: grid;
    justify-content: center;
    align-items: end;
}

    Your Sign up Form should now in the center of the screen.

    That's it :) Hope i could help you. Have a nice day and a Happy new Year :)

    Marked as helpful
    1
  • Benja.min•740
    @BenjaDotMinSubmitted almost 3 years ago

    Hello there! Today I learnt about hitting an API and populating the UI. Built with vanilla JS and sass.

    However, I cannot figure out how to format the date that is returned from github. I would like to change "2010-04-26T06:17:58Z" into "25 Jan 2011" for example.

    Any pointers are appreciated!

    Learning API, vanilla JS, SASS

    1
    Matthias•630
    @astrageniusPosted almost 3 years ago

    Hey my friend :) this is my approach:

    const formatDate = (date) => {

    const newDate = new Date(date);

const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(newDate);
const month = new Intl.DateTimeFormat('en', {month: 'short' }).format(newDate);
const year = new Intl.DateTimeFormat('en', {year: 'numeric'}).format(newDate);

return `Joined ${day} ${month} ${year}`;

    }

    You take the date from the Github API and make an new Date opject. With "Intl.DateTimeForma"t you have several options to format the date.

    Here on MDN Webdoc, you have a more detailed explenation.

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat

    Have a good day :)

    Marked as helpful
    1