Forem: Aishwarya Mali

#JavaScriptmas 2023 Day 19 to 24

Aishwarya Mali — Sun, 24 Dec 2023 10:28:24 +0000

Welcome back! If you've been following along, we've already solved challenges of Days 1 to 18 in our journey. Now, buckle up as we dive into the last leg of this adventure of Days 19 to 24.

Day 19: Debug Jingle Words

Task

There are loads of problems in JS. Find them, and fix them!

function handleGuess(e) {
    e.preventDefault()
    let currentState = []
    let input = document.getElementById('user-input')
    let guess = input.value
    const guessArr = guess.split('')
    for (let i = 0; i < wordArr.length; i++) {
        if (guessArr[i] === wordArr[i]) {
            currentState.push(guessArr[i])
        } else {
            currentState.push("-")
        }
    }
    renderGuess(currentState)
    checkWin(guess)
    input.value = ''
}

The problems causing the errors were:

The id of the input was incorrect.
Instead of using guess.split(' '), it was necessary to use guess.split('') to split the string into individual letters.
Implemented a for loop to iterate through each letter of both the guess and wordArr.
Finally, when a letter is matched, it is pushed; otherwise, ('-') is pushed.

function renderGuess(arr) {
    const wordHtml = arr.map((letter) => {
        let html = ""
        if (letter === "-") {
            html += `<span class="letter wrong">-</span>`
        } else {
            html += `<span class="letter correct">${letter}</span>`
        }
        return html
    })
    wordDisplay.innerHTML = wordHtml.join('')
}

I have also updated the renderGuess function to provide users with a visual clue indicating whether the letter is correct or not.

Check my scrim here.

Day 20: Save Santa!

Task

Save Santa by removing the lions, tigers, bears, and other nefarious creatures from the deeply-nested array. Following is the input.

const dangerArray = [
    ["🎅", "👺"],
    [
        ["🎅", "🦁"],
        ["👹", "🎅"]
    ],
    [
        [
            ["🎅", "🐻"],
            ["🧌", "🎅"]
        ],
        [
            ["🐯", "🎅"],
            ["🎅", "😈"]
        ]
    ]
];

function saveSanta(arr) {
    for(let i=0; i<arr.length; i++ ){
        if(Array.isArray(arr[i])){
            saveSanta(arr[i])
        }
        else{
            if(arr[i]!=="🎅"){
                arr.splice(i, 1)
            }
        }
    }
    return arr
}

console.log(saveSanta(dangerArray))

First we iterate over the array and check if each item is an array.
If it is, a recursive call to the current function is made.
Otherwise, we check if the item is not Santa.
If it isn't, the item is sliced from the array.

Check my scrim here.

Day 21: Expanding Search Bar

Task

Search input: Takes upto 1/3 of the width of its container
When the user clicks into the search bar:
- Input grows to entire width of its parent container with smooth transition
- Shrinks back to original size when user clicks away
- Blue border
- Bonus: placeholder text is not visible when user clicks inside the search bar

<div class="container">
  <label for="search-field" class="visually-hidden">Search</label>
  <input type="search" 
    class="search-bar" 
    id="search-field"
    placeholder="Search..."/>
</div>

html, body {
    margin: 0;
    padding: 0;
}

:root {
    --search-border: #bbb;
    --search-focus-border: #3a71ca;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.container{
    width: 80%;
    margin: 30px auto 0;
}

.search-bar{
    border: 1px solid var(--search-border);
    border-radius: 4px;
    padding: 8px;
    width: 30%;
    transition: width .2s linear;
}

.search-bar:focus{
    width: 100%;
    border-color: var(--search-focus-border);
}

.search-bar:focus::-webkit-input-placeholder {
    opacity: 0;
}

.search-bar:focus::-moz-placeholder {
   opacity: 0;
}

.search-bar:focus:-ms-input-placeholder {
    opacity: 0;
}

.search-bar:focus:-moz-placeholder {
   opacity: 0;
}

The trick here is that we initially set the width of .search-bar to 30% of its parent container. When clicked, we utilize the :focus selector to dynamically adjust the width to 100%, employing a transition effect for a smooth visual transition. To hide the placeholder text, browser-specific placeholder selectors are used, and a style of opacity: 0; is applied.

Check my scrim here.

Day 22: Gift App

Task

Make it so that the data doesn't disappear on reload. Use localStorage.

