Lara Baldwin

Lara Baldwin

1629685124

How to Create a Circular Scroll Progress with HTML, CSS & JavaScript

In this tutorial, we'll learn how to create a circular scroll progress indicator with HTML, CSS & JavaScript. A scroll indicator denotes the percentage of a webpage that has been scrolled with HTML, CSS & JavaScript

For this tutorial, we create a circular scroll indicator that we will place in the bottom right corner of the webpage. The fill in indicator will correspond to the amount of page scrolled.

Project Folder Structure:

Letโ€™s check out the project folder structure. We have a project folder called Scroll Percentage. Inside this folder, we have three files. The first is โ€“ index.html. The second is the stylesheet โ€“ style.css and the Third is the script script.js.

HTML:

Coming to the HTML section, copy the code below and paste it into your HTML section.
The HTML section consists of some demo text. Next, we have a div with id progress. Within this div, there is a span element with id progress-value.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Scroll Percentage</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="progress">
        <span id="progress-value"></span>
    </div>

    <h1>SCROLL PERCENTAGE</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non quaerat saepe excepturi repudiandae! Dolores sint vel quae quasi in! Architecto, excepturi reiciendis. Deleniti tempore ut illo culpa vel eius impedit inventore sed illum vitae. Nam possimus minus eum laudantium quibusdam porro, assumenda cupiditate. Voluptatem quas blanditiis vel quasi quia necessitatibus, cupiditate corporis aperiam voluptatum consectetur natus? Sequi molestiae at cumque assumenda, ea magni earum. A, commodi quasi. Consequuntur temporibus accusantium rem praesentium non error repellendus, hic quos libero tenetur provident sunt vel ducimus voluptatibus, culpa enim! Non quasi ex error eveniet iure odio architecto soluta, eius itaque similique amet, eos tenetur! Totam voluptas expedita eum voluptatem maiores perspiciatis impedit error, cupiditate esse ut aperiam non illo saepe quod autem id harum dolorem unde, soluta ipsa! Maiores rerum tempore doloribus voluptas eveniet rem sapiente dolores quod eius. Expedita, amet rem, ex libero recusandae veniam harum, tempore architecto quas maiores sit minus.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non quaerat saepe excepturi repudiandae! Dolores sint vel quae quasi in! Architecto, excepturi reiciendis. Deleniti tempore ut illo culpa vel eius impedit inventore sed illum vitae. Nam possimus minus eum laudantium quibusdam porro, assumenda cupiditate. Voluptatem quas blanditiis vel quasi quia necessitatibus, cupiditate corporis aperiam voluptatum consectetur natus? Sequi molestiae at cumque assumenda, ea magni earum. A, commodi quasi. Consequuntur temporibus accusantium rem praesentium non error repellendus, hic quos libero tenetur provident sunt vel ducimus voluptatibus, culpa enim! Non quasi ex error eveniet iure odio architecto soluta, eius itaque similique amet, eos tenetur! Totam voluptas expedita eum voluptatem maiores perspiciatis impedit error, cupiditate esse ut aperiam non illo saepe quod autem id harum dolorem unde, soluta ipsa! Maiores rerum tempore doloribus voluptas eveniet rem sapiente dolores quod eius. Expedita, amet rem, ex libero recusandae veniam harum, tempore architecto quas maiores sit minus.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non quaerat saepe excepturi repudiandae! Dolores sint vel quae quasi in! Architecto, excepturi reiciendis. Deleniti tempore ut illo culpa vel eius impedit inventore sed illum vitae. Nam possimus minus eum laudantium quibusdam porro, assumenda cupiditate. Voluptatem quas blanditiis vel quasi quia necessitatibus, cupiditate corporis aperiam voluptatum consectetur natus? Sequi molestiae at cumque assumenda, ea magni earum. A, commodi quasi. Consequuntur temporibus accusantium rem praesentium non error repellendus, hic quos libero tenetur provident sunt vel ducimus voluptatibus, culpa enim! Non quasi ex error eveniet iure odio architecto soluta, eius itaque similique amet, eos tenetur! Totam voluptas expedita eum voluptatem maiores perspiciatis impedit error, cupiditate esse ut aperiam non illo saepe quod autem id harum dolorem unde, soluta ipsa! Maiores rerum tempore doloribus voluptas eveniet rem sapiente dolores quod eius. Expedita, amet rem, ex libero recusandae veniam harum, tempore architecto quas maiores sit minus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam natus ex, molestias quis, aut veritatis similique exercitationem iure magni nobis iusto quaerat explicabo dolores et. Optio quis eum itaque deserunt, sapiente quasi asperiores, voluptatum doloribus aspernatur iusto vero velit tempora animi, labore hic corporis unde voluptates architecto odit ipsum neque laborum eius ea. Vitae error voluptatum tempore assumenda dolorum. Odit deserunt nihil saepe, ullam fuga minima eum, recusandae soluta atque autem porro expedita cum ipsum quasi sit quae dolorum reiciendis ducimus quia odio blanditiis provident dignissimos! Quas facilis dolorum assumenda voluptates dolores, cum tempora voluptatum non ducimus. Animi optio corrupti ipsam, corporis similique nostrum ea dolores aut perferendis minus rerum neque at sit veritatis eos cumque voluptas, velit dignissimos nam fugit. Possimus vel eius expedita a animi tempore pariatur molestiae quod accusantium totam doloremque repellendus incidunt dolorum reiciendis assumenda, in quaerat nisi corrupti culpa voluptas obcaecati, cupiditate itaque minima aspernatur! Sit, blanditiis quae, recusandae rerum quod soluta qui eaque sed, harum labore id tempore accusantium hic provident nisi libero odit ea distinctio aspernatur corrupti et sint odio. Ipsam suscipit nobis animi iure est minima assumenda inventore asperiores maiores iusto. Quibusdam eveniet enim dolore tenetur suscipit fuga, quod eum pariatur magni?</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima repellendus quas perferendis non corporis, quam saepe est suscipit tenetur sed placeat id qui enim ullam at, eius perspiciatis quisquam. Quisquam maiores ullam fuga libero esse ad alias dignissimos natus eum inventore adipisci nesciunt vero harum nihil, voluptatum magnam possimus voluptates dicta itaque, sequi accusantium, voluptatibus minima sit necessitatibus. Perspiciatis nam autem consectetur neque natus exercitationem expedita? Aut quaerat a quos, rem in consectetur modi pariatur, harum qui temporibus repellendus totam commodi enim mollitia! Magnam fugit eaque ex, vel pariatur soluta delectus? Eaque quisquam iusto inventore natus optio, asperiores voluptas consequuntur nostrum nesciunt quidem velit earum. Dolor, ratione eveniet optio quam, ipsum reiciendis eum delectus quasi omnis excepturi non unde quisquam soluta maiores et? Provident excepturi voluptatum quidem sunt et perspiciatis. Qui, error? Temporibus quae laudantium possimus minima id consequuntur iusto quo ea, nisi doloribus dignissimos hic voluptatibus, illum magni! Vero quia necessitatibus cupiditate vitae voluptatem minima fugiat, quas non atque porro. Tenetur, esse illo iure rem vel eum hic aliquam non explicabo officiis atque magni velit beatae expedita perspiciatis repellat.</p>
    <!--Script-->
    <script src="script.js"></script>
