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 toposition: 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 thesorteesArr
. - Within the function, we check if the person 'has been good?'.
- If yes, we create a string of
<li>
elements and add it to theniceList
. Otherwise, we add it to thenaughtyList
. - When 'Add person' is pressed, we create a
newPerson
object and push it tosorteesArr
, followed by a call to thesort()
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 themodel
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.
Top comments (0)