let people = JSON.parse(localStorage.getItem("people")) || []

if(people) renderList(people)

addButtonEl.addEventListener("click", function() {
    let inputValue = inputFieldEl.value

    if (inputValue) {
        people.push(inputValue)
        localStorage.setItem("people", JSON.stringify(people))
        clearInputFieldEl()

        renderList(people)
    }
})

function appendPersonToPeopleListEl(person) {

    let newEl = document.createElement("li")

    newEl.textContent = person

    newEl.addEventListener("dblclick", function() {
        let index = people.indexOf(person)

        people.splice(index, 1)
        localStorage.setItem("people", JSON.stringify(people))
        img.src = "./images/gifts.webp"
        renderList(people)
    })

    peopleListEl.append(newEl)
}

When a new person is added to our Gift App list, we use localStorage.setItem("people", JSON.stringify(people)) to store the people array with the key named "people" in localStorage. The stringify function is used to convert a JavaScript object (in this case, the people array) into a JSON-formatted string.
The object is similarly updated when a person is removed from the list.
Lastly, to retrieve the data, we use JSON.parse(localStorage.getItem("people")). The parse function is used to convert a JSON-formatted string back into a JavaScript object.

Check my scrim here.

Day 23: Toggle Switch

Task

On click, toggle switch moves from one side to another
Cursor becomes pointer
Match styles
No JavaScript

<div class="toggle-wrap">
  <label for="toggle">
    <input type="checkbox" id="toggle" class="toggle-input"></input>
    <div class="toggle-switch"></div>
  </label>
</div>

#toggle{
    display: none;
}

.toggle-wrap{
    width: 80px;
    height: 40px;
    border: 2px solid var(--toggle-border);
    border-radius: 100px;
    background: var(--toggle-bg);
    display: flex;
    align-items: center;
}

label{
    width: 100%;
    cursor: pointer;
}

.toggle-switch{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--toggle-switch-bg);
    transition: transform 0.2s linear;
    backface-visibility: hidden;
}

.toggle-input:checked + .toggle-switch{
    transform: translateX(45px);
}

.toggle-input:not(:checked) + .toggle-switch{
    transform: translateX(5px); 
}

Here, we hide the actual checkbox, but since we use the id and for attributes in both the label and input, we can determine whether it is checked or not.
We utilize the :checked selector and a combination selector to shift the slide to the right side.
To check if it is unchecked, we use :not() selector in combination with :checked and translate the position to its initial state.
The transition property is used to ensure a smooth animation.

Check my scrim here.

Day 24: Christmas Lights

Task

Make Christmas tree lights flash on and off every 800 milliseconds on a permanent loop.
Make the blue and red lights toggle on and off alternatively. So first the red lights come on, and then as they go off, the blue lights come on.

const blues = document.querySelectorAll('.blue');
const reds = document.querySelectorAll('.red');
let isRed = true;

function toggleLights() {
    if (isRed) {
        reds.forEach(redLight => {
            redLight.classList.add("lights-on");
        });
        blues.forEach(blueLight => {
            blueLight.classList.remove("lights-on");
        });
    } else {
        blues.forEach(blueLight => {
            blueLight.classList.add("lights-on");
        });
        reds.forEach(redLight => {
            redLight.classList.remove("lights-on");
        });
    }
    isRed = !isRed;
}

setInterval(toggleLights, 800);

We use setInterval(toggleLights, 800); to call the toggleLights function every 800 milliseconds.
In the function, we check if isRed is true. If it is, we add the lights-on class to the red lights and remove it from the blue lights.
Otherwise, we add the lights-on class to the blue lights and remove it from the red lights.

Check my scrim here.

As we finish up the 24-day coding adventure of #JavaScriptmas, I can't help but smile thinking about how much fun it brought to my daily routine. Solving a new challenge each day became something I looked forward to, keeping me consistent and excited.

I want to say a big thank you to everyone who followed along and joined me in this coding journey. Your support and enthusiasm made it even better!

Thanks for being a part of it. Until next time, happy coding!

#JavaScriptmas 2023 Day 13 to 18

Aishwarya Mali — Tue, 19 Dec 2023 14:08:42 +0000

Welcome back! If you've been following along, we've already solved challenges of Days 1 to 12 in our journey. Now, buckle up as we dive into the next leg of this adventure Days 13 to 18. Let's start.