</body>
</html>

CSS:

Next, we code the CSS section. Copy the code provided below and paste it into your stylesheet.

We apply some basic styles to the demo text. In the next step, we set the height and width of the progress div. We make it circular by adding a border radius of 50%. Also, we position it at a fixed place that is 25px from the bottom and 25px from the right. To make it stand out from the rest of the page we add some box shadow to it. Lastly, we centre the span element inside the progress by using the grid layout.

We set the display of progress-value to block. The progress-value span should be smaller than the progress div. Hence, we subtract 20px from the progress div.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins",sans-serif;
}
h1{
    color: #008fff;
    font-size: 15vmin;
    text-align: center;
    padding: 30px 0;
}
p{
    font-size: 3vmin;
    line-height: 2em;
    letter-spacing: 0.05em;
    text-align: justify;
    margin: 50px 0;
    padding: 0 30px;
}
#progress{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    position: fixed;
    bottom: 25px;
    right: 25px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    display: grid;
    place-items: center;
}
#progress-value{
    display: block;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    background-color: #ffffff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 20px;
}

Javascript:

We add an on scroll event to the document window. When the document is scroll the scrollPercentage() is triggered.

We get the progress and progress-value element and assign them to variables. Further, we assign the scroll position from the top of the document to the pos variable. Now using the pos value we calculate the scroll value in terms of percentage.

We display its value inside the progress value. Also, we use this same value to fill the conic gradient. This way when you scroll it looks like the circular progress bar is getting filled. Your circular scroll progress indicator is now ready.

let scrollPercentage = () => {
    let scrollProgress = document.getElementById("progress");
    let progressValue = document.getElementById("progress-value");
    let pos = document.documentElement.scrollTop;
    let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    let scrollValue = Math.round( pos * 100 / calcHeight);

    scrollProgress.style.background = `conic-gradient(#008fff ${scrollValue}%, #c0c0ff ${scrollValue}%)`;
    progressValue.textContent = `${scrollValue}%`;
}

window.onscroll = scrollPercentage;
window.onload = scrollPercentage;

๐Ÿ“ Download Source Code : https://codingartistweb.com

Subscribe: https://www.youtube.com/c/CodingArtist/featured 

#html #css #javascript 

What is GEEK

Buddha Community

How to Create a Circular Scroll Progress with HTML, CSS & JavaScript
Easter  Deckow

Easter Deckow

1655630160

PyTumblr: A Python Tumblr API v2 Client

PyTumblr

Installation

Install via pip:

$ pip install pytumblr

Install from source:

$ git clone https://github.com/tumblr/pytumblr.git
$ cd pytumblr
$ python setup.py install

Usage

Create a client

A pytumblr.TumblrRestClient is the object you'll make all of your calls to the Tumblr API through. Creating one is this easy:

client = pytumblr.TumblrRestClient(
    '<consumer_key>',
    '<consumer_secret>',
    '<oauth_token>',
    '<oauth_secret>',
)

client.info() # Grabs the current user information

Two easy ways to get your credentials to are:

  1. The built-in interactive_console.py tool (if you already have a consumer key & secret)
  2. The Tumblr API console at https://api.tumblr.com/console
  3. Get sample login code at https://api.tumblr.com/console/calls/user/info

Supported Methods

User Methods

client.info() # get information about the authenticating user
client.dashboard() # get the dashboard for the authenticating user
client.likes() # get the likes for the authenticating user
client.following() # get the blogs followed by the authenticating user

