Sofiaml Boo

Sofiaml Boo

1572077064

Download Instagram videos and photos using HTML, CSS and JavaScript

Previous I have shared JS Random Password Generator for social media, but this is for download Instagram’s media. Basically, Instagram is the largest media sharing social platform in the world. And our idols and favorite celebrities are on this network. Sometimes we like any photos or videos and want to save it offline but, we can’t save or download Instagram media directly. Then we have to go a third-party website for download media, but we can create a program for that work.

Today you will learn to create a program for Save Insta Photos & Videos. Basically there is a text input field, a button, and a dummy image. When you will put a valid Instagram photo or video linked to the input field and click on the button then the image will visible by replacing the dummy image. After the image appearance, you click save it by right click on the mouse.

So, Today I am sharing JavaScript Instagram Media Downloader. This program is completely based on JavaScript, no other libraries used in there. The program getting the image or video and shows on the page and you can save it locally. Peoples search for Instagram downloader, you can take this script and use it your website to getting visitors.

If you are thinking now how this Instagram downloader actually is, then see the preview given below.

JavaScript Instagram Media Downloader Source Code

Before sharing source code, let’s talk about it. First I have created a header and a section using HTML. The header for placing the blank input and the button and the section for showing the image and massage. Also in the HTML file, I have linked the other files like JavaScript and CSS. HTML has very little part in this program, it just creating the layout and frame of the program.

Now using CSS, I have placed all the elements in the right place, as you can see in the preview. I just styled the header section and input fields, also I placed a dummy image in the image section by default. This a responsive design, for creating that I have used CSS @media query and resize the elements according to small screen size.

JavaScript doing here the main work of the program, the whole program is based on JS. There I have used JavaScript const statement in the whole program (info). There I have created 3 sections of codes, first for getting video, second for getting the image, and third for the printing media like photos and videos. In the JS file, I left comments on every section for easy understanding.

Left all other things you will learn after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files for that. First for HTML, second for CSS, and the third one for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Instagram Downloader | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <header class="navbar">
      <input type="text" value="" placeholder="Paste link here...">
      <button class="search" onclick="getMedia()">Get</button>
    </header>
    <section class="result">
      <div class="image-placeholder"></div>
      <p> Copy image or video link from Instagram and put it on the field given on the top. </p>
    </section>
  </main>
  
  <script  src="function.js"></script>
 
</body>
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

* {
  box-sizing: border-box;
}
html, body {
  position: relative;
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  font-family: "consolas",monospace;
  font-size: 14px;
  line-height: 1.5;
  background: #f9f9f9;
  color: #333;
}
code {
  background: #208bfd;
  color: #f9f9f9;
  padding: 0.1em 0.5em;
  border-radius: 4px;
}
.image-placeholder {
  margin: auto;
  width: 89%;
  max-width: 500px;
  display: block;
  height: 380px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: url(https://webdevtrick.com/wp-content/uploads/image-placeholder.png);
}
@media (max-width: 420px) {
  .image-placeholder {
    width: 320px;
    max-width: 320px;
    height: 280px;
    background-size: contain;
    background-position: top left;
    background-attachment: scroll;
  }
}
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4em;
  background: #208bfd;
  margin: 0 auto;
  text-align: center;
  color: #f9f9f9;
}
::placeholder {
  color: #212121;
}
input {
  display: inline-block;
  width: 100%;
  max-width: 50%;
  max-width: calc(100% - 8em);
  min-height: 2.8em;
  padding: 0.5em;
  margin: 0.5em 0;
  background: #f3f3f3;
  border-color: #208bfd;
  border-width: 1px;
  color: #212121;
  transition: all 500ms ease;
}
input:focus, input:hover {
  border-color: #208bfd;
  transition: all 500ms ease;
}
 
@media (min-width: 420px) {
  input {
    max-width: 50%;
  }
}
.search {
  display: inline-block;
  padding: 0 1em;
  text-align: center;
  min-width: 2.8em;
  height: 2.8em;
  margin: 0;
  background: #208bfd;
  border: 2px solid #212121;
  color: #f9f9f9;
  transition: all 500ms ease;
}
.search:focus, .search:hover {
  background: #212121;
  border-color: #f9f9f9;
  cursor: pointer;
  transition: all 500ms ease;
}
.result {
  margin: 0 auto;
  padding: 4em 1em;
  max-width: 40em;
}
.result video, .result img {
  width: calc(100% - 4em);
  margin: 2em;
}
.result .download {
  text-decoration: none;
  display: inline-block;
  padding: 0.5em 1em;
  background: #208bfd;
  border-color: #208bfd;
  border-width: 1px;
  color: #f9f9f9;
  transition: all 500ms ease;
}
.result .download:focus, .result .download:hover {
  background: #208bfd;
  border-color: #f9f9f9;
  cursor: pointer;
  transition: all 500ms ease;
}
@media (max-width: 600px) {
  .result {
    position: absolute;
    top: 4em;
    left: 0;
    right: 0;
    height: calc(100% - 10em);
    overflow-y: auto;
    max-width: 40em;
    background: #f9f9f9;
    margin: auto;
  }
}
footer {
  width: 100%;
  margin: 2em auto;
  text-align: center;
}
 