Day 13: Christmas Dinner Picker

Task

Write the code to help a user choose the perfect Christmas dinner idea based on the number of people attending.
Include a checkbox for the user to specify the meal should be vegetarian-friendly.
Dinner suggestions (or choose your own!): Vegetarian: Winter Squash Risotto 4 people or less: Ham 5+ people: Turkey

const numOfGuests = document.getElementById('guests')
const btnCalculate = document.getElementById('btn')
const isVegetarian = document.getElementById('vegetarian-input')

const dinnerOption = document.getElementById('food')

btnCalculate.addEventListener('click', function(){
    const guests = +numOfGuests.value
    if(isVegetarian.checked){
        dinnerOption.textContent = 'Winter Squash Risotto'
    } else{
        dinnerOption.textContent = guests <= 4 ? 'Ham' : 'Turkey'
    }
    numOfGuests.value = ''
})

When the 'Calculate' button is first pressed, we retrieve the number of guests. Adding + is a trick to convert string to a number.
If the 'Vegetarian?' checkbox is checked, the dinner option appended to the UI is 'Winter Squash Risotto'.
Otherwise, we check if the number of guests is less than or equal to 4.
If it is, 'Ham' is chosen; otherwise, 'Turkey' is chosen and then appended to the UI.

Check my scrim here.

Day 14: Lonely elf

Task

Write a function to duplicate the elf when the button is clicked.
Limit the number of elves to 6 per row.
Make sure that the elves stay in the elf hangout zone, no matter how many there are.
Limit the total number of elves to 100.

let elfCount = 2

btn.addEventListener("click", duplicateElf)

function duplicateElf(){
    if(elfCount === 2) elfHeader.innerText = 'Elves'
    if(elfCount <= 100){
        elf.textContent += '🧝'
        elfCount += 1
    }else{
        const enoughElves = document.getElementById('more-elfs')
        enoughElves.style.display = "block"
    }
}

When the 'Duplicate elf' button is pressed, we first change the title to 'Elves'.
Next, we check if elfCount is less than or equal to 100.
If it is, we append one more elf to the UI and increase the count of elfCount.
Otherwise, we append 'No more elves can be added' to UI.

Check my scrim here.

Day 15: Archery Target

Task

Create CSS only archery target

HTML

<div class="rings">
 <div class="ring ring-1">
  <div class="ring ring-2">
   <div class="ring ring-3">
    <div class="ring bullseye"></div>
   </div>
  </div>
 </div>
</div>

CSS

.rings{
    position: relative;
}

.ring{
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.ring-1{
    width: 300px;
    height: 300px;
    background: var(--black);
}

.ring-2{
    width: 220px;
    height: 220px;
    background: var(--blue);
}

.ring-3{
   width: 140px;
   height: 140px;
   background: var(--red); 
}

.bullseye{
   width: 60px;
   height: 60px;
   background: var(--yellow); 
}

The main .rings div is set to position: relative; so that the other rings can overlay it.

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)

The above CSS is to ensure the circles are always centered.
Subsequently, for each ring, we decrease the width and height by 80px, ensuring the circle remains perfectly sized, and apply the background color.

Check my scrim here.

Day 16: Naughty list, nice list

Task

Write the JavaScript to sort the people in sorteesArr into the naughty and nice lists, according to whether they have been good or not. Then display the names in the relevant place in the DOM.
Add the option to add new names to the sorteesArr.

btn.addEventListener("click", function(){
    for(let i=0; i<sorteesArr.length; i++){
        sort(sorteesArr[i])
    }
})

addPerson.addEventListener('click', function(){
    const newPerson = {
        name: newName.value,
        hasBeenGood: isGood.checked
    }
    sorteesArr.push(newPerson)
    sort(newPerson)
    newName.value = ''
    isGood.checked = false
})

function sort(person){
    if(person.hasBeenGood){
        nice += `<li>${person.name}</li>`
    }else{
        naughty += `<li>${person.name}</li>`
    }
    niceList.innerHTML = nice
    naughtyList.innerHTML = naughty
}

First, we call the sort() function for the length of the sorteesArr.
Within the function, we check if the person 'has been good?'.
If yes, we create a string of <li> elements and add it to the niceList. Otherwise, we add it to the naughtyList.
When 'Add person' is pressed, we create a newPerson object and push it to sorteesArr, followed by a call to the sort() function.

