codingShark

this time it’s all done! I’ve fixed the bug on the navbar and buttons!
I also added slightly longer instructions! then change some food states! Maybe that’s it for now, in the next ship I’ll add music and more complete recipes!

I’ve finished creating the 404 page not found section for the recipe page! so you can only see recipes that are already open!

I just added 10 more questions!
Now the question is about protein, I’ve also added it in 2 languages!

everything is ready, hopefully it works as expected! I really didn’t expect this to happen!

revealedMeal = {
    name: { id: "Makanan Gosong", en: "Burnt Food" },
    image: "/emp.png", // Pastikan ada gambarnya di folder static
    id: "burnt"
 };

This is what will be displayed if you answer all the questions wrong! so try to answer all of them correctly and see what menu you will get!
Here there are a total of 20 menus that you can get!! and only one super rare!
let me know if you get it!

this is what the recipe page will look like, maybe the image isn’t right hehe because looking for the image is quite tiring, also typing it even though this is a very very concise one

Each menu has its own status, such as rare, super rare, average and common! it depends on how lucky you are!

This will be part of the cooking test, you will only be asked simple questions, in the next devlog I will make a sample question page!

everything is almost finished, I forgot to say in the previous devlog about including a recipe menu here I have written very, very many menus, and the prices listed are just for fun, don’t take it seriously hehe

I made a menu section like this so if you want to add a recipe menu you have to cook! not but a cooking competition!! I plan to use the API from TheMealDB because it is free and easy to use

I also added logic so that the menu remains saved even if you exit the browser

const storedRecipes = browser ? JSON.parse(localStorage.getItem(‘cookedRecipes’) || ‘[]’) : [];

export const cookedRecipes = writable(storedRecipes);

// Setiap kali store berubah, simpan ke localStorage
if (browser) {
cookedRecipes.subscribe((value) => {
localStorage.setItem(‘cookedRecipes’, JSON.stringify(value));
});
}

I’m migrating a project from React to Svelte, because I feel more familiar with Svelte!

I moved it from React because I think DOM in React is quite difficult, whereas in Svelte to move pages you only need to use the folder name like this

<li>
  <a href="/menu">{home[$language]}</a>
</li>

this time everything is done, I added the function of changing the card model when pressed, if you press the card with clown model A it will change to clown model B, when pressed it will make a beep sound, here is the code I used:
const logo = document.getElementById(‘rotate’);
const flip = new Audio(‘assets/audio/dot.wav’);

    const images = [
        'assets/gy2.png',
        'assets/gy1.png',
        'assets/gy3.png',
    ]

    let currentIndex = 0;

    logo, addEventListener('click', () => {
        currentIndex = (currentIndex + 1) % images.length;

        logo.src = images[currentIndex];
        flip.currentTime = 0;
        flip.play()
    });

I have also included a fillout link and also a link to the PDF, everything is ready complete with indicators that change on each page, namely [star, rhombus, cross, triangle].
Let’s talk a little about what I made, this is a website to show the product, not an NFC website for the product, CLOWNCARD is a card equipped with NFC that takes you to a special website called clownbase, there you can find fellow clowncard users if you tap the card with them, it also has a keychain and sticker (if you’re lucky).

At first I changed the scroll indicator to just a star shape for everything but I felt it wasn’t ‘clownish’ enough and just looked monotonous so I googled how to make various shapes in CSS, finally I found clippy! and I made each indicator have its own shape. I modified the code like this

.indicator-dot.active {
    height: 18px;
    width: 18px;
    clip-path: polygon(50% 0%, 65% 35%, 100% 40%, 75% 65%, 80% 100%, 50% 80%, 20% 100%, 25% 65%, 0% 40%, 35% 35%);
    background-color: var(–color-text);
    border-color: var(–color-text);
}

.indicator-dot.active[data-section=“1”] {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.indicator-dot.active[data-section=“2”] {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.indicator-dot.active[data-section=“3”] {
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
gimana

I just added a PDF for more knowledge about clowncard, I put the link to the pdf under the “how it works” section.
here I put a big explanation about what clowncard is, what is the physical item, what is the digital experience, what are the features and who is it suitable for.

I’ve changed the layout of the indicators, and added one additional page, each with a new title, such as “what is it” “how does it work”, “tell me more” and “get yours”.

So today I changed some of the appearance such as the location of the scroll indicator, and I also added some additional illustrations that I made in Canva and Procreate, actually this took the most time but unfortunately I didn’t use lapse.
I also tidied up the UI for the first page.

it’s been few days i forgot to do devlog, here i add music player, shark image API, quotes API and moodList

remake some layout and change to another fonts

i forked the feature from bakebuild and draw the components by my self

i currently start with very basic pomodoro timer, (shark and blue themed) with 25 minutes work and 5 minutes break for each cycle and start | pause | stop button under it

create menu data with menu.js to make it easier to see the menu

fixing the code to add dom it’s been few hours, finally the page works again

just testing is this terminal still ok

i messed all omg

so here i still learn about combining loading and browser-route, i need to learn now and make some pages, actually menu pages

so i just add more features in here
i add language switcher and currency switcher
i add ‘staff picks’ section and FaQ question, change the font and give more pixel kitchen look

FINISHEDDDD

can’t believe i write my own motivation quote..not yet, it still albert einstein

add man command!

just make a cleaner code still thinking about navbar

i add more specific cd, ls and cat commands

add more commands and play with code hhaha

fixing layout! add loading animation and some more

cleaning the code(?) i just re-write the function

soo i add some moree

so i already made its background (made it on aseprite) and navbar