Student Review - Individual Code

Key codes in the Passion Project

  • The key codes that I contributed in the “Passion Project” that can considered changing the look of the webpage.

LightSwitch

  • What the light switch does is basically changing the overall theme color and the overall text color.

HTML and CSS codes of LightSwtich

<head>
    <style>
        *{
                box-sizing: border-box;
            }
            .label{
                background-color: #111;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;
                border-radius: 50px;
                padding: 5px;
                height: 26px;
                width: 50px;
            }
            body{
                transition: background 0.14s linear;
            }
            body.dark{
                background-color: #191d2b;
            }
            .checkbox{
                opacity: 0;
                position: absolute;
            }
            .ball{
                background-color: #ffffff;
                border-radius: 50%;
                position: absolute;
                top: 2px;
                left: 2px;
                width: 22px;
                height: 22px;
                transition: transform 0.15s linear;
            }
            .checkbox:checked + .label .ball {
                transform: translateX(24px);
            }
            .fa-moon{
                color: #f1c40f;
            }
            .fa-sun{
                color: #f39c12;
            }
            .light-text{
                color: #3A3B3C;
            }
            .dark-text{ 
                color: #CCCCCC;
            }
    </style>
</head>
        <body>
            <div>
                <input type="checkbox"
                    class="checkbox" id="checkbox" >
            <label for="checkbox" class="label">
                <i class="fas fa-moon"></i>
                <i class="fas fa-sun"></i>
                <div class="ball"></div>
            </label>
            </div>
        </body>

Javascript codes of LightSwtich

const checkbox = document.getElementById('checkbox');
const textElements = document.querySelectorAll('.p1, .p2, h1');
checkbox.addEventListener('change', () => {
document.body.classList.toggle('dark');
//change the overall theme color.
textElements.forEach((element) => {
element.classList.toggle('dark-text');
element.classList.toggle('light-text');
//change the overall text color.
});
});

##### This codes(LightSwitch) does being a key part to the project

  • First, it reduces eye strain - dark mode reduces the amount of bright light emitted by screens, which can be particularly helpful in low-light environments.
  • Second, it improved readability.
  • Lastly, the aesthetically pleasing - many users find dark mode visually appealing, and it can give websites a modern and stylish look.

Customized Button

  • A button that is not default. Meaning that it’s being cutomized and making the webpage look nicer.

HTML and CSS codes of Customized Button

<head>
    <style>.a {
        position: relative;
        padding: 13px 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.5);
        margin: 10px;
        transition: 1s;
        text-decoration: none;
        overflow: hidden;
        -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #0004);
    }
    .a:hover {
        background: var(--clr);
        box-shadow: 0 0 10px var(--clr), 0 0 30px var(--clr);
    }
    .a::before {
        content: '';
        position: absolute;
        width: 40px;
        height: 420%;
        background: var(--clr);
        transition: 1s;
        animation: animate 2s linear infinite;
        animation-delay: calc(0.33s * var(--i));
    }
    .a:hover::before {
        width: 1200%;
    }
    @keyframes animate {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    .a::after {
        content: '';
        position: absolute;
        inset: 4px;
        background: #011e41;
    }
    .a:hover::after {
        background: var(--clr);
    }
    .a span {
        position: relative;
        z-index: 1;
        font-size: 2em;
        color: #ffcf01;
        font-family: 'IBM Plex Sans Hebrew', monospace;
        opacity: 0.7;
        text-transform: uppercase;
        letter-spacing: 4px;
        transition: 0.5s;
    }
    .a:hover span {
        opacity: 1;
    }
    </style>
</head>

<body>
    <div style="--clr: 	#6da7d9;--i:0;">
        <button id="manipulateButton" class="a"><a href="#"><span><strong>Pixelate!</strong></span></a></button>
    </div>
</body>

##### This codes(Customized Button) does being a key part to the project

  • The User Experience is what I was trying to achieve by using the Customized Button. This is because customized buttons enhance the overall user experience by making the website more visually appealing and user-friendly. A well-designed button is more engaging and encourages users to take action.