M.tech notes of Computer Science

Socialize

Monday, 17 October 2016

Mini Project in HTML,CSS and JS

DESKTOP GADGETS: MINI-PROJECT IS CREATED BY USING HTML, CSS & JAVA-SCRIPT 

This mini project is created by using web-development languages such as HTML, CSS and java script.We can create simple and dynamic projects by using scripting languages. In this mini-project i use simple html tags like <html>,<head>,<div>,<body>,<img>,<br>,<link>,<a>,<font>,<header>,<footer>,<aside>. In CSS, i use separate style sheet and linked that style sheet in html page.In javaScript, i use simple dialogs for admin and user passwords.

  • First step: Login with admin password. This dialog box is created by using java script. This is the first page of my project here admin will type password. Without admin password no one can access this project.  




  • Second Step: After login with accurate admin password user login screen will be open. User need to type here password again for more security purpose. This screen is created by using HTML and CSS. Basic html tags like <div>,<img>,<input>,<button> and <body> tags are used. for CSS Style-sheet is linked by using <link> tag.



  • Third Step: Now user desktop will be open with icons. It is created by using HTML and CSS. As we can see different icons in the image given below.First one is image gallery, inside image gallery images are stored and this image gallery is protected with password by using javascrpt. In second icon user cab store different songs and audio it is also protected with password. Third one is TV icon, inside tv icon three channels are provided user can change, pause, play these channels.Forth one is chrome, when user will click on this icon google chrome will be open user can search anything over there.Fifth one is animation different gif images are used over here.Sixth one is online quiz, user can test their iq.Seventh one is Light, here light bulb is created by using html and java-script. User can on - off the bulb. Last one is account setting here, user can change system settings of this mini-project. And we can also see SHUTDOWN button in image given below user can shutdown and restart this project.



  • Forth Step: Different applications will be open as user will click on icons. These are created by using HTML, CSS and Java scrpt. This is the view of all desktop icons after user click.



You can visit live this mini-project on you tube. Click the given link below to visit this mini-project working:  https://www.youtube.com/watch?v=LUM1BtQUEH8












No comments:

Post a Comment