client.follow('codingjester.tumblr.com') # follow a blog
client.unfollow('codingjester.tumblr.com') # unfollow a blog

client.like(id, reblogkey) # like a post
client.unlike(id, reblogkey) # unlike a post

Blog Methods

client.blog_info(blogName) # get information about a blog
client.posts(blogName, **params) # get posts for a blog
client.avatar(blogName) # get the avatar for a blog
client.blog_likes(blogName) # get the likes on a blog
client.followers(blogName) # get the followers of a blog
client.blog_following(blogName) # get the publicly exposed blogs that [blogName] follows
client.queue(blogName) # get the queue for a given blog
client.submission(blogName) # get the submissions for a given blog

Post Methods

Creating posts

PyTumblr lets you create all of the various types that Tumblr supports. When using these types there are a few defaults that are able to be used with any post type.

The default supported types are described below.

  • state - a string, the state of the post. Supported types are published, draft, queue, private
  • tags - a list, a list of strings that you want tagged on the post. eg: ["testing", "magic", "1"]
  • tweet - a string, the string of the customized tweet you want. eg: "Man I love my mega awesome post!"
  • date - a string, the customized GMT that you want
  • format - a string, the format that your post is in. Support types are html or markdown
  • slug - a string, the slug for the url of the post you want

We'll show examples throughout of these default examples while showcasing all the specific post types.

Creating a photo post

Creating a photo post supports a bunch of different options plus the described default options * caption - a string, the user supplied caption * link - a string, the "click-through" url for the photo * source - a string, the url for the photo you want to use (use this or the data parameter) * data - a list or string, a list of filepaths or a single file path for multipart file upload

#Creates a photo post using a source URL
client.create_photo(blogName, state="published", tags=["testing", "ok"],
                    source="https://68.media.tumblr.com/b965fbb2e501610a29d80ffb6fb3e1ad/tumblr_n55vdeTse11rn1906o1_500.jpg")

#Creates a photo post using a local filepath
client.create_photo(blogName, state="queue", tags=["testing", "ok"],
                    tweet="Woah this is an incredible sweet post [URL]",
                    data="/Users/johnb/path/to/my/image.jpg")

#Creates a photoset post using several local filepaths
client.create_photo(blogName, state="draft", tags=["jb is cool"], format="markdown",
                    data=["/Users/johnb/path/to/my/image.jpg", "/Users/johnb/Pictures/kittens.jpg"],
                    caption="## Mega sweet kittens")

Creating a text post

Creating a text post supports the same options as default and just a two other parameters * title - a string, the optional title for the post. Supports markdown or html * body - a string, the body of the of the post. Supports markdown or html

#Creating a text post
client.create_text(blogName, state="published", slug="testing-text-posts", title="Testing", body="testing1 2 3 4")

Creating a quote post

Creating a quote post supports the same options as default and two other parameter * quote - a string, the full text of the qote. Supports markdown or html * source - a string, the cited source. HTML supported

#Creating a quote post
client.create_quote(blogName, state="queue", quote="I am the Walrus", source="Ringo")

Creating a link post

  • title - a string, the title of post that you want. Supports HTML entities.
  • url - a string, the url that you want to create a link post for.
  • description - a string, the desciption of the link that you have
#Create a link post
client.create_link(blogName, title="I like to search things, you should too.", url="https://duckduckgo.com",
                   description="Search is pretty cool when a duck does it.")

Creating a chat post

Creating a chat post supports the same options as default and two other parameters * title - a string, the title of the chat post * conversation - a string, the text of the conversation/chat, with diablog labels (no html)

#Create a chat post
chat = """John: Testing can be fun!
Renee: Testing is tedious and so are you.
John: Aw.
"""
client.create_chat(blogName, title="Renee just doesn't understand.", conversation=chat, tags=["renee", "testing"])

Creating an audio post

Creating an audio post allows for all default options and a has 3 other parameters. The only thing to keep in mind while dealing with audio posts is to make sure that you use the external_url parameter or data. You cannot use both at the same time. * caption - a string, the caption for your post * external_url - a string, the url of the site that hosts the audio file * data - a string, the filepath of the audio file you want to upload to Tumblr

#Creating an audio file
client.create_audio(blogName, caption="Rock out.", data="/Users/johnb/Music/my/new/sweet/album.mp3")

#lets use soundcloud!
client.create_audio(blogName, caption="Mega rock out.", external_url="https://soundcloud.com/skrillex/sets/recess")

Creating a video post

Creating a video post allows for all default options and has three other options. Like the other post types, it has some restrictions. You cannot use the embed and data parameters at the same time. * caption - a string, the caption for your post * embed - a string, the HTML embed code for the video * data - a string, the path of the file you want to upload

#Creating an upload from YouTube
client.create_video(blogName, caption="Jon Snow. Mega ridiculous sword.",
                    embed="http://www.youtube.com/watch?v=40pUYLacrj4")

#Creating a video post from local file
client.create_video(blogName, caption="testing", data="/Users/johnb/testing/ok/blah.mov")

Editing a post

Updating a post requires you knowing what type a post you're updating. You'll be able to supply to the post any of the options given above for updates.

client.edit_post(blogName, id=post_id, type="text", title="Updated")
client.edit_post(blogName, id=post_id, type="photo", data="/Users/johnb/mega/awesome.jpg")

