All solutions

Vanilla JS with tailwind in the mix.

This was a fun project that I slowly built over the course of some days. I merged a few pull requests to ensure things were as good as possible prior to uploading. Any advice is appreciated.

I did it!

I posted this solution a few days ago frustrated and ready to give up. After some encouragement from a commenter @IryDev I decided to keep trying.

A few hours of work later and it works! It calculated properly and its 3 themed. Used some custom colors but the project is resizable without breaking and functions as expected.

Could use some help please.

Created the 3 themed calculator utilizing flex grid to practice. I used custom colors to practice originality and customization. The themes are toggle using javascript.

I'm posting the incomplete javascript functionality in hopes I can get some pointers. Here's my issue:

I cannot for the life of me figure out how to store the calculator's input data to then be used in the calculation. For example, I will create onclick event handlers for the buttons, but the event handler function cannot return outside of the event handler so I can't store it in an array or variable or whatever i'm trying to store it in. If I can't store it outside the button's functionality, how the heck do I calculate? Maybe there's a perspective i'm not seeing.

So I tried manipulating the span and storing the input into the span, but when I click another event handler it overrides it. Maybe this isn't the right approach. I'm honestly stuck. I watch tutorials but they all approach it in different ways and I'm just trying to do it my own way without just copy pasting their code.

I'm so close to giving up on this calculator. Maybe I wasn't ready for it.

Another challenge tackling HTML/CSS/Vanille JS. First time ever using API. This was fun and I learned a lot.

Got some more tailwind practice with this project as well. Some colors are off but thats because I was using default tailwind libraries and not specific CSS colors. I was not worried about those details as much as I was about learning how to use APIs with JS.

Not sure why i'm struggling so much with layering elements using Z-index. I feel like I layer it properly then suddenly the layered element breaks with any sizing. I can't seem to layer things without using absolute. If I use relative it never breaks outside of the box its in. Maybe I should add a parent container? Not sure how to approach this problem with layering stuff like the button in this challenge. Will update, this was my first submission.

Any feedback is welcome

Another challenge completed utilizing vanilla JS. My focus here was functionality and ensuring the javascript was working as expected. I got a little bit more practice with tailwind but i'm struggling to make the design responsive on smaller displays. This will be my next focus point.

Thanks in advance for any feedback !

First project using tailwind. Emphasis on the javascript as that is what i'm currently focusing on.

