" < /> "

50 DAYS OF CODE

// 50 Days = 50 Projects Challenge //



Day 1. Expanding Cards

Cards open by expanding on click

HTML

CSS

JavaScript

CSS-Animation

Completed On: 21/12/2021

Day 2. Stopwatch

A simple Stopwatch

HTML

CSS

JavaScript

Completed On: 22/12/2021

Day 3. Color Picker

A Random Color picker which dissplays the rgb code too.

HTML

CSS

JavaScript

Completed On: 23/12/2021

Day 4. Piano Player

A Piano Player inspired by Codecademys DOM Project. I added my own sounds to it.

HTML

CSS

JavaScript

Completed On: 24/12/2021

Day 5. Merry Christmas

Merry Christmas greetings using Particle.JS

HTML

CSS

JavaScript

Particle.JS

Completed On: 25/12/2021

Day 6. Dad Jokes Generator

Random Dad Jokes Generator using https://icanhazdadjoke.com/

HTML

CSS

JavaScript

API

Async / Await

Completed On: 26/12/2021

Day 7. Progress Steps

Progress steps increase and decrease on press of next and back button

HTML

CSS

JavaScript

Completed On: 27/12/2021

Day 8. CSS-in-JS

Styled Cards in React using the Codeacademy CSS-in-JS Course

React

JavaScript

@emotion/styled

@emotion/react

CSS Animations

Completed On: 28/12/2021

Day 9. Moving Background

Multiple Background Image Parallax

HTML

CSS

CSS Animations

Completed On: 29/12/2021

Day 10. Rotating Navigation

Page moves on an angle to the side on click of Navigation button

HTML

CSS

JavaScript

CSS Animations

Completed On: 30/12/2021

Day 11. Todo List

A simple Todo list using Vanilla JavaScript.

HTML

CSS

JavaScript

Completed On: 31/12/2021

Day 12. Profile Card

A Cool Profile Card

HTML

CSS

JavaScript

Completed On: 01/01/2022

Day 13. Skill Bar

Skill Bars using HTML, CSS and JQuery

HTML

CSS

JQuery

Completed On: 02/01/2022

Day 14. Drag & Drop

Drag and drop to Upload

HTML

CSS

JavaScript

Completed On: 03/01/2022

Day 15. Drag Box

Drag to move the div around the screen

HTML

CSS

JavaScript

Completed On: 04/01/2022

Day 16. Box Scroll

Box Scrolling of images in both directions

HTML

CSS

JavaScript

Completed On: 05/01/2022

Day 17. Harry Potter Fans

Harry Potter Character Search

HTML

CSS

JavaScript

Completed On: 06/01/2022

Day 18. Scrolling Sponsors

Scrolling Sponsors Images

HTML

CSS

Completed On: 07/01/2022

Day 19. Glassmorphic Cards

Creating Glasmorphic Cards in CSS

HTML

CSS

Completed On: 08/01/2022

Day 20. Hover Icons

Stylish hover icons that fill up when hovered on.

HTML

CSS

Completed On: 09/01/2022

Day 21. Music Player

Music Player Made with abelity to change tracks

HTML

CSS

JavaScript

Completed On: 10/01/2022

Day 22. Email Validation

Email validation using Javascript and CSS

HTML

CSS

JavaScript

CSS-Animation

Completed On: 11/01/2022

Day 23. Neumophic Cards on Tabs

Change Card on click of tabs and toggle day and night mode

HTML

CSS

JavaScript

Completed On: 12/01/2022

Day 24. Expanding Cards

Images expand to a full screen modal

HTML

CSS

JavaScript

Completed On: 13/01/2022

Day 25. Toggle Darkmode

Darkmode and Lightmode toggle on click of link.

HTML

CSS

JavaScript

Completed On: 14/01/2022

Day 26. Voice to Text

Convert what yopu say to text.

HTML

CSS

JavaScript

Completed On: 15/01/2022

Day 27. Calculator

Classsic Calculator in Javascript.

HTML

CSS

JavaScript

Completed On: 16/01/2022

Day 28. Video Background

Creating a live Wallpaper

HTML

CSS

JavaScript

Completed On: 17/01/2022

Day 29. Counter

Sscrolling Counter

HTML

CSS

Completed On: 18/01/2022

Day 30. Filter Content

Filter Content using Jvascript and displaying the cards.

HTML

CSS

Javascript

Completed On: 19/01/2022

Day 31. Magic Card

Lovely hovereffect to show some magic.

HTML

CSS

CSS Animations

Completed On: 20/01/2022

Day 32. Parallax Tilt

Cards Tilting on mouse movement.

HTML

CSS

JavaScript

Completed On: 21/01/2022

Day 33. Simple Art

Simple Art Card using Css

HTML

CSS

Completed On: 22/01/2022

Day 34. Skeleton Loading

Skeleton Loading using CSS

HTML

CSS

Completed On: 23/01/2022

Day 35. Goolge Home Page

Clone of the Google Home Page.

HTML

CSS

Completed On: 24/01/2022

Day 36. Accordion

Accordion using Bootstrap.

HTML

CSS

Completed On: 25/01/2022

Day 37. Pexel Clone

Clone of the Pexel Website

HTML

SASS

JavaScript

Completed On: 26/01/2022

Day 38. Diagonal Images

Sort of a Hero with Hover effect and diagonal Images

HTML

CSS

Completed On: 27/01/2022

Day 39. Snake Game

Classic Snake Game

HTML

CSS

Responsive Design

JavaScript

Completed On: 28/01/2022

Day 40. Movie Cards

Responsive Movie Cards

HTML

CSS

Responsive Design

JavaScript

Completed On: 29/01/2022

Day 41. Animated News Card

Cool CSS Animated News Card

HTML

CSS

Completed On: 30/01/2022

Day 42. Neumorphic Buttons

Neumorphic Buttons that can be added a player.

HTML

CSS

Completed On: 31/01/2022

Day 43. Neumorphic Audio Player

Neumorphic audio player with Audio Art.

HTML

CSS

Completed On: 01/2/2022

Day 44. Cool Glow

Cool glowing animation on hover.

HTML

SASS

Completed On: 02/2/2022

Day 45. Neon

Neon Glow on Text

HTML

CSS

CSS ANIMATION

Completed On: 03/2/2022

Day 46. Day and Night Animation

Animation that transsitions from day to night and back to day.

HTML

CSS

Completed On: 04/2/2022

Day 47. Scrolling Text

Text that scrolls letter by letter.

HTML

CSS

JavaScript

Completed On: 05/2/2022

Day 48. Animate on Scroll

Animates sections into perspective as we scroll on the page.

HTML

SASS

JavaScript

Completed On: 06/2/2022

Day 49. Weather App

Weather app that animates ans shows weather ass per your geolocation.

HTML

SASS

JavaScript

API

Completed On: 07/2/2022

Day 50. Tip Calucator

Classic tip calculating app.

HTML

SASS

JavaScript

Completed On: 08/2/2022