Reblogging a Post

Reblogging a post just requires knowing the post id and the reblog key, which is supplied in the JSON of any post object.

client.reblog(blogName, id=125356, reblog_key="reblog_key")

Deleting a post

Deleting just requires that you own the post and have the post id

client.delete_post(blogName, 123456) # Deletes your post :(

A note on tags: When passing tags, as params, please pass them as a list (not a comma-separated string):

client.create_text(blogName, tags=['hello', 'world'], ...)

Getting notes for a post

In order to get the notes for a post, you need to have the post id and the blog that it is on.

data = client.notes(blogName, id='123456')

The results include a timestamp you can use to make future calls.

data = client.notes(blogName, id='123456', before_timestamp=data["_links"]["next"]["query_params"]["before_timestamp"])

Tagged Methods

# get posts with a given tag
client.tagged(tag, **params)

Using the interactive console

This client comes with a nice interactive console to run you through the OAuth process, grab your tokens (and store them for future use).

You'll need pyyaml installed to run it, but then it's just:

$ python interactive-console.py

and away you go! Tokens are stored in ~/.tumblr and are also shared by other Tumblr API clients like the Ruby client.

Running tests

The tests (and coverage reports) are run with nose, like this:

python setup.py test

Author: tumblr
Source Code: https://github.com/tumblr/pytumblr
License: Apache-2.0 license

#python #api 

Lara Baldwin

Lara Baldwin

1629685124

How to Create a Circular Scroll Progress with HTML, CSS & JavaScript

In this tutorial, we'll learn how to create a circular scroll progress indicator with HTML, CSS & JavaScript. A scroll indicator denotes the percentage of a webpage that has been scrolled with HTML, CSS & JavaScript

For this tutorial, we create a circular scroll indicator that we will place in the bottom right corner of the webpage. The fill in indicator will correspond to the amount of page scrolled.

Project Folder Structure:

Letโ€™s check out the project folder structure. We have a project folder called Scroll Percentage. Inside this folder, we have three files. The first is โ€“ index.html. The second is the stylesheet โ€“ style.css and the Third is the script script.js.

HTML:

