#JavaScriptmas 2023 Day 1 to 6
Tags: webdev, scrimba, javascript, javascriptmas
Published: 2023-12-07 15:12:59

This is my first time participating in the [#JavaScriptmas](https://scrimba.com/learn/javascriptmas) Challenge of [Scrimba](https://scrimba.com/), and this is my take on its solutions.

## What is #JavaScriptmas Challenge?
This is a FREE challenge hosted by [Scrimba](https://scrimba.com/) where you get a coding challenge related to JavaScript and CSS each day, starting from December 1st to December 24th. You can learn more about it [here](https://scrimba.com/learn/javascriptmas).

## Day 1: Countdown to Christmas
### Task

- Get today's date (you only need the day).
- Calculate remaining days.
- Display remaining days in countdownDisplay.

### Stretch Goals
- Display hours, minutes and seconds.

```
const countdownDisplay = document.getElementById("countdown-display")
const timeLeft = document.getElementById("time-left")

function renderCountdown(){
    const christmas = 25
    const date = new Date()
    
    const todaysDate = date.getDate()
    const hours = date.getHours()
    const minutes = date.getMinutes()
    const seconds = date.getSeconds()
    
    const remainingDays = christmas - todaysDate
    
    countdownDisplay.textContent = remainingDays
    timeLeft.textContent = `${hours} hrs : ${minutes} mins : ${seconds} secs`
}
 
renderCountdown()
```

- First created a date variable which calls [`new Date()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) that returns a date object with the current date and time.
- Based on that, retrieved today's date, hours, minutes, and seconds. Then calculated the remaining days with `remainingDays = christmas - todaysDate`
- Finally, appended this information to the UI.

Check my scrim [here](https://scrimba.com/scrim/co4c04d358f304306078690ed).

## Day 2: Style a Colorful Button
####HTML

```
 <div class="container">
  <div class="button-border">
   <button type="button" class="button">
    Start Coding!
   </button>
  </div>
</div>
```
####CSS

```
.button-border{
    position: relative;
    background: linear-gradient(115deg, var(--grad-color1), var(--grad-color2), var(--grad-color3),var(--grad-color4),var(--grad-color5));
    padding: 2px 3px;
    text-align: center;
    transition: all 0.2s;
}

.button-border:hover{
    background: linear-gradient(-115deg, var(--grad-color1), var(--grad-color2), var(--grad-color3),var(--grad-color4),var(--grad-color5));
    transform: scale(1.1);
}

.button{
    display: block;
    color: var(--btn-color);
    background: var(--btn-bg);
    letter-spacing: 1px;
    padding: 20px 30px;
    border: none;
    font-family: 'Karla', sans-serif;
}

.button:hover{
    color: var(--btn-color-hover);
}
```

- The trick here was to give `.button-border` gradient background and then placing your button on top of it.

Check my scrim [here](https://scrimba.com/scrim/co30b46c9afc3d37ac02b7f0b).

## Day 3: Divide Candy
### Task

- Find the total number of pieces of candy the children can eat.
- Example:
 * Children: 3, Candies: 10
 * Each of the 3 children can eat 3 candies. 
 * So the total number of candies that can be eaten 
 * is 3*3 = 9. So the function calcTotalCandies should 
 * log out 9.

```
function calcTotalCandies(children, candy) {
 const oneChildCanEat = Math.floor(candy/children) 
 const totalCandiesEaten = oneChildCanEat * children
 console.log(totalCandiesEaten)
}

calcTotalCandies(3, 10) // expected output: 9
calcTotalCandies(4, 20) // expected output: 20
calcTotalCandies(6, 25) // expected output: 24
```

- For this, first determined the number of candies one child can eat by using [Math.floor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor)(candy/children).
- Next, multiplied this value by the total number of children to obtain the result.

Check my scrim [here](https://scrimba.com/scrim/co4d646929e9255a213043b71).

## Day 4: AI Christmas Joke Generator
### Task

- Use AI to generate one-line Christmas Joke.
- Use AI provider (openai / huggingface)

```
import { HfInference } from '@huggingface/inference'

const hf = new HfInference(process.env.HUGGING_FACE_API_KEY)
const model = "tiiuae/falcon-7b-instruct"

document.getElementById('window-container').addEventListener('click', async function () {
    
    const jokeResponse = await hf.textGeneration({
        model: model,
        inputs: 'Tell me a random one line Christmas joke.'
    }) 
    
    const joke = jokeResponse.generated_text.replace(/Tell me a random one line Christmas joke\./i, '');

    const jokeEl = document.getElementById('joke-display')
    jokeEl.textContent = joke
})

```

- This one was a bit tough. I used [huggingface](https://huggingface.co/) for this challenge. You can find the documentation [here](https://huggingface.co/docs/huggingface.js/inference/README).

```
const jokeResponse = await hf.textGeneration({
    model: model,
    inputs: 'Tell me a random one line Christmas joke.'
})
```

- `hf.textGeneration` is a function from the Hugging Face library for generating text.
- `model` represents the model used for text generation.
- The `inputs` parameter is set to the prompt 'Tell me a random one line Christmas joke.'
- So in short, this code is asking a model from Hugging Face to generate a random one-liner Christmas joke in response to the given prompt. The result, the generated joke, is stored in the variable jokeResponse.

Check my scrim [here](https://scrimba.com/scrim/co67c40139c0956ebf667b34d).

## Day 5: Jeopardy Card Flip
####HTML

```
<div class="card">
 <div class="card-inner">
  <div class="card-front">
   <h2>
    This now deprecated HTML tag, popular in the early days of 
    the internet, magically made text scroll across the screen 
   </h2>
  </div>
  <div class="card-back">
   <h2>What is the marquee tag</h2>
  </div>
 </div>
</div>
```
####CSS

```
.card{
  perspective: 1000px;
  background-color: transparent;
  width: 400px;
  height: 250px;
}

.card h2{
  text-transform: uppercase;
  color: var(--font-color-main);
  padding: 20px
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  background-color: var(--jeopardy-blue);
  border-radius: 10px;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card-front, .card-back{
  display: flex;
  align-items: center;
}

.card-back{
  justify-content: center;
  transform: rotateY(180deg);
}
```

Check my scrim [here](https://scrimba.com/scrim/co5e4496f9f7d503d2fc908f0).

## Day 6: Secret Santa
### Task

- Write a function to randomly assign each person in an array a "Secret Santa", who is someone else in the array.
- No one should be assigned themselves as their own Secret Santa.

####Stretch goals

- Create a UI with a button to trigger your Secret Santa function and display the results.

```
const ssPairBtn = document.getElementById("ss-pairs")
const displayPairsEl = document.getElementById("display-pairs")

const people = ["Alice", "Bob", "Carly", "Dan", "Ed", "Ferdinand", "Ginny"]

ssPairBtn.addEventListener('click', function(){
    const secretSantaPairs = generateSecretSantaPairs(people)
    let list = ""
    Object.entries(secretSantaPairs).forEach(([name, pair])=>{
        list += `<li>${name} = ${pair}</li>`
    })
    displayPairsEl.innerHTML = list
})

function generateSecretSantaPairs(arr) {
    const secretSantaPairs={}
    const peopleCopy = [...arr]
    const shuffledArray = shuffle(peopleCopy)
    for(let i=0; i<arr.length; i++){
        if(arr[i] !== shuffledArray[i]){
            secretSantaPairs[arr[i]] = shuffledArray[i]
        } else {
            const temp = shuffledArray[i];
            shuffledArray[i] = shuffledArray[(i + 1) % arr.length];
            shuffledArray[(i + 1) % arr.length] = temp;
            secretSantaPairs[arr[i]] = shuffledArray[i];
        }
    }
    return secretSantaPairs
}

function shuffle(arr){
    return arr.sort(() => Math.random() - 0.5);
}
```

- For this challenge, first shuffled the original array using the `shuffle` function. Then, ensured that no one should be assigned themselves as their own Secret Santa.
- If that condition isn't met, pairs are assigned. 
- Otherwise, a temporary variable (temp) stores the person at the current index (i) in the shuffled array.
- The next two lines swap the person at index i with the person at the next index in a circular manner. This is done to avoid pairing someone with themselves. 
- The pair is then added to the secretSantaPairs object, where the original person is paired with the new person after the swap.
- Finally, this function is called on the "Secret Santa Pairs" button click, and the pairs are appended to the UI.

Check my scrim [here](https://scrimba.com/scrim/coc2b43eabd59f831b1d5cd0c).

Would love to hear your thoughts. Stay tuned for the next iteration of this series.