Let's Go Camping!
Tags: frontendchallenge, devchallenge, css, javascript
Published: 2024-03-22 21:58:21

**Note:** **This is a submission for [the DEV Challenge, Glam Up My Markup: Camp Activities_](https://dev.to/devteam/join-our-first-community-challenge-the-frontend-challenge-8be)**

{%- # TOC start (generated with https://github.com/derlin/bitdowntoc) -%}

- [What we built](#what-we-built)
- [Demo](#demo)
- [Update](#update)
- [Inspiration](#inspiration)
- [Struggles ](#struggles)
- [My overall feelings about this challenge](#my-overall-feelings-about-this-challenge)
   * [Me](#me)
   * [Thomas](#thomas)
- [Footnotes](#footnotes)

{%- # TOC end -%}


## What we built
@thomasbnt and I built a video game style form where players  pick camping activities from the dropdown menu and have the option to share their character's food allergies and other information that the counsellor, aka the game's mentor. Once players hit the submit button, they'll be notified "A new player who loves [activity you chose] entered into the party!" and the game will continue[^1]. 

## Update
After you pick click "Submit", the background changes to suit the activity you have chosen. You can see this in the [demo below](#demo).


## Demo
<!-- 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. -->


![GIF of Thomas and I's project. It shows a pixelated campsite at night with a title "Camp Activities Inquiry" in red font. Underneath,you see a form with a dropdown menu that encourages you to choose Hiking, Canoeing, Fishing, Crafts, and Archery. The user picks "Hiking". From there, the background magically turns into the sky with dark clouds and the phrase "A new player who loves hiking entered into the party!" appears at the bottom of the submit button] (https://dev-to-uploads.s3.amazonaws.com/uploads/articles/49b8e1lwxzoqbw2kh8az.gif)



[demo link](https://glam-up-my-markup-submission.vercel.app/)

[source code link](https://github.com/CBID2/Glam-Up-My-Markup-Submission/tree/main)

## Inspiration
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->
I was thinking about back to my childhood playing video games like [_Pokemon Silver_](https://www.pokemon.com/us/pokemon-video-games/pokemon-gold-version-and-pokemon-silver-version) or _The Legend of Zelda_. So, I thought to myself "Why not bring this theme to the form?". When I presented my idea to @thomasbnt, he loved my idea and from there, we got to work.

## Struggles 

During this challenge, I struggled with creating the cartoon pointer effect. At first, I had the code like this:

```css
select {
 cursor: auto;
}
```
After noticing that the pointer would not appear and doing some googling, I realized that it needed an image of the cartoon hand. So, I found one at Freepik.com[^2], went to [MDN Web Docs's article about the cursor property](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) to learn how to link the image, and did this:

```css
select {
 cursor: url(/images/cursor_pointer.png), auto;
}
```
[Save code snippet](https://bf1eb606-e5e8-4eef-bc5d-8e598564ec2c.pieces.cloud/?p=5e7e488ebf)

For Thomas, he had trouble with targeting the submit button with JavaScript since it did not have an `id`. After doing some research, he came up with this

```js
const submit = document.getElementsByTagName("button")[0];
``` 
[Save code snippet](https://bf1eb606-e5e8-4eef-bc5d-8e598564ec2c.pieces.cloud/?p=0d684ca243)

## My overall feelings about this challenge

 I had fun doing this challenge(shoutout to @thomasbnt for being an awesome partner! 😊) and can't wait to do the next one. If you want to see more of mine and Thomas' coding adventures, follow us on dev.to and check the other links below:

### Me

{% user cbid2  %}

{% cta https://twitter.com/CodesChrissy %} 🐦 Follow me on X(Twitter) {% endcta %}

{% cta https://chrissycodes.hashnode.dev %} 📝 Check out my other content on Hashnode {% endcta %} 

{% cta https://www.linkedin.com/in/christinebelzie %} 🫱🏾‍🫲🏻 Connect with me on Linkedin {% endcta %}

### Thomas
{% user thomasbnt  %}

{% cta https://twitter.com/Thomasbnt_ %} 🐦 Follow Thomas on X(Twitter) {% endcta %}

{% cta https://thomasbnt.dev %} 🌐 Check out Thomas' website {% endcta %} 

{% cta https://www.linkedin.com/in/thomasbnt %} 🫱🏻‍🫲🏽 Connect with Thomas on Linkedin {% endcta %}

## Footnotes
[^1]: This is just an idea we made in our head.  
[^2]: [Image by macrovector on Freepik](https://www.freepik.com/free-vector/vector-pixel-mouse-cursors-white-hand-drag-arrow-pointer_11053927.htm#query=pixel%20hand&position=0&from_view=keyword&track=ais&uuid=13850c20-dd4a-49ba-a53c-4b82660af6c2)