DEV Community: Farman Ali

🌟 New Thing 01 | Upload Image Using JS

Farman Ali — Sun, 26 Feb 2023 09:04:30 +0000

🌟 New Thing 01 | Upload Image Using JS

🛠️ Tools Utilized

I used HTML, CSS, and JS to create all the design.

📝 Description

The styling aspect was done by CSS, but the main thing was creating a JS function that will allow users to upload an image from their device. To create the JS function, we select the displayed image and input tag using their respective IDs. Then we create a function with input.onchange. Next, we create a URL object and give the URL of the selected image to the displayed image, so the selected image will be displayed on the webpage.

🎓 Learning

I learned how to access the files of input tag using JS. I got familiar with URL.createObjectURL, which allows me to display images on the webpage.

🔗 Link

I've uploaded the code at my CodePen. You can check it out here:
https://codepen.io/farmanali6349/pen/wvEzRro

Note: Use the code at your local setup, as the image will not be shown online.

JS Code

`javascript
let profilePic = document.getElementById('profile-pic');
let inputFile = document.getElementById('input-file');

inputFile.onchange = function () {
profilePic.src = URL.createObjectURL(inputFile.files[0]);
}
`

Portfolio Website

Farman Ali — Sun, 12 Feb 2023 22:16:34 +0000

𝗣𝗥𝗢𝗝𝗘𝗖𝗧 02: PORTFOLIO WEBSITE (Responsive)

𝗧𝗼𝗼𝗹𝘀 𝗨𝘁𝗶𝗹𝗶𝘇𝗲𝗱
I utilized HTML, CSS and Java Script to create the Portfolio website.

𝗗𝗲𝘀𝗰𝗿𝗶𝗽𝘁𝗶𝗼𝗻
This project was undertaken for the purpose of honing my HTML, CSS and Java Script skills. I utilized grid, flex-box layouts, CSS animations, psuedo classes, psuedo elements and created some java script functions such as switching tabs in about section and use media queries for responsiveness to create an aesthetically pleasing design with simple color scheme.

𝗣𝗿𝗼𝗷𝗲𝗰𝘁 𝗟𝗶𝗻𝗸
The project can be viewed in my portfolio on Behance as follows.
https://www.behance.net/farmanali6349

𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲
If you would like to access the resources, including the code and page, please feel free to send me a message.
𝗝𝗮𝘇𝘇𝗮𝗸 𝗔𝗹𝗹𝗮𝗵 😊

Exploring the Stunning Imagination of AI: Discovering its Contribution through Discord

Farman Ali — Tue, 31 Jan 2023 14:50:21 +0000

AI and It's Imagination

Artificial Intelligence (AI) has been gaining widespread attention in recent times. It has the ability to imagine and create stunning images based on a given scenario. This process is a result of the rapid advancement of AI technology and algorithms that allow it to generate visuals that are beyond human imagination.

The imagination of tomorrow is more important than the history of yesterday." - Walt Disney

Discord, Source of AI Generated Images

Recently, I stumbled upon some images made by AI on discord, and I was truly impressed by their quality. These images showcase the power of AI in creating visually appealing and surreal scenes. The use of AI in creating images and other forms of digital art is an exciting development that is sure to open up new possibilities in the world of art and design.

Conclusion

In conclusion, AI is rapidly changing the way we think about art and design. It has the potential to bring a new dimension to the field of visual arts and can be a valuable tool for creative minds looking to explore new avenues for expression.

DEV Community: Farman Ali

🌟 New Thing 01 | Upload Image Using JS

🌟 New Thing 01 | Upload Image Using JS

🛠️ Tools Utilized

📝 Description

🎓 Learning

🔗 Link

JS Code

Portfolio Website

Exploring the Stunning Imagination of AI: Discovering its Contribution through Discord

AI and It's Imagination

Discord, Source of AI Generated Images

Conclusion

Samples

Java Script Fun | JS Tutorial | India Se Aya Mera Dost Dost Ko Salam Karo

Layout01byFlexbox