Skip to content

JavaScript Dark And Night Text

HTML AND JS CODE:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>night-light</title>
    <link rel="stylesheet" type="text/css" href="night-light.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>

    <div class="text"></div>
    <div class="content">
        <h1>What is the Lorem Ipsum?</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempor pretium dignissim.
            Sed posuere sem eu metus elementum, cursus tincidunt nisl finibus. Aliquam eget orci ante.
            Curabitur at odio nec dolor finibus mattis non at velit. Curabitur ac hendrerit sem. Mauris
            in nisi quis ipsum lacinia tempor feugiat non magna. Phasellus cursus magna non lobortis maximus.
            Nulla dapibus suscipit risus vel venenatis. In ac justo id purus egestas lacinia. Mauris sed mi a
            metus maximus condimentum vel ultricies leo. Orci varius natoque penatibus et magnis dis parturient
            montes, nascetur ridiculus mus. In nec tellus luctus diam vehicula imperdiet.
            Proin sit amet faucibus leo, ac tristique risus. Duis mollis magna dui, ac iaculis lorem mollis et.
            Vivamus non egestas arcu. Curabitur a mauris interdum velit aliquam tempus. Suspendisse lobortis laoreet
            mauris non laoreet. Etiam accumsan a eros a pellentesque. Mauris rutrum enim leo, id mattis justo suscipit
            sed. Aenean quam leo, dictum at posuere in, dictum sed dolor. Cras at lobortis diam. Maecenas blandit mauris
            magna, eget tempor justo ultricies in. Nullam non ante odio. Fusce accumsan fermentum velit, sit amet
            imperdiet urna finibus non. Fusce a lacus magna. Sed sit amet velit arcu. Nunc dictum urna eu turpis
            rutrum, eu ultrices tellus sollicitudin.
            Maecenas eleifend id dolor ac lobortis. Curabitur nisi metus, hendrerit at ultricies non, molestie quis
            dui. Aenean tempus nunc ac ligula vestibulum, lacinia elementum dolor maximus. Nullam aliquam tellus sed
            finibus interdum. Donec magna magna, porttitor et ligula commodo, maximus ornare odio. Fusce a magna dolor.
            Suspendisse pulvinar consectetur rutrum. In hendrerit fermentum libero, in vehicula libero rutrum in.
            Quisque pharetra vehicula justo id viverra. Aliquam semper lacus non quam pulvinar vestibulum. Etiam ac
            cursus enim, sit amet mattis arcu. Etiam pretium eu velit vel condimentum. Quisque dapibus aliquam aliquam.
        </p>
    </div>
    

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function(){
            $('.text').click(function(){
                $('.text').toggleClass('active')
                $('body').toggleClass('night')
            })
        })
    </script>
    
</body>
</html>

CSS CODE:

body{
    margin:0;
    padding:0;
    font-family:sans-serif;
    transition:.5s;
}
body.night{
    background:#00151f;
}
.text{
    position:absolute;
    top:40px;
    right:50px;
    background:#fff;
    border:2px solid #00151f;
    width:45px;
    height:20px;
    cursor:pointer;
    border-radius:20px;
    transition:.5s;
}
.text:before{
    content:"";
    position:absolute;
    top:2px;
    left:2px;
    width:16px;
    height:16px;
    background:#00151f;
    border-radius:50%;
    transition:.5s;
}
.text.active:before{
    left:27px;
    background:#fff;
}
.text.active{
    background:#00151f;
    border:2px solid #fff;
}
.content{
    margin:200px auto;
    width:1000px;
}
.content h1{
    margin:0 0 20px;
    padding:0;
    color:#000;
    transition:.5s;
    font-size:30px;
}
.content p{
    margin:0;
    padding:0;
    transition:.5s;
    font-size:18px;
}
body.night .content h1,
body.night .content p{
    color: #fff;
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: