Sweet Via Patisserie & Sweetique is a local business offering baking classes and events, with plans to move into dessert sales and custom orders.

The Stack

  • HTML
  • CSS
  • Vanilla JavaScript
  • Node.js
  • Nodemailer
  • NGINX
  • Linux
  • Digital Ocean

Custom built HTML, CSS, and vanilla JavaScript on Node.js, using Express and EJS. Nodemailer used for contact and registration forms. Served by NGINX on Debian, stored on a DigitalOcean droplet. Mobile friendly design with TLS encryption through Let's Encrypt.

Responsive Layout

Using @media query with height: 0, padding-bottom: 50%, and translateY on the image, vertically oriented images become horizontal on mobile devices.

.title,
.info {
  float: right;
  width: 49%;
}

.photo-container {
  float: left;
  width: 49%;
}

@media (max-width: 700px) {
  .title,
  .info {
    width: 100%;
  }
  .photo-container {
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    overflow: hidden;
  }
  .photo {
    transform: translateY(-15.5%);
  }
}

Custom Contact Form

Custom styled form. Using vanilla JavaScript, textarea's height automatically increases as you type to make room for each new line without scrolling.

var message = document.getElementById('message');

message.addEventListener('input', function(){
  this.style.height = '90px';
  this.style.height = this.scrollHeight + 2 + 'px';
});

JavaScript Pop-up

Pop-up stays centered on the page, and the pop-up's content scrolls if the window is too small. Easily close the pop-up by clicking the X, the background, or hitting Escape.

// Clicking the background will close the pop-up
popupMargin.addEventListener('click', function(event){
  if(event.target === this) {
    popupContainer.classList.add('hidden');
  };
});

// Clicking the X will close the pop-up and clear all of the text
closeX.addEventListener('click', function(){
  popupContainer.classList.add('hidden');
  inputName.value = "";
  inputEmail.value = "";
  inputPaymentmethod.value = "";
  inputMessage.value = "";
});

// Hitting the escape key will close the pop-up
document.addEventListener('keydown', function(){
  if(event.which === 27){
    popupContainer.classList.add('hidden');
  };
});

Email Forms

Using Nodemailer, the user's contact information and message, along with details about the event registered for, are emailed to the company's owner. Even line breaks entered in the message field are preserved.

// Subject line of the email sent to the company owner
mailOptions.subject = 'New RSVP from ' + req.body.name + ' (' + req.body.email + ')';

// Replace line breaks with <br>
var messageHTML = req.body.message.replace(/\r?\n/g, '<br>');

// Body of the email sent to the company owner
mailOptions.html = '<p><strong>Event</strong><br>' + eventSelected + '</p><p><strong>Name</strong><br>' + req.body.name + '</p><p><strong>Email</strong><br>' + req.body.email + '</p><p><strong>Payment Method</strong><br>' + req.body.paymentmethod + '</p><p><strong>Message</strong><br>' + messageHTML + '</p>';