Coming to the HTML section, copy the code below and paste it into your HTML section.
The HTML section consists of some demo text. Next, we have a div with id progress. Within this div, there is a span element with id progress-value.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Scroll Percentage</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="progress">
        <span id="progress-value"></span>
    </div>

    <h1>SCROLL PERCENTAGE</h1>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non quaerat saepe excepturi repudiandae! Dolores sint vel quae quasi in! Architecto, excepturi reiciendis. Deleniti tempore ut illo culpa vel eius impedit inventore sed illum vitae. Nam possimus minus eum laudantium quibusdam porro, assumenda cupiditate. Voluptatem quas blanditiis vel quasi quia necessitatibus, cupiditate corporis aperiam voluptatum consectetur natus? Sequi molestiae at cumque assumenda, ea magni earum. A, commodi quasi. Consequuntur temporibus accusantium rem praesentium non error repellendus, hic quos libero tenetur provident sunt vel ducimus voluptatibus, culpa enim! Non quasi ex error eveniet iure odio architecto soluta, eius itaque similique amet, eos tenetur! Totam voluptas expedita eum voluptatem maiores perspiciatis impedit error, cupiditate esse ut aperiam non illo saepe quod autem id harum dolorem unde, soluta ipsa! Maiores rerum tempore doloribus voluptas eveniet rem sapiente dolores quod eius. Expedita, amet rem, ex libero recusandae veniam harum, tempore architecto quas maiores sit minus.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non quaerat saepe excepturi repudiandae! Dolores sint vel quae quasi in! Architecto, excepturi reiciendis. Deleniti tempore ut illo culpa vel eius impedit inventore sed illum vitae. Nam possimus minus eum laudantium quibusdam porro, assumenda cupiditate. Voluptatem quas blanditiis vel quasi quia necessitatibus, cupiditate corporis aperiam voluptatum consectetur natus? Sequi molestiae at cumque assumenda, ea magni earum. A, commodi quasi. Consequuntur temporibus accusantium rem praesentium non error repellendus, hic quos libero tenetur provident sunt vel ducimus voluptatibus, culpa enim! Non quasi ex error eveniet iure odio architecto soluta, eius itaque similique amet, eos tenetur! Totam voluptas expedita eum voluptatem maiores perspiciatis impedit error, cupiditate esse ut aperiam non illo saepe quod autem id harum dolorem unde, soluta ipsa! Maiores rerum tempore doloribus voluptas eveniet rem sapiente dolores quod eius. Expedita, amet rem, ex libero recusandae veniam harum, tempore architecto quas maiores sit minus.</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non quaerat saepe excepturi repudiandae! Dolores sint vel quae quasi in! Architecto, excepturi reiciendis. Deleniti tempore ut illo culpa vel eius impedit inventore sed illum vitae. Nam possimus minus eum laudantium quibusdam porro, assumenda cupiditate. Voluptatem quas blanditiis vel quasi quia necessitatibus, cupiditate corporis aperiam voluptatum consectetur natus? Sequi molestiae at cumque assumenda, ea magni earum. A, commodi quasi. Consequuntur temporibus accusantium rem praesentium non error repellendus, hic quos libero tenetur provident sunt vel ducimus voluptatibus, culpa enim! Non quasi ex error eveniet iure odio architecto soluta, eius itaque similique amet, eos tenetur! Totam voluptas expedita eum voluptatem maiores perspiciatis impedit error, cupiditate esse ut aperiam non illo saepe quod autem id harum dolorem unde, soluta ipsa! Maiores rerum tempore doloribus voluptas eveniet rem sapiente dolores quod eius. Expedita, amet rem, ex libero recusandae veniam harum, tempore architecto quas maiores sit minus.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam natus ex, molestias quis, aut veritatis similique exercitationem iure magni nobis iusto quaerat explicabo dolores et. Optio quis eum itaque deserunt, sapiente quasi asperiores, voluptatum doloribus aspernatur iusto vero velit tempora animi, labore hic corporis unde voluptates architecto odit ipsum neque laborum eius ea. Vitae error voluptatum tempore assumenda dolorum. Odit deserunt nihil saepe, ullam fuga minima eum, recusandae soluta atque autem porro expedita cum ipsum quasi sit quae dolorum reiciendis ducimus quia odio blanditiis provident dignissimos! Quas facilis dolorum assumenda voluptates dolores, cum tempora voluptatum non ducimus. Animi optio corrupti ipsam, corporis similique nostrum ea dolores aut perferendis minus rerum neque at sit veritatis eos cumque voluptas, velit dignissimos nam fugit. Possimus vel eius expedita a animi tempore pariatur molestiae quod accusantium totam doloremque repellendus incidunt dolorum reiciendis assumenda, in quaerat nisi corrupti culpa voluptas obcaecati, cupiditate itaque minima aspernatur! Sit, blanditiis quae, recusandae rerum quod soluta qui eaque sed, harum labore id tempore accusantium hic provident nisi libero odit ea distinctio aspernatur corrupti et sint odio. Ipsam suscipit nobis animi iure est minima assumenda inventore asperiores maiores iusto. Quibusdam eveniet enim dolore tenetur suscipit fuga, quod eum pariatur magni?</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima repellendus quas perferendis non corporis, quam saepe est suscipit tenetur sed placeat id qui enim ullam at, eius perspiciatis quisquam. Quisquam maiores ullam fuga libero esse ad alias dignissimos natus eum inventore adipisci nesciunt vero harum nihil, voluptatum magnam possimus voluptates dicta itaque, sequi accusantium, voluptatibus minima sit necessitatibus. Perspiciatis nam autem consectetur neque natus exercitationem expedita? Aut quaerat a quos, rem in consectetur modi pariatur, harum qui temporibus repellendus totam commodi enim mollitia! Magnam fugit eaque ex, vel pariatur soluta delectus? Eaque quisquam iusto inventore natus optio, asperiores voluptas consequuntur nostrum nesciunt quidem velit earum. Dolor, ratione eveniet optio quam, ipsum reiciendis eum delectus quasi omnis excepturi non unde quisquam soluta maiores et? Provident excepturi voluptatum quidem sunt et perspiciatis. Qui, error? Temporibus quae laudantium possimus minima id consequuntur iusto quo ea, nisi doloribus dignissimos hic voluptatibus, illum magni! Vero quia necessitatibus cupiditate vitae voluptatem minima fugiat, quas non atque porro. Tenetur, esse illo iure rem vel eum hic aliquam non explicabo officiis atque magni velit beatae expedita perspiciatis repellat.</p>
    <!--Script-->
    <script src="script.js"></script>
</body>
</html>

CSS:

Next, we code the CSS section. Copy the code provided below and paste it into your stylesheet.

We apply some basic styles to the demo text. In the next step, we set the height and width of the progress div. We make it circular by adding a border radius of 50%. Also, we position it at a fixed place that is 25px from the bottom and 25px from the right. To make it stand out from the rest of the page we add some box shadow to it. Lastly, we centre the span element inside the progress by using the grid layout.

We set the display of progress-value to block. The progress-value span should be smaller than the progress div. Hence, we subtract 20px from the progress div.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins",sans-serif;
}
h1{
    color: #008fff;
    font-size: 15vmin;
    text-align: center;
    padding: 30px 0;
}
p{
    font-size: 3vmin;
    line-height: 2em;
    letter-spacing: 0.05em;
    text-align: justify;
    margin: 50px 0;
    padding: 0 30px;
}
#progress{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    position: fixed;
    bottom: 25px;
    right: 25px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    display: grid;
    place-items: center;
}
#progress-value{
    display: block;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    background-color: #ffffff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 20px;
}

Javascript:

We add an on scroll event to the document window. When the document is scroll the scrollPercentage() is triggered.

We get the progress and progress-value element and assign them to variables. Further, we assign the scroll position from the top of the document to the pos variable. Now using the pos value we calculate the scroll value in terms of percentage.

We display its value inside the progress value. Also, we use this same value to fill the conic gradient. This way when you scroll it looks like the circular progress bar is getting filled. Your circular scroll progress indicator is now ready.

let scrollPercentage = () => {
    let scrollProgress = document.getElementById("progress");
    let progressValue = document.getElementById("progress-value");
    let pos = document.documentElement.scrollTop;
    let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    let scrollValue = Math.round( pos * 100 / calcHeight);

    scrollProgress.style.background = `conic-gradient(#008fff ${scrollValue}%, #c0c0ff ${scrollValue}%)`;
    progressValue.textContent = `${scrollValue}%`;
}

window.onscroll = scrollPercentage;
window.onload = scrollPercentage;