Getting the app to work was not the hard part, the hard part was figuring out how to get the current date (probably would have been an API but I haven't learned how to utilize APIs yet) and then calculating the math utilizing this information. Even using a static date, it was hard to calculate the math because every month has a different amount of days and I wasn't sure how to calculate the exact date with the inconsistencies in this information. The calculator works, the math is just slightly wrong.

Advice is always welcomed. I tried to make sure I didn't repeat any code. I will be jumping into react projects after this JS project.

HTML, CSS, and vanilla JS from scratch.

My first junior project tackling JS at the same time. Took me roughly 5-6 hours.

Raw html/css

quick practice challenge I did to test a new keyboard.

Could have done things better but seeing it was a refresher and a quick pick-up I wasn't too concerned about the smaller details. Active states were included.

Here's my first challenge utilizing vanilla JS.

Frameworks are not being utilized because i'd like to make sure I have a solid foundation of JS fundamentals. This is my first time using event handlers and calling classes from an html doc

HTML/CSS/JS

Readme has updated notes.

Feedback is appreciated!

Another HTML/CSS challenge by frontend mentor. No frameworks used.

I came across two issues I could not resolve even after some research and spending time adjusting many things.

First, I could not get the profile picture to fit within a circle as shown in the original solution. I've set the border radius to 50% and tried to shrink the image, but the image just would not respond to any of my CSS. I assumed it might be an inherited element affecting it's sizing or border but I could not locate it, if that.

Secondly, I couldn't get the spacing under the statistics and it's label to go away. I have gap, padding, and margin all set to 0 but there's still a large space between say "80k" and "followers" when all these values are set to 0. Again, I think it might be an inherited element doing this but I couldn't figure it out.

Thanks for reading and I'd appreciate any advice/tips!

Did not use JS or any frameworks for this challenge.

I would appreciate any advice on my css and I how I can potentially make things better.

I couldn't find a way to get the component centered on the desktop web screen. For some reason when setting the margin to auto it would stick to the top of the screen so I had to set an artificial margin-top to get it away from the top of the screen. This was the case even when removing VH units from my CSS.

Thanks for any help!

Another challenge by frontend mentor completed.

Some things to note :

I used custom social media icons so I kept the hover pseudo to just a simple cursor change instead of a color change as I felt it was not necessary. If the icons were provided I would have used them but it just redirected me to a site with thousands of icons and there was no real purpose in searching for them.

I couldn't get the background exactly as shown in the original image because of sizing and viewport issues. Maybe it's an issue with my code.

I don't know how to use media query yet so on mobile it just looks like the desktop version. Any pointers on using media query here (if it would even work) would be of great value to me.

After submitting I realized that it's not displaying properly? Even though my desktop shows the correct sizing, when it's sized down, half of the display is cut off. I'm sure there's a 100% width setting somewhere I can change so I will attempt from scratch again.

HTML and CSS only. No frameworks, no SASS, and no JS incorporated.

Any advice is always welcomed!

My biggest challenge with this one was the hovering img change. I was able to get the ::hover pseudo element to work with all of the elements except the img. I tried a few methods like background-img and using ::before and ::after psuedos but for some reason the img would not show when hovering. The curser shows, so I know the hover element works, but the img did not.

I'd appreciate any advice on this one!

Used straight HTML and CSS. No SASS, no frameworks, and no original design files used.

Not gonna lie, this one took me longer than the other newbie challenges I've tried. I would appreciate some feedback or answering of some of my questions here.

First things first, prettier kept telling me my HTML had an error and it couldn't format properly. The code ran just fine and I could not locate it. Within the HTML I've left some comments so you can locate it. It specified line 34 was not being closed properly but it was? Idk. This one was bugging me.

Secondly, the button has a gray-ish border even though I set box shadow to none and border to match the white background. Not sure why this keeps happening on my button elements. Maybe it's the element itself doing it.

Lastly, figuring out the spacing and all the flex properties was a big game of ping pong. Constant back and forth adjusting things. Maybe I did something to make my workflow tougher and I'd appreciate some feedback on cleaning up my flex.

Overall I'm glad I was able to complete this when just a week ago I had no idea how I would even start.

Thanks for any feedback!

My second challenge with frontend mentor. I added some click functionality to the button but because it's strictly HTML/CSS and the button wasn't really going anywhere, I didn't add the anchor. I'll worry about button functionality when JS comes into play. First repository commit.

I came across a few challenges when creating this.

The images and text within the container are occupying the entire flex box. Every time I tried creating another flex box for the container to be in, it would mess everything up. the reason for doing this is so I can create the gaps between the image/text and the outer border.

Another challenge I faced was making the image stay a static size. It grows with the page so when I coded the original flex box it looked as intended until re-sizing the screen. It's way bigger than originally designed and I can't figure out how to keep it a static size without messing up all the content within the flexbox.

I tried getting the live site via GitHub desktop but the image would not upload in GitHub. Every time I tried adding the image it seems that the img would not actually import into the html even though I've added it to the repository. Maybe it's a directory issue and I didn't add a full directory for the image? Not sure.

Any advice on the code or better practice adjustments would be greatly appreciated.

*Edit

After receiving feedback from a community member, I was able to apply new found knowledge and techniques to get my project to further resemble the original design. This was a great learning experience and I feel like I understand flex box a lot better. This also helped me dive a little bit further into using Github properly and linking things within Github's repository.