Check my scrim here.

Day 17: Word Carousel

Task

Create a CSS only Word Carousel.
Match styles and display 4 things you love.

HTML

<div class="container">
 <h1>I love</h1>
<div>

CSS

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

h1::after {
  content: "";
  animation: carousel 5s steps(1) infinite;
  background: var(--bg-word);
  color: #fff;
  margin-left: 2px;
  padding: 8px 10px;
  border-radius: 4px;
}

@keyframes carousel {
  0% {
    content: "reading";
  }
  45% {
    content: "Scrimba";
  }
  65% {
    content: "coding";
  }
  85% {
      content: "music";
  }
}

We first center the <h1> tag by applying styles to <body>.
For the carousel part, we apply styles to the ::after selector.

animation: carousel 5s steps(1) infinite;

The animation is named 'carousel' with a duration of 5s.
The steps() function is set to 1, which means the animation will move in discrete steps rather than smoothly transitioning.
The infinite value is used to make the animation repeat indefinitely.
Keyframes are added to specify the content to be displayed at different percentages.

Check my scrim here.

Day 18: AI Alt Text Generator

Task

Use AI to generate alt text for the image provided by generateImage().
Pass the alt text to renderImage() as a parameter.

async function generateAltText(blob, imageUrl) {
    const altText = await hf.imageToText({
        data: blob,
        model: "nlpconnect/vit-gpt2-image-captioning",
    })
    renderImage(imageUrl, altText.generated_text) 
}

I used huggingface for this challenge. You can find the documentation here.
hf.imageToText is a function from the Hugging Face library for generating text from a provided image.
The data passed to it is in the form of a blob, and the model parameter represents the specific model used for image-to-text generation.
In summary, this code requests a model from Hugging Face to generate alt text for an image based on the provided blob. The resulting alt text is then passed to the renderImage() function.

Check my scrim here.

Would love to hear your thoughts on this. Can't believe it has been 18 days already. Stay tuned for the last iteration of this series.

#JavaScriptmas 2023 Day 7 to 12

Aishwarya Mali — Wed, 13 Dec 2023 12:50:31 +0000

Welcome back! If you've been following along, we've already solved challenges of Days 1 to 6 in our journey. Now, buckle up as we dive headfirst into the next leg of this adventure Days 7 to 12. Let's start.

Day 7: Xmas Present wishlist

Task

Add items to wishlist array.
Iterate over the wishlist array.
Display your wishlist on the page.
Style the wishlist with CSS.

Stretch Goals

Provide a way to add / remove wishlist items.
Make each array an object with item's name, description, and a link to where it can be purchased

const wishlist = [
  {
      name: "Books",
      description: "I love to read so need more books!",
      link: "https://www.amazon.in/"
  },
  {
      name: "Headphone",
      description: "Nirvanaa 751 ANC Wireless Headphone",
      link: "https://www.boat-lifestyle.com/products/nirvana-751-anc-headphone"
  }
];

function renderList(list){
    let listEl = ""
    list.map((list, index) =>{
        listEl += `
        <div class='wishlist-box'>
            <div>
                <h2><a href='${list.link}' target='_blank'>${list.name}</a></h2>
                <p>${list.description}</p>
            </div>
            <div class="delete" onclick="deleteWish(${index})">❌</div>
        </div>
        `
    })
    wishlistEl.innerHTML = listEl
}

renderList(wishlist)

addWishBtn.addEventListener('click', function(){
    if(!wishNameInput.value || !wishDescriptionInput.value || !wishLinkInput.value) return
    const newWish = {
        name: wishNameInput.value,
        description: wishDescriptionInput.value,
        link: wishLinkInput.value
    }
    wishlist.push(newWish)
    renderList(wishlist)
    wishNameInput.value = wishDescriptionInput.value = wishLinkInput.value = ""
})

function deleteWish(index){
    wishlist.splice(index, 1)
    renderList(wishlist)
}

First, created an array of objects called wishlist and rendered this object using the map() method on the UI.
For the Add Wish button, first checked if there is a value in the inputs. If not, the process is terminated. If there is a value, added all the values to a new object and pushed this object to the wishlist array. Finally, cleared all the inputs.
Lastly, for deleteWish, get the index of the item we wished to delete. Based on that index, use the splice method to remove that item from the array and update the UI.