๐Ÿ“ Download Source Code : https://codingartistweb.com

Subscribe: https://www.youtube.com/c/CodingArtist/featured 

#html #css #javascript 

Sean Wade

Sean Wade

1657785244

How to Create a Custom Video Player with HTML, CSS & Javascript

Create a custom video player using HTML, CSS and Javascript.

In todayโ€™s tutorial, we will learn how to create a Custom Video Player. To build this project, we need HTML, CSS and Javascript.

00:00 Intro
00:05 Preview
02:58 HTML & CSS
35:26 Step 1: Create Initial References
45:46 Step 2: Implement slider() For Volume
51:33 Step 3: Detect Device Type
57:27 Step 4: Implement Functionality For Play & Pause Button
01:03:04 Step 5: Hide/ Show Playback Speed Options
01:08:47 Step 6: Function To Set Playback Speed.
01:12:59 Step 7: Function To Mute Video
01:18:24 Step 8: Function To Set Volume
01:24:55 Step 9: Function To Set Fullscreen
01:31:47 Step 10: Function To Exit Fullscreen
01:40:08 Step 11: Function To Format Current Time & Total Time
01:44:46 Step 12: Function To Update Progress & Timer
01:50:13 Step 13: Implement Click Event On Progress Bar
01:57:26 Step 14: Function On Window Load


Project Folder Structure:

Before we start coding let us take a look at the project folder structure. We create a project folder called โ€“ โ€˜Custom Video Playerโ€™. Inside this folder, we have three files. The first file is index.html which is the HTML document. Next, we have style.css which is the stylesheet. Finally, we have script.js which is the script file.

HTML:

We start with the HTML code. First, copy the code below and paste it into your HTML document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom Video Player</title>
    <!-- Font Awesome Icons -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
    />
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="rotate-container hide">
        <div id="rotate-icon">
          <i class="fa-solid fa-rotate-left"></i>
          <p>Rotate for a better experience</p>
        </div>
      </div>
      <div class="video-container" id="video-container">
        <video id="my-video" preload="metadata">
          <source
            src="https://dl.dropbox.com/s/l90y72zm97ayzhx/my%20video.mp4?raw=1"
            type="video/mp4"
          />
          Your browser does not support the video tag
        </video>
        <div class="controls" id="controls">
          <div class="progress-container flex-space">
            <div id="progress-bar">
              <div id="current-progress"></div>
            </div>
            <div class="song-timer">
              <span id="current-time">00:00</span>
              <span>/</span>
              <span id="max-duration">00:00</span>
            </div>
          </div>
          <div id="video-controls" class="video-controls flex-space">
            <div class="container-1 flex">
              <div>
                <!-- Play video -->
                <button id="play-btn" class="control-btn">
                  <i class="fa-solid fa-play"></i>
                </button>
                <!-- Pause video-->
                <button id="pauseButton" class="control-btn hide">
                  <i class="fa-solid fa-pause"></i>
                </button>
              </div>
              <!-- volume of video-->
              <div id="volume" class="volume flex">
                <span id="high">
                  <i class="fa-solid fa-volume-high"></i>
                </span>
                <span class="hide" id="low">
                  <i class="fa-solid fa-volume-low"></i>
                </span>
                <span class="hide" id="mute">
                  <i class="fa-solid fa-volume-xmark"></i>
                </span>
                <input
                  type="range"
                  min="0"
                  max="100"
                  value="50"
                  id="volume-range"
                  oninput="slider()"
                />
                <span id="volume-num">50</span>
              </div>
            </div>
            <div class="container-2 flex-space">
              <div class="playback">
                <button id="playback-speed-btn">1x</button>
                <div class="playback-options hide">
                  <button onclick="setPlayback(0.5)">0.5</button>
                  <button onclick="setPlayback(1.0)">1</button>
                  <button onclick="setPlayback(2.0)">2</button>
                </div>
              </div>
              <!-- screen size -->
              <div id="size-screen">
                <button id="screen-expand">
                  <i class="fa-solid fa-expand"></i>
                </button>
                <button id="screen-compress" class="hide">
                  <i class="fa-solid fa-compress"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS:

