All solutions

Hello Mentors,

I have learned many things during the making of this project. The one thing that stood out the most for me is learning about the parentElement Property. There are many different ways to traverse through the DOM in JavaScript. One way is by navigating up the tree DOM and select an ancestor of an element.

Here it was my goal to perform actions on the parent element of the parent element of radio. This is how I did it:

const form = radio.parentElement.parentElement.querySelector("form");

I needed to select the element ("form") which is nested inside it's parent element <section class="modal">. The parent element of radio is <div class="gridBox"> and his parent element is <section class="modal">.

 <section class="pledgeList" id="pledgeList">
    <div class="flexBox">
      <h2>Back this project</h2>
      <button id="close_pledgeList"><img src="./images/icon-close-modal.svg" alt="" /></button>
    </div>
    <p>
      Want to support us in bringing Mastercraft Bamboo Monitor Riser out in
      the world?
    </p>
    <section class="modal">
      <div class="gridBox">
        <label for=""></label><input type="radio" name="radioButton">
        <h3 class="modalH3">Pledge with no reward</h3>
        <p style="visibility: hidden;">No Reward</p>
      </div>
      <p>
        Choose to support us without a reward if you simply believe in our
        project. As a backer, you will be signed up to receive product updates
        via email.
      </p>
      <!-- Selected pledge start -->
      <form id="form1" action="">
        <hr>
        <fieldset>
          <legend>Enter your pledge</legend>
          <label for=""></label><input class="inputPledge" id="pledge1" type="text" placeholder="$Custom"></input>
          <small id="small1"></small>
          <button id="continueButton1" type="submit" class="continueButton">Continue</button>
        </fieldset>
      </form>
    </section>

radioButtons.forEach((radio) => {
  radio.addEventListener("click", () => {
    const form = radio.parentElement.parentElement.querySelector("form");
    //console.log(form.parentElement.parentElement); 

    radioButtons.forEach((otherRadioButtons) => {
      const form = otherRadioButtons.parentElement.parentElement.querySelector("form");
      //console.log(otherRadioButtons.parentElement.parentElement);
      form.style.display = "none";
    });

    if (radio.checked) form.style.display = "block";
  });
});

Hi guys,

I am in the process of completing a JavaScript course. At first I couldn't understand a single line of code. Now I am able to read what the code means on a basic level. I also learned how to use the console. This is just the tip of the iceberg. There is so much to learn and so many ways of writing JS.

Question for the JavaScript Guru's: How would you refractor my code?

Hello everyone,

It is not perfect, but at least I've finished it.

I did my best to finish this challenge. It is not perfect, but at least it's a decent attempt. I am currently following a JavaScript course, so my focus is on learning that right now. I will try to also make some frontend mentor challenges on the side as it would be good to put JavaScript into practice.

Hello Frontend Mentor community,

Does anyone know why my menu (in the Mobile View) does not display when the toggleButton has been clicked? How can I fix it?

Your help is much appreciated!

What I learned:

Alt attributes (textual descriptions of images added to the HTML code that a screen reader will read to a user) and the 3 types of images:

• Decorative Image
  • An image is decorative when it doesn't provide any information or context for the user to understand the content of the page.
  • The only function of a decorative image is to enhance the appearance of the page, therefor should be given an empty alt attribute.
  • Keep in mind that an empty alt attribute is different from no alt attribute at all! When no alt attribute is provided, screen readers will read out the full filename of the image.
• Functional Image
  • An image of a logo wrapped inside a link tag is an example of a functional image, because it functions as a link to return to the homepage. In this case you can use the alternate text "Return to homepage".
• Informative Image
  • These kind of images provide visual instructions and are useful for saving space. They can also convey emotions and thoughts. An example of an image with a visual instruction is an assembly diagram for furniture or an illustration of a phone number. In this case you can use the alternate text "assembly diagram for furniture" and “Phone number”.

I also learned about the mark tag. This tag defines text that should be marked or highlighted. I have used them for the "Learn More" links to give them the style of a highlight marker:

<a href="#" class="yellow_underline"><mark class="yellow">Learn more</mark></a>
<a href="#" class="red_underline"><mark class="red">Learn more</mark></a>

// TEXT UNDERLINE MARKER STYLE
mark {
  display: inline-block;
  line-height: 0em;
  padding: 0 0.5em 0.6em 0.5em;
  border-radius: 5px;
}

.yellow {
  background-color: $ultra_light_yellow;
  &:hover {
    background-color: pink;
  }
}

.red {
  background-color: $ultra_light_red;
}

.yellow_underline:hover mark {
  background-color: $yellow;
}

.red_underline:hover mark {
  background-color: $soft_red;
}

Hello Frontend Mentor Gang!

It took me some time to finish this challenge. The calculator works, however the form does not function the way I want it to. Here are some of the issues:

• The error message "Can't be zero" is displayed by default.
• After the reset button has been clicked the value "0" stays set in place after typing in a new value.

My Questions:

• How can I make the error message and the red focus on the input visible only after the tip percentage button or custom input have been filled in?
• How do I make the value "0" dissapear when a new value is typed in after the reset button has been clicked?

Feel free to leave a comment if you've noticed some other issues. Much Appreciated!

What I learned:

• There is an easy fix to make multiple flex-items the same width by setting the width of the flex-children on 100%.

• I have set the root font-size to 62.5% for an easier workflow. This makes the new root value 10px which equates to 1rem:

html {
  box-sizing: border-box;
  font-size: 62.5%; /* 62.5% of 16px browser font size is 10px */
}

Wat I learned:

I have learned how to add custom data to a <button> element with the data-* attribute. Data-* attribute attaches data to the button:

<button data-frequency="daily" class="btn">Daily</button>
<button data-frequency="weekly" class="btn">Weekly</button>
<button data-frequency="monthly" class="btn">Monthly</button>

I also learned about the clamp() method. This method is a reference to woodworking in which a clamp limits the movement of a saw. I have used this method on the font-size:

font-size: clamp(1.5rem, 2vw + 1rem, 5rem);

I have added +1rem to remain the zoom-in function of the browser.

This method takes three parameters: a minimum value, a preferred value, and a maximum allowed value.

clamp(minimum, preferred, maximum);

This is how it works: When you decrease the size of the viewport, the viewport becomes smaller, thus the vw or % of the fontsize also becomes smaller. And vice versa for when you increase the viewport. The clamp()method essentially works the same as when you use width:100%, in this case the width will adjust to the viewport width size.

• Minimum: this absolute unit prevents the element from becoming smaller than the set value

• Preferred: prefered relative unit scalable value

• Maximum: this absolute unit prevents the element from being bigger than the set value

Example:

clamp(30px, 6vw, 72px);

Ones the browser hits 30px it will not go below that even if the viewportsize is decreasing. Ones the browser hits 72px it will not go beyond that even if the viewportsize is increasing.

What I've learned from this challenge:

I have gained some insight about how typography works on the web.

For this challenge I choose to use both Static & Variable Font(s). By doing this I have learned the difference between them.

Static Fonts: Each width, weight, or style has it's own seperate font file, which requires multiple HTTP requests.

Variable Fonts: A single file which contains a typeface with a broad range of font variations, such as weights, widths, styles and optical sizes.

Reasons to use Variable Fonts:

• designer has a broad range of fonts variations to choose from
• supports CSS transition and animation
• easy & efficient incorporation for developer
• only one HTTP request, thus optimizes site performance

I am accustomed to make use of Google Fonts with the @import rule. With this rule you import a Google Fonts stylesheet into your stylesheet with an HTTP fetch request. This was my first time using the @font-face rule:

// Variable
@font-face {
  font-family: "PlusJakartaSans-VariableFont";
  src: url("../assets/fonts/PlusJakartaSans-VariableFont_wght.ttf");
  font-weight: 100 1000;
}
// Static
@font-face {
  font-family: "plusJakartaSans-Medium";
  src: url("../assets/fonts/static/PlusJakartaSans-Medium.ttf");
}

With the @font-face rule you locally host your fonts. This allows you to download a particular font from your server, to render a webpage if the user hasn't got that font installed on the computer.

Fonts come in different file formats. The most common are:

• OTF = OpenType Font Format
• TTF = TrueType Font Format
• WOFF = Web Open Font Format
• WOFF2

This challenge included Fonts in TrueType Font Format.

The Advice Generator App functions well in Google Chrome, but there is a delay and a repeat of the same advice in FireFox. Does anyone know why this happens?

What I learned:

This challenge gave me the opportunity to do some homework about API's and the fetch() method in JavaScript. Writing down what I have learned helps to give me a clear understanding about the subject. So here it goes!

"Application Programming Interfaces", or "API's" essentially provide a doorway in the form of code that enables access for two unrelated applications to communicate & share information with eachother.

For this challenge I made use of a browser API and a third party API. The former is the "Fetch API" and the latter is the "Advice Slip API", a web service made by Tom Kiss.

Examples of browser API's:

• Canvas API
• Fullscreen API
• Clipboard API
• Payment Request API
• Geolocation API

Examples of third party API's:

• Google Analytics
• Google Maps
• Facebook Login
• YouTube
• PayPal

API's are an empowering tool for developers and engineers, because it enables them to acquire (real-time) data via an API "CALL', or “request”.

For this challenge I've used the fetch() method. I made a GET request by passing in the URL endpoint as an argument:

fetch("https://api.adviceslip.com/advice");

The fetch() method returns a Promise Object. To explain this in layman's terms; a Promise Object represents an operation in which the value of the return currently is unknown, included with the guarantee that the value will be known at some point. A Promise has three possible states:

• Pending
• Fulfilled
• Rejected

Once the Promise has been called it initially starts in a "Pending" state. You can use the .then and .catch method to handle the Promise once it's in a "Fulfilled" or a "Failed" state.

What I learned:

It was surprisingly fun to work on this challenge. I have gained some insight about JavaScript if/else statements and the CSS z-index property.

There are some conditions for the z-index to work:

• it only works on positioned elements such as position:absolute, position:relative, or position:fixed
• avoid using negative values (links won't work anymore when they are on a lower index level with a negative value)
• only use the z-index on the specific element
• avoid using min-height: 100%; on the element that is supposed to be on a lower index level

JavaScript if/else statements:

The if statement tests if a specified condition (which is in between () parentheses) is true or false (these are boolean values). In the boolean data type, there are only two possible values that can be returned: true or false. If the specified condition is true, then the block of code (which is in between the {} curly braces) will be executed. If the specified condition is false, then the block of code will be skipped.

Summary:

• Use if to specify a block of code to be executed, if a specified condition is true
• Use else to specify a block of code to be executed, if the same condition is false
• Use else if to specify a new condition to test, if the first condition is false
• Use switch to specify many alternative blocks of code to be executed

Hello Frontend Mentor Community I need some help with JavaScript!

I succeeded in the following:

• mirroring the text from the input into the creditcard inscription
• display of error messages when input is empty
• create space after every four characters with input for cardnumber
• prevent button from submitting by default

However, when I included the toggle function (to show the Thank You! Completion message after button has been clicked) the errors and the preventDefault() do not work anymore. How can I fix this?

I also wonder what input type to use for the cardnumber, month, year and cvc in HTML?

The REGEX that I used for the cardnumber does not function correctly either. How can I create the error when the wrong format has been entered?

Any help is much appreciated!

What I learned:

Working on this solution was a great way for me to learn more about JavaScript. I created the vertical bar graph with Chart.js and customized the chart in JavaScript. I placed the chart in a canvas tag in HTML:

<canvas id="chart" width="300" height="200"> </canvas>

I also learned a bit about Data Types:

• Strings: "Hello World" "Total:" "A"
• Numbers: 10 1.5 -30 1.2e10
• Boolean: true false
• null: null These are combinations of the above:
• Arrays [1,2,3] ["Hello","World"]
• Objects { "key":"value" } { "age": 30 }

What I learned:

// This tells the browser to pay attention to the following element:
const form = document.getElementById("form");
// This tells the browser to prevent the form from submitting by default:
form.addEventListener("submit", (e) => {
  e.preventDefault();
  // This tells the browser to pay attention to the following elements:
  const firstName = form["firstName"].value;
  const lastName = form["lastName"].value;
  const email = form["email"].value;
  const password = form["password"].value;
  // When the input is empty, do this:
  if (firstName === "") {
    addError("firstName", "First Name cannot be empty");
    // When the input is valid, do this:
  } else {
    removeError("firstName");
  }
  // When the input is empty, do this:
  if (lastName === "") {
    addError("lastName", "Last Name cannot be empty");
    // When the input is valid, do this:
  } else {
    removeError("lastName");
  }
  // When the input is empty do this:
  if (email === "") {
    addError("email", "Email cannot be empty");
    // When the input is invalid check REGEX and do this:
  } else if (!isValid(email)) {
    addError("email", "Looks like this is not an email");
    // When the input is valid, do this:
  } else {
    removeError("email");
  }
  // When the input is empty, do this:
  if (password === "") {
    addError("password", "Password cannot be empty");
    // When the input is valid, do this:
  } else {
    removeError("password");
  }
});
// Add Error Message & Icon
function addError(field, message) {
  const formControl = form[field].parentNode;
  formControl.classList.add("error");
  const small = form[field].parentNode.querySelector("small");
  small.innerText = message;
}
// Remove Error Message & Icon
function removeError(field) {
  const formControl = form[field].parentNode;
  formControl.classList.remove("error");
}

// REGEX = Regular Expression
function isValid(email) {
  const re =
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(String(email).toLowerCase());
}

What I learned:

I found an easy way to darken and/or lighten a color in scss variables. With the lighten() and darken() function you can easily transform the current color in a darker or lighter shade. For this challenge I needed to darken the background-color of the button in the hover state. I have included a lighter mode in the snippet below as a note to myself. You can increase the darkness or brightness with the percentage.

$dark_cyan: hsl(158, 36%, 37%);
$dark_cyan_darker: darken($dark_cyan, 10%);
$dark_cyan_lighter: lighten($dark_cyan, 10%);

Hello Mentors!

Every project gives me the opportunity to learn something new. This is the first time I worked with the Grid-Template-Areas property. It improved my workflow. I will definitely going to use it on future projects to learn more about CSS Grid.

.container {
  max-width: 23.438rem;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  justify-items: center;
  grid-template-areas:
    "header"
    "hero"
    "main"
    "footer";
  @media only screen and (min-width: $desktop) {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header hero"
      "main hero"
      "footer hero";
    background-image: url(../images/bg-pattern-desktop.svg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left bottom;
    background-size: contain;
  }
}

Hello Mentee's,

This project was surprisingly fun, but also tricky!

I have spent quite some time on Googling which tag to use for the FAQ Accordion. After a considerable amount of time searching on the web, I found about the details and summary tags. These tags combined hide or open the answer of a question when the element is clicked on. JavaScript became unnecessary using these tags:

<details>
  <summary><b>How many team members can I invite?</b></summary>
  <p>
    You can invite up to 2 additional users on the Free plan. There is no limit
    on team members for the Premium plan.
  </p>
</details>

The tricky part of this challenge was the layering of the elements, especially the box for the desktop design. I have spend quite some time figuring out how to position the box on the specified spot. Position absolute on the box with position relative on the body did not seem to work, because the element moved inwards while resizing the window. I also placed the box inside the FAQ Card (parent of the other background-images which is set on hidden overflow). I was looking for a way to force the child element (the box) to appear visible outside of the hidden overflow container with a disable function. This however was impossible. The solution I found was to place back the box outside the main and wrap the box and the main in a container which is set to position relative.

 .container {
    width: 19.688rem;
    @media screen and (min-width: $desktop) {
      position: relative;
      width: 57.5rem;
    }

Feel free to leave suggestions.

Hello Mentee's,

This project is more challenging than I initially thought.

I did not succeed in implementing the customized error message "Please provide a valid email address" for when an invalid emailaddress has been entered. Instead I get a standard pop-up error message. Does any of you know how to make the customized error message work?

// This tells the browser to pay attention to the following elements:
const form = document.getElementById("form");

// This tells the browser to prevent the form from submitting by default:
form.addEventListener("submit", (e) => {
  e.preventDefault();

  const email = document.getElementById("email");
  const small = form.querySelector("small");
  // The value attribute sets the specified value of the input element:
  const inputEmail = form["email"].value;

  if (!inputEmail) {
    // When the field is left empty, do this:
    email.classList.add("error");
    small.innerText = "Whoops! It looks like you forgot to add your email";
    small.style.display = "inline-block";
  } else if (!isValidEmail(inputEmail)) {
    // When the input is invalid, do this:
    email.classList.add("error");
    small.innerText = "Please provide a valid email address";
    small.style.display = "inline-block";
  } else {
    // When the input is valid, do this:
    email.classList.remove("error");
    small.innerText = "";
    small.style.display = "none";
  }
});
// REGEX = Regular Expression
function isValidEmail(email) {
  var re =
    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(String(email).toLowerCase());
}

Hello Mentee's!

Working on this Solution was a challenge! I had to redo the HTML to make the functionality of JavaScript work.

My JS snippets:

// This tells the browser to pay attention to the following elements:
const cardForm = document.querySelector(".card_form");
const cardFormMessage = document.querySelector(".card_form_message");
const button = document.querySelector("button");

// function doSomething(){}
// This is what the browser should do when the onclick event occurs:
function displayRadioValue() {
  const x = document.getElementsByName("ratings");

  for (i = 0; i < x.length; i++) {
    if (x[i].checked)
      document.getElementById("output_value").innerHTML = +x[i].value;
  }
}

// This tells the browser to listen out for clicks on the Button:
button.addEventListener("click", submit);

// function doSomething(){}
// This is what the browser should do when the click event occurs:
function submit() {
  cardForm.classList.add("hide"); // Add display: none; on specified element
  cardFormMessage.classList.remove("hide"); // Remove display: none; on specified element
}

Hello Mentee's!

This was my first time working with JavaScript. Here are some of my notes:

• I added the expression "use script" at the top of the js file. This feature eliminates silent errors and points out mistakes. A good example is that it prevents you from using undeclared variables.

• I have learned about variables. A variable is like a box with a label on it which stores a certain value. This is the most easy way to describe it.

• For this project I worked with the const variable and the string value. A constant variable cannot be overwritten. A string value can be any text inside double or single quotes.

• I declared const variables, then assigned a specified value to it by selecting elements from the HTML Document Object Model (DOM) by it's specified id and performed an action on it with the method getElementById().

• Then I used the addEventListener() method. Events are actions that occur, usually as a result of something the user does. The click event occurs when a user clicks with a mouse button (press and release) while the pointer is located inside the element. The listener is the object that receives a notification when an event of the specified type occurs. The toggle() method toggles between hide() and show() for the selected elements.

Snippets of my js file:

"use strict";

const clickToShare = document.getElementById("click-to-share");
const activeState = document.getElementById("active-state");
const clickToShare2 = document.getElementById("click-to-share2");

clickToShare.addEventListener("click", () => {
  activeState.classList.toggle("switch");
});

clickToShare2.addEventListener("click", () => {
  activeState.classList.toggle("switch");
});

Feel free to add suggestions.

Hello Mentee's!

There were some questions I had to ask myself while working on this solution. The answers gave me the opportunity to learn the following:

I was wondering what the best place is for an image?

• When the image has a meaning in relation with your content, you should place the image in HTML (provided with alternative text information). If the image is purely decoration, you should place it in CSS with the background-image property.

Why should you always include dimensions for every image?

• A specified width and height of an image let's the browser calculate and reserve required space for the image when the web page loads. As a result it speeds up the display of your web page in the browser.

Why is it good practice to set an image as a block-element ?

• It is practical & efficient to set an image as a block-element, because this will allow you to have maximum control over the styling in context with the surrounding elements. To give an example "margin: 0 auto;" does not work on inline images.

Feel free to add tips.

Hello fellow Mentee's,

For this project the banner image required a transparent color overlay. Initially, I placed the image in HTML. This however did not work very well when I began with the styling. The color overlay overflowed the height of the image and I was not able to correct it. Soon I figured out that there is an easier & efficient practice: I placed the image as a background-image property inside SCSS, but there was a problem...The image did not display on the browser. After some trial and error I realised that I used the wrong file path. After doing some research I gained some clarity. These are my notes:

• What is the difference between a folder and directory? A folder is a GUI object. Folders are essentially directories and directories hold files.

• It is important to note that the index.html always should be nested directly within the Root Directory, thus not in any subdirectories. You can visualize a Root Directory as a leader on top of a multi-level hierarchy structure with subdirectories below. When the Root Directory contains many nested subdirectories it resembles an upside down tree. The Root Directory (also named as the "Web Root"), is the publicly accessible base folder of a website. The Root Directory is marked by a / (slash) with Mac OS and Linux and a \ (backslash) with Windows.

Reminders when using "Relative File Paths":

• In which Directory is the file in which you're currently working on nested in?
  • The location of the file you want to link to is relative to the location of the file you want to link it from.
• If the file you want to link to is in the same Directory use:
  • ./
    • you can also just type "example.jpg"
• If the file you want to link to is outside your current working directory use:
  • ../
    • This means "leave the current folder and go to it's parent folder". The more ../../../ you use the further back you go.
• If you directly want to go to the Root Directory use:
  • /

The translation of the relative path below is: "leave this current Directory, then go to the folder images, and then select the file image-header-mobile.jpg".

.card_image {
      background-image: url("../images/image-header-mobile.jpg");
      background-size: cover;
      height: 15rem;
      width: 100%;
      border-radius: 8px 8px 0 0;
      position: relative;
      @media screen and (min-width: $desktop) {
        background-image: url("../images/image-header-desktop.jpg");
        grid-column: 2/3;
        grid-row: 1/2;
        height: 100%;
        border-radius: 0 8px 8px 0;
      }
      .card_image-overlay {
        position: absolute;
        inset: 0;
        background: $overlay_clr;
        opacity: 0.75;
        mix-blend-mode: multiply;
      }
    }

Hello mentee's!

I have learned what the purpose is of "Mixins" and why & when it's convenient to use them. I made a "Partial" in which I have inserted Google Fonts, Variables, Resets and Mixins:

// _BASE.SCSS
@mixin component-width {
  max-width: 17rem;
}

@mixin grid-columns {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-gap: 1rem;
  place-items: center;
}

@mixin border-radius {
  border-radius: 10px;
}

// STYLE.SCSS
.card_subscription {
      background-color: $clr_neutral_pale_blue;
      @include component-width;
      margin: 0 auto;
      @include grid-columns;
      padding: 1rem;
      @include border-radius;
      @media screen and (min-width: $tablet) {
        max-width: 20rem;
      }

Feel free to comment if you have any suggestions.