Check my scrim here.

Day 8: Animated Progress Bar

HTML

<div class="progress-bar">
  <div class="progress-status"></div>
</div>

CSS

.progress-bar,
.progress-status {
  height: 30px;
  background: var(--progressbar-bg);
  border-radius: 50px;
  width: 100%;
}

.progress-bar {
  position: relative;
}

.progress-status {
  position: absolute;
  top: 0;
  animation: progress 5s infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes progress {
  0% {
    width: 0%;
    background-color: var(--start);
  }
  50% {
    width: 50%;
    background-color: var(--middle);
  }
  100% {
    width: 100%;
    background-color: var(--finish);
  }
}

First, positioned the progress-status div on the progress-bar using position:absolute.
For the progress-status, applied animation: progress 5s infinite; to call the keyframe "progress" infinitely.
In the keyframe, defined animations starting at 0%, reaching 50%, and finishing at 100%.
To ensure smooth operation, used animation-timing-function: linear. Without this, the progress bar starts correctly but then slows down at 50% and restarts again after that.

Check my scrim here.

Day 9: AI Christmas E-card

Task

When a user hits submit, dialogModal should be hidden.
Use the inputted text to generate an image for the e-card using an AI model.
Render the image to imageContainer.

formSubmit.addEventListener('submit', function(e){
    e.preventDefault()
    dialogModal.close();
    image.style.display = "none"
    loadingText.style.display = "block"
    if(!userInput.value) return

    query({"inputs": userInput.value}).then(async(response) => {
        const src = await blobToBase64(response)
        loadingText.style.display = "none"
        image.src = src
        image.style.display = "block"
    });

})

async function query(data) {
    const response = await fetch(
        "https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0",
        {
            headers: { Authorization: `Bearer ${process.env.HUGGING_FACE_API_KEY}` },
            method: "POST",
            body: JSON.stringify(data),
        }
    );
    const result = await response.blob();
    return result;
}


function blobToBase64(blob) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = function () {
            const base64String = reader.result;
            resolve(base64String);
        };
        reader.onerror = function (error) {
            reject(error);
        };
        reader.readAsDataURL(blob);
    });
}

I used huggingface for this challenge. You can find the documentation here.
When the form is submitted we use the given description as input to call the function that will return a blob of image. This blob is then converted to Base64 using the blobToBase64 function.
The function uses the FileReader object, which is part of the web platform's File API, to read the contents of the Blob.
It sets up an onload event handler, which will be triggered when the reading operation is successfully completed.
Inside the onload handler, it converts the read content to a Base64-encoded string and resolves the Promise with that string.
If there is an error during the reading operation, the onerror event handler is triggered, and the Promise is rejected with the error.
Finally, we append this image to UI.

Check my scrim here.

Day 10: Rockin' Around

Task

Add code to make the youtube player play the new YouTube song

const player = document.getElementById("player")

function playSong(id) {
  const youtubeSrc = `https://www.youtube.com/embed/${id}?autoplay=1`
  player.src = youtubeSrc
}

The code creates a URL for a YouTube video using a template literal. It takes a video ID and constructs a YouTube video URL with the format.
At the end, assigned this URL to the player's src.

Check my scrim here.

Day 11: Flag Challenge

Task

Create Switzerland Flag in CSS

HTML

<div class="flag flag-swiss">
 <div class="cross cross1"></div>
 <div class="cross cross2"></div>
</div>

CSS

.flag{
    width: 300px;
    height: 300px;
    background: var(--red);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
}

.cross{
    background: var(--white);
}

.cross1{
    grid-row: 2/5;
    grid-column: 3/4;
}

.cross2{
    grid-row: 3/4;
    grid-column: 2/5;
}