Next, we style our video player using CSS. For this copy, the code provided to you below and paste it into your stylesheet.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: none;
  color: #ffffff;
  font-family: "Roboto Mono", monospace;
}
body {
  background-color: #2887e3;
}
.flex {
  display: flex;
}
.flex-space {
  display: flex;
  justify-content: space-between;
}
.container {
  padding: 1em 0;
}
#my-video {
  width: 100%;
}
.rotate-container {
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}
#rotate-icon {
  display: flex;
  flex-direction: column;
  color: #dddddd;
  text-align: center;
}
.hide {
  display: none;
}
.video-container {
  width: 60%;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  box-shadow: 20px 30px 50px rgba(0, 0, 0, 0.2);
}
.controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(35, 34, 39, 0.8);
}
.progress-container {
  align-items: center;
  padding: 0 0.5em;
}
.video-controls {
  flex-direction: row;
  align-items: center;
}
#progress-bar {
  position: relative;
  width: 75%;
  height: 5px;
  background-color: #000000;
  margin: 1em 0;
  vertical-align: 2px;
  border-radius: 5px;
  cursor: pointer;
}
.song-timer {
  font-size: 0.8em;
  width: 25%;
  text-align: right;
}
#current-progress {
  position: absolute;
  left: 0;
  display: inline-block;
  height: 5px;
  width: 0;
  background: #2887e3;
  border-radius: 5px;
}
#current-progress:after {
  content: "";
  position: absolute;
  left: calc(100% - 1.5px);
  top: -2.5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ffffff;
}
.playback {
  position: relative;
}
.control-btn,
#screen-expand,
#screen-compress {
  width: 3em;
  height: 3em;
  outline: none;
  border: none;
  background-color: transparent;
}
#size-screen {
  margin-left: auto;
}
.volume {
  align-items: center;
  margin-left: 0.6em;
}
#volume-range {
  position: relative;
  margin: 0 0.5em;
  cursor: pointer;
  height: 5px;
  -webkit-appearance: none;
  background-color: #000000;
  border-radius: 5px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 10px;
  width: 10px;
  background-color: #2887e3;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.fa-solid {
  font-size: 1.1rem;
}
.container-2 {
  width: 10%;
  min-width: 70px;
  align-items: center;
}
#playback-speed-btn {
  position: relative;
  background-color: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 0.9rem;
  border-radius: 5px;
  padding: 0.3em 0.25em;
  cursor: pointer;
}
.playback-options {
  position: absolute;
  bottom: 0;
  background-color: #000000;
  min-width: 5em;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.playback-options button {
  color: #ffffff;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  width: 100%;
  background-color: transparent;
  padding: 1em;
  text-decoration: none;
  display: block;
}
@media all and (display-mode: fullscreen) {
  .container {
    padding: 0;
  }
  .video-container {
    width: 100%;
    margin: 0;
  }
  .controls {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
  }
  #progress-bar {
    width: 80%;
  }
  .song-timer {
    width: 20%;
    font-size: 1.2em;
  }
  .fa-solid {
    color: #dddddd;
  }
}

@media only screen and (max-width: 768px) {
  .video-container,
  .controls {
    width: 100%;
  }
  span {
    display: inline;
  }
  #progress-bar {
    width: 60%;
  }
  .song-timer {
    width: 40%;
    font-size: 0.9em;
  }
  .fa-solid {
    font-size: 1rem;
  }
  .control-btn,
  #screen-expand,
  #screen-compress {
    width: 2em;
    height: 1.5em;
  }
}
@media only screen and (max-width: 768px) and (display-mode: fullscreen) {
  .video-container {
    margin-top: 50%;
  }
}

Javascript:

Lastly, we add functionality to our custom video player using Javascript. Once again copy the code below and paste it into your script file.
We do this in fourteen steps:
Create initial references.
Implement slider()
Detect device type.
Implement functionality for the play and pause button.
Hide/Show playback speed options
Function to set playback speed.
Logic to mute video.
Function to set Fullscreen.
Function to exit Fullscreen.
Create a function to format the current time & maximum time.
Create a function to update progress & timer.
Implement a click event on the progress bar.
Function on window load.

let videoContainer = document.querySelector(".video-container");
let container = document.querySelector(".container");
let myVideo = document.getElementById("my-video");
let rotateContainer = document.querySelector(".rotate-container");
let videoControls = document.querySelector(".controls");
let playButton = document.getElementById("play-btn");
let pauseButton = document.getElementById("pauseButton");
let volume = document.getElementById("volume");
let volumeRange = document.getElementById("volume-range");
let volumeNum = document.getElementById("volume-num");
let high = document.getElementById("high");
let low = document.getElementById("low");
let mute = document.getElementById("mute");
let sizeScreen = document.getElementById("size-screen");
let screenCompress = document.getElementById("screen-compress");
let screenExpand = document.getElementById("screen-expand");
const currentProgress = document.getElementById("current-progress");
const currentTimeRef = document.getElementById("current-time");
const maxDuration = document.getElementById("max-duration");
const progressBar = document.getElementById("progress-bar");
const playbackSpeedButton = document.getElementById("playback-speed-btn");
const playbackContainer = document.querySelector(".playback");
const playbackSpeedOptions = document.querySelector(".playback-options");

function slider() {
  valPercent = (volumeRange.value / volumeRange.max) * 100;
  volumeRange.style.background = `linear-gradient(to right, #2887e3 ${valPercent}%, #000000 ${valPercent}%)`;
}

//events object
let events = {
  mouse: {
    click: "click",
  },
  touch: {
    click: "touchstart",
  },
};

let deviceType = "";

//Detech touch device
const isTouchDevice = () => {
  try {
    //We try to create TouchEvent (it would fail for desktops and throw error)
    document.createEvent("TouchEvent");
    deviceType = "touch";
    return true;
  } catch (e) {
    deviceType = "mouse";
    return false;
  }
};

//play and pause button
playButton.addEventListener("click", () => {
  myVideo.play();
  pauseButton.classList.remove("hide");
  playButton.classList.add("hide");
});

pauseButton.addEventListener(
  "click",
  (pauseVideo = () => {
    myVideo.pause();
    pauseButton.classList.add("hide");
    playButton.classList.remove("hide");
  })
);

//playback
playbackContainer.addEventListener("click", () => {
  playbackSpeedOptions.classList.remove("hide");
});

//if user clicks outside or on the option
window.addEventListener("click", (e) => {
  if (!playbackContainer.contains(e.target)) {
    playbackSpeedOptions.classList.add("hide");
  } else if (playbackSpeedOptions.contains(e.target)) {
    playbackSpeedOptions.classList.add("hide");
  }
});

