All solutions

I'd been looking forward to working on this project for days, and I'm very happy with how quickly I completed the markup and CSS. The screen responsiveness works GREAT🙌🏻🙌🏻 Even the Javascript didn't take a huge amount of time. I think I completed about 90% of the thing in a workday. The other 10% was me leaving no stone unturned, planning for every possible scenario when writing input (e.g.: making sure it's not possible to write two operands together like "++", "/*", making sure you can't write something like "00000" or "0.03.2.0") and some things that were a little more difficult to fully figure out; as anyone who's programmed a calculator will tell you (this is my second time), the function for the Period tends to be the most annoying, head-scratching one🥴

Extra mile

• Played a little with the box shadows on the buttons to make them look a little more - 3D and make them look like they're being pressed down.
• Added a custom scrollbar to the calculator's screen in case the input gets too long.
• Used eventListeners to make sure you can also use it with your keyboard, though this is a fairly standard "idea".
• I did not use prefers-color-scheme but I did use localStorage to make sure the user's preferred color scheme is saved.

Issues I wasted a lot of time in the end trying to get the buttons to work on mobile, but I couldn't for-the-life-of-me get it to work, at least not on my Moto G7 Play (since I had to delete and re-deploy on Github everytime I made changes, I only tried to make the Number buttons responsive on mobile, but I couldn't do it). Any advice here will be highly appreciated. I tried using touchstart, touchend, onclick, and even changing the element for the calculator's screen from a <textarea> to an <input> element, but to no avail😤😤

Here's a relevant snippet of my code. numbers is a node list of <button> elements. Clicking works, tapping doesn't:

// EACH BUTTON HAS A value ATTRIBUTE SET TO ITS NUMBER
numbers.forEach(num => num.addEventListener("click",()=>{
    numberFunc(num.value)
}))

numbers.forEach(num => num.addEventListener("touchstart",(e)=>{
    e.preventDefault();
    numberFunc(num.value)
}))

The layout and styling were very straightforward, though figuring out which color corresponded to which element when setting up the variables was annoying as hell. The javascript for this was also pretty straightforward (I already knew a couple of ways of creating to-do lists). The most difficult part of course was making the items/tasks draggable and sortable; had to learn from a couple of videos and then I experimented with what I learned to see what else I could do or if there were any other ways to achieve the desired functionality, so that ate up a few hours of my time.

I also made sure to write what I think is very clear code, at least for the JS part, so that anyone who looks at it can quickly understand what everything does. There are comments all throughout the file. Hope someone finds it useful!

PS: because the default items on the list are intended to guide the user into testing out the functionality, I did not add a localStorage feature to the JS, as any changes the users make to the list could result in deleting the original items. Therefore, changes to the list are not saved.

Shouldn't brag much about this one as it's a very simple app that took a little over 2 hours (1 hour for the layout, and then spent the other 1 hour in the javascript, fine-tuning, and mostly some research and tests that went nowhere), but I'm quite happy with it. Added fade-out/fade-in effects to make the quote fetching smoother and it looks gooooooooooood.

QUESTION: while the transition for my fade-out/fade-in works, the transition for when the card changes sizes (after fetching a longer or shorter quote) does NOT work. Does anybody have any idea how to do that? Here's the relevant CSS:

.card {
    max-width:550px;
[...]
    display:flex;
[...]
    position:relative;
[...]
    transition: all 1s;
}