I used grid` for this challenge, defining the height and width of the div and setting its display property to grid.

The grid is defined with 5 rows and 5 columns, each set to 1fr
Based on the image above, I have positioned .cross1, .cross2 accordingly using grid-row and grid-column.

Check my scrim here.

Day 12: Santa's Gift Sorter

Task

Help santa by sorting the gifts array into alphabetical order and reverse alphabetical order.

const xmasGifts = ['guitar 🎸', 'skates ⛸️', 'bear 🧸', 'magnet 🧲', 'laptop 💻', 'games console 🎮', 'jewellery 💍', 'kite 🪁'];

const sortedAZ = [...xmasGifts].sort();
console.log('A-Z: ', sortedAZ);

const sortedZA = [...xmasGifts].sort().reverse();
console.log('Z-A: ', sortedZA);

For sorting into alphabetical order, we have used sort() method
For sorting in reverse alphabetical order, we have first used sort() and then used reverse().

Check my scrim here.

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

#JavaScriptmas 2023 Day 1 to 6

Aishwarya Mali — Thu, 07 Dec 2023 15:12:59 +0000

This is my first time participating in the #JavaScriptmas Challenge of Scrimba, and this is my take on its solutions.

What is #JavaScriptmas Challenge?

This is a FREE challenge hosted by Scrimba 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.

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() 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.

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.

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(candy/children).
Next, multiplied this value by the total number of children to obtain the result.

Check my scrim here.

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 for this challenge. You can find the documentation here.

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.

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.

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.

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

How to convert an Object into an array?

Aishwarya Mali — Fri, 24 Nov 2023 14:37:21 +0000

As JavaScript developers, we frequently encounter the need to transform objects into arrays. In this blog, we'll explore methods for accomplishing this task.

To convert Object into an array JavaScript provides following three methods:

Object.keys()
Object.values()
Object.entries()

`Object.keys()`

It returns an array of a given object's key names. Here's a simple example:

const bookObj = {
  title: "Atomic Habits",
  author: "James Clear",
  publishedYear: 2018
}

const keysArray = Object.keys(bookObj);
console.log(keysArray); 
// Output: ['title', 'author', 'publishedYear']

In this example, Object.keys() gets the keys from bookObj object and returns them as an array.

// Suppose you have an employee object, and you want to count the number of employees. 
// In that case, you can use Object.keys()

const employeeData = {
  "id101": {name: "John Doe"},
  "id102": {name: "Jane Smith"},
}

const employeeCount = Object.keys(employeeData).length;
console.log(employeeCount);
// Output: 2

`Object.values()`

It returns an array of a given object's values. Here's a simple example:

const bookObj = {
  title: "Atomic Habits",
  author: "James Clear",
  publishedYear: 2018
}

const valuesArray = Object.values(bookObj);
console.log(valuesArray); 
// Output: ['Atomic Habits', 'James Clear', 2018]

Now, valuesArray holds the values of the properties in bookObj.

// Suppose you have an employee object, and you want to count their total salary.
// In that case, you can use Object.values()

const employeeData = {
  "id101": { name: "John Doe", position: "Software Engineer", salary: 80000 },
  "id102": { name: "Jane Smith", position: "Product Manager", salary: 95000 },
};

const salariesArray = Object.values(employeeData).map(employee => employee.salary);
console.log(salariesArray);
// Output: [80000, 95000]

// Calculate the total salary
const totalSalary = salariesArray.reduce((acc, salary) => acc + salary, 0);
console.log("Total Salary:", totalSalary);
// Output: Total Salary: 175000

`Object.entries()`

It doesn't just give you the keys or values alone; it gives you both, together in pair.

const bookObj = {
  title: "Atomic Habits",
  author: "James Clear",
  publishedYear: 2018
}

const entriesArray = Object.entries(bookObj);
console.log(entriesArray); 
// Output: [["title", "Atomic Habits"],["author", "James Clear"],["publishedYear", 2018]]

The result is an array of arrays, where each inner array contains a key-value pair. This is particularly handy when you need both the keys and values together.

// Suppose you have a booksObject, and you want to display their data together.
// In that case, you can use Object.entries()

const bookCollection = {
  book1: { title: "Atomic Habits", author: "James Clear", ratings: "seven lakhs plus" },
  book2: { title: "The Power of Your Subconscious Mind", author: "Joseph Murphy", ratings: "seventy two thousand plus" }
};

Object.entries(bookCollection).forEach(([bookId, bookInfo]) => {
  console.log(`${bookId}: ${bookInfo.title} by ${bookInfo.author} has ${bookInfo.ratings} ratings`);
});

// Output:
// book1: Atomic Habits by James Clear has seven lakhs plus ratings
// book2: The Power of Your Subconscious Mind by Joseph Murphy has seventy two thousand plus ratings

Understanding Object.keys(), Object.values(), and Object.entries() in JavaScript is helpful. They simplify working with objects by allowing you to iterate through keys, values, or key-value pairs effortlessly.