Project Dome

If you like random and unique ideas put-together using HTML, CSS and JavaScript, enter our observatory to witness the launch at 7 pm. Check out our page at different times of the day! Hakuna Matata!

Comment 4

Inspiration

From the beautiful modern design trends such as neumorphism, glass, and fluent design, along with the stunning functionality of modern-day web application - We have conjured a set of web pages made to encapsulate the user in its silky looks and captivating functionality

What it does

It is a set of productivity tools and stress relievers, made to help you with your work or to whisk you away from it when it's needed.

How we built it

By Splitting the work >> Styling (CSS) of all pages of Project Dome, all functionalities of the Homepage, sign-in page, Mission Control, Neumorphic calculator, and select javascript of other pages done by Roshin.

The canvas itself and the several functionalities of the CanvasPad, all functionalities of the Shape Bender including Trail - Mode, and overall javascript and general working order of Project Dome overseen and done by Ishaan

Challenges we ran into

The dynamic homepages' look and feel including text contrast with the background image required lots of trial and error, several CSS design issues including contrast, overall look and feel, and getting the JavaScript of several pages including downloading of the canvas image, link sharing of the canvas, and the trail-Mode of the Shape Bender was quite difficult.

Accomplishments that we're proud of

An increased grasp of modern UI and UX that pleases the user, understanding the newly-learned code that was required to make the canvas and shape bender work and their incredible other uses that we could take advantage of to make new and exciting projects. And most importantly creating this project under immense pressure and making sure the project was as polished as possible under tight time constraints. Many difficulties were faced in these three days and the team members were heavily preoccupied with out-of-home vacations and family life during the time of this project, but we overcame them to create the best project we possibly could for HACKoona Matata.

What we Learned

We learned lots of new code, advanced forms of JavaScript, and CSS to take us to the next level of web development and beyond.

What's Next for Project Dome

The addition of more exciting web pages like the shape bender that creates fun for the user while looking well designed. Improved speed, functionality, and quality of the overall website for future editions. A backend server to take load off of the users' devices and to store their private details in an encrypted format.

+ 4 more
Share this project:

Updates

posted an update —

Added an Eraser to Canvaspad

Within function load() where ran5 is a toggle to turn Eraser ON or OFF >>

ran5.addEventListener("change",function () { if(check.checked==true){ var Size = Number(ran1.value); if(Size==1||Size==2) Size+=0.5; ctx.lineWidth = Size; ctx.globalCompositeOperation="destination-out"; ctx.stroke(); } if(check.checked!=true){ var Size = ran1.value; ctx.lineWidth = Size; console.log(col=ran3.value); console.log(ctx.strokeStyle=col); ctx.globalCompositeOperation="source-over"; ctx.stroke(); } });

ran5 input type: Checkbox CSS Styled to: Toggle

Log in or sign up for Devpost to join the conversation.