Orbital - NewTab
- 2 Devlogs
- 2 Total hours
im gonna fetch all nasa’s data mwahaha…
Ship #1
Pending review
@najil_kilayil
on
Orbital - NewTab
Orbital - NewTab is a custom new tab and it also helps to understand how the default tab is working. I created this projects using HTML, CSS and JavaScript.. It shows real time information about date and time and as well as have the option to search on google directly from the website and the result of the searching will be open in new tab for better user-friendly experience.
I would give more values to user-friendly than anything! And i would like to add more features in the future.
Not that it is really boring when we opening in any other screen rather than desktop size. Since it is not screen responsive.
By the way i hope you will go through my project add feel free to give suggestion!
@najil_kilayil
on
Orbital - NewTab
1h 3m 44s logged
Devlog 2
Today i think that i can add google search bar which the user can search and found the results. So i started to work on that, So i created a div section and placed that at the bottom of the page with centered. Inside that i added google icon and a input text-box. I added a tiny animation also whenever the user reloads the webpage again and again.
Its really complicated as much more that of i expected. My plan was very simple but at the implementation time it quite become complicated. So let me try my best to tell how solved the problem and complexity. I changed the main div section of search bar into form field to make more simple to call. I added event listener to this tag and if the user clicks enter or something that triggers submit action will follow the following instructions. First i stored the searched text into a variable with trim() to avoid unnecessary spaces. Then i added if-else condition to work properly, if this variable is not equal to empty do as follows create another variable named googleURL this variable contains the normal (default) google.com search’s link and as well as the variable that i had already stored earlier. Btw i passed that variable through URI encode component to change the normal text into url form.
Then at last i added that to direct the page into that result. After that i found that the searched result window is opened in the same tab thatfor the user have more risky to come back to the webpage. That i decided to open the search resulted in another new tab. That i researched myself and found that a pre-build function ‘window.open()’
Now it working perfectly fine!
@najil_kilayil
on
Orbital - NewTab
46m 40s logged
Orbital - NewTab
Orbital is a project that shows how a newTab window in a browser is actually works, I decided to make these all over using HTML, CSS and JavaScript. In this project will have a real time information and weather information also and as well as the google search bar that opening in newTab (another tab in browser) and many other features
Devlog 1
First off all i created a basic files need for this project. And then i selected a colour palate for the whole project. Then i created a logo which is a text ‘orbital’ with a background colour as well as semi-circled border with hovering animation that will increase the scale of the text.
Then i decided to create digital clock which are showing the real information about date, day and time basically everything about time and date.
First i tried my own way that i used in my other projects which is very simple and easy to implement, but there is a problem it will shows the date and time all together in the formate of digits. For this project it gives a boring layout, that for i selected another method which had classified into three different text formate first one is date (at top) below that time in 12 hour with AM and PM notation then dayname at last. Now the clock layout is perfect. Btw at the first i center the clock and placed the logo text at the top-left corner of the page!
