Skip to content

MarcoFranca/Coffeeroasters-subscription-site

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

68 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Frontend Mentor - Coffeeroasters subscription site solution

This is a solution to the Coffeeroasters subscription site challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

This challenge is to build out a Cofferoaster subscription site.

Users should be able to:

  • View the optimal layout for each page depending on their device's screen size
  • See hover states for all interactive elements throughout the site
  • Make selections to create a coffee subscription and see an order summary modal of their choices

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • BEM Methodology
  • Mobile-first workflow
  • JavaScript vanilla

What I learned

in addition to reinforcing my knowledge in HTML, CSS and JavaScript

  • I learned to use the defer property in the html script tag so that I can put the script in the header and the html load before the JavaScript.
<script src="assets/js/functions.js" defer></script>
<script src="assets/js/plan.js" defer></script>
<script src="assets/js/script.js" defer></script>
  • I learned the basic knowledge of the BEM methodology (methodology for naming classes in CSS) and put them into practice.
<section class="how-it-works">
  <h2 class="how-it-works__title title_s">How it works</h2>
  <div class="how-it-works__container">
    <div class="how-it-works__card">
  • I learned to use the details and summary tags to have the accordion effect without using javaScript.
<details class="accordion">
  <summary id="accordion2" class="accordion__title">
    <h2 class="title_s">What type of coffee?</h2>
    <img src="./assets/images/plan/desktop/icon-arrow.svg" alt="arrow icon">
  </summary><div class="accordion__content">
  <button id="single" class="accordion__button">
  • I learned to use root: in CSS to create variables and reuse the same value with a single variable, thus facilitating maintenance.
:root {
  /****colors****/

  --color--dark-cyan: rgb(14, 135, 132);
  --color--dark-grey-blue: rgb(51, 61, 75);
  --color--dark-blue: rgb(37, 45, 55);
  --color--pale-orange: rgb(253, 214, 186);
  --color--light-cream: rgb(254, 252, 247);
  --color--grey: rgba(153, 153, 154, 0.63);

  /*****font-family****/

  --font--fraunces--serif: 'Fraunces', serif;
  --font--barlow--sans-serif: 'Barlow', sans-serif;
}

body{
  font-family: var(--font--barlow--sans-serif);
  background-color: var(--color--light-cream);
}
  • I learned to use the [open] class to style the accordion content when it is open
  • I learned to use the transform property to change the position of the content
  • I learned to use the transiction property to animate the event
.accordion[open] img{
  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  transition: transform 500ms;
}
  • I learned to use the before, after and last-child subclasses.
.steps__card__content:last-child:before{
  border: none;
}

.steps__card__content:after {
  content: "";
  border: solid var(--color--dark-cyan) 2px;
  border-radius: 50%;
}
  • I learned to indicate the use of style in an id only when it has a specific class.
  • learned how to remove click events with pointer-events: none.
#modal.hide,
#fade.hide{
  opacity: 0;
  pointer-events: none;
}
  • I learned to use scroll() to position the screen where you want.
createPlan.addEventListener('click', ()=>{
  if (document.querySelector('#open-modal').classList.value !== "button_gray") {
    scroll(0, 0)
    toggleModal()
  }
})
  • I learned to use an array with a forEach to save a line of code.
function toggleModal() {
[modal, fade].forEach((e)=>{e.classList.toggle('hide')})
}
  • I learned to use window.screen to capture the size of the screen being used.
 if (window.screen.width < 768){
  span.id = 'modalVal';
  span.classList.add('title_m');
  button.id = "close-modal"
  button.classList.add('modal__card__button')
  button.classList.add('button_green')
  button.innerHTML = 'Checkout - <span id="value">_____</span>'
  div.append(span)
  div.append(button)
}
  • I learned to use toggle to change a class.
else {
document.querySelector('#open-modal').classList.toggle("button_green")
document.querySelector('#open-modal').classList.toggle("button_gray")
return true
}

Author

Acknowledgments

About

it's a challenge to build a multi-page cafe subscription site

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published