@media (max-width: 600px) {
  footer {
    position: absolute;
    bottom: 1em;
    left: 0;
    right: 0;
    height: 2em;
  }
}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

const _ = e => document.querySelector(e);
const render = _('.result');
 
 
// create video
const createVideo = data => {
  let v = document.createElement('video');
  v.id = "instavideo";
  v.src = data.content; 
  v.controls = true;
  v.autoplay = true;
 
  // create info
  let info = document.createElement('p');
  info.textContent = "Click the right button on video and select save as.";
 
  render.innerHTML = ""; 
  render.appendChild(v);
  render.appendChild(info);
};
// create image
const createImg = data => {
  // create image
  let i = document.createElement('img');
  i.id = "instaImg";
  i.src = data.content;
 
  // create info
  let info = document.createElement('p');
  info.textContent = "Click the right button on the image and select save image..";
 
  render.innerHTML = ""; 
  render.appendChild(i); 	
  render.appendChild(info); 
 
};
 
// extract html
const getMedia = () => {
  render.innerHTML = "<div class='image-placeholder'></div>";
  // get input value
  let url = _('input').value;
  if (url) {
    fetch(url).
    then(r => r.text()).
    then(r => {
      // render html
      render.innerHTML = r;
      // wait, find meta and create video or image
      let w = setTimeout(() => {
        let v = _('meta[property="og:video"]');
        if (v) {
          createVideo(v);
        } else {
          let img = _('meta[property="og:image"]');
          if (img) {
            createImg(img);
          } else {
            document.body.innerHTML = body;
            alert('Error extracting Instagram image / video.');
          };
        }
        clearTimeout(w);
      }, 200);
    });
  } else {
    _('input').setAttribute('placeholder', 'Invalid address, use a proper Insagram link');
 
  }
};

That’s It. Now you have successfully created JavaScript Instagram Media Downloader, Save Insta Photos & Videos Program. If you have any doubt or questions comment down below.

Thanks for reading. I’m highly appreciate your actions! Please share if you liked it!

#javascript #css #html #instagram #wevdev

What is GEEK

Buddha Community

Download Instagram videos and photos using HTML, CSS and JavaScript
Sofiaml Boo

Sofiaml Boo

1572077064

Download Instagram videos and photos using HTML, CSS and JavaScript

Previous I have shared JS Random Password Generator for social media, but this is for download Instagram’s media. Basically, Instagram is the largest media sharing social platform in the world. And our idols and favorite celebrities are on this network. Sometimes we like any photos or videos and want to save it offline but, we can’t save or download Instagram media directly. Then we have to go a third-party website for download media, but we can create a program for that work.

Today you will learn to create a program for Save Insta Photos & Videos. Basically there is a text input field, a button, and a dummy image. When you will put a valid Instagram photo or video linked to the input field and click on the button then the image will visible by replacing the dummy image. After the image appearance, you click save it by right click on the mouse.

So, Today I am sharing JavaScript Instagram Media Downloader. This program is completely based on JavaScript, no other libraries used in there. The program getting the image or video and shows on the page and you can save it locally. Peoples search for Instagram downloader, you can take this script and use it your website to getting visitors.

If you are thinking now how this Instagram downloader actually is, then see the preview given below.

JavaScript Instagram Media Downloader Source Code

Before sharing source code, let’s talk about it. First I have created a header and a section using HTML. The header for placing the blank input and the button and the section for showing the image and massage. Also in the HTML file, I have linked the other files like JavaScript and CSS. HTML has very little part in this program, it just creating the layout and frame of the program.

Now using CSS, I have placed all the elements in the right place, as you can see in the preview. I just styled the header section and input fields, also I placed a dummy image in the image section by default. This a responsive design, for creating that I have used CSS @media query and resize the elements according to small screen size.

JavaScript doing here the main work of the program, the whole program is based on JS. There I have used JavaScript const statement in the whole program (info). There I have created 3 sections of codes, first for getting video, second for getting the image, and third for the printing media like photos and videos. In the JS file, I left comments on every section for easy understanding.

Left all other things you will learn after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files for that. First for HTML, second for CSS, and the third one for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Instagram Downloader | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <header class="navbar">
      <input type="text" value="" placeholder="Paste link here...">
      <button class="search" onclick="getMedia()">Get</button>
    </header>
    <section class="result">
      <div class="image-placeholder"></div>
      <p> Copy image or video link from Instagram and put it on the field given on the top. </p>
    </section>
  </main>
  
  <script  src="function.js"></script>
 
</body>
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

