Mini Project using HTML, CSS and JavaScript – DESKTOP GADGETS
Mini Project using HTML, CSS, and JavaScript – DESKTOP GADGETS
This is a Simple mini-project
come under web-development. Different web-development tools and techniques are
used to create this mini-project. To test this project google chrome is used as a web browser. And Notepad plus (notepad++) is used as a text editor. Three
scripting languages are used in this project: - HTML, CSS, and javascript.
Scripting languages used in
this mini-project: -
1. HTML –
Hypertext markup language
2. CSS –
Cascading Style Sheet
3. JavaScript
HTML
tags used: -
Html tag, head tag, body tag, the title tag, div tag, break tag, strong tag, image tag, bold tag, link tag, Anker
tag, input tag, button tag, the header tag, footer tag, aside tag.
CSS
Properties used: -
Border-radius,
body-background, body-color, font-size, font-color, image-url, box-shadow,
padding, margin-left, margin-right, padding-left, padding-right,
position-relative, position-absolute etc.
Java Script used for the alert box
and for the password alert box.
Text
Editor used: - Notepad++
Web
Brower used: - Google Chrome.
Mini-Project
Introduction: - This mini-project concept is based on the Android application.
In this mini-project, different desktop gadgets are created. Like an android
application, I created some desktop gadgets. Different gadgets perform a different task. This mini-project can run on the desktop or online after uploading.
This project is simple and anyone can create something interesting like this.
View Online Project: https://youtu.be/TeqaAJnL1ZQ
Desktop
Gadgets Created in Mini-Project: -
1. Image
Gallery
2. Music Library
3. Online
TV
4. Google
Chrome
5. Animation
6. Online
Quiz
7. Light
Blub
8. Account
Settings
Image
Gallery: - Image gallery contains different images
collection. HTML tags used for image galleries are image tag, Anker tag. CSS
Properties used for image galleries are border-radius, border.
Music
Library: - Music library contains different song
collections. Users can play and stop music.HTML tags used for music libraries are
image tags, audio tag. CSS Properties used for music libraries are border-radius,
border.
TV:
- In TV users can play 3 channels and pause then. Users can
change channel in between. HTML tags used tv are image tag, video tag. CSS
Properties used for tv are border-radius, border.
Chrome:
- Google Chrome will be open when user will click on chrome.
HTML tags used for chrome are image tag. CSS Properties used for chrome are
border-radius, border.
Animation:
- In animation different animated images are inserted
together. HTML tags used for animation are image tag, Anker tag. CSS Properties
used for animation are border-radius, border. Gif images are used for animation
in animation.
Online
Quiz: - In online quiz, online quiz is present for user
where computer science technical questions are asked. HTML tags used for Online
quiz are image tag, anker tag. CSS Properties used for online quiz are
border-radius, border.
Light:
- In light user can Switch on and switch off lights. Javascript
is used for on off light in light gadgets.
Account
Setting: - In account setting different account setting are
present for user. User can reset password. User can change camera settings and
application settings.
HTML tags used for account
settings are image tag, anker tag. CSS Properties used for online settings are
border-radius, border.
Shutdown:
- Shutdown button is
present for user. When user will press shutdown button mini-project will be shutdown.
And user have to restart the system.
Restart
Button: - When user will click on restart button project
will restart again. HTML tags used for restart button are image tag, anker tag,
input tag, button tag. CSS Properties used for restart button are
border-radius, border.
Live VIDEO ON THIS
MINI-PROJECT is also available online. If you like this blog and want to watch
live VIDEO of this mini-project than CLICK on THE LINK GIVEN BELOW: -
No comments