Glam Up My Markup - The Coolest Camp
Tags: frontendchallenge, devchallenge, css, javascript
Published: 2024-03-25 20:58:25

_This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities_

## What I Built
<!-- Tell us what you built and what you were looking to achieve. -->

## Demo

Link: [Demo](https://stackblitz.com/edit/stackblitz-starters-zlj3pb?file=index.html)

<!-- Show us your project! You can directly embed an editor into this post (see the FAQ section from the challenge page) or you can share an image of your project and share a public link to the code. -->
{% embed https://stackblitz.com/edit/stackblitz-starters-zlj3pb?embed=1&file=index.html %}

## Journey

First, I looked at some layouts on Dribbble related to the challenge theme. After that, I thought about a layout and made a small drawing on paper, then after that I went looking for an image that would be used as the top of the page and that would be part of the rest of the page below.

Then I found the perfect image to the challenge:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ely00ujcyj1mvr7m4fvv.png)

So with the image already chosen, I went to Google Fonts to look for 2 types of fonts, one for the title and one for the rest, and I managed to find some really cool ones:

#### Title Font:
Font: [Rubik Scribble](https://fonts.google.com/specimen/Rubik+Scribble?query=Rubik+Scribble)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oouywytz4y56clscflbs.png)

#### Content Font:
Font: [Indie Flower](https://fonts.google.com/specimen/Indie+Flower?query=Indie+Flower)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ox0e2g1ykogrwnenwt6s.png)

So now I thought about the theme of the project. Taking my image as inspiration, I tried to leave the project theme in accordance with elements present in the image, in the same style.

So, I did my project root vars:

```css
:root {
  --space-sm: 0.5rem;
  --spacer: 1rem;
  --spacer-lg: 2rem;
  --border-radius: 8px;
  --border-radius-lg: 25px;
  --primary: #f7c525;
  --secondary: #130f41;
  --white: #ffffff;
  --dark: #000000;
  --secondary-yellow: #d1a513;
  --tertiary-yellow: #aa8a1f;
  --animation-to-up: all 850ms cubic-bezier(0.13, 0.77, 0.23, 1.19);
}
```

After that, I implemented all the CSS according to the planned layout, and I also implemented some animations that I already had in mind and a quick confirmation of submitting the form.

Soo, the **CSS** and **JavaScript** structure will be like below:

#### CSS:
```css
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Rubik+Scribble&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Scribble&display=swap');

* {
  box-sizing: border-box;
  font-family: 'Indie Flower', cursive;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

:root {
  --space-sm: 0.5rem;
  --spacer: 1rem;
  --spacer-lg: 2rem;
  --border-radius: 8px;
  --border-radius-lg: 25px;
  --primary: #f7c525;
  --secondary: #130f41;
  --white: #ffffff;
  --dark: #000000;
  --secondary-yellow: #d1a513;
  --tertiary-yellow: #aa8a1f;
  --animation-to-up: all 850ms cubic-bezier(0.13, 0.77, 0.23, 1.19);
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--secondary);
  position: relative;

  &:after {
    content: '';
    background: url(https://weather-app-renanferro.vercel.app/assets/images/4358862.jpg);
    width: 100%;
    height: 50%;
    position: absolute;
    top: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
  }
}

#camp-activities-inquiry {
  background: rgba(19, 15, 65, 0.56);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8.7px);
  -webkit-backdrop-filter: blur(8.7px);
  border: 1px solid rgba(19, 15, 65, 0.17);
  padding: var(--spacer);
  position: absolute;
  top: 100%;
  width: 90%;

  &.active {
    top: 50%;
    transform: translateY(-50%);
    transition: var(--animation-to-up);
  }

  button,
  label {
    font-family: 'Indie Flower', cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
    color: var(--white);
  }

  h1 {
    transition: 0.25s;
    font-size: 2.5rem;
    line-height: 40px;
    text-align: center;
    font-family: 'Rubik Scribble', system-ui;
    font-weight: 400;
    color: var(--primary);
    margin-bottom: 2rem;
  }

  form {
    display: grid;

    label {
      font-size: 18px;
    }

    button {
      border: unset;
      margin-block-start: 8px;
      font-size: 1.25rem;
      width: 100%;
      border-radius: 25px;
      background-color: var(--primary);
      padding: 0.5rem 1rem;
      color: var(--dark);
      cursor: pointer;
      position: relative;
      overflow: hidden;

      &:before,
      &:after {
        content: '';
        position: absolute;
        height: 1px;
        width: 1px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        border-radius: 50%;
        z-index: 0;
      }

      &:before {
        background: var(--secondary-yellow);
        transition: 0.6s ease-in;
        transition-delay: 0.1s;
      }

      &:after {
        background: var(--tertiary-yellow);
        transition: 0.8s ease;
        transition-delay: 0.4s;
      }

      &:hover {
        &:before,
        &:after {
          transform: translate(-50%, -50%) scale(510);
          opacity: 0;
        }
      }
    }

    select,
    textarea {
      border-radius: var(--border-radius);
      margin-block-end: var(--spacer);
      padding: var(--space-sm);

      &:focus-visible {
        outline: unset;
        -webkit-box-shadow: -1px 2px 25px -8px rgba(247, 197, 37, 1);
        -moz-box-shadow: -1px 2px 25px -8px rgba(247, 197, 37, 1);
        box-shadow: -1px 2px 25px -8px rgba(247, 197, 37, 1);
      }
    }

    textarea {
      resize: none;
    }
  }
}

.confirmation-box {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(9.5px);
  position: absolute;
  width: 100%;
  height: 100dvh;
  font-size: 1.5rem;
  font-family: 'Indie Flower', cursive;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  opacity: 0;
  transition: all 300ms ease-in;

  &.active {
    opacity: 1;
    transition: all 300ms ease-in-out;
  }
}

@media (min-width: 1279px) {
  body {
    &:after {
      content: '';
      height: 96%;
      background-position: center bottom;
    }
  }

  #camp-activities-inquiry {
    width: 70%;
  }

  #camp-activities-inquiry {
    padding: var(--spacer-lg);
  }
}
```
#### JavaScript:
```javascript
const section = document.querySelector('#camp-activities-inquiry');
const body = document.querySelector('body');
const form = document.querySelector('form');
const textareas = form.querySelectorAll('textarea');
const select = form.querySelector('select');
const button = form.querySelector('button');

function disableFormFields(actualState) {
  button.disabled = actualState;
  select.disabled = actualState;
  textareas.forEach((input) => {
    input.disabled = actualState;
  });
  form.reset();
}

function showConfirmationRegister() {
  const confirmationBoxContent = document.createElement('div');

  confirmationBoxContent.innerHTML = 'Well done, see you soon :)';
  confirmationBoxContent.classList.add('confirmation-box');

  body.appendChild(confirmationBoxContent);

  setTimeout(() => {
    disableFormFields(false);
    confirmationBoxContent.classList.add('active');
  }, 10);

  setTimeout(() => {
    confirmationBoxContent.classList.remove('active');
  }, 2000);

  setTimeout(() => {
    body.removeChild(confirmationBoxContent);
  }, 2300);
}

function animateHoverSectionFormulary() {
  section.addEventListener('mouseover', (event) => {
    let cursorPositionX = event.clientX;
    let cursorPositionY = event.clientY;
    section.style.transform = `translateY(-50%) rotateX(-${Math.round(
      cursorPositionX / 80
    )}deg) rotateY(-${Math.round(cursorPositionY / 80)}deg)`;
  });
}

function showFormularyContent() {
  setTimeout(() => {
    section.classList.add('active');
  }, 100);

  animateHoverSectionFormulary();
}

function submitFormulary() {
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    showConfirmationRegister();
  });
}

window.addEventListener('load', () => {
  showFormularyContent();
  submitFormulary();
});

```

That's it, I hope you liked the final result. I loved the result and even more so participating in this challenge, which is certainly the first of many!

See you soon guys!!!
<!-- Thanks for participating! -->