* {
  box-sizing: border-box;
}
html, body {
  position: relative;
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  font-family: "consolas",monospace;
  font-size: 14px;
  line-height: 1.5;
  background: #f9f9f9;
  color: #333;
}
code {
  background: #208bfd;
  color: #f9f9f9;
  padding: 0.1em 0.5em;
  border-radius: 4px;
}
.image-placeholder {
  margin: auto;
  width: 89%;
  max-width: 500px;
  display: block;
  height: 380px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: url(https://webdevtrick.com/wp-content/uploads/image-placeholder.png);
}
@media (max-width: 420px) {
  .image-placeholder {
    width: 320px;
    max-width: 320px;
    height: 280px;
    background-size: contain;
    background-position: top left;
    background-attachment: scroll;
  }
}
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4em;
  background: #208bfd;
  margin: 0 auto;
  text-align: center;
  color: #f9f9f9;
}
::placeholder {
  color: #212121;
}
input {
  display: inline-block;
  width: 100%;
  max-width: 50%;
  max-width: calc(100% - 8em);
  min-height: 2.8em;
  padding: 0.5em;
  margin: 0.5em 0;
  background: #f3f3f3;
  border-color: #208bfd;
  border-width: 1px;
  color: #212121;
  transition: all 500ms ease;
}
input:focus, input:hover {
  border-color: #208bfd;
  transition: all 500ms ease;
}
 
@media (min-width: 420px) {
  input {
    max-width: 50%;
  }
}
.search {
  display: inline-block;
  padding: 0 1em;
  text-align: center;
  min-width: 2.8em;
  height: 2.8em;
  margin: 0;
  background: #208bfd;
  border: 2px solid #212121;
  color: #f9f9f9;
  transition: all 500ms ease;
}
.search:focus, .search:hover {
  background: #212121;
  border-color: #f9f9f9;
  cursor: pointer;
  transition: all 500ms ease;
}
.result {
  margin: 0 auto;
  padding: 4em 1em;
  max-width: 40em;
}
.result video, .result img {
  width: calc(100% - 4em);
  margin: 2em;
}
.result .download {
  text-decoration: none;
  display: inline-block;
  padding: 0.5em 1em;
  background: #208bfd;
  border-color: #208bfd;
  border-width: 1px;
  color: #f9f9f9;
  transition: all 500ms ease;
}
.result .download:focus, .result .download:hover {
  background: #208bfd;
  border-color: #f9f9f9;
  cursor: pointer;
  transition: all 500ms ease;
}
@media (max-width: 600px) {
  .result {
    position: absolute;
    top: 4em;
    left: 0;
    right: 0;
    height: calc(100% - 10em);
    overflow-y: auto;
    max-width: 40em;
    background: #f9f9f9;
    margin: auto;
  }
}
footer {
  width: 100%;
  margin: 2em auto;
  text-align: center;
}
 
@media (max-width: 600px) {
  footer {
    position: absolute;
    bottom: 1em;
    left: 0;
    right: 0;
    height: 2em;
  }
}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

const _ = e => document.querySelector(e);
const render = _('.result');
 
 
// create video
const createVideo = data => {
  let v = document.createElement('video');
  v.id = "instavideo";
  v.src = data.content; 
  v.controls = true;
  v.autoplay = true;
 
  // create info
  let info = document.createElement('p');
  info.textContent = "Click the right button on video and select save as.";
 
  render.innerHTML = ""; 
  render.appendChild(v);
  render.appendChild(info);
};
// create image
const createImg = data => {
  // create image
  let i = document.createElement('img');
  i.id = "instaImg";
  i.src = data.content;
 
  // create info
  let info = document.createElement('p');
  info.textContent = "Click the right button on the image and select save image..";
 
  render.innerHTML = ""; 
  render.appendChild(i); 	
  render.appendChild(info); 
 
};
 
// extract html
const getMedia = () => {
  render.innerHTML = "<div class='image-placeholder'></div>";
  // get input value
  let url = _('input').value;
  if (url) {
    fetch(url).
    then(r => r.text()).
    then(r => {
      // render html
      render.innerHTML = r;
      // wait, find meta and create video or image
      let w = setTimeout(() => {
        let v = _('meta[property="og:video"]');
        if (v) {
          createVideo(v);
        } else {
          let img = _('meta[property="og:image"]');
          if (img) {
            createImg(img);
          } else {
            document.body.innerHTML = body;
            alert('Error extracting Instagram image / video.');
          };
        }
        clearTimeout(w);
      }, 200);
    });
  } else {
    _('input').setAttribute('placeholder', 'Invalid address, use a proper Insagram link');
 
  }
};

That’s It. Now you have successfully created JavaScript Instagram Media Downloader, Save Insta Photos & Videos Program. If you have any doubt or questions comment down below.

Thanks for reading. I’m highly appreciate your actions! Please share if you liked it!

#javascript #css #html #instagram #wevdev

anita maity

anita maity

1618667723

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

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 

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 

Nandini roy

Nandini roy

1618667097

Responsive Personal Portfolio Website Using HTML CSS and JavaScript

Tutorial: https://youtu.be/9DDiorNZiyw

#create a portfolio website with html css javascript #personal portfolio complete website using only html css javascript #responsive portfolio website html css javascript #responsive personal portfolio website #portfolio website #responsive website