//playback speed
const setPlayback = (value) => {
  playbackSpeedButton.innerText = value + "x";
  myVideo.playbackRate = value;
};

//mute video
const muter = () => {
  mute.classList.remove("hide");
  high.classList.add("hide");
  low.classList.add("hide");
  myVideo.volume = 0;
  volumeNum.innerHTML = 0;
  volumeRange.value = 0;
  slider();
};

//when user click on high and low volume then mute the audio
high.addEventListener("click", muter);
low.addEventListener("click", muter);

//for volume
volumeRange.addEventListener("input", () => {
  //for converting % to decimal values since video.volume would accept decimals only
  let volumeValue = volumeRange.value / 100;
  myVideo.volume = volumeValue;
  volumeNum.innerHTML = volumeRange.value;
  //mute icon, low volume, high volume icons
  if (volumeRange.value < 50) {
    low.classList.remove("hide");
    high.classList.add("hide");
    mute.classList.add("hide");
  } else if (volumeRange.value > 50) {
    low.classList.add("hide");
    high.classList.remove("hide");
    mute.classList.add("hide");
  }
});

//Screen size
screenExpand.addEventListener("click", () => {
  screenCompress.classList.remove("hide");
  screenExpand.classList.add("hide");
  videoContainer
    .requestFullscreen()
    .catch((err) => alert("Your device doesn't support full screen API"));
  if (isTouchDevice) {
    let screenOrientation =
      screen.orientation || screen.mozOrientation || screen.msOrientation;
    if (screenOrientation.type == "portrait-primary") {
      //update styling for fullscreen
      pauseVideo();
      rotateContainer.classList.remove("hide");
      const myTimeout = setTimeout(() => {
        rotateContainer.classList.add("hide");
      }, 3000);
    }
  }
});

//if user presses escape the browser fire 'fullscreenchange' event
document.addEventListener("fullscreenchange", exitHandler);
document.addEventListener("webkitfullscreenchange", exitHandler);
document.addEventListener("mozfullscreenchange", exitHandler);
document.addEventListener("MSFullscreenchange", exitHandler);

function exitHandler() {
  //if fullscreen is closed
  if (
    !document.fullscreenElement &&
    !document.webkitIsFullScreen &&
    !document.mozFullScreen &&
    !document.msFullscreenElement
  ) {
    normalScreen();
  }
}

//back to normal screen
screenCompress.addEventListener(
  "click",
  (normalScreen = () => {
    screenCompress.classList.add("hide");
    screenExpand.classList.remove("hide");
    if (document.fullscreenElement) {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    }
  })
);

//Format time
const timeFormatter = (timeInput) => {
  let minute = Math.floor(timeInput / 60);
  minute = minute < 10 ? "0" + minute : minute;
  let second = Math.floor(timeInput % 60);
  second = second < 10 ? "0" + second : second;
  return `${minute}:${second}`;
};

//Update progress every second
setInterval(() => {
  currentTimeRef.innerHTML = timeFormatter(myVideo.currentTime);
  currentProgress.style.width =
    (myVideo.currentTime / myVideo.duration.toFixed(3)) * 100 + "%";
}, 1000);

//update timer
myVideo.addEventListener("timeupdate", () => {
  currentTimeRef.innerText = timeFormatter(myVideo.currentTime);
});

//If user click on progress bar
isTouchDevice();
progressBar.addEventListener(events[deviceType].click, (event) => {
  //start of progressbar
  let coordStart = progressBar.getBoundingClientRect().left;
  //mouse click position
  let coordEnd = !isTouchDevice() ? event.clientX : event.touches[0].clientX;
  let progress = (coordEnd - coordStart) / progressBar.offsetWidth;
  //set width to progress
  currentProgress.style.width = progress * 100 + "%";
  //set time
  myVideo.currentTime = progress * myVideo.duration;
  //play
  myVideo.play();
  pauseButton.classList.remove("hide");
  playButton.classList.add("hide");
});

window.onload = () => {
  //display duration
  myVideo.onloadedmetadata = () => {
    maxDuration.innerText = timeFormatter(myVideo.duration);
  };
  slider();
};

Thatโ€™s it for this tutorial. If you face any issues while creating this code, you can download the source code by clicking the โ€˜Download Codeโ€™ 

๐Ÿ“ Download Source Code : https://www.codingartistweb.com

#html #css #javascript #webdev 

Lyda  White

Lyda White

1628189100

How to Image Uploader with Preview || Html CSS JavaScript

Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding

#html #css #javascript 

code savvy

code savvy

1630506330

Product landing page using HTML CSS & JavaScript | web design

Knowledge

This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform  those powerful animations we use the GSAP a JavaScript animation library for work done.

In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.

Don't forget to join the channel for more videos like this. Code Savvy

๐Ÿ“ Assets 
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/

Outline โฑ

0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 โ€“ Reset HTML
02:21 โ€“ Left Container HTML
03:41 โ€“ Wrapper
14:58 โ€“ Bottom Shoe Nav
26:23 โ€“ Right Container HTML
33:10 โ€“ Product Size
35:49 โ€“ Reviews
41:11 โ€“ GSAP Animations

Click to Watch Full tutorial on YOUTUBE

#html  #css  #javascript  #web-development #html5 

#html #css #tailwindcss #javascript