1669607972
Create a Dog Makeover App with HTML, CSS & JavaScript
In this tutorial, you'll learn how to create a dog makeover app with HTML, CSS and JavaScript. Create a drag and drop dog makeover game using HTML, CSS & JS.
00:00 Intro
00:05 Preview
00:48 HTML & CSS
12:41 Step 1: Create Initial References
12:00 Step 2: Function To Detect If The Device Is Touch
14:06 Step 3: Function To Drag & Drop
17:30 Step 4: Function To Window Load
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dog Makeover</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="dog" id="dog">
<img src="dog-01.png" id="dog-image" />
</div>
<div class="draggables">
<div class="eyes">
<img
src="eyes-01.png"
class="drag eye"
draggable="true"
id="eye-01"
/>
<img
src="eyes-02.png"
class="drag eye"
draggable="true"
id="eye-02"
/>
<img
src="eyes-03.png"
class="drag eye"
draggable="true"
id="eye-03"
/>
<img
src="eyes-04.png"
class="drag eye"
draggable="true"
id="eye-04"
/>
</div>
<div class="mouths">
<img
src="mouth-01.png"
class="drag mouth"
draggable="true"
id="mouth-01"
/>
<img
src="mouth-02.png"
class="drag mouth"
draggable="true"
id="mouth-02"
/>
<img
src="mouth-03.png"
class="drag mouth"
draggable="true"
id="mouth-03"
/>
<img
src="mouth-04.png"
class="drag mouth"
draggable="true"
id="mouth-04"
/>
</div>
<div class="glasses">
<img
src="glasses-01.png"
class="drag glass"
draggable="true"
id="glass-01"
/>
<img
src="glasses-02.png"
class="drag glass"
draggable="true"
id="glass-02"
/>
</div>
<div class="hats">
<img
src="hats-01.png"
class="drag hat"
draggable="true"
id="hat-01"
/>
<img
src="hats-02.png"
class="drag hat"
draggable="true"
id="hat-02"
/>
<img
src="hats-03.png"
class="drag hat"
draggable="true"
id="hat-03"
/>
</div>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>CSS:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f2c12e;
}
.container {
width: 31.25em;
position: absolute;
transform: translateX(-50%);
left: 50%;
margin: 1em auto;
box-shadow: 0 0 0 0.62em #ffffff, 0 1.25em 3.12em rgb(83, 66, 15, 0.5);
background-color: #ffffff;
border-radius: 0.5em;
}
.dog {
width: 95%;
height: 21.87em;
position: relative;
margin: 1em auto;
display: grid;
place-items: center;
background-color: #ffedb8;
overflow: hidden;
}
.dog img {
position: relative;
height: 18.75em;
bottom: -1.87em;
}
.draggables {
padding: 1em 0;
width: 31.25em;
position: relative;
background-color: #ffffff;
}
.draggables div {
position: relative;
}
[draggable] {
cursor: move;
}
img {
position: absolute;
}
.eyes {
height: 3.75em;
}
.mouths {
height: 3.12em;
}
.glasses {
height: 5em;
}
.hats {
height: 7em;
}
#eye-01,
#mouth-01 {
left: 0.93em;
}
#hat-01 {
left: 5em;
}
#glass-01 {
left: 4.37em;
}
#eye-02,
#mouth-02 {
left: 8.43em;
}
#hat-02 {
left: 12.5em;
}
#glass-02 {
left: 18.75em;
}
#eye-03,
#mouth-03 {
left: 15.93em;
}
#hat-03 {
left: 22.5em;
}
#eye-04,
#mouth-04 {
left: 23.43em;
}Javascript:
Next, we implement the logic using JavaScript. We do this in the following steps
- Create initial references
- Function to identify if the device is a touch device
- Create Drag and drop functions
- Functions on the Window load
let currentElement = "";
let initialX = 0,
initialY = 0;
const isTouchDevice = () => {
try {
//we try to create TouchEvent (it would fail for non touch devices and throw error)
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
};
//Drag and drop functions
function dragStart(e) {
initialX = isTouchDevice() ? e.touches[0].clientX : e.clientX;
initialY = isTouchDevice() ? e.touches[0].clientY : e.clientY;
currentElement = e.target;
}
function dragOver(e) {
e.preventDefault();
}
const drop = (e) => {
e.preventDefault();
let newX = isTouchDevice() ? e.touches[0].clientX : e.clientX;
let newY = isTouchDevice() ? e.touches[0].clientY : e.clientY;
currentElement.style.top =
currentElement.offsetTop - (initialY - newY) + "px";
currentElement.style.left =
currentElement.offsetLeft - (initialX - newX) + "px";
};
window.onload = () => {
currentElement = "";
let body = document.body;
body.addEventListener("dragstart", dragStart, false);
body.addEventListener("dragover", dragOver, false);
body.addEventListener("drop", drop, false);
body.addEventListener("touchstart", dragStart, false);
body.addEventListener("touchmove", drop, false);
};#html #css #javascript
What is GEEK
Buddha Community
1655630160
PyTumblr: A Python Tumblr API v2 Client
PyTumblr
Installation
Install via pip:
$ pip install pytumblrInstall from source:
$ git clone https://github.com/tumblr/pytumblr.git
$ cd pytumblr
$ python setup.py installUsage
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 informationTwo easy ways to get your credentials to are:
- The built-in
interactive_console.pytool (if you already have a consumer key & secret) - The Tumblr API console at https://api.tumblr.com/console
- 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 postBlog 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 blogPost 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.pyand 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 testAuthor: tumblr
Source Code: https://github.com/tumblr/pytumblr
License: Apache-2.0 license
1614145832
A Complete Process to Create an App in 2021
It’s 2021, everything is getting replaced by a technologically emerged ecosystem, and mobile apps are one of the best examples to convey this message.
Though bypassing times, the development structure of mobile app has also been changed, but if you still follow the same process to create a mobile app for your business, then you are losing a ton of opportunities by not giving top-notch mobile experience to your users, which your competitors are doing.
You are about to lose potential existing customers you have, so what’s the ideal solution to build a successful mobile app in 2021?
This article will discuss how to build a mobile app in 2021 to help out many small businesses, startups & entrepreneurs by simplifying the mobile app development process for their business.
The first thing is to EVALUATE your mobile app IDEA means how your mobile app will change your target audience’s life and why your mobile app only can be the solution to their problem.
Now you have proposed a solution to a specific audience group, now start to think about the mobile app functionalities, the features would be in it, and simple to understand user interface with impressive UI designs.
From designing to development, everything is covered at this point; now, focus on a prelaunch marketing plan to create hype for your mobile app’s targeted audience, which will help you score initial downloads.
Boom, you are about to cross a particular download to generate a specific revenue through your mobile app.
#create an app in 2021 #process to create an app in 2021 #a complete process to create an app in 2021 #complete process to create an app in 2021 #process to create an app #complete process to create an app
1628189100
How to Image Uploader with Preview || Html CSS JavaScript
Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding
1671267560
Personal Portfolio Website Using Html Css and Javascript
In this tutorial we are going to make a personal Portfolio in this website there are six section Home, About, Services,Portfolio , Skills, and Contact the main features of this is dark/light mode function
∎ Download Source codes - https://www.thesimplifieddev.com/make-a-personal-portfolio-website
Features : -
- Fully Responsive
- Dark mode/light mode
- Browser compatibility
- Social Media Icon
- and many more
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