Spent about 2:15 h on the layout and 1:15 on the javascript. I wrote it so that no matter how many days are added to the API, this will always use the last 7 days (though I shouldn't brag too much as that can be done in just one line of code), and the height of the bars will be set in relation to the highest value of the week, which will always have a height of 130px📊 The user can click on multiple bars to freeze the tooltips. I'm very, very happy with this one as I churned it out in about 3 hours and 40 minutes, give or take😃😃 got to learn a couple of new things and came up fairly quickly with a workaround for an issue I was having in regards to the use of CSS selectors.

It had been a while since I did anything with React since finishing the React+Redux course on freeCodeCamp, so I really wanted to give it another go before I started to forget everything I'd learned. I did most of the HTML/CSS locally on VS Code, and then took care of the JS/React part in CodePen.

Ok, so I'm very, VERY happy with this one: it looks great on pretty much every screen size, and I figured out the layout as well as the javascript fairly quickly, and then I got to learn a few new things:

1. I had little experience working with range inputs, so I got a lot of practice, learned a few new tricks, and I'm very happy with how I figured out how to change the color of the range bar depending on how far the user slides😁😁(no need to create new divs or any other elements, just set the background color to a gradient and update the fill percentages in real-time).

2. I had no idea how to create the toggle inputs, I was pretty much expecting them to be a built-in type of input (e.g: <input type="toggle">), but it was very interesting learning that from scratch, and it was fairly easy to grasp.

All in all, really happy with how this one turned out and how long it took (about 5 hours) considering I had to learn qquite a few new things.

Had a pretty good time making the data on the card update as the user types in the fields📋📋 Got some good <form> and positioning practice out of this one though I put in more hours than I would've liked😵‍💫 Partially because it was election week here in Argentina 🇦🇷🗳️

Very happy with this one as, even though it's not too complex, I did everything in about 2:45 hours, which I feel like is a pretty good time. Figuring out how to make the input fields turn red and display the alert icon was pretty fun.

Pretty happy with the responsiveness in this one. Working with Grid has been pretty straightforward... it's always the fine tuning that eats up the most time!😤

Nothing crazy about this one, just trying to fit a quick 1-hour flexbox workout.

I'm back here after spending two weeks to almost complete (27/30) the Javascript30 video-course by Wes Bos (which I highly recommend if you're sorta new to the HTML/CSS/Javascript world). Added some extra animations to make the dropdown a little smoother. Possible performance issue: SOMETIMES it takes a few seconds after the page loads for the dropdown function to work. Sometimes it works straight away, as it should. Don't know what that's all about.

Very happy with this one 😁😁

1. Added some neat animations to the whole thing
2. Added some vanilla Javascript: – Used setInterval() to make the score go from 0 to the total score – Went for the Bonus and used the JSON data to populate the results as well as the overall score. – The right-side results are displayed by pressing the button.

Don't know why the button won't retain the same color as button:hover once clicked... it works fine on VS Code on my PC.

My first Javascript/React project on this website after having completed the "Front End Development Libraries Certification" unit on freeCodeCamp.org. By this point, the HTML/CSS aspect is a breeze😌the layout for the initial state took about 1:15 h to complete. I also feel pretty comfortable working with React, as I already had to complete 5 projects to earn the fCC certification. Finding out how to make a rating button remain highlighted after clicking was challenging, though😓 And making the ratings button deselect after having clicked on a different button was hell😵 Still, I pulled through and I'm pretty happy with how it turned out. I also had to learn how to export from Codepen and make sure everything's properly formatted beforehand.

Lol, don't let the screenshot fool you; just click on "Preview website" to see the actual thing. Make sure you also adjust the screen size to mobile view in order to check out some cool animations! 😁😁

Good challenge for learning when you will have to think ahead in regards to creating and using global classes and specific classes. Added a couple of brief animations🎞️just to practice a little more. Ready in time for lunch 😼

Not much to say here. Pretty happy with how it turned out, and with having solved this one more quickly than the first two. Still, I hope this starts becoming second-nature soon. Looking forward to being able to do this without having to look up why something isn't working the way I thought I would every 5 minutes😅😅

Working with Absolute Position turned into a nightmare when I tried to use the Bottom and Right properties for the right background circle in the same way I had used Top and Left for the left background circle: to hide a portion of it. However, Bottom and Right kept expanding the sizes of the parent and the HTML and, from what I gathered, it's impossible to avoid this. I figured out I could at least use "overflow: hidden" to somewhat sort of try to hide this, but I still spent quite a bit of time trying to figure out/research a way to stop Bottom and Right from expanding the page, alas, to no avail.