8000 Updated · JavohirMir/50-Projects-In-50-Days---HTML-CSS-JavaScript@cb7b816 · GitHub
Skip to content

Commit cb7b816

Browse files
kavyashreeshahkavyashreeshah
committed
Updated
1 parent 831177d commit cb7b816

File tree

163 files changed

+7386
-21
lines changed
  • style.css
  • double-click-heart
  • double-vertical-slider
  • drag-n-drop
  • drawing-app
  • drink-water
  • event-keycodes
  • expanding-cards
  • faq-collapse
  • feedback-ui-design
  • form-input-wave
  • github-profiles
  • good-cheap-fast
  • hoverboard
  • incrementing-counter
  • insect-catch-game
  • kinetic-loader
  • live-user-filter
  • mobile-tab-navigation
  • movie-app
  • netflix-mobile-navigation
  • notes-app
  • password-generator
  • password-strength-background
  • pokedex
  • progress-steps
  • quiz-app
  • random-choice-picker
  • random-image-generator
  • rotating-nav-animation
  • scroll-animation
  • sound-board
  • split-landing-page
  • testimonial-box-switcher
  • theme-clock
  • toast-notification
  • todo-list
  • verify-account-ui

    • Some content is hidden

    Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

    163 files changed

    +7386
    -21
    lines changed

    ‎.gitignore

    Lines changed: 1 addition & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1 @@
    1+
    .DS_Store

    ‎3d-boxes-background/index.html

    Lines changed: 20 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,20 @@
    1+
    <!DOCTYPE html>
    2+
    <html lang="en">
    3+
    <head>
    4+
    <meta charset="UTF-8" />
    5+
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6+
    <link
    7+
    rel="stylesheet"
    8+
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
    9+
    integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
    10+
    crossorigin="anonymous"
    11+
    />
    12+
    <link rel="stylesheet" href="style.css" />
    13+
    <title>3D Boxes Background</title>
    14+
    </head>
    15+
    <body>
    16+
    <button id="btn" class="magic">Magic 🎩</button>
    17+
    <div id="boxes" class="boxes big"></div>
    18+
    <script src="script.js"></script>
    19+
    </body>
    20+
    </html>

    ‎3d-boxes-background/script.js

    Lines changed: 17 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,17 @@
    1+
    const boxesContainer = document.getElementById('boxes')
    2+
    const btn = document.getElementById('btn')
    3+
    4+
    btn.addEventListener('click', () => boxesContainer.classList.toggle('big'))
    5+
    6+
    function createBoxes() {
    7+
    for (let i = 0; i < 4; i++) {
    8+
    for (let j = 0; j < 4; j++) {
    9+
    const box = document.createElement('div')
    10+
    box.classList.add('box')
    11+
    box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`
    12+
    boxesContainer.appendChild(box)
    13+
    }
    14+
    }
    15+
    }
    16+
    17+
    createBoxes()

    ‎3d-boxes-background/style.css

    Lines changed: 93 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,93 @@
    1+
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
    2+
    @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
    3+
    4+
    * {
    5+
    box-sizing: border-box;
    6+
    }
    7+
    8+
    body {
    9+
    background-color: #fafafa;
    10+
    font-family: 'Roboto', sans-serif;
    11+
    display: flex;
    12+
    flex-direction: column;
    13+
    align-items: center;
    14+
    justify-content: center;
    15+
    height: 100vh;
    16+
    overflow: hidden;
    17+
    }
    18+
    19+
    .magic {
    20+
    background-color: #f9ca24;
    21+
    color: #fff;
    22+
    font-family: 'Poppins', sans-serif;
    23+
    border: 0;
    24+
    border-radius: 3px;
    25+
    font-size: 16px;
    26+
    padding: 12px 20px;
    27+
    cursor: pointer;
    28+
    position: fixed;
    29+
    top: 20px;
    30+
    letter-spacing: 1px;
    31+
    box-shadow: 0 3px rgba(249, 202, 36, 0.5);
    32+
    z-index: 100;
    33+
    }
    34+
    35+
    .magic:focus {
    36+
    outline: none;
    37+
    }
    38+
    39+
    .magic:active {
    40+
    box-shadow: none;
    41+
    transform: translateY(2px);
    42+
    }
    43+
    44+
    .boxes {
    45+
    display: flex;
    46+
    flex-wrap: wrap;
    47+
    justify-content: space-around;
    48+
    height: 500px;
    49+
    width: 500px;
    50+
    position: relative;
    51+
    transition: 0.4s ease;
    52+
    }
    53+
    54+
    .boxes.big {
    55+
    width: 600px;
    56+
    height: 600px;
    57+
    }
    58+
    59+
    .boxes.big .box {
    60+
    transform: rotateZ(360deg);
    61+
    }
    62+
    63+
    .box {
    64+
    background-image: url('https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif');
    65+
    background-repeat: no-repeat;
    66+
    background-size: 500px 500px;
    67+
    position: relative;
    68+
    height: 125px;
    69+
    width: 125px;
    70+
    transition: 0.4s ease;
    71+
    }
    72+
    73+
    .box::after {
    74+
    content: '';
    75+
    background-color: #f6e58d;
    76+
    position: absolute;
    77+
    top: 8px;
    78+
    right: -15px;
    79+
    height: 100%;
    80+
    width: 15px;
    81+
    transform: skewY(45deg);
    82+
    }
    83+
    84+
    .box::before {
    85+
    content: '';
    86+
    background-color: #f9ca24;
    87+
    position: absolute;
    88+
    bottom: -15px;
    89+
    left: 8px;
    90+
    height: 15px;
    91+
    width: 100%;
    92+
    transform: skewX(45deg);
    93+
    }

    ‎README.md

    Lines changed: 75 additions & 21 deletions
    Original file line numberDiff line numberDiff line change
    @@ -1,32 +1,86 @@
    1-
    # DevSpace Blog
    1+
    # 50 Projects in 50 Days - HTML/CSS and JavaScript
    22

    3-
    > Static Next.js blog that uses Markdown for posts. Includes pagination, categories and search
    3+
    This is the main repository for all of the projects in the course.
    44

    5-
    This project is part of my [Next.js Udemy course](https://www.udemy.com/course/nextjs-dev-to-deployment)
    5+
    - [Course Link](https://www.udemy.com/course/50-projects-50-days)
    6+
    - [Course Info Website](https://50projects50days.com)
    67

    7-
    ![DevSpace Blog](/public/images/screen.png 'DevSpace Blog')
    8+
    | # | Project | Live Demo |
    9+
    | :-: | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
    10+
    | 01 | [Expanding Cards](https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards) | [Live Demo](https://50projects50days.com/projects/expanding-cards/) |
    11+
    | 02 | [Progress Steps](https://github.com/bradtraversy/50projects50days/tree/master/progress-steps) | [Live Demo](https://50projects50days.com/projects/progress-steps/) |
    12+
    | 03 | [Rotating Navigation Animation](https://github.com/bradtraversy/50projects50days/tree/master/rotating-nav-animation) | [Live Demo](https://50projects50days.com/projects/rotating-navigation-animation/) |
    13+
    | 04 | [Hidden Search Widget](https://github.com/bradtraversy/50projects50days/tree/master/hidden-search) | [Live Demo](https://50projects50days.com/projects/hidden-search-widget/) |
    14+
    | 05 | [Blurry Loading](https://github.com/bradtraversy/50projects50days/tree/master/blurry-loading) | [Live Demo](https://50projects50days.com/projects/blurry-loading/) |
    15+
    | 06 | [Scroll Animation](https://github.com/bradtraversy/50projects50days/tree/master/scroll-animation) | [Live Demo](https://50projects50days.com/projects/scroll-animation/) |
    16+
    | 07 | [Split Landing Page](https://github.com/bradtraversy/50projects50days/tree/master/split-landing-page) | [Live Demo](https://50projects50days.com/projects/split-landing-page/) |
    17+
    | 08 | [Form Wave](https://github.com/bradtraversy/50projects50days/tree/master/form-input-wave) | [Live Demo](https://50projects50days.com/projects/form-wave/) |
    18+
    | 09 | [Sound Board](https://github.com/bradtraversy/50projects50days/tree/master/sound-board) | [Live Demo](https://50projects50days.com/projects/sound-board/) |
    19+
    | 10 | [Dad Jokes](https://github.com/bradtraversy/50projects50days/tree/master/dad-jokes) | [Live Demo](https://50projects50days.com/projects/dad-jokes/) |
    20+
    | 11 | [Event Keycodes](https://github.com/bradtraversy/50projects50days/tree/master/event-keycodes) | [Live Demo](https://50projects50days.com/projects/event-keycodes/) |
    21+
    | 12 | [Faq Collapse](https://github.com/bradtraversy/50projects50days/tree/master/faq-collapse) | [Live Demo](https://50projects50days.com/projects/faq-collapse/) |
    22+
    | 13 | [Random Choice Picker](https://github.com/bradtraversy/50projects50days/tree/master/random-choice-picker) | [Live Demo](https://50projects50days.com/projects/random-choice-picker/) |
    23+
    | 14 | [Animated Navigation](https://github.com/bradtraversy/50projects50days/tree/master/animated-navigation) | [Live Demo](https://50projects50days.com/projects/animated-navigation/) |
    24+
    | 15 | [Incrementing Counter](https://github.com/bradtraversy/50projects50days/tree/master/incrementing-counter) | [Live Demo](https://50projects50days.com/projects/incrementing-counter/) |
    25+
    | 16 | [Drink Water](https://github.com/bradtraversy/50projects50days/tree/master/drink-water) | [Live Demo](https://50projects50days.com/projects/drink-water/) |
    26+
    | 17 | [Movie App](https://github.com/bradtraversy/50projects50days/tree/master/movie-app) | [Live Demo](https://50projects50days.com/projects/movie-app/) |
    27+
    | 18 | [Background Slider](https://github.com/bradtraversy/50projects50days/tree/master/background-slider) | [Live Demo](https://50projects50days.com/projects/background-slider/) |
    28+
    | 19 | [Theme Clock](https://github.com/bradtraversy/50projects50days/tree/master/theme-clock) | [Live Demo](https://50projects50days.com/projects/theme-clock/) |
    29+
    | 20 | [Button Ripple Effect](https://github.com/bradtraversy/50projects50days/tree/master/button-ripple-effect) | [Live Demo](https://50projects50days.com/projects/button-ripple-effect/) |
    30+
    | 21 | [Drag N Drop](https://github.com/bradtraversy/50projects50days/tree/master/drag-n-drop) | [Live Demo](https://50projects50days.com/projects/drag-n-drop/) |
    31+
    | 22 | [Drawing App](https://github.com/bradtraversy/50projects50days/tree/master/drawing-app) | [Live Demo](https://50projects50days.com/projects/drawing-app/) |
    32+
    | 23 | [Kinetic Loader](https://github.com/bradtraversy/50projects50days/tree/master/kinetic-loader) | [Live Demo](https://50projects50days.com/projects/kinetic-loader/) |
    33+
    | 24 | [Content Placeholder](https://github.com/bradtraversy/50projects50days/tree/master/content-placeholder) | [Live Demo](https://50projects50days.com/projects/content-placeholder/) |
    34+
    | 25 | [Sticky Navbar](https://github.com/bradtraversy/50projects50days/tree/master/sticky-navigation) | [Live Demo](https://50projects50days.com/projects/sticky-navbar/) |
    35+
    | 26 | [Double Vertical Slider](https://github.com/bradtraversy/50projects50days/tree/master/double-vertical-slider) | [Live Demo](https://50projects50days.com/projects/double-vertical-slider/) |
    36+
    | 27 | [Toast Notification](https://github.com/bradtraversy/50projects50days/tree/master/toast-notification) | [Live Demo](https://50projects50days.com/projects/toast-notification/) |
    37+
    | 28 | [Github Profiles](https://github.com/bradtraversy/50projects50days/tree/master/github-profiles) | [Live Demo](https://50projects50days.com/projects/github-profiles/) |
    38+
    | 29 | [Double Click Heart](https://github.com/bradtraversy/50projects50days/tree/master/double-click-heart) | [Live Demo](https://50projects50days.com/projects/double-click-heart/) |
    39+
    | 30 | [Auto Text Effect](https://github.com/bradtraversy/50projects50days/tree/master/auto-text-effect) | [Live Demo](https://50projects50days.com/projects/auto-text-effect/) |
    40+
    | 31 | [Password Generator](https://github.com/bradtraversy/50projects50days/tree/master/password-generator) | [Live Demo](https://50projects50days.com/projects/password-generator/) |
    41+
    | 32 | [Good Cheap Fast](https://github.com/bradtraversy/50projects50days/tree/master/good-cheap-fast) | [Live Demo](https://50projects50days.com/projects/good-cheap-fast/) |
    42+
    | 33 | [Notes App](https://github.com/bradtraversy/50projects50days/tree/master/notes-app) | [Live Demo](https://50projects50days.com/projects/notes-app/) |
    43+
    | 34 | [Animated Countdown](https://github.com/bradtraversy/50projects50days/tree/master/animated-countdown) | [Live Demo](https://50projects50days.com/projects/animated-countdown/) |
    44+
    | 35 | [Image Carousel](https://github.com/bradtraversy/50projects50days/tree/master/image-carousel) | [Live Demo](https://50projects50days.com/projects/image-carousel/) |
    45+
    | 36 | [Hoverboard](https://github.com/bradtraversy/50projects50days/tree/master/hoverboard) | [Live Demo](https://50projects50days.com/projects/hoverboard/) |
    46+
    | 37 | [Pokedex](https://github.com/bradtraversy/50projects50days/tree/master/pokedex) | [Live Demo](https://50projects50days.com/projects/pokedex/) |
    47+
    | 38 | [Mobile Tab Navigation](https://github.com/bradtraversy/50projects50days/tree/master/mobile-tab-navigation) | [Live Demo](https://50projects50days.com/projects/mobile-tab-navigation/) |
    48+
    | 39 | [Password Strength Background](https://github.com/bradtraversy/50projects50days/tree/master/password-strength-background) | [Live Demo](https://50projects50days.com/projects/password-strength-background/) |
    49+
    | 40 | [3d Background Boxes](https://github.com/bradtraversy/50projects50days/tree/master/3d-boxes-background) | [Live Demo](https://50projects50days.com/projects/3d-background-boxes/) |
    50+
    | 41 | [Verify Account Ui](https://github.com/bradtraversy/50projects50days/tree/master/verify-account-ui) | [Live Demo](https://50projects50days.com/projects/verify-account-ui/) |
    51+
    | 42 | [Live User Filter](https://github.com/bradtraversy/50projects50days/tree/master/live-user-filter) | [Live Demo](https://50projects50days.com/projects/live-user-filter/) |
    52+
    | 43 | [Feedback Ui Design](https://github.com/bradtraversy/50projects50days/tree/master/feedback-ui-design) | [Live Demo](https://50projects50days.com/projects/feedback-ui-design/) |
    53+
    | 44 | [Custom Range Slider](https://github.com/bradtraversy/50projects50days/tree/master/custom-range-slider) | [Live Demo](https://50projects50days.com/projects/custom-range-slider/) |
    54+
    | 45 | [Netflix Mobile Navigation](https://github.com/bradtraversy/50projects50days/tree/master/netflix-mobile-navigation) | [Live Demo](https://50projects50days.com/projects/netflix-mobile-navigation/) |
    55+
    | 46 | [Quiz App](https://github.com/bradtraversy/50projects50days/tree/master/quiz-app) | [Live Demo](https://50projects50days.com/projects/quiz-app/) |
    56+
    | 47 | [Testimonial Box Switcher](https://github.com/bradtraversy/50projects50days/tree/master/testimonial-box-switcher) | [Live Demo](https://50projects50days.com/projects/testimonial-box-switcher/) |
    57+
    | 48 | [Random Image Feed](https://github.com/bradtraversy/50projects50days/tree/master/random-image-generator) | [Live Demo](https://50projects50days.com/projects/random-image-feed/) |
    58+
    | 49 | [Todo List](https://github.com/bradtraversy/50projects50days/tree/master/todo-list) | [Live Demo](https://50projects50days.com/projects/todo-list/) |
    59+
    | 50 | [Insect Catch Game](https://github.com/bradtraversy/50projects50days/tree/master/insect-catch-game) | [Live Demo](https://50projects50days.com/projects/insect-catch-game/) |
    860

    9-
    [VIEW DEMO](https://devspace-blog-pearl.vercel.app)
    61+
    **NOTE ON PULL REQUESTS**: All of these projects are part of the course. While I do appreciate people trying to make some things prettier or adding new features, we are only accepting pull requests and looking at issues for bug fixes so that the code stays inline with the course
    1062

    11-
    ## Usage
    63+
    ## License
    1264

    13-
    ### Install Dependencies
    14-
    ```bash
    15-
    npm install
    16-
    ```
    65+
    The MIT License
    1766

    18-
    ### Run Dev Server (http://localhost:3000)
    19-
    ```bash
    20-
    npm run dev
    21-
    ```
    67+
    Copyright (c) 2020-2021 Traversy Media https://traversymedia.com
    2268

    23-
    ### Creating posts
    69+
    Permission is hereby granted, free of charge, to any person obtaining a copy
    70+
    of this software and associated documentation files (the "Software"), to deal
    71+
    in the Software without restriction, including without limitation the rights
    72+
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    73+
    copies of the Software, and to permit persons to whom the Software is
    74+
    furnished to do so, subject to the following conditions:
    2475

    25-
    * Create a markdown file in the "posts" folder and name it whatever you want as the slug
    26-
    * Add the frontmatter/fields at the top and then the post body. See an example in the "posts" folder of this repo
    27-
    * Add your cover image and author image in the public/images folder
    28-
    * For category color coding, edit the "Components/CategoryLabel.js" file
    76+
    The above copyright notice and this permission notice shall be included in
    77+
    all copies or substantial portions of the Software.
    2978

    30-
    ### Caching
    79+
    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    80+
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    81+
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    82+
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    83+
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    84+
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    85+
    THE SOFTWARE.
    3186

    32-
    Husky is used to run a cache script on git commit. Caching is used for the search api route/serverless function

    ‎_project_starter_/index.html

    Lines changed: 13 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,13 @@
    1+
    <!DOCTYPE html>
    2+
    <html lang="en">
    3+
    <head>
    4+
    <meta charset="UTF-8" />
    5+
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6+
    <link rel="stylesheet" href="style.css" />
    7+
    <title>My Project</title>
    8+
    </head>
    9+
    <body>
    10+
    <h1>Project Starter</h1>
    11+
    <script src="script.js"></script>
    12+
    </body>
    13+
    </html>

    ‎_project_starter_/script.js

    Lines changed: 1 addition & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1 @@
    1+

    ‎_project_starter_/style.css

    Lines changed: 16 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,16 @@
    1+
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
    2+
    3+
    * {
    4+
    box-sizing: border-box;
    5+
    }
    6+
    7+
    body {
    8+
    font-family: 'Roboto', sans-serif;
    9+
    display: flex;
    10+
    flex-direction: column;
    11+
    align-items: center;
    12+
    justify-content: center;
    13+
    height: 100vh;
    14+
    overflow: hidden;
    15+
    margin: 0;
    16+
    }

    ‎animated-countdown/index.html

    Lines changed: 28 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,28 @@
    1+
    <!DOCTYPE html>
    2+
    <html lang="en">
    3+
    <head>
    4+
    <meta charset="UTF-8" />
    5+
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6+
    <link rel="stylesheet" href="style.css" />
    7+
    <title>Animated Countdown</title>
    8+
    </head>
    9+
    <body>
    10+
    <div class="counter">
    11+
    <div class="nums">
    12+
    <span class="in">3</span>
    13+
    <span>2</span>
    14+
    <span>1</span>
    15+
    <span>0</span>
    16+
    </div>
    17+
    <h4>Get Ready</h4>
    18+
    </div>
    19+
    20+
    <div class="final">
    21+
    <h1>GO</h1>
    22+
    <button id="replay">
    23+
    <span>Replay</span>
    24+
    </button>
    25+
    </div>
    26+
    <script src="script.js"></script>
    27+
    </body>
    28+
    </html>

    ‎animated-countdown/script.js

    Lines changed: 40 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,40 @@
    1+
    const nums = document.querySelectorAll('.nums span')
    2+
    const counter = document.querySelector('.counter')
    3+
    const finalMessage = document.querySelector('.final')
    4+
    const replay = document.querySelector('#replay')
    5+
    6+
    runAnimation()
    7+
    8+
    function resetDOM() {
    9+
    counter.classList.remove('hide')
    10+
    finalMessage.classList.remove('show')
    11+
    12+
    nums.forEach((num) => {
    13+
    num.classList.value = ''
    14+
    })
    15+
    16+
    nums[0].classList.add('in')
    17+
    }
    18+
    19+
    function runAnimation() {
    20+
    nums.forEach((num, idx) => {
    21+
    const nextToLast = nums.length - 1
    22+
    23+
    num.addEventListener('animationend', (e) => {
    24+
    if (e.animationName === 'goIn' && idx !== nextToLast) {
    25+
    num.classList.remove('in')
    26+
    num.classList.add('out')
    27+
    } else if (e.animationName === 'goOut' && num.nextElementSibling) {
    28+
    num.nextElementSibling.classList.add('in')
    29+
    } else {
    30+
    counter.classList.add('hide')
    31+
    finalMessage.classList.add('show')
    32+
    }
    33+
    })
    34+
    })
    35+
    }
    36+
    37+
    replay.addEventListener('click', () => {
    38+
    resetDOM()
    39+
    runAnimation()
    40+
    })

    0 commit comments

    Comments
     (0)